Introduction to JavaScript : basic part 1

JavaScript is the most popular programming language used for web development and also javascript used in front-end development, back-end development, App development, game development, and desktop app development if we learn javascript we will build anything.

If you're just getting started with JavaScript, you're in the right place! In this blog post series, we'll cover the basics of JavaScript, starting from the very beginning.

In this blog post series, we'll cover the basics of JavaScript

- What is JavaScript and its importance.
- How is javascript used in Web development.
- Variables and data types in JavaScript.
- Operators in Javascript.
- Conditional statement in JS.
- Loops in Javascript.

What is JavaScript and its importance

JavaScript is a high-level, dynamic programming language that is widely used for creating interactive web pages and applications. It is a client-side scripting language that runs in web browsers and allows developers to add dynamic and interactive elements to web pages, such as form validation, animation, and user interface enhancements.

It is an essential tool in web development as it allows for the creation of dynamic and interactive web pages that can respond to user input and provide a better user experience. It is a versatile language that can be used for both front-end and back-end development and can interact with other web technologies such as HTML and CSS.

JavaScript's popularity has grown rapidly day by day, and it has become one of the most widely used programming languages in the world.

How is javascript used in Web development

In web development, JavaScript is often used in conjunction with other technologies such as HTML and CSS. HTML provides the structure and content of web pages, while CSS is used to style and lay out the content. JavaScript can be used to interact with both HTML and CSS, allowing developers to add functionality to web pages and make them more engaging and interactive.

Variables and data types in JavaScript

Variables

Variables are like our personal assistants in the programming world. it is used to store and manipulate data in a program. They act like containers that hold values, such as numbers, strings, booleans, arrays, and objects.

We can declare a variable using the var, let, or const keywords. The var keyword is used for declaring variables that are function-scoped, while let and const is used for block-scoped variables.

Example:

// Example of declaring a variable with the var keyword

var name = "Rishabh";
console.log(name); // Rishabh

// Example of declaring a variable with the let keyword

let age = 21;
console.log(age); // 21

// Example of declaring a variable with the const keyword

const country = "India";
console.log(country); // India

There are two types of variables :

1. Local variables
2. Global variables

Local variable : Local variables are declared inside a function and can only be accessed within that function. They are not visible to other functions or code blocks outside of their scope.

function calculateSum(a, b) {
  let sum = a + b;  // local variable
  console.log(sum);
}

calculateSum(3, 5);  // output: 8
console.log(sum);    // throws an error: sum is not defined

Global variable : On the other hand, Global variables, are declared outside of any function and can be accessed from any part of the code, including functions.

let language = "JavaScript";  // global variable

function sayHello() {
  console.log("Hello, " + language + "!");
}

sayHello();    // output: Hello, JavaScript!
console.log(language);   // output: JavaScript

Data types

Data types in JavaScript refer to the various kinds of data that can be stored in a variable. Each data type has its unique characteristics and ways of manipulating them in your code. There are two types of data types in JavaScript Primitive data types and Object data types.

Primitive data types

• Number: represents numeric values.
• String: represents textual data.
• Boolean: represents a logical value (true or false).
• Null: represents the intentional absence of any object value.
• Undefined: represents a variable that has not been assigned a value.
• Symbol: represents a unique identifier

Object data types

• Object: represents a collection of properties (key-value pairs).
• Array: represents a collection of values, indexed by integer keys.
• Function: represents a callable object that performs a specific task.
• Date: represents a date and time value.
• RegExp: represents a regular expression object used for pattern matching.

Operators in Javascript

Operators in JavaScript are symbols that help us perform different operations on values, such as addition, subtraction, comparison, assignment, and more. Just like in math, where we use symbols like + and - to perform operations, in JavaScript, we use operators to manipulate values.

• Arithmetic Operators : These operators are used to perform mathematical operations on operands. Examples include addition (+), subtraction (-), multiplication (*), division (/), and modulus (%)

let a = 10;
let b = 5;

console.log(a + b); // Output: 15
console.log(a - b); // Output: 5
console.log(a * b); // Output: 50
console.log(a / b); // Output: 2
console.log(a % b); // Output: 0

• Assignment Operators : These operators are used to assign values to variables. Examples include the assignment operator (=), addition assignment (+=), subtraction assignment (-=), multiplication assignment (*=), division assignment (/=), and modulus assignment (%=).

