javascript

JavaScript Language Tutorial

1. What is JavaScript?

JavaScript is a versatile, high-level programming language commonly used for creating dynamic and interactive web pages. It can run on the client-side and server-side (e.g., with Node.js).

2. Setting up JavaScript

1. Ensure you have a text editor (e.g., VS Code) and a web browser (e.g., Chrome).
2. Create an HTML file and include a <script> tag to write JavaScript or link an external JavaScript file.

3. Your First JavaScript Code

Add the following code inside a <script> tag in an HTML file:

<script>
    console.log("Hello, World!");
</script>

Open the HTML file in a browser and check the output in the browser's developer console (usually accessible with F12).

4. Variables and Data Types

JavaScript variables are declared using var, let, or const. Common data types include:

let x = 10; // Number
let y = 3.14; // Float
let name = "JavaScript"; // String
let isAvailable = true; // Boolean

console.log(`x = ${x}, y = ${y}, name = ${name}, isAvailable = ${isAvailable}`);

5. Conditional Statements

JavaScript supports if, else if, and else statements.

let num = 10;
if (num > 0) {
    console.log("Positive number");
} else if (num === 0) {
    console.log("Zero");
} else {
    console.log("Negative number");
}

6. Loops

JavaScript supports for, while, and for...of loops.

For Loop:

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

While Loop:

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

7. Functions

Functions in JavaScript allow for reusable code blocks.

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("Alice");

8. Arrays

Arrays in JavaScript can hold multiple values and support various methods.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

9. Object-Oriented JavaScript

JavaScript supports object-oriented programming using classes.

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

    displayInfo() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}

const s1 = new Student("John", 21);
s1.displayInfo();

10. DOM Manipulation

JavaScript allows you to manipulate the Document Object Model (DOM).

document.getElementById("myElement").innerText = "Hello, DOM!";

11. Asynchronous JavaScript

JavaScript handles asynchronous tasks with Promises and async/await.

function fetchData() {
    return new Promise(resolve => setTimeout(() => resolve("Data fetched"), 2000));
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData();

12. JavaScript Libraries and Frameworks

Popular JavaScript libraries and frameworks include:

• React: Library for building user interfaces.
• Vue.js: Progressive JavaScript framework.
• Angular: Platform for building mobile and desktop web applications.
• Node.js: JavaScript runtime for server-side development.