BTI220 notes – Thu Jul 11

You have learned the foundations of JavaScript programming. Starting today, we will work with HTML and the Document Object Model.

.

Introduction to HTML

A web page is a plain text document. The document contains your content, and markup. HTML is the markup language.

HTML5 is the current version and specification of the HTML language.

The document can be viewed in a web browser. It can be edited with a plain-text editor, or with a program (source code) editor.

After the document is loaded into a web browser, it’s in-memory version can also be edited with JavaScript. We’ll do this later.

The HTML language is a declarative markup language that describes the structure and contents of a document using elements. There are about 100 elements that can be used.

Each document includes a head element, and a body element. Within each of these, we add other elements (e.g. a title in the head, and structural divisions and content paragraphs in the body), and content.

The syntax used to describe document elements conforms to this format:

<element attribute=value>Content</element>

Notice the start “tag”, which begins with “<ele…”. Also notice the end “tag”, which places a slash character before the element name, e.g. “</ele…”.

.

A simple example

The following is a simple example:

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>Hello, world!</title>
</head>
<body>
  <h3>Welcome</h3>
  <p>Hello, world!</p>
  <p>This is my home page.</p>
</body>
</html>

.

Notes about the document’s design

Following the first-line “document type” declaration, the <html> tags surround the remainder.

The <head> element includes metadata, and links to other external resources needed by the document.

The <body> element contains the document’s structure and content.

.

HTML language syntax 

A small number of rules enable you to compose an HTML document:

The first line in an HTML document is an element that identifies the document type:
<!DOCTYPE html>

All other elements use lower case letters.

Most (but not all) elements have a start tag, and an end tag. As noted earlier, tag names are enclosed in angle brackets. The end tag name begins with a slash.

An element may include one or more attributes, located in its start tag. If an attribute’s value includes a space or path characters (e.g. a URL), then use double-quotes to surround the value.

Elements can be nested inside other elements. Read this carefully, and understand. Very simply, you cannot have overlapping tags.

A document must have this structure:

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title></title>
</head>
<body>
</body>
</html>

Your content appears in elements (between the start and end tags), in the head and body elements.

.

Your HTML learning objectives

Your professor expects that you will learn and memorize the important and often-used parts of the HTML language. While HTML is vast – wide and deep – there is a small number of elements and attributes that you really need to know. MDN has a well-organized HTML element reference page.

Inside the head element:

  • title
  • script
  • style
  • link

The remainder are in the body element.

Content containers:

  • p
  • div
  • span
  • details
  • em (and i)
  • strong (and b)
  • mark
  • pre
  • header
  • footer
  • nav
  • article
  • section
  • blockquote
  • dl, dt, dd
  • h1, h2, h3, h4, h5, h6
  • script (yes, script can be in the head and/or body)

Content container for row-and-column data:

  • table
  • tbody
  • th
  • tr
  • td

List-making:

  • ul
  • ol
  • li

Link:

  • a

Media:

  • img
  • audio
  • video
  • canvas

Interactivity (for user input):

  • form (and all its elements)

Separators (breaks):

  • br
  • hr

Many elements have required attributes. For example, the a element requires an href attribute; the img element requires an src attribute.

.

Helpful references to this point in time

MDN – Introduction to HTML

W3C – A Quick Introduction to HTML

MDN – HTML element reference

MDN – HTML attribute reference

MDN – HTML5 home page

Also interesting:

A Brief History of Markup

.

In-class exercise(s)

On your own, or with a partner, you will hand-write the HTML for a few examples, and then we will view the solution(s). Make sure that you have paper and pen/pencil.

Update – here are the documents you coded in class:

Example 1 – basic

Example 2 – table and link

Example 3 – list and image

In your browser, you can click an empty area of a page, and choose “view page source” (or similar) to view the HTML source code of the page.

You can also use the “inspector” developer tool in your browser.

.

The HTML Document Object Model (DOM)

The document’s structure is defined by the W3C Document Object Model (DOM) specification. The rules cited earlier come from the specification.

A web browser provides and implements the DOM. In other words, when an HTML document is loaded into a browser, it becomes a document object.

The DOM’s purpose is to provide an application programming interface – an API – to the document. All parts of the document – structure (elements) and content – are accessible through the API.

We use JavaScript to modify the structure and contents of the document.

Looking ahead to next week’s topic, we use Cascading Style Sheets (CSS) to modify the formatting and appearance of the document.

