1. Display a Message with console.log()
Task: Use console.log() to display a simple greeting message.
Steps to Solve:
Identify what message you want to show (e.g., “Hello, JavaScript!”).
Use the console.log() method with your message as the argument.
Run your code in the browser’s console or an editor to see the output.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
console.log("Hello, There!");
</script>
</body>
</html>2. Alert a Message with window.alert()
Task: Display an alert box with a custom greeting.
Steps to Solve:
Determine the text content for the alert.
Call window.alert() or simply alert() with your text.
Test the code in your browser to see the popup.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
window.alert("This is a message from the people of the earth");
</script>
</body>
</html>3. Manipulate HTML Content using document.getElementById()
Task: Change the text content of an HTML element by its id.
Steps to Solve:
Create an HTML element with a unique id attribute.
Use document.getElementById() to access this element.
Modify its innerHTML or textContent property.
Refresh your page to observe the change.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
function change() {
document.getElementById("heading1").innerHTML = "This is the title after change";
}
</script>
<button onclick="change()">Click here to Change!</button>
</body>
</html>4. Understanding let Variable Declaration
Task: Declare a variable using let and assign it a value.
Steps to Solve:
Choose a variable name that follows valid naming conventions.
Use the let keyword to declare the variable.
Assign an initial value.
Optionally, display its value using console.log().
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
let a = 15;
let b = 15;
console.log(a + b);
</script>
</body>
</html>5. Understanding var Variable Declaration
Task: Declare a variable using var and assign it a value.
Steps to Solve:
Use the var keyword to declare a variable.
Assign a value to the variable.
Observe how var variables differ in scoping compared to let.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
var a = 15;
var b = 15;
console.log(a + b);
</script>
</body>
</html>6. Using const for Constant Variables
Task: Declare a constant using const and assign it a value.
Steps to Solve:
Use the const keyword to declare a variable that won’t change.
Try to assign a new value later to see how JavaScript handles it.
Log the result if needed.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
const variable = "value";
variable = "secondvalue";
console.log(variable);
</script>
</body>
</html>7. Basic Arithmetic Operations (Addition)
Task: Use basic arithmetic (addition) between two variables.
Steps to Solve:
Declare two numeric variables.
Create a third variable to hold the sum of the first two.
Use console.log() to display the result.
Validate your solution by checking basic math.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
var firstNumber = 12;
var secondNumber = 12;
function sum() {
let thirdNumber = firstNumber + secondNumber;
window.alert(thirdNumber);
}
</script>
<button onclick="sum()">Click on me!</button>
</body>
</html>8. Other Arithmetic Operations: Subtraction, Multiplication, Division, and Modulus
Task: Perform subtraction, multiplication, division, and modulus operations.
Steps to Solve:
Declare two numerical variables.
Compute subtraction, multiplication, division, and remainder using appropriate operators.
Log each result.
Ensure that division by zero is avoided.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="heading1">This is the title before change</h1>
<script>
var firstNumber = 12;
var secondNumber = 12;
var sub = firstNumber - secondNumber;
var mult = firstNumber * secondNumber;
var div = firstNumber / secondNumber;
console.log(div);
</script>
</body>
</html>
Leave a Reply