- Try out this version of the KidsTextArea Example. It uses the filter method
of the array class. To use the filter method, pass it a function that inputs a
Kid object. The function then returns true
if the object should be selected and
false otherwise. For this exercise, we pass this function to the select
function:
(kid) => kid.gender == g;
where g is the gender obtained from the
<select> element. Here is the source for the example:
======================================
<!DOCTYPE html>
<!-- Source Code File: index.html
HTML file for KidsTextArea3 Example -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KidsTextArea3 Example</title>
<link rel="stylesheet" href="styles.css">
<script src="https://facweb.cdm.depaul.edu/sjost/kidsdata.js">
</script>
<script src="script.js"></script>
</head>
<body>
<h1>KidsTextArea3 Example</h1>
<label for="gender">Enter the Gender:</label><br>
<select id="gender">
<option value="F">Female</option>
<option value="M">Male</option>
</select><br><br>
<input type="button" id="btn"
value="Show Kids of Selected Gender"><br><br>
<textarea id="textarea"></textarea>
</body>
</html>
--------------------------------------
/* Source Code File: styles.css
Stylesheet for KidsTextArea3 */
body { font: 100% helvetica, arial, sans-serif; }
textarea {
overflow-y:scroll;
resize: none;
height: 100px;
width: 200px; }
--------------------------------------
// Source Code File: script.js
// Script for KidsTextArea3 Example
// Convert JSON data to array of objects.
var kidsArray = JSON.parse(kids);
// Button event handler
function getKidsByGender( ) {
var g = document.getElementById("gender").value;
var ta = document.getElementById("textarea");
var selectedKids =
kidsArray.filter((k) => k.gender == g);
var output = "";
for(var k of selectedKids) {
output += k.name + "\n";
}
ta.value = output;
}
function init( ) {
var button = document.getElementById("btn");
button.addEventListener("click", getKidsByGender);
}
window.addEventListener("load", init);
======================================
- The questions in Exercise 1 can be answered with the document methods
getElementById, getElementsByTagName,
getElementsByClassName. They can also be answered
with the document methods querySelector
and querySelectorAll.
- Write statements that create an object for the HTML paragraph having
id="p1".
// Answer:
var para = document.getElementById("p1");
var para = document.querySelector("#p1");
- Write statements that create an object for the first paragraph in the HTML document.
// Answer:
var para = document.getElementsByTagName("p")[0];
var para = document.querySelector("p");
- Write statements that create an array of objects representing all the paragraphs in the HTML document.
Answer:
var paras = document.getElementsByTagName("p");
var paras = document.querySelectorAll("p");
- Write statements that create an object for the first HTML element that implements
the .redlarge class.
var para = document.getElementsByClassName("redlarge")[0];
var para = document.querySelector(".redlarge");
- Write statements that create an array of objects representing all the HTML elements that implement
the .redlarge class.
// Answer:
var paras = document.getElementsByClassName("redlarge");
var paras = document.querySelectorAll(".redlarge");
- If the body element in an HTML file is defined like this
<body><p>
This is the sentence in the body.
</p></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. Click on the sentence in the body, not in the empty space
below the sentence.
// Answer:
========================================================
<!DOCTYPE html>
<!-- Source Code File: index.html
HTML file for Exercise 4. -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 3</title>
<script>
window.addEventListener("load", ( ) => {
var bodyObject = document.querySelector("body");
bodyObject.addEventListener("click", ( ) => {
var bodyObject = document.querySelector("body");
bodyObject.style.backgroundColor = "#C0C0C0";
});
});
</script>
</head>
<body><p>This is the body sentence.</p></body>
</html>
========================================================
- 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."
Answer:
===================================================
<!DOCTYPE html>
<!-- Source Code File: index.html
HTML Page for Exercise 4. -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 4</title>
<script src="script.js"></script>
</head>
<body>
<h1>Exercise 4</h1>
<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>
</html>
---------------------------------------------------
// Source Code file: script.js
// Script for Exercise 4.
window.addEventListener("load", ( ) => {
var paras = document.querySelectorAll("p");
var button1 = document.querySelector("button");
button1.addEventListener("click", ( ) => {
for(var p of paras) {
if(p.innerHTML.length > 30) {
p.innerHTML =
"Paragraph too long. " +
"You've been replaced.";
}
}
});
});
===================================================
