4 – the DOM | Programming and Problem Solving

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 (5:20 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

This week we are going to work on 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

var the_name = "Luke Skywalker";

// access the string
console.log( "The name is " + the_name );

// access a property of the string
console.log( "The length of name is " + the_name.length );

// access a method of the string
res = "";
if ( the_name.indexOf( "Skywalker" ) === -1 ) {
    res = "not "
}
console.log( "This person is " + res + "from House Skywalker" );

var the_name = "Luke Skywalker";

// access the string

console.log( "The name is " + the_name );

// access a property of the string

console.log( "The length of name is " + the_name.length );

// access a method of the string

res = "";

if ( the_name.indexOf( "Skywalker" ) === -1 ) {

res = "not "

}

console.log( "This person is " + res + "from House Skywalker" );

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

var Darth_Vader = {
    // properties
    first_name:         "Anakin",
    last_name:          "Skywalker",
    teacher:            ["Yoda", "Obi-Wan Kenobi"],
    student:            ["Ahsoka"],
    child:              ["Luke","Leia"],
    affiliation:        "Empire",

    // methods
    fullName : function(x) {
       return this.first_name + " " + this.last_name;
    }
};

console.log( Darth_Vader.affiliation );
console.log( Darth_Vader.fullName() );
for ( i = 0; i < Darth_Vader.child.length; i++) {
    console.log( Darth_Vader.child[i] );
}

var Darth_Vader = {

// properties

first_name: "Anakin",

last_name: "Skywalker",

teacher: ["Yoda", "Obi-Wan Kenobi"],

student: ["Ahsoka"],

child: ["Luke","Leia"],

affiliation: "Empire",

// methods

fullName : function(x) {

return this.first_name + " " + this.last_name;

}

};

console.log( Darth_Vader.affiliation );

console.log( Darth_Vader.fullName() );

for ( i = 0; i < Darth_Vader.child.length; i++) {

console.log( Darth_Vader.child[i] );

}

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

Host objects – The DOM

The following is the DOM of our fan webpage:

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 careful 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

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <title>Hello</title>
    </head>

    <body>
        <p id="greeting"></p>
        <script>
            var name = "John";
            var greet_obj = document.getElementById("greeting");

            greet_obj.innerHTML = "Hello, " + name + "</br>";
        </script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Hello</title>

</head>

<body>

var name = "John";

var greet_obj = document.getElementById("greeting");

greet_obj.innerHTML = "Hello, " + name + "</br>";

</script>

</body>

</html>

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

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <title>Hello</title>
    </head>

    <body>
        <p id="greeting"></p>
        <script src="greet-script.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Hello</title>

</head>

<body>

</body>

</html>

var name = "John";
var greet_obj = document.getElementById("greeting");

greet_obj.innerHTML = "Hello, " + name + "</br>";

var name = "John";

var greet_obj = document.getElementById("greeting");

greet_obj.innerHTML = "Hello, " + name + "</br>";

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

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <title>Hello</title>
    </head>
    <body>
        <div id="body_div">
        </div>
        <script>
            // create the content
            var container = document.getElementById("body_div");
            container.innerHTML = '<p id="greeting"></p>';

            // access the content
            var greet_obj = document.getElementById("greeting");
            var greet_style = greet_obj.style;

            // modify content
            var name = "John";
            greet_obj.innerHTML = "Hello, " + name + "</br>";

            // modify style of the content
            greet_style.color = "red";
            greet_style.fontFamily = "Helvetica, Arial, sans-serif";
            greet_style.fontSize = "24px";
        </script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Hello</title>

</head>

<body>

</div>

// create the content

var container = document.getElementById("body_div");

container.innerHTML = '<p id="greeting"></p>';

// access the content

var greet_obj = document.getElementById("greeting");

var greet_style = greet_obj.style;

// modify content

var name = "John";

greet_obj.innerHTML = "Hello, " + name + "</br>";

// modify style of the content

greet_style.color = "red";

greet_style.fontFamily = "Helvetica, Arial, sans-serif";

greet_style.fontSize = "24px";

</script>

</body>

</html>

References and Resources

CSS properties

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