4 – the DOM

Now that we have an idea of how to build the content and style of a webpage, let’s dive into how to program it using Javascript. Javascript is an object-based language and addresses the elements of a webpage using a representation based on objects called the DOM; hence, we have little option but to learn what an object is.

Class preparation

1. Watch at home the following video from E-learnify (2:40 mins): What is an object?

2. Watch at home the following video from Java Script Programming Teasers (8 mins):The DOM (Document Object Model)

3. Watch at home the following video from Java Script Programming Teasers (7:30 mins): Getting Javascript into your pages

Class work

How to access the structures of a webpage using the DOM, and start building our game.

Topics for today

  • objects
  • The DOM (Document Object Model)
  • the <script> tag
  • Targeting HTML objects from Javascript
  • Building the content of the page

Workfiles

Download in class: classpak4.zip


Built-in Objects (Core objects)

Javascript is an Object-based Language, e.g., JavaScript strings are objects and thus they have properties and methods. To access these properties we follow the object with a dot and then the property.

show it to me, let me try

Usually it is easy to find the properties and methods of built-in objects of any language on the internet. The Javascript string method indexOf() returns the first location at which the substring was found within the string, or -1 otherwise.

Use these properties to modify the object as following:

  • if the_name contains the substring “Luke” change the string to “Master Luke Skywalker”
  • if the_name contains the substring “Anakin” change the string to “Darth Vader”
  • if the_name contains the substring “Leia” change the string to “Princess Leia”

Answer:

show it to me

User Objects

The following is a single object with a few properties and a single method:

show it to me, let me try

Please, print all the names in the “teacher” field.

Host objects – The DOM

The following is the DOM of our fan webpage:


fan-page-divs

my_dom


Adding JavaScript to the webpage

To use javascript code in a webpage we use the <script> tag. We can place this tag anywhere in the head or the body, but we have to be mindful of a few things:

  • the webpage does not change while the javascript code is being downloaded
  • the webpage usually does not change while the javascript code is being processed
  • the page is processed in a top-bottom fashion so the javascript code cannot act on items that have not being created yet

The <script> tag can be used in either of two ways:

a. Placing the javascript code directly in between the tags. This method has the advantage that both the content and the code are downloaded to the browser with a single request.

show it to me

b. placing the javascript code in a file and linking it with the tag. This method requires two requests to the server: one, from the user, to download the content, and a second one, from the webpage, to download the javascript code. It is less efficient but having two separate files is useful and common practice during development.

show it to me

JavaScript can modify both content and style

We can use the DOM to set or modify any aspect of the webpage, both content and style; we can build the complete webpage using javascript:

Show it to me

References and Resources

Mini-project (estimated time: 30 mins)

Create an object in Javascript about Batman with the following properties:

Let me try

  • first name is Bruce.
  • last name is Wayne.
  • his sidekick is Robin.
  • his arch-enemies are the Joker, the Riddler, and the Penguin.
  • his affiliation is the JLA.
  • his secret identity is a method that concatenates his first and last names

With this information, print Batman’s sidekick, his secret identity and list all his arch-enemies

Answer:

Show it to me