JavaScript

Introduction to JavaScript

JavaScript is a scripting language that is used to make web pages interactive. It was initially created to enable programmatic access to web pages and their content. JavaScript can update and change both HTML and CSS, and can also be used to create interactive effects and animations.

Some key points about JavaScript:

JavaScript is a client-side scripting language, meaning it can be run within web browsers without the need of a server.
JavaScript code is executed by the browser, not served by the web server like HTML and CSS files.
JavaScript can respond to user events like clicks, form submissions, and page loads. It can modify the content, structure, and style of an HTML document.
JavaScript has access to all HTML elements on a web page.
JavaScript can access the Document Object Model (DOM) of an HTML page. This allows JavaScript to programmatically modify web pages.
JavaScript can validate form data before submitting it to the server. This results in a better user experience and reduces server load.
JavaScript can be used to detect the browser size and make responsive design changes to a web page.
JavaScript can be used to create interactive web applications that respond to user inputs in real time.
JavaScript can communicate with the server using XMLHttpRequests, and exchange data with the server behind the scenes.

JavaScript Basics

Variables

Variables are containers that store values. In JavaScript, variables are declared using var, let, or const.

var name = "John";
let age = 30;
const pi = 3.14;

Variable names can contain letters, numbers, and underscores. They must start with a letter or underscore. Variables are case sensitive.

let myName; 
let my_name;
let myName1;
let MYNAME; // Different variable

Variables can be reassigned new values, except for const which is a constant.

let points = 100;
points = 200;

const pi = 3.14;
pi = 3.15; // TypeError: Assignment to constant variable.

Variables can be declared and initialized in one statement:

let name = "John";

Data Types

JavaScript has several built-in data types:

Numbers
Strings
Booleans
Objects
Symbols (ES2015+)
Null
Undefined

let age = 30;  // Number
let name = "John";  // String
let isApproved = false; // Boolean

JavaScript also has functions, arrays, and dates.

Syntax

Variables are declared with var, let, or const
Statements end with semicolons ;
Comments start with // for single-line or /* */ for multi-line
Strings can use single ' or double " quotes
Case sensitive (age and Age are different)
Whitespace (spaces, tabs, newline) is ignored

Operators

JavaScript has various operators for -

Arithmetic - +, -, *, /, %
Assignment - =, +=, -=, etc.
Comparison - ==, !=, >, <, >=, <=
Logical - &&, ||, !
String - + (concatenation)

Control Flow

Control flow is a fundamental concept in programming that allows you to dictate the order in which statements are executed in your code. In JavaScript, you can control the flow of your program using conditional statements (such as if, else, and switch) and loops (such as for and while).

Conditional Statements

`if` Statement

The if statement is used to execute a block of code if a specified condition is true. It has the following syntax:

 if (condition) {
  // Code to execute if the condition is true
}

Example:

const age = 25;

if (age >= 18) {
  console.log("You are an adult.");
}

`else` Statement

The else statement is used in conjunction with an if statement to execute a block of code if the condition is false. It has the following syntax:

if (condition) {
  // Code to execute if the condition is true
} else {
  // Code to execute if the condition is false
}

Example:

const age = 15;

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

`else if` Statement

The else if statement allows you to check multiple conditions sequentially. It's often used after an initial if statement. Here's the syntax:

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition1 is false and condition2 is true
} else {
  // Code to execute if neither condition1 nor condition2 is true
}

Example:

const score = 75;

if (score >= 90) {
  console.log("A grade");
} else if (score >= 80) {
  console.log("B grade");
} else if (score >= 70) {
  console.log("C grade");
} else {
  console.log("Fail");
}

`switch` Statement

The switch statement is used to select one of many code blocks to be executed.

switch (expression) {
  case x:
    // code block
    break;  
  case y:
    // code block
    break;
  default:
    // code block
}

The break keyword is used to terminate the switch statement once a match is found and executed.

Example:

let day = 5; 

switch (day) {
  case 1:
    console.log("Monday");  
    break;
  case 2:
    console.log("Tuesday");
    break;  
  case 5:  
    console.log("Friday");
    break;    
  default:
    console.log("Invalid day");
}
// Friday

Loops

Loops are used to execute the same block of code multiple times.

`for` loop

The for loop allows you to execute a block of code a specific number of times. It has the following syntax:

for (init; condition; increment) {
  // code block to be executed
}

init initializes the loop
condition defines the condition for the loop to run
increment increases a value after each iteration

Example:

for (let i = 0; i < 5; i++) {
  console.log(i); 
}
// 0
// 1 
// 2
// 3
// 4

`while` loop

The while loop continues to execute a block of code as long as a specified condition is true. It has the following syntax:

while (condition) {
  // code block to be executed
}

Example:

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}
// 0
// 1
// 2  
// 3
// 4

These control flow constructs, including conditional statements and loops, are essential for implementing decision-making and repetitive tasks in your JavaScript programs. They allow you to create dynamic and flexible code that can respond to various conditions and perform tasks iteratively.

Conclusion

In this blog post, we've embarked on a journey into the world of JavaScript, one of the most widely used and versatile programming languages in web development. We started with an introduction to JavaScript, gaining an understanding of its origins and its pivotal role in shaping the modern web.

As we delved into JavaScript basics, we explored the core concepts that form the building blocks of any JavaScript program. We learned about variables, data types, operators, and the fundamental syntax that allows us to create dynamic and interactive web applications.

Moving on, we dived into control flow, a crucial aspect of programming. We examined conditional statements, such as the if, else, and else if constructs, which enable us to make decisions and execute specific code blocks based on different conditions. These constructs are fundamental for implementing logic and interactivity in our applications.

Additionally, we explored loops, including the for and while loops, which provide us with the ability to repeat tasks and iterate over data. These loops are essential for automating repetitive processes and handling collections of data.

In the next chapters of our journey, we'll continue to explore JavaScript's vast ecosystem, covering advanced topics, such as functions, objects, and asynchronous programming. We'll also discuss best practices and techniques for writing clean and maintainable JavaScript code. So, stay tuned for more insights into the power and potential of JavaScript in web development.

Hope this helps!

Thank you for joining me on this journey through the JavaScript. Happy coding!

Connect with me on my socials:

Twitter: Click here

LinkedIn: Click here

GitHub: Click here

JavaScript

Table of contents

Introduction to JavaScript

JavaScript Basics

Variables

Data Types

Syntax

Operators

Control Flow

Conditional Statements

if Statement

else Statement

else if Statement

switch Statement

Loops

for loop

while loop

Conclusion

`if` Statement

`else` Statement

`else if` Statement

`switch` Statement

`for` loop

`while` loop