🙋🏼‍♂️Hey… fellow champs! 🏆

Let's do a simple activity.

🤔Imagine you want to build a stunning robot 🤖, let's call him Jarvis for your simple in-house task. So you start designing a structure for your robot, and after some time you create an amazing design or structure for your robot, then you head on to selecting the part for it, matching colors, wires, switches, and lots of other things for making the robot great.

After collecting all this, you start working on the project (Jarvis), and after a few weeks, you complete it with a great structure and amazing design 🔥. It also looks great to the eyes. But eventually, after some designing, you realize it’s not working properly. You realize 🙄you only work on making the robot good-looking but not on the functional part or a brain section, like logic and rules.

Similarly,

While developing a stunning website, we need a brain 🧠 with a great structure (HTML) and design (CSS). Here comes JAVASCRIPT 🤯, the brain of the website, to make it more stunning with outstanding interaction and functionality.

🫡Now, let's understand JAVASCRIPT

What is JAVASCRIPT?🤔🤔

JavaScript is a programming language like other programming languages like C++ and Java. But Javascript is a more interesting language to work with. It gives you the power to control both sides of the website, the front-end or back-end.

It is also very easy to learn and understand quickly. Also, it is a very lightweight interpreted (or just-in-time compiled) programming language and is known as a scripting language for the web.

Javascript helps you control the HTML element with its DOM (Document Object Module) functionality and interact with it. A framework such as NodeJS allows back-end code to be written in JavaScript. So now you know how powerful language Javascript is.

👉🏼Now, let’s Understand Variables and Data Types in JavaScript

Let's say you want to store something very special, but you want to store it in some specific type of thing. Like a box, but not in an ordinary box you need a special one like a safe locker. Similarly in Javascript, there is a box known as “VARIABLES" and a special type for the box known as “DATA TYPES“.

📦 Variable: used to store value, which can be useful later.

🗃️ Data types: determine the kind of value a variable can hold.

Declaring Variables

There are three ways to declare the variables: var, let, and const.

let name = "Iron man"; // String
const age = 30; // Number
var isSuperHero= true; // Boolean

console.log(name, age, isStudent); 
// Output: Iron man 30 true

Data Types in JavaScript

String: Represents textual data.
- Example: "Hello, world!"
- Real-world analogy: A name, like "Iron Man".

    let greeting = "Hello, Iron man!";
    console.log(greeting); // Output: Hello, Iron man!

Number: Represents numerical values.
- Example: 42, 3.14
- Real-world analogy: Age or weight.

    let weight = 60.5; // Kilograms
    console.log(`Weight: ${weight} kg`); // Output: Weight: 60.5 kg

Boolean: Represents true or false values.
- Example: true, false
- Real-world analogy: Is a person a student? Yes or No.

    let isStudent = true;
    console.log(`Is Avenger: ${isAvenger}`); // Output: Is Avenger: true

Null and Undefined: Represents empty or uninitialized values.

 let x = null;
 let y;
 console.log(x, y); // Output: null undefined

Object: Used for more complex data structures.

 let person = {
   name: "Iron man",
   age: 30,
   isAvenger: true
 };
 console.log(person.name); // Output: Iron man

👉🏼 Now, let's learn the JavaScript Operators

Let's say you want to go shopping, and after finishing it, you have a big list of item pricing and you want to know the total amount. Then you take your phone and start typing the pricing one by one in your calculator, but in the end, it gives you an even bigger number, and then you realize you forgot to type the addition sign, (+) which helps you to get the total or complete your task. Similarly, in Javascript, there are different types of signs, like + and those known as Operators.

🕹️ Operators: Operators are used to perform operations on variables and values.

These are some common operators:

Arithmetic Operators
Comparison Operators
Logical Operators

Arithmetic Operators

Used to perform mathematical calculations.

let a = 10, b = 5;
console.log(a + b); // Addition: 15
console.log(a - b); // Subtraction: 5
console.log(a * b); // Multiplication: 50
console.log(a / b); // Division: 2
console.log(a % b); // Modulus: 0

Comparison Operators

Used to compare two values and return a boolean result.

console.log(a > b); // Greater than: true
console.log(a === b); // Strict equality: false

Logical Operators

Combine multiple conditions.

let isAdult = true;
let hasID = false;
console.log(isAdult && hasID); // AND: false
console.log(isAdult || hasID); // OR: true
console.log(!isAdult); // NOT: false

👉🏼 Now, let's learn Control Flow in JavaScript

Let's say you plan a trip and you decide if I go this place I buy this or if I buy this I do this like you are giving yourself a condition for doing things similarly, in Javascript we can give different conditions to make things happen and it is known as control statement.

This is the most interesting part of JavaScript, where you can decide what happens for some specific things, which gives you the freedom to decide and control the output of your program.

🎮Control statement: Control flow determines how the code is executed based on conditions.

Here are some methods to do that:

If-Else Statements
Switch Statements
Loops

If-Else Statements

Used to execute different code blocks based on a condition.

let age = 20;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Switch Statements

A switch statement is used to execute one of many code blocks based on a value.

let day = 2;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}

Loops

For repetitive tasks, loops are crucial in JavaScript.

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

I've incorporated explanations of variables, data types, operators, and control flow with practical examples and code snippets

Unwind the Brain of the Web