- How does the Elvis operator work? The formal name for the Elvis
operator is the Tertiary Conditional operator. This operator consists of a
question mark (?) and a colon (:). Rewrite this
if..else statement using the
Elvis operator:
var n = 247;
var size;
if (n >= 100) {
size = "large";
}
else {
size = "small";
}
// Answer:
var n = 247;
size = (n >= 100) : "large" : "small";
- Redo Exercise 11 of the May 6 Notes 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; }
===============================================
- How do you use the jQuery library?
- Translate these jQuery statements into vanilla JavaScript.
// 1.
$(document).ready(init);
// Vanilla JavaScript:
document.addEventHandler("DOMContentLoaded", init);
// 2.
$(init);
// Answer: same as // 1.
// 3.
$("button").click(f);
// Vanilla JavaScript:
// If there is only one button:
document.querySelector("button").
addEventListener("click", f);
// If there is more than one button:
var btnArray = document.querySelectorAll("button");
for(var btn of btnArray) {
btn.addEventListener("click", f);
}
// 4.
$("p").text("Hello, World!");
// Vanilla JavaScript:
// If there is only one paragraph:
document.querySelector("p").textContent = "Hello, World!";
// If there is more than one paragraph:
var paraArray = document.querySelectorAll("p");
for(var para of paraArray) {
para.textContent = "Hello, World!";
}
// 5.
var s = $("input").val( );
// Vanilla JavaScript
// Assume there is only one input element:
var s = document.querySelector("input").val( );