// JavaScript Tutorial: Full Coverage
// ====== INTRODUCTION ======
// JavaScript is a versatile programming language used for web development.
// It allows developers to create dynamic and interactive web pages.
console.log("Welcome to the JavaScript Tutorial!"); // Display a message in the console
// ====== VARIABLES ======
// Variables store data. Use let, const, or var to declare variables.
let name = "Alice"; // String
const age = 25; // Number (constant)
var isStudent = true; // Boolean
console.log("Name:", name);
console.log("Age:", age);
console.log("Is Student:", isStudent);
// ====== DATA TYPES ======
// JavaScript supports different data types, including string, number, boolean, null, undefined, and objects.
let score = 90; // Number
let message = "Hello, JavaScript!"; // String
let isActive = false; // Boolean
let value = null; // Null
let notDefined; // Undefined
console.log(typeof score); // number
console.log(typeof message); // string
// ====== OPERATORS ======
// Arithmetic Operators: +, -, *, /, %
let a = 10, b = 3;
console.log("Addition:", a + b);
console.log("Division:", a / b);
// Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
console.log(a > b); // true
console.log(a === "10"); // false
// Logical Operators: &&, ||, !
console.log(a > b && b < 5); // true
// Bitwise Operators: &, |, ^, ~, <<, >>, >>>
console.log(a & b); // Bitwise AND
console.log(a | b); // Bitwise OR
// ====== CONTROL STRUCTURES ======
// If-Else Statement
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 75) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}
// Switch Statement
switch (score) {
case 90:
console.log("Perfect score!");
break;
case 75:
console.log("Good job!");
break;
default:
console.log("Keep trying!");
}
// Loops
// For Loop
for (let i = 1; i <= 5; i++) {
console.log("Iteration:", i);
}
// While Loop
let counter = 1;
while (counter <= 3) {
console.log("Count:", counter);
counter++;
}
// Do-While Loop
let num = 0;
do {
console.log("Do-While Loop Value:", num);
num++;
} while (num < 3);
// ====== FUNCTIONS ======
// Functions perform tasks and return values.
function greetUser(username) {
return `Hello, ${username}!`;
}
console.log(greetUser(name));
// Arrow Functions (ES6)
const square = (num) => num * num;
console.log("Square of 4:", square(4));
// Function Expressions
const multiply = function (x, y) {
return x * y;
};
console.log("Multiplication Result:", multiply(3, 4));
// ====== OBJECTS ======
// Objects represent real-world entities.
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function() {
console.log("Hi, I'm " + this.firstName);
}
};
person.greet();
// Accessing Object Properties
console.log(person.firstName);
// Adding and Deleting Properties
person.country = "USA";
delete person.age;
console.log(person);
// ====== ARRAYS ======
// Arrays store collections of data.
let colors = ["red", "green", "blue"];
colors.push("yellow"); // Add an element
console.log(colors[1]); // Access an element
// Array Methods: map, filter, reduce
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
let evenNumbers = numbers.filter(num => num % 2 === 0);
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(doubled);
console.log(evenNumbers);
console.log(sum);
// ====== CLASSES ======
// Classes are templates for creating objects.
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
const dog = new Animal("Buddy", "Dog");
dog.makeSound();
// ====== EVENTS ======
// Handle user interactions with events.
// Example in a browser environment
// document.getElementById("btn").addEventListener("click", function() {
// alert("Button clicked!");
// });
// ====== DOM MANIPULATION ======
// Access and modify web page content.
// document.querySelector("h1").textContent = "Welcome to JavaScript!";
// ====== PROMISES AND ASYNC/AWAIT ======
// Promises handle asynchronous operations.
let fetchData = new Promise((resolve, reject) => {
let success = true;
if (success) resolve("Data fetched successfully!");
else reject("Error fetching data");
});
fetchData
.then(message => console.log(message))
.catch(error => console.error(error));
// Async/Await
async function getData() {
try {
let result = await fetchData;
console.log(result);
} catch (error) {
console.error(error);
}
}
getData();
// ====== ERROR HANDLING ======
// Use try-catch blocks to handle errors.
try {
let x = y + 1; // y is undefined
} catch (error) {
console.error("An error occurred:", error.message);
}
// ====== MODULES ======
// Export and Import (ES6 Modules)
// export function add(a, b) {
// return a + b;
// }
// import { add } from './math.js';
// ====== REGULAR EXPRESSIONS ======
// Regular expressions are patterns used for matching text.
let regex = /hello/i; // Case-insensitive
console.log(regex.test("Hello World")); // true
// ====== CONCLUSION ======
// JavaScript is vast and powerful. Explore frameworks like React, Angular, or Node.js for advanced applications.
console.log("Thank you for learning JavaScript!");