📅 July 14, 2017
Client-side JavaScript requires a knowledge of HTML, so this lesson will focus on building a minimal HTML 5 file that we can use for writing JavaScript.
Setup for Development
Dedicated Directory
Create a dedicated directory in your home. All necessary files should be placed here. Do not scatter files across your system or else you will risk the “I refreshed the page but nothing changed” scenario caused by editing files you think are being displayed when they are not.
Multi-Monitor Setup
If you have more than one monitor, then use them! More monitors increase the desktop space and gives you more room to program.
Linux Mint using two monitors. GIMP’s edit window is shown on the primary monitor (to the left) while the GIMP toolbox and online manual is located on the right-side monitor.
Two monitors again. The left monitor is for coding while the right monitor contains reference material and two different browsers for testing JavaScript code.
Here are two different browsers, each with its developer tools open. Each browser is open in its own monitor. The right-side browser shows page loading speed while the left browser analyzes the DOM of the current page.
Adding two or three monitors is one of the best investments you can make to your system if you plan to perform any serious coding for lengths of time.
Despite the added screen space, you will discover that it can become cluttered quickly.
Multiple Workspaces
Linux has supported the concept of the workspace for the longest time. In other operating systems, you are limited to a single desktop with windows piled on top of one another. Need to access a buried window? Then, click click, click your way through until you find it.
This wastes time.
With Linux workspaces, you can have many, many separate desktops that allow you to switch among them at will. This way, you are no longer limited to a mess of buried windows. In fact, you can assign a different purpose to each workspace and switch to it when needed. By doing this, you fan out your multiple windows across a larger area for easier access.
Linux Mint Expo view showing four workspaces. Navigation is easy: click the open window you want, and Linux immediately switches to that workspace and brings the window to focus.
Select A Text Editor
Avoid using an IDE at this point. The goal is to learn the language and improve coding prowess by avoiding any help that an IDE might provide. Text editors with color-coded text themes are encouraged. Use colored text instead of monochrome text in order to navigate through program code easier.
This is the xed text editor in Linux Mint. Cobalt theme shown here. Notice that the HTML tags are highlighted in light blue while normal text is displayed in a whitish-gray color. JavaScript strings appear as light cyan green/blue.
This is the gedit text editor using the Monokai Extended theme. Different themes will color the HTML tags in different colors, so choose a theme you like.
Here is the Solarized Light theme in gedit.
Text editors are meant to be fun! Pick a theme you like, and try it out. For gedit, simply download a free theme and copy it to ~/.local/share/gedit/styles. Several gedit themes are available, and you can even create your own.
Beginning HTML 5
JavaScript exists in order to support a web page. A web page is constructed from a language known as HTML In order to understand how JavaScript interacts with a web page, we must know some basic HTML.
HTML? What is that?
HTML is the HyperText Markup Language. HTML is a markup language, not a programming language. HTML only contains information that marks up text to tell a text parsing engine “This is a paragraph,” “This is bold text,” “This is an image,” and so on. There is no programming in HTML. HTML only defines the content and the structure of a web page.
However, HTML 5 is not a single technology. Instead, it is the general name for a group of technologies that build a web page. Here is an example of a basic HTML 5 file:
<!DOCTYPE html>
<html>
<head>
<title>Greetings, Universe!</title>
<meta charset="utf-8">
</head>
<body>
<h1>Greetings, Universe!</h1>
</body>
</html>
An HTML file (the webpage) is a plain text file with the .html or .htm filename extension. Enter the markup above using a plain text editor, such as gedit, and save it as a text file. Any filename is fine as long as it ends with .htm or .html (there is no difference). This example uses index.htm. Open index.htm in a web browser of your choice.
The index.htm file shown in the Vivaldi web browser.
HTML Elements
HTML describes elements. Six elements were use in the markup shown above.
-
html
-
head
-
title
-
meta
-
body
-
h1
An element by itself represents the concept. To use an element within an HTML file, we enclose it within angle brackets (<>) An element inside angle brackets becomes a tag. The element by itself within angle brackets is an opening tag, and if the element begins with a forward slash (/) inside the angle brackets, it becomes a closing tag that denotes the end of a section of markup. Anything between the opening and closing tags of the same element belongs together.
<html> opening html tag. </html> closing html tag. <body> opening body tag. </body> closing body tag. <h1> opening h1 tag. </h1> closing h1 tag. <p> opening p tag. </p> closing p tag.
Tags can be nested within each other to show that some content belongs within other elements. The web browser reads the HTML file to create what is called a document object model (DOM) that can be manipulated by JavaScript and have styles applied to it. (We will explore the DOM later.)
Some elements, such as img and meta, do not have closing tags. All required content is included within a single pair of angle brackets. These single-ended tags do not have nested elements.
1. <!DOCTYPE html>
The DOCTYPE specifies a Document Type Definition (DTD), which contains the rules a browser will play by in order to render a page as intended. Many lengthy DOCTYPEs exist, but HTML 5 simplifies the DOCTYPE by using <!DOCTYPE html>. Note that DOCTYPE is not an element contained indies the html section. It  exists on the first line outside of the html block.
“Is HTML uppercase or lowercase?”
HTML does not care because it is not case-sensitive. You could write tags in all upperace or all lowercase and the result would be the same.
For example,
<!doctype HTML> <HTML> <HEAD> <TITLE>Greetings, Universe!</TITLEe> <META charset="utf-8"> </HEAD> <BODY> <H1>Hello, Galaxy!</H1> </BODY> </HTML>
using uppercase tags and a lowercase DOCTYPE would still render the page as intended.
HTML tag case has no effect on the rendered page result.
Text meant for display will be affected by case. If we alter <h1>Greetings, Universe!</h1> to <H1>GREETINGS, UNIVERSE!</H1>, then the output is shown in uppercase.
GREETINGS, UNIVERSE! is displayed in uppercase because is was intended for display and written in uppercase in the HTML file. The case of the tags has no effect upon upper or lowercase text display.
“Which Case Does HTML Expect?”
Use lowercase for all tags because that is the agreed standard. Sure, you could use uppercase tags, but that makes your markup look liek it was written in the 1990s during the infamous browser wars.
For the DOCTYPE, use the standard combination of uppercase and lowercase as seen in <!DOCTYPE html> because this is the typical format. No need to be clever or cute. Just make your markup readable by adhering to standards other web developers expect.
“Will the browser throw errors if I use the wrong case?”
No. Browsers are forgiving,m and they will try to render your page the that they can despite any errors. To ensure guaranteed HTML 5 compliance, use <!DOCTYPE html>.
2. html
HTML is the parent element of a web page. All other elements belong within html as child elements (they must exist within html). Good practice dictates that nothing else should exist beyond the closing </html> tag.
3. head
Just as a man has a head at the top of its body, so does HTML. <head> is the head of the HTML document, and it is separate from the body. head contains the document title, meta data, styles, and even scripts. The head element does not contain any content (text, video, or images) that you intend for display in the browser for the user to see.
Close the head section before starting the body.
<html>
<head>
</head>
<body>
</body>
</html>
In this way, head and body are sibling elements. This means that they are both child elements of their parent html element. They exist on the same level. This concept becomes important when discussing the document object model (DOM).
Note: HTML 5 contains another element called header. This is completely different from the head element. <head> and <header> are different elements with different purposes.
<head>Â marks the head of the HTML document where the metadata resides.
<header> is a child of the body element and denotes a section of text that contains an introduction to a larger piece or text.
Content within <head></head> is not displayed in the browser (there are exceptions), but content residing within <header></header> is displayed in the browser output for the user to view. Avoid confusing the two elements. They are different.
4. title
This is name of the web page that appears in the browser’s title bar or active tab.
Any text located within the title tags will appear in the browser’s title bar or active tab.
5. <meta charset=”utf-8″>
The meta element contains metadata. Metadata is data about the data that the browser uses in order to help understand what is contained within the HTML file.
Metadata varies because there is no official cross-browser standard. Some web sites even use custom metadata in order to categorize web pages. It varies greatly.
However, there are a few general guidelines for proper construction tha tyou can rely upon. In this example, charset=”utf-8″ uses a property=”value” pair that tells the web browser that the page is encoded using the UTF-8 character set. This is to help ensure that 8-bit Unicode characters are displayed as intended.
A character set is a table that tells which characters of a given language are used. UTF-8 is one of many character sets, but is is common among HTML and other web documents.
Metadata usually contains information that users never see, but it assists with proper rendering of the web page and help web crawlers analyze and determine the intended purpose of a page along with its content.
6. body
The page content goes here. Paragraphs of text. Images. Tables. Interactive scripts. Think of the body as the playground the user sees.
7. h1
This is a level one header that is used to mark titles or title sections. We want the header to appear in the browser output, so headers are placed int he body element.
h1 is the largest of six levels of headers (h1 to h6). The higher the header number, the smaller the text. Headers are usually rendered in bold text that is larger than the normal reading text.
Only text within <h1>Â </h1> tags will be rendered as a level 1 header. If we place the closing tag elsewhere, as in <h1>Greetings,</h1> Universe!, then the browser would show something different:
<h1>Greetings,</h1>Universe!
Greetings, is located within the h1 tags, so it is rendered as a header. Universe! is located outside of the h1 tags, so it is treated a regular text.
Indentation
HTML ignores whitespace, so indent as much as you like. Always add whitespace so your HTML file is readable. Avoid cramming tags together. Give your markup some breathing room. The page will still render.
Adding whitespace makes it easier to see at a glance which elements are nested within other elements. Place block-level elements on their own lines for easier organization. If you had to read through the following markup, which would be easier to read?
This?
<!DOCTYPE html><html><head><title>Greetings, Universe!</title><meta charset="utf-8"></head> <body><h1>Greetings, Universe!</h1></body> </html>
Or this?
<!DOCTYPE html>
<html>
<head>
<title>Greetings, Universe!</title>
<meta charset="utf-8">
</head>
<body>
<h1>Greetings, Universe!</h1>
</body>
</html>
Indentation is usually two to four spaces for HTML file, but two spaces seems to work well given how deep some nesting can be. The more spaces you use, the more horizontal scrolling or text wrapping that must happen.
Avoid Spaces in Filenames
To ensure the greatest compatibility with web servers that might host your HTML files (locally or remotely), avoid spaces and special characters in filenames. Use a lowercase name containing standard characters such as homepage.htm, or home_page.htm, not “home page.htm” or “home★page.htm“.
That is all the HTML 5 we need in order to write JavaScript and display it in a web browser. In the next lesson, we will begin writing some basic JavaScript.
Delightly Linux 