Scribd
Upload
9 views

Solution Js

Java script

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Solution Js

Java script

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Appendix – Practice

Exercise, Project, and Self-


Check Quiz Answers

Chapter 1, Getting Started with


JavaScript
Practice exercises
Practice exercise 1.1
4 + 10
14

console.log("Laurence");
Laurence
undefined

Practice exercise 1.2


<!DOCTYPE html>
<html>

<head>
<title>Tester</title>
</head>

<body>

[ 425 ]
Appendix

<script>
console.log("hello world");
</script>
</body>

</html>

Practice exercise 1.3


<!DOCTYPE html>
<html>

<head>
<title>Tester</title>
</head>

<body>
<script src="app.js"></script>
</body>

</html>

Practice exercise 1.4


let a = 10; // assign a value of 10 to variable a
console.log(a); // This will output 10 into the console
/*
This is a multi-line
Comment
*/

Projects
Creating an HTML file and a linked JavaScript file
<!doctype html>
<html>
<head>
<title>JS Tester</title>
</head>

[ 426 ]
Practice Exercise, Project, and Self-Check Quiz Answers

<body>
<script src="myJS.js"></script>
</body>
</html>

// console.log("Laurence");
/*
This is my comment
Laurence Svekis
*/

Self-check quiz
1. <script src="myJS.js"></script>.
2. No.
3. By opening and closing it with /* and */.
4. Comment out the line with //.

Chapter 2, JavaScript Essentials


Practice exercises
Practice exercise 2.1
console.log(typeof(str1));
console.log(typeof(str2));
console.log(typeof(val1));
console.log(typeof(val2));
console.log(typeof(myNum));

Practice exercise 2.2


const myName = "Maaike";
const myAge = 29;
const coder = true;
const message = "Hello, my name is " + myName + ", I am " + myAge+"
years old and I can code JavaScript: " + coder + ".";
console.log(message);

[ 427 ]
Appendix

Practice exercise 2.3


let a = window.prompt("Value 1?");
let b = window.prompt("Value 2?");
a = Number(a);
b = Number(b);
let hypotenuseVal = ((a * a) + (b * b))**0.5;
console.log(hypotenuseVal);

Practice exercise 2.4


let a = 4;
let b = 11;
let c = 21;
a = a + b;
a = a / c;
c = c % b;
console.log(a, b, c);

