Exercise 1: Display “Hello, World!” with innerHTML
Task:
Create an HTML element (like a div or span) with an id, and using JavaScript, insert the text “Hello, World!” into it with innerHTML.
Steps to Solve:
In your HTML file, create an element with a unique id (for example, <div id="output"></div>).
In your JavaScript, select the element using document.getElementById("output").
Set the element’s innerHTML to “Hello, World!” (i.e., element.innerHTML = "Hello, World!";).
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
<div id="output"></div>
document.getElementById("output").innerHTML = "Hello, World!";
</script>
</body>
</html>Exercise 2: Write a Message Using document.write()
Task:
Use document.write() to display a line of text on the page when it loads.
Steps to Solve:
Open your JavaScript file or script tag.
Call document.write("This is a message from document.write()!");
Save and open your HTML file in a browser to see the output.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
document.write("This is a message from document.write()!");
</script>
</body>
</html>Exercise 3: Alert a Greeting
Task:
Use window.alert() to display a greeting message when the page loads.
Steps to Solve:
Create a JavaScript file or add a <script> section in your HTML.
Use window.alert("Welcome to learning JavaScript!");
Refresh your page to see the alert popup.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
window.alert("Welcome to learning JavaScript!");
</script>
</body>
</html>Exercise 4: Log a Message to the Browser Console
Task:
Use console.log() to print a message to the browser’s console.
Steps to Solve:
Open your script file or <script> tag in your HTML.
Write console.log("Logging a test message"); in your code.
Open your browser’s developer console (usually by pressing F12 or right-clicking and selecting “Inspect”) to see the message.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
console.log("Logging a test message");
</script>
</body>
</html>Exercise 5: Display a Variable via innerHTML
Task:
Declare a variable containing your favorite quote and output it into an HTML element using innerHTML.
Steps to Solve:
Declare a variable, for example: var quote = "The only limit is your mind.";
In your HTML, create an element with an id (e.g., <p id="quoteArea"></p>).
Use document.getElementById("quoteArea").innerHTML = quote; in JavaScript.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h2 id="h2"></h2>
<script>
var theQuote = "This is a Quote";
document.getElementById("h2").innerHTML = theQuote;
</script>
</body>
</html>Exercise 6: Concatenate Two Strings and Display Using document.write()
Task:
Write two different strings (e.g., first name and last name), concatenate them, and then use document.write() to display the full name.
Steps to Solve:
Declare two variables:var firstName = "John";var lastName = "Doe";
Concatenate the strings (e.g., var fullName = firstName + " " + lastName;).
Use document.write("Full Name: " + fullName); to display the result.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h2 id="h2"></h2>
<script>
var stringOne = "Mateen";
var stringTwo = "Khadem";
document.write(stringOne + " " + stringTwo);
</script>
</body>
</html>Exercise 7: Array of Favorite Movies Displayed via innerHTML
Task:
Create an array of your favorite movies and display them as a comma-separated list in an HTML element.
Steps to Solve:
Declare an array:var movies = ["Inception", "The Matrix", "Interstellar"];
Join the array into a string using movies.join(", ").
In the HTML, create an element with an id (e.g., <div id="moviesList"></div>).
Set the element’s innerHTML to the joined string:document.getElementById("moviesList").innerHTML = movies.join(", ");
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h2 id="h2"></h2>
<script>
var favMovies = ["Interstellar", "The Silo", "Severance"];
document.getElementById("h2").innerHTML = favMovies.join(", ");
</script>
</body>
</html>Exercise 8: Display Array Length in the Console
Task:
Create an array and use console.log() to print the length (number of elements) of the array.
Steps to Solve:
Declare an array: var colors = ["red", "green", "blue"];
Determine the length: var length = colors.length;
Log the length: console.log("Array length is: " + length);
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
var ser = ["Ratched", "The Silo", "Severance"];
var length = ser.length;
console.log("The Array is " + length + " Series Long!");
</script>
</body>
</html>Exercise 9: Change HTML Content on Click
Task:
Create a button in HTML that, when clicked, will change the content of a paragraph using innerHTML.
Steps to Solve:
In HTML, create a button (<button onclick="changeText()">Click Me</button>) and a paragraph (<p id="para">Original Text</p>).
In your script, write the function:function changeText() { document.getElementById("para").innerHTML = "Text has been changed!"; }
Test by clicking the button.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<p id="paragraph">This is Before Change</p>
<script>
function change(){
document.getElementById("paragraph").innerHTML = "This is After Change";
}
</script>
<button onclick="change()">Change!</button>
</body>
</html>Exercise 10: Alert Array Elements
Task:
Create an array of three fruits and use window.alert() to display the first fruit in the array.
Steps to Solve:
Declare an array: var fruits = ["Apple", "Banana", "Cherry"];
Select the first element (fruits[0]).
Use window.alert("The first fruit is " + fruits[0]);.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
var fruits = ["Orange", "Apple", "Banana"];
window.alert(fruits[0]);
</script>
</body>
</html>Exercise 11: Check if a Variable is Undefined
Task:
Declare a variable without assigning a value and use console.log() to print out a message saying whether the variable is undefined or not.
Steps to Solve:
Declare a variable: var myVar;
Use an if-statement to check if it is undefined:if (typeof myVar === "undefined") { console.log("myVar is undefined"); } else { console.log("myVar is defined"); }
Run it and check the console.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
var variable;
if (typeof variable === "undefined"){
console.log("variable is undefined");
} else {
console.log("variable is defined");
}
</script>
</body>
</html>Exercise 12: Simple Calculator with Prompt Input
Task:
Prompt the user to enter two numbers, add them together, and display the result via an alert.
Steps to Solve:
Use prompt() to get two numbers:var num1 = parseFloat(prompt("Enter first number:")); var num2 = parseFloat(prompt("Enter second number:"));
Calculate the sum: var sum = num1 + num2;
Then use window.alert("The sum is " + sum);.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
var firstNumber = parseFloat(prompt("Enter the first Number: "));
var secondNumber = parseFloat(prompt("Enter the second Number: "));
var sum = firstNumber + secondNumber;
window.alert("The sum is " + sum);
</script>
</body>
</html>Exercise 13: Swap the Content of Two HTML Elements
Task:
Use two HTML elements (like two paragraphs), and write a function that swaps their innerHTML values when a button is clicked.
Steps to Solve:
Create two paragraphs with different ids (e.g., <p id="first">First</p> and <p id="second">Second</p>) and a button with an onclick event (e.g., <button onclick="swapContent()">Swap</button>).
In JavaScript, write a function:function swapContent() { var first = document.getElementById("first").innerHTML; var second = document.getElementById("second").innerHTML; document.getElementById("first").innerHTML = second; document.getElementById("second").innerHTML = first; }
Test by clicking the button.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<p id="p1">This is The First Paragraph</p>
<p id="p2">This is The Second Paragraph</p>
<script>
function swapContent() {
var first = document.getElementById("p1").innerHTML;
var second = document.getElementById("p2").innerHTML;
document.getElementById("p1").innerHTML = second;
document.getElementById("p2").innerHTML = first;
}
</script>
<button onclick="swapContent()">Swap</button>
</body>
</html>Exercise 14: Prompt User Name and Display a Personalized Message
Task:
Prompt the user to enter their name, then display a welcome congratulatory message on the page using innerHTML.
Steps to Solve:
Use prompt() to get the user’s name:var userName = prompt("Please enter your name:");
Construct a message, for example: var message = "Welcome, " + userName + "!";
Use innerHTML to display:document.getElementById("welcomeMessage").innerHTML = message;
In HTML, add an element: <div id="welcomeMessage"></div>.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1 id="welcome"></h1>
<script>
var name = prompt("What is your name: ");
document.getElementById("welcome").innerHTML = "Welcome to your own website " + name;
</script>
</body>
</html>Exercise 15: Change Text Color Using JavaScript
Task:
Create a button that when pressed will change the color of the text in an HTML element using JavaScript.
Steps to Solve:
In your HTML file, add an element with text (e.g., <p id="colorText">Change my color!</p>) and a button (<button onclick="changeColor()">Change Color</button>).
In your JavaScript, write a function:function changeColor() { document.getElementById("colorText").style.color = "blue"; }
Click the button to see the text color update.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<p id="text">Change my color please!</p>
<script>
function changeColor() {
document.getElementById("text").style.color = "blue";
}
</script>
<button onclick="changeColor()">Change The Color!</button>
</body>
</html>Exercise 16: Create and Use Multiple Variables in an Alert
Task:
Declare three variables (name, age, and city), then combine them into a sentence and display the sentence using an alert.
Steps to Solve:
Declare the variables, for example:var name = "Bob"; var age = 30; var city = "New York";
Construct a sentence:var message = name + " is " + age + " years old and lives in " + city + ".";
Use window.alert(message); to display it.
Test by opening your web page.
<html>
<head>
<title>Exercise</title>
</head>
<body>
<script>
var name = prompt("What is your name? ");
var age = prompt("How old are you? ");
var city = prompt("Where are you from? ");
window.alert("So you are " + name + ", you are " + age + " and from " + city);
</script>
</body>
</html>
Leave a Reply