Tutorial 1: Introduction to JavaScript
Objective: Understand the basics of JavaScript and how to include it in an HTML document.
Code Example:
JavaScript Introduction
Hello, JavaScript!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Introduction</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
// JavaScript code goes here
alert("Welcome to JavaScript!");
</script>
</body>
</html>Explanation:
- JavaScript code is included within
<script>tags in an HTML document. - The
alert()function displays a pop-up alert with the specified message.
Tutorial 2: Variables and Data Types
Objective: Learn how to declare variables and work with different data types in JavaScript.
Code Example:
// Declare variables
let message = “Hello, JavaScript!”;
let number = 42;
let isTrue = true;
// Display variables
console.log(message);
console.log(number);
console.log(isTrue);
Explanation:
letis used to declare variables.- Variables can hold strings, numbers, booleans, and more.
console.log()prints output to the browser console.
Tutorial 3: Functions and Control Flow
Objective: Understand how to create functions and control the flow of a program.
Code Example:
// Function declaration
function greet(name) {
return “Hello, ” + name + “!”;
}
// Function call
let greeting = greet(“John”);
console.log(greeting);
// Conditional statement
let age = 25;
if (age >= 18) {
console.log(“You are an adult.”);
} else {
console.log(“You are a minor.”);
}
Explanation:
- Functions are defined using
functionkeyword. - Functions can take parameters and return values.
- Conditional statements (
if,else) allow you to control the program flow based on conditions.
Tutorial 4: Arrays and Loops
Objective: Learn about arrays and how to use loops in JavaScript.
Code Example:
javascriptCopy code
// Array declaration let colors = ["red", "green", "blue"]; // Loop through array elements for (let i = 0; i < colors.length; i++) { console.log(colors[i]); } // Alternative: forEach loop colors.forEach(function(color) { console.log(color); });
Explanation:
- Arrays can store multiple values.
forloop iterates over array elements using an index.forEachloop simplifies the process of iterating over array elements.
Tutorial 5: DOM Manipulation
Objective: Understand how to manipulate the Document Object Model (DOM) using JavaScript.
Code Example:
htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM Manipulation</title> </head> <body> <h1 id="heading">Hello, DOM!</h1> <script> // Change text content document.getElementById("heading").textContent = "Updated heading"; // Create a new element let newParagraph = document.createElement("p"); newParagraph.textContent = "This is a new paragraph."; // Append the new element to the body document.body.appendChild(newParagraph); </script> </body> </html>
Explanation:
- The DOM represents the structure of an HTML document as a tree of objects.
document.getElementById()selects an element by its ID.createElement()creates a new HTML element.appendChild()adds the new element to the DOM.