Basic Output & Interaction
Console Logging a Message
Exercise: Display a simple message in the browser console.
Steps:
Use the console logging function to send a string message.
Open your browser’s developer tools to see the output.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
console.log("Hello! This is a message!");
</script>
</body>
</html>Alert Pop-up
Exercise: Show a pop-up message when the page loads.
Steps:
Use the function that triggers a window alert.
Insert a text message inside the alert function.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
window.alert("Let's code together!");
</script>
</body>
</html>Writing to the Document
Exercise: Output text on the HTML web page dynamically.
Steps:
Choose the document helper that writes to the HTML.
Output your chosen text on the page.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
document.write("This is a dynamic text");
</script>
</body>
</html>Prompt for Input
Exercise: Ask the user for their name and store the input.
Steps:
Use the prompt function to request input.
Save the value in a variable.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let name = prompt("What is your name?: ");
</script>
</body>
</html>Modify Inner HTML of an Element
Exercise: Change the text of an element with a given ID.
Steps:
Access the element using its unique identifier.
Change the element’s inner text to a new message.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<p id="paragraph">Before Change</p>
<script>
function changeParagraph() {
document.getElementById("paragraph").innerHTML = "After Change";
}
</script>
<button onclick="changeParagraph()">Change!</button>
</body>
</html>Variables & Declarations
Declare Variables with Let and Var
Exercise: Create two variables with let and var using different values.
Steps:
Use the let keyword to declare one variable.
Use the var keyword to declare another variable, assigning a distinct value.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = "Value1";
var b = "Value2";
</script>
</body>
</html>Usage of Const
Exercise: Create a constant and assign a string value that will not change.
Steps:
Declare a constant using the correct keyword.
Ensure that its value cannot be changed later in the code.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
const text = "This is a string";
</script>
</body>
</html>Variable Reassignment
Exercise: Reassign a variable declared with let, then try with const and notice the difference.
Steps:
Change the value of a let variable.
Attempt to change a const variable and observe the error or the behavior in your browser console.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let variable = "A variable";
variable = "This and that";
const text = "This is a string";
text = "This won't work!";
</script>
</body>
</html>Understanding Variable Scope
Exercise: Explain the difference in scope between var and let by describing possible outcomes in different blocks.
Steps:
Create a variable with var inside a block (e.g., an if statement).
Create a variable with let inside the same block.
Describe in words or comments how they behave differently outside the block.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
a = 0;
b = 0;
if (a == b){
let c = 1;
var d = 2;
}
document.write(d);
//It seems like var works in a global scope so it works outside the block too!
</script>
</body>
</html>Explaining Data Types
Exercise: List and explain the basic JavaScript data types.
Steps:
Write a comment or note that enumerates each type: String, Number, BigInt, Boolean, Undefined, Null, Symbol, and Object.
Provide a short description of each type.
//String is text inside '' or "";
/* Number is numbers that can be added or multiplied like 12 or 10.5 */
//BigInt in JavaScript is a built-in object that represents whole numbers larger than (2^{53} - 1)
// Boolean is binary value that can either be true or false
// Undefined is a variable that has been declared but has no value assigned to it.
// null is equal to undefined but the difference is that it means there should not be a value assigned to a variable
// an objest is like const person = {firstName:"John", lastName:"Doe"};
// I really don't know what the symbol is!Working with Arrays
Create and Log an Array
Exercise: Initialize an array with a few string elements and log it to the console.
Steps:
Use the array literal format to create an array.
Output the array to the console using your logging function.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let theCities = ["Teheran", "Qom", "Isfahan"];
console.log(theCities);
</script>
</body>
</html>Appending Elements to an Array
Exercise: Add a new element at the end of an array using the method you know.
Steps:
Identify the function that appends an element to an array.
Use it to add a new string to the array.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let theCities = ["Teheran", "Qom", "Isfahan"];
theCities.push("Tabriz");
console.log(theCities);
</script>
</body>
</html>Removing the Last Element of an Array
Exercise: Remove the last element from an array.
Steps:
Use the appropriate array method to remove the last element.
Optionally log the modified array to confirm removal.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let theCities = ["Teheran", "Qom", "Isfahan"];
theCities.pop();
console.log(theCities);
</script>
</body>
</html>Working with Array Operations
Exercise: Create an array with three items, then add one more using push and finally remove one using pop.
Steps:
Declare an array with three elements.
Use the method to add another item.
Use the removal method to remove the last added item.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let theCities = ["Teheran", "Qom", "Isfahan"];
theCities.push("Mashhad");
theCities.pop();
console.log(theCities);
</script>
</body>
</html>Swap Two Elements in an Array
Exercise: Write steps to switch the positions of the first two elements in an array.
Steps:
Access the element at the first position.
Access the element at the second position.
Swap their positions logically, and then verify the new order by outputting the array.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let theCities = ["Teheran", "Qom", "Isfahan"];
let a = theCities[0];
let b = theCities[1];
theCities = [b, a, "Isfahan"];
console.log(theCities);
</script>
</body>
</html>Understanding Arithmetic Operators
Simple Math Operation
Exercise: Use addition to combine two numbers.
Steps:
Identify two numeric variables or values.
Use the addition operator to sum them.
Log the result.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 3;
console.log(a + b);
</script>
</body>
</html>Subtraction Operation
Exercise: Subtract one number from another and display the result.
Steps:
Select two numbers.
Use the subtraction operator between them.
View the outcome.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 3;
console.log(a - b);
</script>
</body>
</html>Multiplication and Division
Exercise: Multiply two numbers and then divide the product by a given number.
Steps:
Multiply two selected numbers.
Divide the multiplication result by another number.
Log the final answer.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 3;
let c = a * b;
let d = c / 2;
console.log(d);
</script>
</body>
</html>Modulus Operation
Exercise: Find the remainder of a division operation using modulus.
Steps:
Choose two numbers where one is not a multiple of the other.
Apply the modulus operator and then log the remainder.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 3;
let c = a * b;
let d = c % 2;
console.log(d);
</script>
</body>
</html>Exponentiation Operation
Exercise: Raise a number to a certain power using exponentiation.
Steps:
Select a base number and an exponent.
Use the exponentiation operator to calculate the power.
Log/display the result.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 3;
console.log(a ** b);
</script>
</body>
</html>Incrementing a Number
Exercise: Increase a variable’s value by one using the increment operator.
Steps:
Start with a numeric variable.
Increase it by one.
Output the new number.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
a++;
console.log(a);
</script>
</body>
</html>Decrementing a Number
Exercise: Decrease a variable’s value by one using the decrement operator.
Steps:
Use a numeric variable.
Decrease it by one.
Validate by logging the value.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
a--;
console.log(a);
</script>
</body>
</html>Chaining Arithmetic Operations
Exercise: Combine addition, multiplication, and division in one expression.
Steps:
Decide on three numerical values.
Form an expression mixing several arithmetic operators.
Compute and log the final value.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 2;
let b = 4;
let c = 6;
let d = a + b * 3 / 6;
console.log(d);
</script>
</body>
</html>Arithmetic with Variables
Exercise: Declare two number variables and perform several arithmetic operations between them.
Steps:
Create two variables with numbers.
Add, subtract, multiply, and divide them in successive steps.
Log each result separately.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let a = 15;
let b = 45;
let c = 3;
let d = (a + b) / c;
console.log(d);
</script>
</body>
</html>Calculate the Area of a Rectangle
Exercise: Write down the steps to calculate the area from given length and width values.
Steps:
Define variables for length and width.
Multiply them to get the area.
Output the computed area.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
let height = 200;
let width = 100;
let area = height * width;
console.log(area);
</script>
</body>
</html>
Leave a Reply