JavaScript Basic Revision

-

Lesson 1: Introduction

  • JavaScript is a programming language used to make web pages interactive.

  • It runs on the browser and can manipulate HTML and CSS dynamically.

Example: Displaying an Alert

alert("Welcome to JavaScript!");

Output: A pop-up alert saying "Welcome to JavaScript!"

Lesson 2: Hello World

  • The first step in learning JavaScript is writing a simple "Hello World" program.

Example:

console.log("Hello, World!");

Output:

Hello, World!

  • console.log() prints messages to the browser's console.

Lesson 3: Arrays

  • Arrays store multiple values in a single variable.

Example:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);

Output:

Apple

  • Indexing starts at 0.

Lesson 4: Loops

  • Loops execute a block of code multiple times.

Example: For Loop

for (let i = 1; i <= 5; i++) {
    console.log("Count: " + i);
}

Output:

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

Lesson 5: Objects

  • Objects store key-value pairs.

Example:

let person = {
    name: "John",
    age: 25
};
console.log(person.name);

Output:

John

Lesson 6: Functions

  • Functions allow reusable code.

Example:

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

Output:

Hello, Alice!

Lesson 7: Closure

  • A closure is a function inside another function that remembers its parent’s variables.

Example:

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
let increment = outer();
increment();
increment();

Output:

1
2

  • The inner function remembers count even after outer has executed.


 Lesson 8: Promises

  • Promises are used to handle asynchronous operations in JavaScript.

  • They have three states:

    • Pending: Initial state, not yet resolved or rejected.

    • Resolved (Fulfilled): Operation completed successfully.

    • Rejected: Operation failed.

Example 1: Basic Promise

let promise = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        if (success) {
            resolve("Promise Resolved!");
        } else {
            reject("Promise Rejected!");
        }
    }, 2000);
});

promise.then(response => console.log(response))
       .catch(error => console.log(error));

Output after 2 seconds:

Promise Resolved!

  • .then() executes when the promise is resolved.

  • .catch() handles errors when the promise is rejected.

Example 2: Chaining Promises

function firstTask() {
    return new Promise(resolve => {
        setTimeout(() => resolve("First task done!"), 1000);
    });
}

function secondTask() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Second task done!"), 1000);
    });
}

firstTask().then(response => {
    console.log(response);
    return secondTask();
}).then(response => console.log(response));

Output:

First task done!
Second task done!

  • This demonstrates executing tasks sequentially.

Lesson 9: Async/Await

  • async functions return a promise.

  • await pauses execution until the promise resolves.

Example 1: Fetching Data

async function fetchData() {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    let data = await response.json();
    console.log(data);
}
fetchData();

Output: (Example JSON Response)

{
  "userId": 1,
  "id": 1,
  "title": "sample title",
  "body": "sample body text"
}

  • await ensures data is retrieved before continuing.

Example 2: Handling Errors

async function fetchWithErrorHandling() {
    try {
        let response = await fetch('https://wrongurl.com');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("Error fetching data", error);
    }
}
fetchWithErrorHandling();

Output:

Error fetching data TypeError: Failed to fetch

  • try...catch handles errors gracefully.

Lesson 10: JavaScript this Keyword

The this keyword in JavaScript refers to the object that is executing the current function. The value of this depends on where it is used.

1. this in Global Context

console.log(this);

Output:
In a browser, this refers to the window object.

2. this in an Object Method

let person = {
    name: "Alice",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};
person.greet();

Output:

Hello, Alice

Here, this.name refers to Alice because this points to the person object.

3. this in a Function (Strict Mode)

"use strict";
function show() {
    console.log(this);
}
show();

Output:
undefined (because strict mode prevents this from referring to window).

4. this in Arrow Functions

Arrow functions do not have their own this. They inherit this from their surrounding scope.

let obj = {
    value: 10,
    arrowFunc: () => {
        console.log(this.value);
    }
};
obj.arrowFunc();

Output:
undefined (since this refers to the outer scope, which is window).

Lesson 11: JavaScript Form Validation

Form validation ensures that users provide valid input before submitting a form.

1. Simple Form Validation


<form onsubmit="return validateForm()">
    Name: <input type="text" id="name">
    <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
    let name = document.getElementById("name").value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>

Explanation:

  • The form calls validateForm() on submission.

  • If the input is empty, it shows an alert and prevents submission.

2. Checking Input Length

function checkLength() {
    let input = document.getElementById("name").value;
    if (input.length < 3) {
        alert("Name must be at least 3 characters long.");
        return false;
    }
}

Lesson 12: Regular Expressions (RegEx) in JavaScript

Regular Expressions help in pattern matching and string validation.

1. Testing a Simple Pattern

let pattern = /hello/;
console.log(pattern.test("hello world"));

Output:

true

The .test() method checks if "hello" exists in the string.

2. Validating a Phone Number

let phonePattern = /^[0-9]{10}$/;
console.log(phonePattern.test("9876543210"));

Output:

true

The pattern ensures the number contains exactly 10 digits.

3. Extracting Words from a String

let text = "JavaScript is powerful!";
let words = text.match(/\b\w+\b/g);
console.log(words);

