Last week, we learned more about JS and how we could use it to retrieve input from the page and use it in functions. This week, we will learn about different ways to use elements on our pages, so we can use them to build more interactive components.

Previous Participation Questions/Responses

There were no participation questions from last week. Instead, you had to demonstrate that you made progress on an assignment or something related to the Final Project for this course.

This link has the responses to the fun questions from previous weeks. Feel free to look over the responses from myself and your peers. https://docs.google.com/spreadsheets/d/1QLoQzbO-

Er7ARIECl0aPvY1lKUyZTdYeuwsn4g0XEAk/edit?usp=sharing

Midterm

You dont need to have perfectly placed or finalized content. However, your pages should be mostly put together. Major headings should be used to describe content. If you havent thought of text to use, feel free to Google Lorem Ipsum for place holder text. You can also use place holder images by Googling those as well. The most important thing is that you have some sort of content placed for your Midterm.

The basic-page-example.html file provided earlier in the semester is a good an example of an acceptable page. Feel free to use some of the CSS Ive provided (row class, float items to the left, give them a width) to help style your pages. The overall structure should be original and your own work though.

For the Midterm submission, youll submit 3 links in total. Each link should point to a different page of your midterm. When I check your work, I should be able to go from page to page easily by using links on your pages.

Whats Due?

• Participation Questions (4)
• JS Challenges 3 (CW/HW)
• Midterm (due tonight at midnight)

Working with the DOM (Lecture/Class Activity)

this Keyword

You can use the this keyword with the DOM to target an object that just had an event occur on it. Look at the following code snippet as an example. When the button is clicked, the color for the text and background will change.

HTML

<button type=submit id=example>Example Button</button>

JavaScript

document.getElementById(example).onclick = function() {

this.style.color = white; this.style.backgroundColor = red;

}

In the example above, this refers to the button that was clicked. When you use this inside of a function that is triggered by an event, it refers to the object the event is happening to (button, text, etc.). When you use this outside of a function, it typically refers to the Window object.

Targeting with JS

Weve already seen how JavaScript can be used to execute functions and create basic output on our page. We have done this using the Document Object Model which consists of the objects located in the document. The main method we have used so far has been document.getElementById().

Using the document objects getElementById method, we can target any one HTML element based on its id value. Each id value on our page must be unique and cant be repeated in other elements. This limits us to targeting only one element at a time with this method.

Another useful method is getElementsByClassName. Instead of using the id value of an HTML element, you would provide the class name of an element or multiple elements. In the example below, I select all elements with a class name of para and store them in a variable called paras.

var paras = document.getElementsByClassName(para);

When using this method, we create a collection of all the elements which match the class name provided. A collection is very similar to an array in that it holds multiple values. Lets say we had the following code:

<p class=para>First sentence.</p>

<p class=para>Second sentence.</p>

<p class=para>Third sentence.</p>

If we use var paras = document.getElementsByClassName(para);, we would have a collection of all three paragraphs above. To refer to the first sentence, we could use paras[0] since the first item in a collection has an index value of 0 (just like arrays). The last paragraph could be referenced with paras[2] since the index values are 0, 1, and 2.

We could loop through each member of the collection with the code below:

for(var x = 0; x < paras.length; x++) { paras[x].style.color = blue;

}

In the second part of the for loop, the condition we check before executing the code inside the loop (x < paras.length), we specify that the loop should only run up to but not including the length of the collection. Since the length of the collection is 3, x < paras.length means x < 2. This makes sense because if we refer to each item in our collection individually, it will look like the code below:

paras[0] first sentence paras[1] second sentence

paras[2] third sentence

During each execution of the loop, we change the elements to have a color of blue by using paras[x]. x just refers to the number which is 0 through 2 in our case.

Another method which can be used to select elements on our page is the querySelector() method. It is like the getElementById method in that it targets only one element on the page. However, instead of targeting something by its id value, we provide a CSS selector between the quotation marks. Any valid CSS selectors can be used.

In this example, I target anything with a class of redPara and give it a color of red. The querySelector method only targets the very first match and so this red color style wouldnt apply to the second paragraph tag.

