Javascript: DOM ATLS 3020 - Digital Media 2 Week 6 - Day 1 - - PowerPoint PPT Presentation

Javascript: DOM

ATLS 3020 - Digital Media 2 Week 6 - Day 1

Document Object Model (DOM)

• Creates a “model” of the webpage
• Everything on a webpage is contained inside of

this model

• Each part of the webpage is a different type of

“object”

• The structure of this model is called a “DOM tree”

Download the starter code from: creative.colorado.edu/~kosba/dm2/tutorials/w6-1/w6-1_starter_code.zip

DOM Tree

document h1 attribute text h2 attribute text p attribute text html body ul attribute div attribute li text attribute li attribute text li attribute text

Accessing Elements

returns the first element with the id “one”

var one = document.getElementById("one"); Javascript var reds = document.getElementsByClassName("red"); Javascript

returns an array with every element that has the class “red”

var elements = document.getElementsByClassName("red"); for(var i=0; i<elements.length; i++) { var item = elements[i]; } Javascript

loops through the array of elements with the class “red”

var lis = document.getElementsByTagName("li"); Javascript

returns an array with every “li” element

Changing Text

var one = document.getElementById("p_one");

• ne.innerHTML = "This is the new text";

Javascript

Change the first paragraph’s text to something different Can we add html as well as text?

Exercise

1. Create a div that will hold a user’s name. 2. Prompt the user for their name. 3. Replace the text of that div with the user’s input. 1. Create a div that will hold the response text 2. Ask the user to choose between two options (example: “Cats or dogs?”) 3. Add an if statement. Depending on the response of the user, replace the text of the response div with different results (example: “Cats are great!”

• r “Dogs are the best!”)

Changing CSS

var one = document.getElementById("p_one");

• ne.style.color = "#c09";

Javascript

changes the color of the element

var one = document.getElementById("p_one");

• ne.style.backgroundColor = "#ffc";

Javascript

changes the background color of the element

var one = document.getElementById("p_one");

• ne.style.fontSize = "25px";

Javascript

changes the font size of the element

Most CSS properties can be changed through javascript

Exercise

1. Prompt the user for a color 2. Change the background of one of the elements to that color 1. Prompt the user for a number 2. Change the font-size of one of the elements to that number of pixels 1. Ask the user to choose between two options (example: “Cats or dogs?”) 2. Add an if statement. Depending on the response of the user, change the background color of an element.

Adding CSS classes

var one = document.getElementById("p_one");

• ne.className = "awesome";

var one = document.getElementById("p_one");

• ne.className = one.className + " awesome";

Javascript

adds a class called “awesome” to the element

var one = document.getElementById("p_one");

• ne.className = "awesome";

var one = document.getElementById("p_one");

• ne.className = "awesome";

Javascript

makes “awesome” the class for the element

This method is extremely powerful, since css classes can change the look and feel of an entire webpage

Exercise

1. Ask the user to choose between two options (example: “Cats or dogs?”) 2. Add an if statement. Depending on the response of the user, add a class to one of the elements.

Lab 8

1. Download the starter code from creative.colorado.edu/~kosba/dm2/tutorials/w6-1/lab8.zip 2. You will be editing the 3 functions at the bottom of lab7_js.js ○ function print_round(round_number) ○ function print_round_result(round_text) ○ function print_cards(p1_card, p2_card) 3. Create an HTML element on your HTML page that will contain the round number. In the “print_round” function, delete the document.write() function, and add a line of code that will rewrite the innerHTML your new HTML element, so that it will print what round it is. 4. Create an HTML element in your HTML page that will state the result of the round. In the “print_round_result” function, delete the document.write() function, and add a line of code that will rewrite the innerHTML of your new HTML element, so that it will print the result of the round. 5. Create 2 HTML elements that will show the cards that have been played this round. In the “print_cards” function, delete the document.write() functions, and add code that will show the value of the cards that each player has played.