Output:

["JavaScript", "is", "powerful"]

It extracts words from the sentence.

Lesson 13: Email Validation using JavaScript

Email validation ensures a user enters a properly formatted email.

1. Basic Email Validation

function validateEmail() {
    let email = document.getElementById("email").value;
    let regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    
    if (!regex.test(email)) {
        alert("Invalid email address");
        return false;
    }
}

2. Checking Email with a Form


<form onsubmit="return validateEmail()">
    Email: <input type="text" id="email">
    <input type="submit" value="Check Email">
</form>

This ensures only valid emails are accepted.

__________________________________________________________

Lesson 14: Callbacks

  • A callback function is a function passed as an argument to another function.

Example:

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function done() {
    console.log("Callback executed.");
}

greet("Alice", done);

Output:

Hello, Alice

Callback executed.

------------------------------------------------------------------------

Lesson 15: Error Handling

  • try...catch is used to handle errors in JavaScript.

Example:

try {
    let num = undefined;
    console.log(num.length);
} catch (error) {
    console.log("Error caught: " + error.message);
}

Output:

Error caught: Cannot read properties of undefined

Lesson 16: Event Loop

  • The JavaScript event loop handles asynchronous tasks and executes callbacks.

Example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout Callback");
}, 0);

console.log("End");

Output:

Start
End
Timeout Callback

  • Even though the timeout is 0, the callback runs after synchronous code.

___________________________________________________________________

Lesson 17: JavaScript DOM Tutorial

  • The Document Object Model (DOM) represents an HTML document as a tree structure.

  • JavaScript manipulates the DOM to modify webpages dynamically.

Selecting Elements

Example 1: Changing Content

document.getElementById("demo").innerHTML = "Hello, DOM!";

Example 2: Changing Style

document.getElementById("demo").style.color = "red";

Creating and Appending Elements

Example 3: Adding a New Element

let newPara = document.createElement("p");
newPara.innerText = "This is a new paragraph";
document.body.appendChild(newPara);

Output:

A new paragraph appears on the webpage.

Event Listeners

Example 4: Button Click Event

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});

  • Listens for a click event and triggers an alert.

Modifying Classes

Example 5: Toggling Class

document.getElementById("box").classList.toggle("highlight");

  • Toggles a CSS class for styling.

Comments

Post a Comment

Popular Posts

WRITING GOALS CHALLENGE ♥️#MAY

-
WRITING GOALS—(15 Mins/Day from May 1, 2025) Week 1 (May 1 - May 6) – Writing Fundamentals Learn grammar, vocabulary, and sentence structure for clarity. Study types of writing (blogging, copywriting, technical writing). Write short paragraphs on simple topics to practice structure. Daily Task : Write 100–200 words on any topic. Weekly Task (by May 6) : Publish a short blog/article on Medium or a personal blog. 1  Writing Style: Informative / Blogging 2  Writing Style: Personal Essay / Opinion 3  Writing Style: Technical Writing 4  Writing Style: Copywriting (Persuasive/Marketing) 5  Writing Style: Creative Writing (Narrative/Reflective) 6  Writing Style: Report Writing (Formal/Informative) Week 2 (May 7–May 14) – SEO & Storytelling Practice SEO writing (keyword research, headlines). Learn storytelling techniques for engaging content. Write product descriptions, blog posts, and technical articles. Weekly Task: Write a 500-word article and publish it. Go...
Read more

THE ANGEL FROM GOD

-
THE ANGEL FROM GOD “Clean your room, Lily,” said Rahab, her mom. Lily nodded her head, with her eyes focused on her mobile, lying down with ease and irresponsibility over her works and studies. After an hour, she remembered to finish an assignment ,with an alarm. With a battle in her mind, for procrastinating both cleaning and assignment works, she got up from bed and kept her mobile near her watch. Suddenly she went into a class, seeing herself in that room. She was amazed to see it. She can see that there’s an English class going on, she had a jerk in her heart. Then after 10 minutes , two teams finished their speeches. It was her team’s turn. Her friend took the first part and presented it. Lily noticed that her friend presented a huge part of her (Lily) script. Lily became nervous. It was her turn. Few students & her teacher’s eyes were on her. Lily’s heart rate increased. She repeated her part ,and forgot a large part of her script , due to fear. Her teacher scolded her for t...
Read more

A1 & A2 SPANISH COMPLETION #2-WEEK CHALLENGE

-
 DAY 1   DAY-2    DAY-3    DAY-4     DAY-5     DAY-6      DAY-7 DAY-8   DAY-9   DAY-10   DAY-11   DAY-12   DAY-13   DAY-14 DAY-15 <REVIEW OF DAY-14> COMPLETE REVIEW OF 15 DAYS 🇪🇸 Spanish A1 + A2 – 2-Week Syllab us (15 Minutes/Day) 📆 WEEK 1 – A1 Level: Survival Spanish Day Topic Focus ✅ Day 1 Greetings & Introductions                                  Hola, ¿Cómo estás?, Me llamo, Tú vs Usted ✅ Day 2 Ser vs Estar Identity vs Mood, Conjugation, Usage ✅ Day 3 Numbers + Age 1–100, Saying your age: “Tengo 20 años ✅  Day 4 Days, Months, Seasons, Dates ¿Qué día es hoy?, el lunes, enero, primavera ✅ Day 5 Time & Daily Routine ¿Qué hora es?, a las ocho, Me levanto a las… ✅ Day 6 Family & People Mi madre, Mi hermano, ¿Tienes hermanos? ✅ Day 7 Review + Practice Dialogue practice, questions, ...