<p class=redPara>This paragraph will be <span>red<span>.</p> Receives red color <p class=redPara>This paragraph will be <span>red<span>.</p> Doesnt get styled

document.querySelector(.redPara).style.color = red;

If we only wanted to target the span, we could also do that using this method. We would just change the value provided to .redPara span so that it references all span tags inside of anything with a class of redPara.

The last function we will cover is querySelectorAll(). Just like querySelector, it uses a provided CSS selector to target elements. The main difference is that a list of items is returned just like with getElementsByClassName(). We will reuse the code from the querySelector example as demonstrated below.

<p class=redPara>This paragraph will be <span>red<span>.</p> <p class=redPara>This paragraph will be <span>red<span>.</p>

var redParas = document.querySelectorAll(.redPara span);

Once we create a variable to represent the list of all items which match our CSS selector (span tags inside of elements with the redPara class), we can loop through it to change the style for each individual element.

for(var x = 0; x < redParas.length; x++) { redParas[x].style.color = red;

}

After executing this code, all span tags within those paragraphs would have that red color applied. We could also refer to just one of those elements inside of the list by referring to the index value (same as arrays or collections).

redParas[0].style.color = red; Only the very first paragraph in our list gets styled with this

Events in JavaScript

Most features built into web pages that use JavaScript rely on some sort of event. For example, if there is a drop-down menu which only appears after some element is clicked, we could say that there is a click event being used.

Another example of an event can be found on Twitter or some other platforms which limit characters with posts. As you type into an input box for a status update, there might be a counter present which tells you how many characters you have typed or have left. In this instance, there is a keypress event being used.

Some of the most popular JavaScript events are listed below:

• Click A user clicks on an element
• Dblclick A user double-clicks on an element
• Mouseover When the pointer is moved onto an element or one of its children
• Keypress When a user presses a key o Keydown When the user is pressing a key o Keyup When a user releases a key
• Onload When an HTML object has loaded
• Focus When an element gets focus

To add an event to an element, you can use the on event syntax as demonstrated below. In this example, we have a button with a class of btn. We target that button with querySelector and then add a onclick event to it.

<button class=btn type=submit>Click me</button>

document.querySelector(.btn).onclick = function () {//Some code in here }

We could change onclick to onmouseover, ondblclick and other events as we want. After we specify the event to trigger our function, we define the function which is execute once the event is triggered. We would do the same thing for all other events.

Class Example & Online Resources

This example contains content which demonstrates how to use the various document methods mentioned above (getElementById, getElementsByClassNames, etc.). It also shows how some basic events work.

https://www.albany.edu/~cv762525/cinf201/examples/dom-manipulation.html

To view all other class examples, visit this link and click whatever you want to see. The js folder contains the various JS files used for the examples.

https://www.albany.edu/~cv762525/cinf201/examples/

You do not have to read through every single link below. They are to be used as needed if you want additional coded examples. JavaScript has many features, and we will only scratch the very surface of them in this course. However, digging deeper is good if you want to implement advanced features on your pages.

Online Resources

• https://developer.mozilla.org/en-

US/docs/Web/API/Document_Object_Model/Introduction

• https://www.w3schools.com/js/js_htmldom.asp
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
• https://www.tutorialspoint.com/javascript/javascript_events.htm
• https://www.w3schools.com/jsref/met_element_addeventlistener.asp

JS Challenges 3 (CW/HW)

Download the JS-Challenges-3.zip folder from Blackboard under todays Lecture Notes or the Assignment folder. Extract everything from inside of this zip folder to some place where you will be able to find them easily. Inside of the zip folder will be an HTML file and some image files which depict how the page should look if the challenges are done correctly.

Your task is to read the challenges displayed on the HTML page and add JS as needed to complete them. Underneath each challenge description is a set of <script></script> tags where you will place your JavaScript.

Review the example from this week (listed above) as it contains code that can be used for these challenges.

To view all other class examples, visit this link and click whatever you want to see. The js folder contains the various JS files used for the examples.

https://www.albany.edu/~cv762525/cinf201/examples/