Scribd
Upload
10 views32 pages

Solution Js

Java script

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views32 pages

Solution Js

Java script

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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