Read more

A Journey Beyond Borders

-
Aboard a grand vessel that rocked gently with the tides, people from all walks of life—farmers, teachers, miners, artists, software developers, soldiers, merchants, healers, tailors, poets, construction workers, dancers, engineers, and countless others—embarked on a 30-day voyage across oceans. The ship echoed with the voices of different tongues, laughter, songs of home, and hopes for the future. What united them wasn’t their past, but a shared anticipation of change. But destiny took a sharp turn. After reaching the edge of their journey, the ship suffered irreparable mechanical failure. With urgency and political interest, a nearby nation—Aidni offered to sponsor a flight to take these people home or at least to safety. The country broadcasted its decision with pride. The state-run channels of Aidni framed it as a humanitarian act, a generous gesture in an election season where every vote mattered. However, behind closed doors, dissent brewed. “This is a strategic mistake,” grumbled...
Read more

THE BROKEN WING

-
Novi, from New Gate, was headed to Bell City to inaugurate the Independent Editorial Company (IEC), which started as a blog. The blog gained popularity after continuous political victories and stirred social issues such as caste, religious politics, financial biases, and unfair justice. It remained unnoticed for a year until a controversial tweet by her mother, Helen Novina, went viral. The tweet put the blog in the spotlight, making Helen the movement's catalyst, though she was tragically killed later. Upon arriving in Bell City, Novi took an auto ride with a familiar driver—their silent exchange speaking volumes. He was once an advocate who had resigned after failing to get justice for a woman and her daughter. And here she was, attending the conference with a bold face and her chin held high. At the IEC, Novi was greeted and proceeded to deliver her speech. “Never hide your passion or honesty. In your journey, your audience may be risking their lives to support you. Think about ...
Read more

Basic Greetings & Phrases - es

-
  Let's learn Spanish from the basics together! : Basic Greetings & Phrases; 🔹 Part 1: Vocabulary 1. Greetings – Saludos Hola – Hello Buenos días – Good morning Buenas tardes – Good afternoon Buenas noches – Good night Bienvenido/a – Welcome (“o” for males, “a” for females) --- 2. Asking How Someone Is ¿Cómo estás? – How are you? (informal) ¿Qué tal? – How’s it going? (very casual) ¿Cómo te va? – How’s it going for you? (literal: How is it going to you?) ¿Qué pasa? – What’s up? (very casual) Bien, gracias – Good, thank you --- 3. Introductions – Presentaciones ¿Cuál es tu nombre? – What is your name? (formal structure, but used less often) ¿Cómo te llamas? – What’s your name? (literal: What are you called? More commonly used) Mi nombre es… – My name is… Me llamo... – My name is… (literal: I call myself…) Mucho gusto – Nice to meet you Encantado/a – Nice to meet you (“Encantado” if you're male, “Encantada” if you're female) --- 4. Politeness – Cortesía Por favor – Pleas...
Read more

Here there's one, who is much faithful than ourselves, and will lead you till the end...

-
A POEM  "Your plans are made Before i was made But every single burden, how i'm gonna face? Everything is big, Everything is great But every single burden, how i'm gonna face? You, replied me with "Come to me, all you who are weary and burdened, and I will give you rest. " Made me stay in your plans Since you made a path already & words to console me ready!"  ~Tafflin * Don't worry about the burdens & struggles you need to go through, to fulfill your purpose that God has assigned for you... 1. "He will guide you, cause he said" Psalm 32:8: "I will instruct you and teach you in the way you should go; I will counsel you with my loving eye on you." 2. "He will give you wisdom, cause he said" James 1:5: "If any of you lacks wisdom, let him ask of God, who gives to all liberally and without reproach, and it will be given to him." 3. "He cares for you, cause he said" 1 Peter 5:7: "Casting all your...
Read more

C Program BASICS Revision

-
  ✅ First C Program Structure of a C Program ----------------------- #include <stdio.h>  // Preprocessor directive int main() {        // Main function     printf("Hello, World!");  // Output statement     return 0;       // Return statement } -------------------------- ✅ Tokens in C Tokens are the smallest individual units in a C program. Types of Tokens: Keywords → Predefined words (e.g., int, return, if, else, break ) Identifiers → Names given to variables, functions (e.g., main, sum, total ) Constants → Fixed values (e.g., 5, 10.5, 'A' ) Operators → Symbols for operations (e.g., + , - , * , / ) Special Symbols → (e.g., { } , ; ( ) [ ] ) Strings → Sequence of characters in double quotes (e.g., "Hello" ) ✅ Functions in C Function is a block of code that performs a specific task. Syntax: #include <stdio.h> void greet() { // Function without return type print...
Read more