let a = 10;
a += 5; // equivalent to a = a + 5

console.log(a); // Output: 15

• Comparison Operators: These operators are used to compare two values and return a boolean (true or false) result. Examples include equal to (==), not equal to (!=), greater than (>), less than (<), greater than or equal to (>=), and less than or equal to (<=).

let a = 10;
let b = 5;

console.log(a == b); // Output: false
console.log(a != b); // Output: true
console.log(a > b); // Output: true
console.log(a < b); // Output: false
console.log(a >= b); // Output: true
console.log(a <= b); // Output: false

• Logical Operators: These operators are used to combine or negate boolean values. Examples include logical AND (&&), logical OR (||), and logical NOT (!).

let a = true;
let b = false;

console.log(a && b); // Output: false
console.log(a || b); // Output: true
console.log(!a); // Output: false
console.log(!b); // Output: true

• Bitwise Operators: These operators are used to manipulate the bits of a value. Examples include bitwise AND (&), bitwise OR (|), bitwise XOR (^), and bitwise NOT (~).

let a = 10; // 1010 in binary
let b = 5; // 0101 in binary

console.log(a & b); // Output: 0 (0000 in binary)
console.log(a | b); // Output: 15 (1111 in binary)
console.log(a ^ b); // Output: 15 (1111 in binary)
console.log(~a); // Output: -11 (assuming 32-bit integer)

Conditional statement in JavaScript

A conditional statement is a programming construct that allows us to make decisions based on certain conditions. It's a way to execute different blocks of code depending on whether a given condition is true or false.

• if statement
• if else statement
• if else if statement
• switch statement

if statement: The if statement is the most basic conditional statement in JavaScript. It allows us to execute a block of code if a certain condition is true.

let num = 10;

if (num > 0) {
  console.log("The number is positive");
}

// Output: The number is positive

if-else statement: The if-else statement allows us to execute one block of code if the condition is true and another block of code if the condition is false.

let num = -5;

if (num > 0) {
  console.log("The number is positive");
} else {
  console.log("The number is negative or zero");
}

// Output: The number is negative or zero

if else if statement: This type of statement allows you to check for multiple conditions.

let num = 10;

if (num < 0) {
  console.log("The number is negative");
} else if (num > 0) {
  console.log("The number is positive");
} else {
  console.log("The number is zero");
}

// Output: The number is positive

switch statement: The switch statement is another way to check for multiple conditions.

let dayOfWeek = "Monday";

switch (dayOfWeek) {
  case "Monday":
    console.log("It's Monday");
    break;
  case "Tuesday":
    console.log("It's Tuesday");
    break;
  case "Wednesday":
    console.log("It's Wednesday");
    break;
  default:
    console.log("It's some other day");
}

// It's Monday

Loops in JavaScript

Imagine you're a mail carrier and you have to deliver mail to 100 houses on a street. Instead of walking back to the post office after each house, you could use a loop to deliver all of the mail on the street in one go. You would start at the first house, deliver the mail, move to the next house, deliver the mail, and so on until you've delivered all of the mail on the street.

Similarly, a loop in programming allows us to repeat a set of instructions multiple times. This can be useful for tasks that require repetitive actions, such as processing large amounts of data, performing calculations, or iterating through a list of items.

There are three types of loops in JavaScript:

• for Loop
• while Loop
• do-while Loop

for Loop: The for loop is typically used when we know how many times we want to execute a block of code.

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

// output
1
2
3
4
5

while Loop: The while loop is a type of loop in JavaScript that executes a block of code repeatedly as long as a specified condition is true.

let i = 0;

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

// Output
0
2
4
6
8
10

do-while Loop: The do-while loop is similar to the while loop, but the main difference is that the code block inside the do statement is executed at least once, even if the condition is false. The loop will continue to execute the code block as long as the condition remains true.

let i = 1;

do {
  console.log("Count: " + i);
  i++;
} while (i <= 5);

// output
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

Conclusion:

Thank you for reading this article on the basics of JavaScript! In this post, we covered the fundamental concepts of variables, data types, operators, conditional statements and loops.This knowledge will help you as you continue your learning journey and explore the many possibilities of JavaScript in web development. Stay tuned for Part 2, where we'll cover more advanced topics in JavaScript.