Session 4: JavaScript - 1
1. Create an HTML document, name it index.html, and place it in the root of your project directory.
2. Create a JavaScript document, name it script.js, and place it in src/js/ directory.
3. Link the script.js document to the index.html by adding the following tag to the bottom of the body of the HTML page, just before the </body> tag:
... <script type="text/javascript" src="src/js/script.js"></script> </body>
4. Copy the following code to the script.js file
let userName = "Andy"
let userAge = 45
//console.log("Text", variable) allows you to write to the console
console.log("User Name", userName)
console.log("User Age", userAge)
5. Open the HTML document with the live server, open the developer tool, go to the console tab, and you should be able to see the results running the JS code.
6. Change the username value to Andrew and userAge value to 21.
7. Define an array, and name it userPets, which contains two elements "Cat" and "Dog".
8. Define a variable userBalance and assign its value to 1200.
9. Define a constant EVERY_DAY_SPENDING and set its value to 15.3.
10. Define a variable everyDaySpendingPerPet and set its value to 6.
11. Define a variable daysSurvived and set its value to 0.
12. Output the values of the three newly defined variables to the console.
13. Copy the following code to the script.js file
while (userBalance > 0) {
let spending = EVERY_DAY_SPENDING + everyDaySpendingPerPet * userPets.length
userBalance -= spending
daysSurvived++
}
console.log("User have sufficient money for " + daysSurvived + " days")
14. Add a new element "Hamster" to the pets array.
15. How many days the user balance is sufficient for the 3 pets?
16. Remove the last added pet from the array.
17. Change the everyDaySpendingPerPet value to 2.4, and check how many days the user balance is sufficient for the 2 pets.
Tasks:
1. Complete the following function that takes a string (e.g., your name) and prints it to the console. Then, print it letter by letter to the console, as shown in the snapshot:
function nameVertical(name) {
…
}
// Sarah for example
nameVertical(Sarah)
2. Complete the following function that takes a number and returns to which HTTP response status grouped it belongs.
HTTP response status code groups are:
- Informational responses (100–199)
- Successful responses (200–299)
- Redirection messages (300–399)
- Client error responses (400–499)
- Server error responses (500–599)
If the number does not belong to any of these groups, the message "Not a valid code" should be presented.
Note: the main idea of this task is using the ternary operator (condition ? exIfTrue : exIfFalse) in a way similar to if else if … else statement.
function code(n) {
return (n < 100)? "Not a valid code" :
…
}
// for example n = 121
console.log(code(121));
3. Complete the following function that takes two variables and compares them.
- The function should print to the console the values of the passed variables.
- If the two variables have the same values and they are of the same type, the function should print to the console: The two variables have the same value and type
- If the two numbers have the same values but they are from different types, the function should print to the console: The two variables have the same value but not the same type followed by the type of each of them, as follows: the type of var1 is var1 type
- Otherwise, the function should print to the console: The two variables do not have the same value nor the same type
function compareVariables(var1, var2) {
…
}
// After completing the function pass different values instead of var1 and var2 to test your function
compareVariables (var1, var2);
4. Write a function to print the Fibonacci Sequence up to a certain number (n). The Fibonacci sequence is a series of numbers that starts with 0, then, 1, and the next number in the sequence is calculated by adding the two numbers before it, the program should stop when the sum of these two numbers is bigger (>) than n.
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...
Your function should print: Fibonacci Sequence: followed by the numbers.
function fibonacci(n) {
…
}
// After completing the function pass different numbers instead of n and test the result.
fibonacci(n);
Steps to find the Fibonacci Series up to a certain number (n)
Step 1: Try to figure out how many variables you need, then declare them.
Step 2: Initialize the variables.
Step 3: Try to figure out the type of loop you need, and then the condition that will make the loop stop.
Step 4: Try to figure out how you will print the value of the variables.
Do it yourself:
1. Complete the following code so that the for loop works and outputs the content of the courses array to the console.
Note: you cannot modify "for (;;)", i.e., for(i = 0, i< courses.length, i++) is not an option. Also, you cannot use other types of loops. You need to write the code that makes this for loop work.
let courses = ["WAD", "SoftwareEngineering", "WebSecurity", "OOP"];
let i = 0;
for (;;) {
//code to be added only here
}