Projects
Miles-to-kilometers converter
//Convert miles to kilometers.
//1 mile equals 1.60934 kilometers.
let myDistanceMiles = 130;
let myDistanceKM = myDistanceMiles * 1.60934;
console.log("The distance of " + myDistanceMiles + " miles is equal to
" + myDistanceKM + " kilometers");

BMI calculator
//1 inch = 2.54 centimetres.
//2.2046 pounds in a kilo
let inches = 72;
let pounds = 180;
let weight = pounds / 2.2046; // in kilos
let height = inches * 2.54; // height in centimetres
console.log(weight, height);
let bmi = weight/(height/100*height/100);
console.log(bmi);

[ 428 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Self-check quiz
1. String
2. Number
3. Line 2
4. world
5. Hello world!
6. Whatever the user enters in
7. 71
8. 4
9. 16 and 536
10. true
false
true
true
false

Chapter 3, JavaScript Multiple Values


Practice exercises
Practice exercise 3.1
const myList = ["Milk", "Bread", "Apples"];
console.log(myList.length);
myList[1] = "Bananas";
console.log(myList);

Practice exercise 3.2


const myList = [];
myList.push("Milk", "Bread", "Apples");
myList.splice(1, 1, "Bananas", "Eggs");
const removeLast = myList.pop();
console.log(removeLast);

[ 429 ]
Appendix

myList.sort();
console.log(myList.indexOf("Milk"));
myList.splice(1, 0, "Carrots", "Lettuce");
const myList2 = ["Juice", "Pop"];
const finalList = myList.concat(myList2, myList2);
console.log(finalList.lastIndexOf("Pop"));
console.log(finalList);

Practice exercise 3.3


const myArr = [1, 2, 3];
const bigArr = [myArr, myArr, myArr];
console.log(bigArr[1][1]);
console.log(bigArr[0][1]);
console.log(bigArr[2][1]);

Practice exercise 3.4


const myCar = {
make: "Toyota",
model: "Camry",
tires: 4,
doors: 4,
color: "blue",
forSale: false
};

let propColor = "color";


myCar[propColor] = "red";
propColor = "forSale";
myCar[propColor] = true;
console.log(myCar.make + " " + myCar.model);
console.log(myCar.forSale);

Practice exercise 3.5


const people = {friends:[]};
const friend1 = {first: "Laurence", last: "Svekis", id: 1};
const friend2 = {first: "Jane", last: "Doe", id: 2};
const friend3 = {first: "John", last: "Doe", id: 3};
people.friends.push(friend1, friend2, friend3);
console.log(people);

[ 430 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Projects
Manipulating an array
theList.pop();
theList.shift();
theList.unshift("FIRST");
theList[3] = "hello World";
theList[2] = "MIDDLE";
theList.push("LAST");
console.log(theList);

Company product catalog


const inventory = [];
const item3 = {
name: "computer",
model: "imac",
cost: 1000,
qty: 3
}
const item2 = {
name: "phone",
model: "android",
cost: 500,
qty: 11
}
const item1 = {
name: "tablet",
model: "ipad",
cost: 650,
qty: 1
}
inventory.push(item1, item2, item3);
console.log(inventory);
console.log(inventory[2].qty);

[ 431 ]
Appendix

Self-check quiz
1. Yes. You can reassign values within an array declared with const, but cannot
redeclare the array itself.
2. Length
3. The outputs are as follows:
-1
1

4. You can do the following:


const myArr = [1,3,5,6,8,9,15];
myArr.splice(1,1,4);
console.log(myArr);

5. The output is as follows:


[empty × 10, "test"]
undefined

6. The output is as follows:


undefined

Chapter 4, Logic Statements

Practice exercises
Practice exercise 4.1
const test = false;
console.log(test);
if(test){
console.log("It's True");
}
if(!test){
console.log("False now");
}

[ 432 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Practice exercise 4.2


let age = prompt("How old are you?");
age = Number(age);
let message;
if(age >= 21){
message = "You can enter and drink.";
}else if(age >= 19){
message = "You can enter but not drink.";
}else{
message = "You are not allowed in!";
}
console.log(message);

Practice exercise 4.3


const id = true;
const message = (id) ? "Allowed In" : "Denied Entry";
console.log(message);

Practice exercise 4.4


const randomNumber = Math.floor(Math.random() * 6);
let answer = "Something went wrong";
let question = prompt("Ask me anything");
switch (randomNumber) {
case 0:
answer = "It will work out";
break;
case 1:
answer = "Maybe, maybe not";
break;
case 2:
answer = "Probably not";
break;
case 3:
answer = "Highly likely";
break;
default:

[ 433 ]
Appendix

answer = "I don't know about that";


}
let output = "You asked me " + question + ". I think that " + answer;
console.log(output);

Practice exercise 4.5


let prize = prompt("Pick a number 0-10");
prize = Number(prize);
let output = "My Selection: ";
switch (prize){
case 0:
output += "Gold ";
case 1:
output += "Coin ";
break;
case 2:
output += "Big ";
case 3:
output += "Box of ";
case 4:
output += "Silver ";
case 5:
output += "Bricks ";
break;
default:
output += "Sorry Try Again";
}
console.log(output);

Projects
Evaluating a number game answers
let val = prompt("What number?");
val = Number(val);
let num = 100;
let message = "nothing";
if (val > num) {
message = val + " was greater than " + num;
} else if (val === num) {

[ 434 ]
Practice Exercise, Project, and Self-Check Quiz Answers

message = val + " was equal to " + num;


} else {
message = val + " is less than " + num;
}
console.log(message);
console.log(message);

Friend checker game answers


let person = prompt("Enter a name");
let message;
switch (person) {
case "John" :
case "Larry" :
case "Jane" :
case "Laurence" :
message = person + " is my friend";
break;
default :
message = "I don't know " + person;
}
console.log(message);

Rock paper scissors game answers


const myArr = ["Rock", "Paper", "Scissors"];
let computer = Math.floor(Math.random() * 3);
let player = Math.floor(Math.random() * 3);
let message = "player " + myArr[player] + " vs computer " +
myArr[computer] + " ";
if (player === computer) {
message += "it's a tie";
} else if (player > computer) {
if (computer == 0 && player == 2) {
message += "Computer Wins";
} else {
message += "Player Wins";
}
} else {
if (computer == 2 && player == 0) {
message += "Player Wins";
} else {

[ 435 ]
Appendix

message += "Computer Wins";


}
}
console.log(message);

Self-check quiz
1. one
2. this is the one
3. login
4. Welcome, that is a user: John
5. Wake up, it's morning
6. Result:
• true
• false
• true
• true

7. Result:
100 was LESS or Equal to 100
100 is Even

Chapter 5, Loops
Practice exercises
Practice exercise 5.1
const max = 5;
const ranNumber = Math.floor(Math.random() * max) + 1;
//console.log(ranNumber);
let correct = false;
while (!correct) {
let guess = prompt("Guess a Number 1 - " + max);
guess = Number(guess);
if (guess === ranNumber) {

[ 436 ]
Practice Exercise, Project, and Self-Check Quiz Answers

correct = true;
console.log("You got it " + ranNumber);
} else if (guess > ranNumber) {
console.log("Too high");
} else {
console.log("Too Low");
}
}

Practice exercise 5.2


let counter = 0;
let step = 5;
do {
console.log(counter);
counter += step;
}
while (counter <= 100);

Practice exercise 5.3


const myWork = [];
for (let x = 1; x < 10; x++) {
let stat = x % 2 ? true : false;
let temp = {
name: `Lesson ${x}`, status: stat
};
myWork.push(temp);
}
console.log(myWork);

Practice exercise 5.4


const myTable = [];
const rows = 4;
const cols = 7;
let counter = 0;
for (let y = 0; y < rows; y++) {
let tempTable = [];
for (let x = 0; x < cols; x++) {
counter++;

[ 437 ]
Appendix

tempTable.push(counter);
}
myTable.push(tempTable);
}
console.table(myTable);

Practice exercise 5.5


const grid = [];
const cells = 64;
let counter = 0;
let row;
for (let x = 0; x < cells + 1; x++) {
if (counter % 8 == 0) {
if (row != undefined) {
grid.push(row);
}
row = [];
}
counter++;
let temp = counter;
row.push(temp);

}
console.table(grid);

[ 438 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Practice exercise 5.6


const myArray = [];
for (let x = 0; x < 10; x++) {
myArray.push(x + 1);
}
console.log(myArray);

for (let i = 0; i < myArray.length; i++) {


console.log(myArray[i]);
}
for (let val of myArray) {
console.log(val);
}

Practice exercise 5.7


const obj = {
a: 1,
b: 2,
c: 3
};

[ 439 ]
Appendix

for (let prop in obj) {


console.log(prop, obj[prop]);
}
const arr = ["a", "b", "c"];
for (let w = 0; w < arr.length; w++) {
console.log(w, arr[w]);
}

for (el in arr) {


console.log(el, arr[el]);
}

Practice exercise 5.8


let output = "";
let skipThis = 7;
for (let i = 0; i < 10; i++) {
if (i === skipThis) {
continue;
}
output += i;
}
console.log(output);

Alternatively, the following code could be used, replacing continue with break:

let output = "";


let skipThis = 7;
for (let i = 0; i < 10; i++) {
if (i === skipThis) {
break;
}
output += i;
}

console.log(output);

[ 440 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Project
Math multiplication table
const myTable = [];
const numm = 10;
for(let x=0; x<numm; x++){
const temp = [];
for(let y = 0; y<numm; y++){
temp.push(x*y);
}
myTable.push(temp);
}

console.table(myTable);

[ 441 ]
Appendix

Self-check quiz
1. Result:
0
3
6
9

2. Result:
0
5
1
6
2
7
[1, 5, 7]

Chapter 6, Functions
Practice exercises
Practice exercise 6.1
function adder(a, b) {
return a + b;
}
const val1 = 10;
const val2 = 20;
console.log(adder(val1, val2));
console.log(adder(20, 30));

Practice exercise 6.2


const adj = ["super", "wonderful", "bad", "angry", "careful"];

function myFun() {
const question = prompt("What is your name?");
const nameAdj = Math.floor(Math.random() * adj.length);
console.log(adj[nameAdj] + " " + question );

[ 442 ]
Practice Exercise, Project, and Self-Check Quiz Answers

}
myFun();

Practice exercise 6.3


const val1 = 10;
const val2 = 5;
let operat = "-";
function cal(a, b, op) {
if (op == "-") {
console.log(a — b);
} else {
console.log(a + b);
}
}
cal(val1, val2, operat);

Practice exercise 6.4


const myArr = [];

for(let x=0; x<10; x++){


let val1 = 5 * x;
let val2 = x * x;
let res = cal(val1, val2, "+");
myArr.push(res);
}
console.log(myArr);
function cal(a, b, op) {
if (op == "-") {
return a - b;
} else {
return a + b;
}
}

Practice exercise 6.5


let val = "1000";

(function () {
let val = "100"; // local scope variable

[ 443 ]
Appendix

console.log(val);
})();

let result = (function () {


let val = "Laurence";
return val;
})();
console.log(result);
console.log(val);

(function (val) {
console.log(`My name is ${val}`);
})("Laurence");

Practice exercise 6.6


function calcFactorial(nr) {
console.log(nr);
if (nr === 0) {
return 1;
}
else {
return nr * calcFactorial(--nr);
}
}
console.log(calcFactorial(4));

Practice exercise 6.7


let start = 10;
function loop1(val) {
console.log(val);
if (val < 1) {
return;
}
return loop1(val - 1);
}
loop1(start);
function loop2(val) {
console.log(val);
if (val > 0) {

[ 444 ]
Practice Exercise, Project, and Self-Check Quiz Answers

val--;
return loop2(val);
}
return;
}
loop2(start);

Practice exercise 6.8


const test = function(val){
console.log(val);
}
test('hello 1');

function test1(val){
console.log(val);
}
test1("hello 2");

Projects
Create a recursive function
const main = function counter(i) {
console.log(i);
if (i < 10) {
return counter(i + 1);
}
return;
}
main(0);

Set timeout order


const one = ()=> console.log('one');
const two = ()=> console.log('two');
const three = () =>{
console.log('three');
one();
two();
}

[ 445 ]
Appendix

const four = () =>{


console.log('four');
setTimeout(one,0);
three();
}
four();

Self-check quiz
1. 10
2. Hello
3. Answer:
Welcome
Laurence
My Name is Laurence

4. 19
5. 16

Chapter 7, Classes
Practice exercises
Practice exercise 7.1
class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
}
let person1 = new Person("Maaike", "van Putten");
let person2 = new Person("Laurence", "Svekis");
console.log("hello " + person1.firstname);
console.log("hello " + person2.firstname);

[ 446 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Practice exercise 7.2


class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
fullname(){
return this.firstname + " " + this.lastname;
}
}
let person1 = new Person("Maaike", "van Putten");
let person2 = new Person("Laurence", "Svekis");
console.log(person1.fullname());
console.log(person2.fullname());

Practice exercise 7.3


class Animal {
constructor(species, sounds) {
this.species = species;
this.sounds = sounds;
}
speak() {
console.log(this.species + " " + this.sounds);
}
}
Animal.prototype.eat = function () {
return this.species + " is eating";
}
let cat = new Animal("cat", "meow");
let dog = new Animal("dog", "bark");
cat.speak();
console.log(dog.eat());
console.log(dog);

[ 447 ]
Appendix

Projects
Employee tracking app
class Employee {
constructor(first, last, years) {
this.first = first;
this.last = last;
this.years = years;
}
}
const person1 = new Employee("Laurence", "Svekis", 10);
const person2 = new Employee("Jane", "Doe", 5);
const workers = [person1, person2];

Employee.prototype.details = function(){
return this.first + " " + this.last + " has worked here " +
this.years + " years";
}

workers.forEach((person) => {
console.log(person.details());
});

Menu items price calculator


class Menu {
#offer1 = 10;
#offer2 = 20;
constructor(val1, val2) {
this.val1 = val1;
this.val2 = val2;
}
calTotal(){
return (this.val1 * this.#offer1) + (this.val2 * this.#offer2);
}
get total(){
return this.calTotal();
}
}

[ 448 ]
Practice Exercise, Project, and Self-Check Quiz Answers

const val1 = new Menu(2,0);


const val2 = new Menu(1,3);
const val3 = new Menu(3,2);
console.log(val1.total);
console.log(val2.total);
console.log(val3.total);

Self-check quiz
1. class
2. Using the following syntax:
class Person {
constructor(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
}

3. Inheritance
4. Answers:
• True
• False
• True
• True
• False
5. B

Chapter 8, Built-In JavaScript Methods


Practice exercises
Practice exercise 8.1
const secretMes1 = "How's%20it%20going%3F";
const secretMes2 = "How's it going?";
const decodedComp = decodeURIComponent(secretMes1);
console.log(decodedComp);

[ 449 ]
Appendix

const encodedComp = encodeURIComponent(secretMes2);


console.log(encodedComp);
const uri = "http://www.basescripts.com?=Hello World";
const encoded = encodeURI(uri);
console.log(encoded);

Practice exercise 8.2


const arr = ["Laurence", "Mike", "Larry", "Kim", "Joanne", "Laurence",
"Mike", "Laurence", "Mike", "Laurence", "Mike"];
const arr2 = arr.filter ( (value, index, array) => {
console.log(value,index,array.indexOf(value));
return array.indexOf(value) === index;
});
console.log(arr2);

Practice exercise 8.3


const myArr = [1,4,5,6];
const myArr1 = myArr.map(function(ele){
return ele * 2;
});
console.log(myArr1);

const myArr2 = myArr.map((ele)=> ele*2);


console.log(myArr2);

Practice exercise 8.4


const val = "thIs will be capiTalized for each word";
function wordsCaps(str) {
str = str.toLowerCase();
const tempArr = [];
let words = str.split(" ");
words.forEach(word => {
let temp = word.slice(0, 1).toUpperCase() + word.slice(1);
tempArr.push(temp);
});
return tempArr.join(" ");
}
console.log(wordsCaps(val));

[ 450 ]
Practice Exercise, Project, and Self-Check Quiz Answers

Practice exercise 8.5


let val = "I love JavaScript";
val = val.toLowerCase();
let vowels = ["a","e","i","o","u"];
vowels.forEach((letter,index) =>{
console.log(letter);
val = val.replaceAll(letter,index);
});
console.log(val);

Practice exercise 8.6


console.log(Math.ceil(5.7));
console.log(Math.floor(5.7));
console.log(Math.round(5.7));
console.log(Math.random());
console.log(Math.floor(Math.random()*11)); // 0-10
console.log(Math.floor(Math.random()*10)+1); // 1-10;
console.log(Math.floor(Math.random()*100)+1); // 1-100;
function ranNum(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
for (let x = 0; x < 100; x++) {
console.log(ranNum(1, 100));
}

Practice exercise 8.7


let future = new Date(2025, 5, 15);
console.log(future);
const months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
let day = future.getDate();
let month = future.getMonth();
let year = future.getFullYear();
let myDate = `${months[month-1]} ${day} ${year}`;
console.log(myDate);

[ 451 ]
Appendix

Projects
Word scrambler
let str = "JavaScript";

function scramble(val) {
let max = val.length;
let temp = "";
for(let i=0;i<max;i++){
console.log(val.length);
let index = Math.floor(Math.random() * val.length);
temp += val[index];
console.log(temp);
val = val.substr(0, index) + val.substr(index + 1);
console.log(val);
}
return temp;
}
console.log(scramble(str));

Countdown timer
const endDate = "Sept 1 2022";

function countdown() {
const total = Date.parse(endDate) - new Date();
const days = Math.floor(total / (1000 * 60 * 60 * 24));
const hrs = Math.floor((total / (1000 * 60 * 60)) % 24);
const mins = Math.floor((total / 1000 / 60) % 60);
const secs = Math.floor((total / 1000) % 60);
return {
days,
hrs,
mins,
secs
};
}

function update() {
const temp = countdown();

[ 452 ]
Practice Exercise, Project, and Self-Check Quiz Answers

let output = "";


for (const property in temp) {
output += (`${property}: ${temp[property]} `);
}
console.log(output);
setTimeout(update, 1000);
}

update();

Self-check quiz
1. decodeURIComponent(e)
2. 4
3. ["Hii", "hi", "hello", "Hii", "hi", "hi World", "Hi"]
4. ["hi", "hi World"]

Chapter 9, The Document Object Model


Practice exercises
Practice exercise 9.1

[ 453 ]
Appendix

Practice exercise 9.2


console.log(window.location.protocol);
console.log(window.location.href);

Practice exercise 9.3


<script>
const output = document.querySelector('.output');
output.textContent = "Hello World";
output.classList.add("red");
output.id = "tester";
output.style.backgroundColor = "red";
console.log(document.URL);
output.textContent = document.URL;
</script>

Projects
Manipulating HTML elements with JavaScript
const output = document.querySelector(".output");
const mainList = output.querySelector("ul");
mainList.id = "mainList";

[ 454 ]
Practice Exercise, Project, and Self-Check Quiz Answers

console.log(mainList);
const eles = document.querySelectorAll("div");
for (let x = 0; x < eles.length; x++) {
console.log(eles[x].tagName);
eles[x].id = "id" + (x + 1);
if (x % 2) {
eles[x].style.color = "red";
} else {
eles[x].style.color = "blue";
}
}

Self-check quiz
1. You should see an object representing the list of elements contained within
body object of the HTML page.

2. document.body.textContent = "Hello World";


3. The code is as follows:
for (const property in document) {
console.log(`${property}: ${document[property]}`);
}

4. The code is as follows:


for (const property in window) {
console.log(`${property}: ${document[window]}`);
}

5. The code is as follows:


<!doctype html>
<html>
<head>

[ 455 ]
Appendix

<title>JS Tester</title>
</head>
<body>
<h1>Test</h1>

<script>
const output = document.querySelector('h1');
output.textContent = "Hello World";
</script>
</body>
</html>

Chapter 10, Dynamic Element


Manipulation Using the DOM
Practice exercises
Practice exercise 10.1

[ 456 ]

You might also like