- Name the JavaScript events that you know. Answer:
click load focus blur keydown keyup
mousedown mouseup mouseenter mouseleave
-
Show how to set up a CSS class that sets the background color to red and the
color to white. Use this class in a paragraph element.
- Look at this Random Color Example:
Web Page
Source Code
Here is a justification of the formula to choose a random color
component, for example r (red).
Math.random( ) --> [0, 1)
Math.random( )*256 --> [0, 255)
Math.floor(Math.random( )*256) --> {0, 1,...,254,255},
which are the random outputs that we want for
a random color component.
Now convert the base-10 random values to hex and
concatenate them to obtain the hex color code.
- What is the difference between an object and a class?
Answer: A class is a factory that can produce objects. Objects can
also be created directly as object literals, but classes are
easier to use. Creating 1,000 objects is easier with a class.
See the Kid and Clock classes in
the May 4 Notes.
- What are the JavaScript classes that correspond to the primitive datatypes
boolean, number, and
string?
Answer: Boolean, Number,
String
- In the methods of a class, which reference variable do you use to
access the properties of the same class?
Answer: this
- What is the constructor for a class?
Answer: The constructor creates a new object. The constructor
is logically named constructor. Here is the constructor
for the Kid class:
constructor(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
Call the constructor to create a new Kid object like this:
var k = new Kid("Alice", "F", 11);
- Look at the Lotto class in
lotto.js.
See how the Array splice method is used
to randomly select the lotto balls.
Answer: The splice method call for an array arr has this general
form:
arr.splice(start, len, item1, item2, ... , itemn);
where start is the index where the section of the array
to remove begins
len is the number of items to remove
item1, item2, ... , itemn are the items to insert in place of the
items removed.
In the Lotto class, the splice method call looks like this:
this.balls.splice(randVal, 1);
this.balls is the array of Lotto balls
still available to draw. When the ball with index
randVal is drawn it must be removed from this.balls.
There is 1 ball to remove, and no
balls to insert so there are no extra items in the splice call. Here is a
sequence that shows how the balls and ballsDrawn arrays are used to draw five
balls out of 10 possible balls. The variable i is the index of the for loop that draws the balls:
i ballsDrawn balls
---+------------+-------------------
[ ] [1,2,3,4,5,6,7,8,9,10]
1 [4] [1,2,3,5,6,7,8,9,10]
2 [4,9] [1,2,3,5,6,7,8,10]
3 [4,9,5] [1,2,3,6,7,8,10]
4 [4,9,5,7] [1,2,3,6,8,10]
5 [4,9,5,7,1] [2,3,6,8,10]
- For the DiceGame Example and Project 3, explain the difference between the HTML image element and
the image file that is displayed.
Answer: An image element is defined as
<img id="1">
before any image file is displayed in it. An image file is defined as
var imgFile = "images/5.jpg";
To display the image file in the image element, you can do this in JavaScript:
var imgElement = document.getElementById("1");
imgElement.src = imgFile;
The script for the Lotto class displays a random image file in the image element
chosen randomly without replacement.
- Look at this Pair class:
class Pair {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString( ) {
return `(${this.x}, ${this.y})`;
}
}
A Pair object is an ordered pair of values that you used in high school math class.
Use this class to create three Pair objects and print them. Answer:
var p1 = new Pair(3, 5);
var p2 = new Pair(4, 7);
var p3 = new Pair(6, 11);
document.writeln(`${p1}, ${p2}, ${p3}`);
// Output: (3, 5), (4, 7), (6, 11)
- 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 2 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 exercise 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; }
===============================================
