JavaScript-Tutorial

What is JavaScript?

JavaScript is a programming language primarily used to make websites interactive and dynamic.

With JavaScript, you can:

  • Respond to button clicks
  • Validate forms
  • Create animations
  • Update content without reloading the page
  • Build web applications, games, and even server-side software
JavaScript Syntax

Variables
let name = “Frank”;
const age = 25;
var city = “Chennai”;

  • let → value can change
  • const → value cannot change
  • var → older way (generally avoid in modern code
  • console.log(“Hello World”);
Data Types

let name = “Frank”; // String
let age = 25; // Number
let isStudent = true; // Boolean
let marks = null; // Null
let data; // Undefined

Operators

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a – b); // 5
console.log(a * b); // 50
console.log(a / b); // 2

If Statementlet age = 18;

if (age >= 18) {
console.log(“Adult”);
} else {
console.log(“Minor”);
}

Loops

For Loop

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

While Loop

 
let i = 1;

while (i <= 5) {
console.log(i);
i++;
}

 

7. Functions

 
function greet(name) {
    return "Hello " + name;
}

console.log(greet(“Frank”));

 

Arrow Function

 
const greet = (name) => {
    return "Hello " + name;
};
 

8. Arrays

 
let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);

 

Output:

 
Apple
 

9. Objects

 
let student = {
    name: "Frank",
    age: 25,
    course: "JavaScript"
};

console.log(student.name);

 

10. Events

 
<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
alert(“Button Clicked!”);
}
</script>

 
 
DOM Manipulation

<p id=”demo”>Hello</p>

<script>
document.getElementById(“demo”).innerHTML = “Welcome!”;
</script>

Template Literals

Instead of string concatenation:

 
let name = "Frank";
let age = 25;

console.log(`My name is ${name} and I am ${age} years old.`);


Destructuring

Arrays

 
const colors = ["Red", "Blue", "Green"];

const [first, second] = colors;

console.log(first);
console.log(second);
 

Objects

 
const student = {
    name: "Frank",
    course: "JavaScript"
};

const { name, course } = student;

console.log(name);

3. Spread Operator (…)

 
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2);
 

Output:

 
[1, 2, 3, 4, 5]
 

4. Rest Parameters

 
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(10, 20, 30));
 

5. Arrow Functions

 
const square = num => num * num;

console.log(square(5));
 

6. Array Methods

map()

 
const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
 

filter()

 
const ages = [15, 18, 22, 12];

const adults = ages.filter(age => age >= 18);

console.log(adults);
 

reduce()

 
const nums = [10, 20, 30];

const total = nums.reduce((sum, num) => sum + num, 0);

console.log(total);
 

7. Classes and Objects

 
class Student {
    constructor(name, course) {
        this.name = name;
        this.course = course;
    }

    display() {
        console.log(`${this.name} studies ${this.course}`);
    }
}

const s1 = new Student("Frank", "JavaScript");
s1.display();
 

8. Promises

 
const myPromise = new Promise((resolve, reject) => {
    let success = true;

    if (success) {
        resolve("Success");
    } else {
        reject("Failed");
    }
});

myPromise
    .then(result => console.log(result))
    .catch(error => console.log(error));
 

9. Async / Await

 
async function getData() {
    return "Data Loaded";
}

async function showData() {
    const data = await getData();
    console.log(data);
}

showData();
 

10. Fetch API

 
fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));
 

Async Version

 
async function loadUsers() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
        );

        const users = await response.json();

        console.log(users);
    } catch(error) {
        console.log(error);
    }
}
 

11. DOM Event Listeners

 
<button id="btn">Click</button>

<script>
document.getElementById("btn")
.addEventListener("click", function() {
    alert("Button clicked");
});
</script>
 
Give feedback

12. Local Storage

 
localStorage.setItem("name", "Frank");

const user = localStorage.getItem("name");

console.log(user);
 

13. JSON

 
const student = {
    name: "Frank",
    age: 25
};

const jsonData = JSON.stringify(student);

console.log(jsonData);
 

Convert back:

 
const obj = JSON.parse(jsonData);

console.log(obj.name);
 

Mini Project Example: Simple Counter

 
<h1 id="count">0</h1>

<button onclick="increase()">+</button>
<button onclick="decrease()">-</button>

<script>
let count = 0;

function increase() {
    count++;
    document.getElementById("count").innerText = count;
}

function decrease() {
    count--;
    document.getElementById("count").innerText = count;
}
</script>