JavaScript Malayalam Tutorial | Yes Tech Media |

Introduction

This tutorial provides a comprehensive overview of JavaScript, as presented in a Malayalam-language tutorial by Yes Tech Media. It covers fundamental concepts, including variables, data types, operators, control structures, functions, and the Document Object Model (DOM). This guide is perfect for beginners looking to grasp the basics of JavaScript programming.

Step 1: Write Your First Program

• Open a text editor or an Integrated Development Environment (IDE).
• Type the following code to create a simple program that displays a message:

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

• Save the file with a .js extension.
• Run the program using Node.js or in your browser’s console.

Step 2: Understand Comments

• Comments are essential for documenting your code. Use them to explain sections of your code.
• Single-line comments start with //.

// This is a single-line comment

• Multi-line comments are enclosed within /* */.

/*
This is a multi-line comment
*/

Step 3: Learn About Variables and Data Types

• Declare variables using let, const, or var.
• Common data types include:
  • String: Represents text (e.g., "Hello")
  • Number: Represents numeric values (e.g., 42)
  • Boolean: Represents true or false values (e.g., true)

Example of declaring variables:

let name = "John";
const age = 30;

Step 4: Explore Arithmetic Operators

• Arithmetic operators are used for mathematical calculations:
  • Addition: +
  • Subtraction: -
  • Multiplication: *
  • Division: /
  • Modulus: %

Example:

let sum = 5 + 3; // 8

Step 5: Understand Assignment Operators

• Assignment operators assign values to variables:
  • =: Assigns a value
  • +=: Adds and assigns
  • -=: Subtracts and assigns

Example:

let x = 10;
x += 5; // x is now 15

Step 6: Learn Comparison Operators

• Comparison operators compare two values:
  • Equal: ==
  • Strict equal: ===
  • Not equal: !=
  • Greater than: >
  • Less than: <

Example:

if (x > 10) {
    console.log("x is greater than 10");
}

Step 7: Use Logical Operators

• Logical operators combine multiple conditions:
  • AND: &&
  • OR: ||
  • NOT: !

Example:

if (x > 10 && y < 5) {
    console.log("Both conditions are true");
}

Step 8: Implement IF Else Statements

• Use if statements to execute code based on conditions:

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

Step 9: Utilize Switch Statements

• Switch statements provide a way to execute different blocks of code based on variable values:

switch (fruit) {
    case "apple":
        console.log("It's an apple");
        break;
    case "banana":
        console.log("It's a banana");
        break;
    default:
        console.log("Unknown fruit");
}

Step 10: Master Loops

• Loops allow you to execute a block of code multiple times. Common loops include:
  • for
  • while

Example of a for loop:

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

Step 11: Create Functions

• Functions encapsulate reusable code. Use the function keyword to define a function:

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

Step 12: Work with Arrays

• Arrays store multiple values in a single variable. Declare an array using brackets:

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Outputs "apple"

Step 13: Manipulate Strings

• Strings can be manipulated using various methods:
  • length: Gets the length of the string.
  • toUpperCase(): Converts to uppercase.
  • toLowerCase(): Converts to lowercase.

Example:

let message = "Hello";
console.log(message.length); // Outputs 5

Step 14: Utilize the Math Object

• The Math object provides methods for mathematical calculations, such as:

let randomNum = Math.random(); // Generates a random number

Step 15: Understand the Document Object Model

• The DOM represents the structure of HTML documents. Use JavaScript to manipulate the DOM and update content.

Step 16: Get Elements by ID

• Access an HTML element by its ID:

let element = document.getElementById("myId");

Step 17: Get Elements by Class

• Access elements by their class name:

let elements = document.getElementsByClassName("myClass");

Step 18: Get Elements by Tag Name

• Access elements by their tag name:

let items = document.getElementsByTagName("li");

Step 19: Get Elements by Name

• Access elements by their name attribute:

let elementsByName = document.getElementsByName("myName");

Step 20: Use CSS Selectors

• Access elements using CSS selectors:

let element = document.querySelector(".myClass"); // Accesses the first element with that class

Step 21: Create and Remove Elements

• Create new HTML elements and append them to the DOM:

let newDiv = document.createElement("div");
document.body.appendChild(newDiv);

• Remove an element:

let elementToRemove = document.getElementById("myId");
elementToRemove.remove();

Step 22: Create Events

• Add event listeners to elements to respond to user actions:

button.addEventListener("click", function() {
    alert("Button clicked!");
});

Step 23: Understand Object-Oriented Programming

• JavaScript supports OOP concepts, including inheritance. Create objects and classes to structure your code effectively.

Conclusion

This tutorial provided a foundation in JavaScript programming, covering essential concepts that enable you to write basic scripts and manipulate the DOM. Continue practicing by creating small projects and exploring more advanced topics, such as asynchronous programming and frameworks. Happy coding!