The DOM is a two-way API. JavaScript and CSS are used to modify the document. However, the DOM publishes (or broadcasts) events, as a result of user interaction operations, network operations, or device-based operations. Your JavaScript and/or CSS handle an event (which often results in another document modification).

Study the introductory material next. Then, links to reference material follow, in the “Getting started with the DOM” section.

.

The DOM and JavaScript 

When JavaScript is hosted in a browser, the browser provides the window host object to JavaScript. The window represents the browser tab or window. You know from your own observation and usage that a browser tab/window displays a document, but it also has some notion of history (back/forward), location (the address bar), navigator (e.g. the browser version etc.) and so on.

The window’s document property is a reference to the HTML document in the browser tab/window.

The document property is the root, or start point, of the DOM API. That’s where the document object model begins for the current document.

You will be using the document property frequently. You can use either the document keyword, or the fully-qualified window.document identifier. (The document keyword by itself works, because the scope chain will be searched, and window.document will be located.)

The following diagram shows the relationship between the JavaScript language itself, and a complete implementation of JavaScript in a standard desktop browser.

js-in-host-objects-in-browser

.

Organization of a document 

A document is a structure of nodes.

It is termed a “tree structure”, because it has a single root node (html), and branches emanate from the root node. (The two main branches are head and body.)

For example, view the first HTML document we created (above) in a browser:

jul11-html-page1-in-browser

Here is its HTML source code:

jul11-html-page1-source

This is a representation of its “tree structure”:

dom-tree-example1

.

Access the document in JavaScript

From JavaScript, you get a reference to the document object by using the document global (or top-level) object.

var d = document;

.

Building block/foundation – “node” 

All endpoints in the document object model are nodes. As you would expect, there are different node types:

  • Element – an HTML element, e.g. p, div, img
  • Text – text content in an element
  • Attribute – for an element; e.g. the src attribute for the img element

.

Important concept – a node’s id attribute 

From above, you have just learned how to get a reference to the document object, and something about nodes.

Often, you will want to get a reference to a specific element in the document object. For example, you may want to change its text/content, or append new content to the element.

If you add an id attribute to the element, you can use the very convenient document.querySelector() method.

Using the first example (above) as a foundation, we’ll edit it, to prepare it for modification by JavaScript:

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>Hello, world!</title>
</head>
<body>
  <h3>Welcome</h3>
  <div id=main>
    <p>Hello, world!</p>
    <p>This is my home page.</p>
  </div>
</body>
</html>

Follow along with this code sample on your own. First, copy this code into a new file, then save that file in your computer’s file system, as an HTML document. Then, open it in Firefox. Then, open Firefox’s Scratchpad, so that you can use JavaScript to modify the document.

Here’s some sample JavaScript that will add a new paragraph to the div that has an id of “main”:

// get a reference to the desired element
var desired_element = document.querySelector('#main');
// step 1 - create a new 'p' element
var new_element = document.createElement('p');
// step 2 - create a new text node
var new_text_content = document.createTextNode('I hope it is educational.');
// step 3 - add the text content to the p element
new_element.appendChild(new_text_content);
// step 4 - add the result to the desired element
desired_element.appendChild(new_element);

When you run this code, notice that the page in the browser changes, by adding the new content.

.

Node members – properties and methods

The DOM defines the members – properties and methods – for each type of node.

Learn about the members in the how-to guides and the reference documentation.

.

Getting started with the DOM

MDN – Introduction – What is the DOM?
Most of this is appropriate

Elated – Introducing the JavaScript DOM
First of a multi-part series
It’s OK, but use it as just another resource
(I don’t like the title, and a few other explanations)

MDN – DOM code examples
Most of this is appropriate
Some “old” HTML 4 syntax is used, but it’s generally OK

MDN – DOM document reference
It’s a reference document – full and complete

MDN – browser window reference
Another reference document

IBM Web Developer – Mastering Ajax, Part 4
This is from 2006, but it explains some things well
Read these sections:
A closer look at Web browsers
Introducing the DOM

IBM Web Developer – Mastering Ajax, Part 5
Ditto above
Most of this article is good enough for our purposes, so read/scan all of it, and attempt the code samples on your own

Also…

Google Tech Talk – Introduction to JavaScript and the Browser DOM
From 2010
Pretty good, reviews JavaScript topics that we’ve introduced so far in the course, and then it covers the DOM

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: