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 html body div attribute h1 attribute h2 attribute p attribute ul attribute text text text li attribute li attribute li attribute text text text

Accessing Elements Javascript returns the first element with the id “one” var one = document.getElementById("one"); Javascript returns an array with every “li” element var lis = document.getElementsByTagName("li"); Javascript returns an array with every element that has the class “red” var reds = document.getElementsByClassName("red"); Javascript var elements = document.getElementsByClassName("red"); loops through the array of elements with the for(var i=0; i<elements.length; i++) class “red” { var item = elements[i]; }

Changing Text Javascript var one = document.getElementById("p_one"); one.innerHTML = "This is the new text"; 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!” or “Dogs are the best!”)

Changing CSS Javascript var one = document.getElementById("p_one"); changes the color of the element one.style.color = "#c09"; Javascript var one = document.getElementById("p_one"); changes the background color of the element one.style.backgroundColor = "#ffc"; Javascript var one = document.getElementById("p_one"); changes the font size of the element one.style.fontSize = "25px"; 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 Javascript var one = document.getElementById("p_one"); var one = document.getElementById("p_one"); makes “awesome” the class for the element one.className = "awesome"; one.className = "awesome"; Javascript var one = document.getElementById("p_one"); var one = document.getElementById("p_one"); adds a class called “awesome” to the element one.className = "awesome"; one.className = one.className + " awesome"; 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.