Hello peeps! Now that you have a basic idea about HTML and CSS, you should practice mastering them. Here's another blog for beginners who are trying to learn Javascript. Let's dive in!!!

About Javascript

• Javascript is a high-level, object-oriented, multi-paradigm programming language.

• It is the world's most popular and most used programming language., hence called The programming language of the Web.

• It is used to program the behaviour of websites.

A brief history of Javascript

• In 1995, Brendan Eich created the very first version of Javascript in just 10 days and named it "Mocha".

• In 1996, "Mocha" was renamed to LiveScript and then to Javascript to attract Java developers. However, javascript has nothing to do with Java.

• Microsoft launched IE, copying Javascript from Netscape, calling it JScript.

• To standardize the language, ECMA released ECMAScript 1 (ES1), the first official standard for JavaScript.

• ES5 was released with lots of great new features.

• ES6 was released: The biggest update to the language ever!

• ECMAScript changed to an annual release cycle to ship fewer feature features per update.

How to link Javascript to HTML?

• Go to your test site and create a Javascript file and name it script.js (or anything you want to) and save it.

• In your index.html file, enter this code on a new line, just before the closing tag:

<script src="script.js"></script>

First Javascript program

• Open script.js file and type this line of code and save it.

console.log("Hello World!");

• Open the test site and open the console (Ctrl + Shift + J or left click on the webpage and click on inspect, then open console.)

• Now, you can see the output in there! Yay!!!

Variables and Values

• The container for storing data is called a variable.

• The data stored in the variable is called a value.

Declaring variables

As Javascript has dynamic typing, we do not have to manually define the data type of the value stored in the variable.

**Syntax for declaration : **

var variableName = value;
let variableName = value;
const variableName = value;

Things to keep in mind while naming a variable

• Only use alphanumerics, $ and _ for variable names.

• Never begin the name with a number and capital alphabet.

• Never use keywords like Name, Let, Switch, etc.

• As Javascript is case sensitive, do remember that variable names pen, pEN and pEn would be considered different variables.

There are three ways to declare variables:

• Var: It is used for all types of variables but is outdated.

var firstName = "Tanishka";

• Let: It is preferred over var for declaring variables. Let allows us to change the value stored in it.

let firstName = "Tanishka";
firstName = "Snehal";

• Const: It is used to store values which can't be changed. Const doesn't allow us to change the value stored in it.

const PI = 3.14 ;
PI = aaplePI;  // This gives an error

Datatypes

There are two types of datatypes :

1. Primitive

2. Non-Primitive

Primitive Datatypes

There are 7 primitive data types:

1. Number: Floating point numbers.

let myNum = 3;

1. String: Collection of characters.

let myName = "Tanishka";

1. Boolean: Logical type that can be only true or false.

let myBool = true;

1. Undefined: Value taken by a variable that isn't defined.

let x;

1. Null: The empty value.

2. Symbol: Value that is unique and cannot be changed.

3. BigInt: Larger integers than the Number type can hold.

To check the datatype of a variable, you can use typeof like given below:

let code = 2678;
console.log(typeof num); // This would show "Number" in console

Non-Primitive Datatypes

1. Object: It contains various key: value pairs.

const human = {
  firstName: "ABC";
  lastName: "XYZ";
  age: x;
}

Template literals

let firstName = "Tanishka";
let lastName = "Makode";
let age = "17";

We all know the concatenation technique:

console.log("My name is + " " + firstName + " " + lastName and I'm + " " + age + years old.");
// My name is Tanishka Makode and I'm 17 years old.

Template literals involve use of `...` instead of "..." and ${variable-name} is used instead on inserting empty quotation marks and + sign and makes code clean.

console.log("My name is ${firstName} ${lastName} and I'm ${age} years old.");
// My name is Tanishka Makode and I'm 17 years old.

Conditionals

In JavaScript we have the following conditional statements:

• if to specify a block of code to be executed if a specified condition is true.

• else to specify a block of code to be executed if the given condition is false.

• else if to specify a new condition to test if the first condition is false.

let x = 5;

if(x == 3) {
  console.log("Three");
} else if (x == 4) {
  console.log("Four");
} else if (x == 5) {
  console.log("Five");
} else {
  console.log("Not three, four or five");
}

Switch Statement

• Switch statement is used to check various conditions. It is like a long ladder of if and else if except the actual usage.

• break is mandatory after each case. If break is not used, the next block of code for the next case will be executed automatically.

• Syntax :

switch (expression) {
case (expression output): 
  // Code
  break;

case (expression output):
  // Code
  break;

case (expression output): 
  // Code
  break;

default: 
  // Code
}

let x = "Sunday";

switch(x) {
  case "Monday":
    console.log("It is Monday");
    break;
case "Tuesday":
    console.log("It is Tuesday");
    break;
case "Wednesday":
    console.log("It is Wednesday");
    break; 
case "Thursday":
    console.log("It is Thursday");
    break;
case "Friday":
    console.log("It is Friday");
    break; 
case "Saturday":
    console.log("It is Saturday");
    break;
case "Sunday":
    console.log("It is Sunday");
    break;
default: 
  console.log("Invalid input");

// Output :
// It is Sunday
}

Operators

A. Arithmetic operators

• + : Adds two operands.

• - : Subtracts right operand from left one.

• ***** : Multiplies two operands.

• / : Divides left operand by right one.

• % : Returns the remainder.

let add = 3 + 5; // Ans : 8
let subtract = 5 - 3; // Ans : 2
let multiply = 3 * 5; // Ans : 15
let divide = 15 / 3; // Ans : 3
let remainder = 5 / 3; // Ans : 2

B. Assignment operators

let x = 3;
let sum += 3;
let diff -= 3;
let multiply *= 3;
let divide /= 3;

C. Comparative operators

• \>: To check if the value on the left is greater than the value on the right.

• **>= **: to check if the value on the left is greater than or equal to the value on the right.

• <: to check if the value on the left is smaller than the value on the right.

• <=: to check if the value on the left is smaller than or equal to the value on the right.

let a = 3;
let b = -3;

if( a > 0) {
  console.log("Positive");
} else {
  console.log("Negative");
}

D. Increment and decrement operators

• x++ : For post-increment by one.

• ++x : For pre-increment by one.

• x-- : For post-decrement by one.

• --x : For pre-decrement by one.

let x = 5;

console.log(x++); // Output: 6

console.log(--x); // Output: 4

E. Logical operators

• &&: Returns true only if both expressions are true.

• ||: Returns true even if one of the expressions is true.

• !: Converts true to false and vice versa.

let x = 3;
let y = 5;

if( x == 3 && y == 7){
  console.log("Both conditions are true");
} else if ( x == 3 || y == 7) {
  console.log("One of the conditions is true"); 
} else {
 console.log("No condition is true"); 
}

// Output:
// One of the conditions is true

Truthy and falsy values

Falsy Values

• The values which are converted into false are called falsy values.

There are only 5 falsy values in JavaScript

1. Undefined

2. Nan

3. ' '

4. 0

5. Null

console.log(Boolean(0)); // Output: false
console.log(Boolean(undefined)); // Output: false 
console.log(Boolean(Nan)); // Output: false 
console.log(Boolean('')); // Output: false
console.log(Boolean(null)); // Output: false

Truthy Values

• The values which are converted into true are called truthy values.

• All the values except falsy values are truthy values.

• 1 is the prominent truthy value as 1 represents true in boolean.

console.log(Boolean(1)); // Output: true
console.log(Boolean({})); // Output: true

Stay tuned for part-2 !
Happy reading!!!