IT 238 -- Feb 17, 2025 Notes

IT 238 -- Feb 17, 2025

Review Exercises

Use radiobuttons with labels elephant, lion, monkey, rhinoceros to display images of the same name with .jpg extension. Use a single image element defined like this:

<img id="img1">

Include this line in your CSS file:

img { width: 200px; background-color: #C0C0C0; }

Answer:

<!DOCTYPE html>
<!-- Source code file: index.html
     Script for Exercise 1        -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 1</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Exercise 1</h1>
        <img id="img1"><br>
        <input type="radio" id="ele" name="animal" 
               value="elephant"> Elephant<br>
        <input type="radio" id="lio" name="animal" 
               value="lion"> Lion<br>
        <input type="radio" id="mon" name="animal" 
               value="monkey"> Monkey<br>
        <input type="radio" id="rhi" name="animal" 
               value="rhinoceros"> Rhinoceros 
    </body>
</html>
---------------------------------------------------
/* Source code file: styles.css
   Stylesheet for Exercise 1    */
body { font: 120% verdana, sans-serif; } 
img { width:200px; height: 150px;
      background-color: #C0C0C0;}
---------------------------------------------------
// Source code file: script.js
// Script for Exercise 1.
function showAnimal(e) {
    var animalName = e.target.value;
    var imageName = "images/" + animalName + ".jpg";
    document.getElementById("img1").src = imageName;
}

function init( ) {
    var radEle = document.getElementById("ele");
    var radLio = document.getElementById("lio");
    var radMon = document.getElementById("mon");
    var radRhi = document.getElementById("rhi");

    radEle.addEventListener("click", showAnimal);
    radLio.addEventListener("click", showAnimal);
    radMon.addEventListener("click", showAnimal);
    radRhi.addEventListener("click", showAnimal);
}

window.addEventListener("load", init);
===================================================

Redo Exercise 1 to use a dropdown menu with <select> and <option> elements instead of radio buttons.
Answer:

===================================================
<!DOCTYPE html>
<!-- Source Code File: index.html
     HTML file for Exercise 2 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 2</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Exercise 2</h1>
        <img id="img1"><br>
        <select id="sel1">
            <option value="elephant">Elephant</option>
            <option value="lion">Lion</option>
            <option value="monkey">Monkey</option>
            <option value="rhinoceros">Rhinoceros</option>
        </select>
    </body>
</html>
-----------------------------------------------------
/* Source Code File: styles.css
   Stylesheet for Exercise 2 */
body { font: 120% verdana, sans-serif; } 
img { width:200px; height: 150px;
      background-color: #C0C0C0;}
-----------------------------------------------------
// Source Code File: script.js
// Script for Exercise 2.
function showAnimal( ) {
    var animalName = document.getElementById("sel1").value;
    var imageName = "images/" + animalName + ".jpg";
    document.getElementById("img1").src = imageName;
}
function init( ) {
    var select1 = document.getElementById("sel1")
    select1.addEventListener("change", showAnimal);
}
window.addEventListener("load", init);
=====================================================

Redo the previous problem using anonymous event handlers in arrow notation.
Answer. Here is the revised script:

=====================================================
// Source code file: script.js
// Script for Exercise 3.
window.addEventListener("load", ( ) => {
    var select1 = document.getElementById("sel1");
    select1.addEventListener("change", ( ) => {
        var animalName = document.getElementById("sel1").value;
        var imageName = "images/" + animalName + ".jpg";
        document.getElementById("img1").src = imageName;
    });
});
=====================================================

Start with this HTML paragraph:

<p>Lorem ipsum odor amet, consectetuer 
adipiscing elit. Maecenas ipsum ligula 
tempor lorem mus integer. Platea nisi 
fusce placerat mus magnis ipsum. Ipsum 
sed platea tincidunt, magnis et commodo. 
Orci mattis tempus amet himenaeos 
lobortis dis iaculis accumsan. Id 
suscipit proin laoreet vel eleifend morbi. 
Pharetra erat id egestas ultricies ad 
tempus feugiat aliquet eu. Phasellus per 
vestibulum ut curabitur himenaeos 
consequat senectus quisque magnis. 
Fusce posuere vulputate sem egestas 
cursus dignissim duis.</p>

Define a CSS class that sets the span element to bold, red, and Chiller font. Apply this class to five words in the paragraph.
Answer:

===============================================
<!DOCTYPE html>
<!--  Source Code File: index.html
      HTML code for Exercise 4 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 4</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Exercise 4</h1>
        <h2>Lorem Ipsum Text</h2>
        <p>Lorem ipsum odor amet, consectetuer 
           adipiscing elit. Maecenas ipsum ligula 
           tempor lorem mus integer. Platea nisi 
           fusce <span class="r">placerat</span> mus 
           magnis ipsum. Ipsum sed platea tincidunt, 
           magnis et commodo. Orci mattis tempus amet 
           himenaeos lobortis dis iaculis accumsan. Id 
           suscipit proin <span class="r">laoreet</span> 
           vel eleifend morbi. Pharetra erat id egestas 
           ultricies ad tempus feugiat aliquet eu. 
           Phasellus per <span class="r">vestibulum</span> 
           ut curabitur himenaeos consequat senectus 
           quisque magnis. Fusce posuere vulputate sem 
           egestas cursus dignissim 
           <span class="r">duis</span>.</p>
    </body>
</html>
-----------------------------------------------
/* Source Code File: styles.css
   Exercise 4 */
/* Define CSS Class */
.r { font: bold 200% Chiller, sans-serif; 
     color: red; }
===============================================

Review of CSS Selectors

We are familiar with type selectors that refer to normal HTML elements, such as
```
h1  p  td  li  span
```
You may have also seen the universal selector *, which refers to all HTML elements.

To illustrate some other types of selectors, consider the body of a sample HTML page:

<body>
    <div id="content">
        <h1>Sample HTML Page</h1>
        <p class="info">Lorum ipsum dolor sit amet.</p>
        <p>Lorum ipsum dolor <a href="#">sit</a> amet.</p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#" class="intro">Item 1<a></li>
            <li><a href="#">Item 2</li>
            <li><a href="#">Item 3</li>            
        </ul>
    </div>
    <div id="footer">
        Lorum ipsum dolor <a href="#">sit</a> amet.
    </div>
</body>

Here are some CSS selectors:

Type Selector:
```
li { color: blue; }
```

Class Selectors:

.intro { font-weight: bold; }
p.intro { color: red; }
a.intro { color: green; }

ID Selector:
```
#nav { color: blue; }
```

Descendent Selectors:

li a { color: green; }
ol ol { list-style-type: lower-roman; }
#nav a { color: red; }
#nav ul li a { color: green; }

Universal Selector:
```
* { margin: 0px; padding: 0px; }
```
Direct Child Selector:
```
div > em { color: blue; }
```
Adjacent Sibling Selector:
```
h2 + h3 { margin: -1em; }
```

Attribute Selector:

img[src="small.gif"] { border: 1px solid #000000; }

Pseudo-element Selector:

p::first-line { color: red; }
p::first-letter { font-size: 200%; font-weight: bold; }

New JavaScript Methods

The JavaScript methods document.querySelector and document.querySelectorAll were added in 2013. They return objects that match a CSS selector defined in the DOM.

document.querySelector returns the first object that matches a CSS selector. Examples:

// querySelector Statement:
var paragraph = document.querySelector("#p1");
// JavaScript Statement
var paragraph = document.getElementById("p1");

// querySelector Statement:
var paragraph = document.querySelector("p");
// JavaScript statement:
var paragraph = document.getElementsByTagName("p")[0];

// querySelector Statement:
var paragraph = document.querySelector(".red");
// JavaScript statement:
var paragraph = document.getElementsByClassName("red")[0];

// querySelectorAll Statement:
var paragraph = document.querySelectorAll("p");
// JavaScript statement:
var paragraph = document.getElementsByTagName("p");

// querySelectorAll Statement:
var paragraph = document.querySelectorAll(".red");
// JavaScript statement:
var paragraph = document.getElementsByClassName("red");

Practice Problems

If the body element in an HTML file is defined like this
```
<body></body>
```
write JavaScript statement that changes the background-color style of the body to silver when the body is clicked. There is no defined id so you can't use document.getElementById.

Start with this HTML page:

<body>

    <p>Lorem ipsum.</p>
    <p>In eu blandit velit.</p>
    <p>Proin turpis erat, porta dignissim dapibus 
       in, rhoncus et diam. Sed id ante mattis.</p>
    <p>Suspendisse.</p>
    <p>Class aptent taciti sociosqu ad litora 
       torquent per conubia nostra, per inceptos 
       himenaeos. Fusce sed nunc nisi.</p>
    <button>Replace Paragraphs.</button>
</body>

Write an event listener for the button so that all paragraphs with length > 30 characters are replaced with the string "Paragraph too long. You've been replaced."

Hiding and Displaying Elements

Show the difference between the display and visibility properties.
To hide an HTML element, change its display property from "inline" to "none".
To make an HTML element invisible, change its visibility property from "visible" to "hidden".
HideDisplay Example
Web Page Source Code

The DOM

We will discuss this section on Wednesday, Dec 19.

DOM means Document Object Model.
The DOM represents the elements on an HTML page as a tree.

As an example (ref. Freeman and Robson, Head First JavaScript Programming, O'Reilley, 2014), look at the body of this HTML page:
DOM Example:

<body>
    <h1>Planetary Outpost Status Summaries</h1>
    <ol>
        <li>Green Planet<br>
            All is well.</li>
        <li class="redtext">Red Planet<br>
            All systems A-OK.</p>
    </ol>
    <h2>Number of Planets</h2>
    <p id="para">3</p>
</body>

DOM for page represented as a traditional tree:

      +--------- body ---------+
      |         /    \         |
      |        /      \        |
     h1       ol      h2       p
             /  \
            li  li

Traditionally trees are drawn upside down, with the root on top and the leaves at the bottom.
A more complete representation of the DOM tree.

An alternative representation of the DOM tree with the child relationship shown by indentation. In addition the inner HTML is also shown as a child of its containing node.

body
   h1
       Planetary Outpost Status Summaries
   ol
      li
          Green Planet<br>All is well.
      li
          Red Planet<br>All systems A-OK.
   h2
       Number of Planets
   p
       3

Methods for finding HTML elements:

// Return the HTML element with id="123"
document.getElementById("123")

// Return array of all HTML elements with
// tag name input
document.getElementsByTagName("input")

// Return array of all HTML elements that
// implement the CSS class .redtext  
document.getElementsByClassName("redtext")

// Return the first HTML li tag that 
// implements the class .redtext.
document.querySelector("li .redtext")

// Return array of all HTML li tags that
// implement the class .redtext
document.querySelectorAll("li .redtext")

Properties of HTML elements:

innerHTML  nodeName   firstChild  lastChild
childNodes  previousSibling  nextSibling

Changing an attribute of an HTML element:

element.attributeName = "HTMLAttributeValue";
element.style.styleName = "cssStyleValue";

Adding or deleting HTML elements:

document.createElement(tag_name);
document.removeChild(element);
document.appendChild(element);
document.replaceChild(oldElement, newElement);

Practice Quiz 6b

Take Practice Quiz 6b.

Practice Problems

For the Planetary Outpost Status Summaries page, show the output in this element at the end of the document:

<p id="output"></p>

Obtain the root node <html> and output its node name (property nodeName). Remember to put your JavaScript statements in an init method that is called after the page is loaded.

Print the number of elements with tagname li. Answer for Parts 1 and 2:

<!DOCTYPE html>
<!-- Source code file: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Planetary Output Summaries</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Planetary Outpost Status Summaries</h1>
        <ol>
            <li>Green Planet<br>
                All is well.</li>
            <li class="redtext">Red Planet<br>
                All systems A-OK.</p>
        </ol>
        <h2>Number of Planets</h2>
        <p id="para">3</p>
    </body>
</html>

Start with a empty body that looks like this:
```
<body></body>
```
1. Add a paragraph to the body with the inner HTML
```
This is a test.
```
2. Build this table entirely by using JavaScript:
  
  Name Height Country
  
  Kilimanjaro 5895 Tanzania