An Introduction to Java Script

An Introduction to Java Script

Java Script History :

Java Script is a scripting language. It was started in 1995. It is a type of functionality to the browser. It was created to make web pages alive. The 1st name of JS is Mocha and after that, the name is changed to LiveScript in 1995, and again its name changed to JavaScript in 1996, and this name we are using till date.

In the starting when Java Script was created, it is having another name -LIVE SCRIPT. JavaScript became a fully independent language with its specification called ECMAScript.JavaScript is a lightweight programming language(“scripting language”) and is used to make web pages interactive. It can insert dynamic text into HTML. JavaScript is also known as the browser’s language.

ECMA : An Organisation that created certain rules and those rules must be accepted by all the scripting languages.

So when this scripting will come into the market that time there will be two browsers available in the market Netscape (web browser) and Internet Explorer , these two browsers are there in the market at that time. So at that time, both browsers decided to make or set common rules to develop a website and ECMAScript comes into the picture , till date from time to time after getting updates and now we are using its version of ES6. So this is the finest standard till date which comes in 2015 and still, this is there in the market.

Java Script Run Time Environment :

In simple words, a run time environment is where our program will be executed or in other words, our javascript code can be executed anywhere if we have javascript runtime and our .js file runs.

Java vs Java Script :

JAVA :

  1. Java is a strongly typed language and variables must be declared first to use in the program. In Java, the type of a variable is checked at compile-time.

  2. Java program has the file extension “.Java” and translates source code into bytecodes which are executed by JVM(Java Virtual Machine)

  3. Java supports multithreading.


JAVA SCRIPT :

  1. JavaScript is a loosely typed language and has a more relaxed syntax and rules.JavaScript is an object-based scripting language.

  2. Java Script code used to run only in the browser, but now it can run on the server via Node.js.

  3. Javascript doesn’t support multi-threading.

CONSOLE . LOG() :

The console.log() is a function in JavaScript that is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

Datatypes in Java Script :

Number:

Unlike other languages in Java Script here all values are treated as number values.

let a=2;
let b=2.9;
console.log(a,b);

Here in the above example a is having a value which is an integer but b is having a value which is decimal, but in java script both are treated as numbers.

The output of the above is :

2 2.9

String:

Strings are useful for holding data that can be represented in text form.

let a= "kapil";
let b= 'kapil';
console.log(a,b);

Here in the above example both the strings whether it is in single quotation or double quotation both are treated as strings.

The output of the above is :

kapil kapil

Boolean :

Here in this case it is a type of value that returns two values either true or false, In JavaScript, Boolean is used as a function to get the value of a variable, object, conditions, expressions, etc. in terms of true or false.

let a='true';
let b='false';
console.log(a);
console.log(b);

In the above example it is returning the value a, as boolean value true and value b as false. The output of the above is :

true
false

Null and Undefined :

Here in this case they both are said to be empty values means they do not have any kind of value. Null is an intentional absence of the value and Undefined means that the value does not exist in the compiler.

let a=20;
if(a===undefined)
console.log(true);
else
console.log(false);

Here in above example a is having the value 20 which in this case it is said to be null.

So the output of the above is :

false

All these values are known as primitive values means one single value whereas non-primitive means more than one value.

Array in Java Script :

Array in javascript is declared by [ ] means square bracket. Inside an array any valid data types can be declared. Arrays help to store multiple values with the same data type in the name of a single variable, otherwise, we have to declare separate variables for each value.

let num=['1','2','3','4','5']
console.log(num);

Here a simple array is declared and the name of the array is num which contains 5 numbers and they are printed.

The output of the above is :

[ '1', '2', '3', '4', '5' ]

Now let us declare an array with multiple data types

let details=['Sachin','Tendulkar', '1','true','cricketer']
console.log(details);

Here in these array named details which contains multiple data types such as string , number value and boolean.

The output of the above array is:

[ 'Sachin', 'Tendulkar', '1', 'true', 'cricketer' ]

Index in Array :

Here inside array index is an important term that means at what position the values are kept inside an array we access the values with the help of index.

  • So in the above array first name which is Sachin is at index-0.

  • Lastname which is Tendulkar is at index-1.

  • Ranking which is 1 is at index-2.

  • Centuries made which is true is at index-3.

  • Profession which is cricketer at index-4.

Objects in Java Script :

Objects are created in javascript using { } means curly bracket

Syntax of declaring object in javascript:

let object_name = {
    key_name : value,
     ...
 }

Here in objects every values are stored or it can be accessed in the form of keys and key could be of any choice.

Now let us understand an object with a simple example :

let mydetails={
    fname:'kapil',
    lname:'sarkar',
    mobileno:'99999999'
};

Here an simple object is created by the name mydetails which contains fname, lname, mobileno as keys and their respective details are shown above.

Here fname and lname and mobileno are the keys which stores the values kapil , sarkar and 99999999 respectively.

This is non the end of object in javascript objects in javascript is a vast topic.

Variables in Java Script :

Variables in simple words are the place holders for values or in other words values are stored inside variables.

Variables of javascript in brief:

A variable is simply the name of the storage location. Assume your computer memory as your storeroom, where you have placed each thing in a particular place. So when you require anything you go there and collect what you require. So your computer memory also works in the same way, which has n numbers of storage to store user's data. When the user pushes some data into memory user requires a placeholder or container that can hold the data. Variables are that container.

Types of Variables in Java Script :

There are three types of variables var, let and const.

Declaration of Variables :

 var x=20;
let y=30;
const z=90;

Here x , y, z are the variables which stores the value 20, 30 and 90 respectively,the variable let can be changed and variable const cannot be changed.

Difference in Variables:

var vs let vs const :

  1. let & const are newly introduced in JavaScript.

    let & const have block scope whereas var has global scope.

  2. Variables with a var which is a keyword can be redeclared anywhere in the program while redeclaring a variable inside the same scope is restricted with let & const.

  3. Variables with let keywords can be reassigned to a value inside the same block, which changes its original value.

There are some scopes discussed earlier as block scope and global scope.

  • Block Scope : Before ES6 JavaScript had only Global Scope & Local Scope. ES6 introduced two new keywords let & const , which have Block Scope. A set of code inside curly braces { } is called a block. Block-scoped means variables declared inside a block, can't be accessed outside the scope, and the life of the variables exists inside that block only.

  • Global Scope : Variables that are not declared inside any function or scope belong to the global scope. In JavaScript, the whole document is the global scope and all the other functions and variables are contained in this global scope. The variables declared inside the global scope can be accessed from anywhere inside that code.

Printing Variable in a Single Line :

The variable declared in javascript can be printed in a single line. Now let us understand this with an example :

let fn= 'Kapil';
let ln= 'Sarkar';
const mobno='9564685056';
console.log(fn,ln,mobno);

Here fn , ln , mobno are variables declared which stores the values 'Kapil', 'Sarkar' and '9564685056' respectively and it can be printed in a single line .

The output of the above is :

Kapil Sarkar 9564685056

Template Literal in Java Script :

It provides new features to create a string that gives more control over dynamic strings. Traditionally, String is created using single quotes (‘) or double quotes (“) quotes. Template literal is created using the backtick (`) character.

Now let us understand this with an example :

let fname='John';
let lname='Cena';
let city='US';
console.log(`My Details are :${fname} ${lname} ${city}`);

The output of the above example is :

My Details are :John Cena US

Operators in Java Script :

Operators are used for performing specific mathematical and logical computations.

In Java Script operators are used for comparing values , perform arithmetic operations etc.

Types of Operators :

Arithmetic Operator :

Addition : '+' operator performs addition.

Let us understand this operator with an example :

let x=10;
  let y=20;
  let z=x+y;
  console.log(z);

Here two variables are declared x and y with values 10 and 20 and variable z does the job of addition means 10 +20. The output of above example is :

30

Subtraction : '-' operator performs subtraction.

Let us understand this operator with an example :

let x=50;
let y=20;
let z=x-y;
console.log(z);

Here two variables are declared x and y with values 50 and 20 and variable z does the job of subtraction means 50 -20. The output of above example is :

30

Multiplication : '*' operator performs multiplication.

let x=20;
let y=30;
let z=x*y;
console.log(z);

Here two variables are declared x and y with values 20 and 30 and variable z does the job of multiplication means 20 *30. The output of above example is :

600

Division : '/' operator performs division.

let x=30;
let y=10;
let z=x/y;
console.log(z);

Here two variables are declared x and y with values 30 and 10 and variable z does the job of division means 30 /10. The output of above example is :

3

Modulus : '%' gives remainder of an integer division.

let x=6;
let y=4;
let z=x%y;
console.log(z);

Here two variables are declared x and y with values 6 and 4 and variable z does the job of modulus means 6 /4. The output of above example is :

2

Increment : '++' operator increases an integer value by one.

let x=20;
let y=x++;
console.log(x,y);

Here the value of x incements by one and becomes 21 and value of y becomes 20.

The output of the above is:

21 20

Decrement : '--' operator decreases an integer value by one.

let x=20;
let y=x--;
console.log(x,y);

Here the value of x is decremented by one and becomes 19 and value of y becomes 20.. The output of the above is :

19 20

Assignment Operator :

\= (Assignment Operator) : Assigns the right operand value to the left operand.

let a=20;
let y=a;
console.log(y);

Here in this case the value of a which is 20 is being assigned to y.The output of the above is:

20

+= (Add and Assignment Operator): Sums up left and right operand values and then assigns the result to the left operand.

let y=20;
y+=1;
console.log(y);

Here it gives the result of y=y+1. The output of the above is :

21

– = (Subtract and Assignment Operator): It subtracts the right side value from the left side value and then assigns the result to the left operand.

let y=20;
y-=1;
console.log(y);

Here it gives the result of y=y-1. The output of the above is :

19

* = (Multiply and Assignment Operator): It multiplies the right side value and the left side value and then assigns the result to the left operand.

let y=20;
y*=1;
console.log(y);

Here it gives the result of y=y*1. The output of the above is :

20

/= (Divide and Assignment Operator): It divides the right side value and the left side value and then assigns the result to the left operand.

let y=20;
y/=1;
console.log(y);

Here it gives the result of y=y/1. The output of the above is :

20

%= (Modules and Assignment Operator): It finds the remainder.

let y=20;
y%=2;
console.log(y);

Here the remainder of the following operation will be zero.The output of the above is

0

Comparison Operator :

(==): Compares the equality of two operands. If equal then the condition is true otherwise false

It only compare values.

let a=10;
let b='10';
console.log(a==b);

The equality operators checks whether its two operands are equal, return a boolean result if equal the condition is true otherwise false.

Here a==b is true. So the output is :

true

(\===) : It compares both values and data types. Compares the equality of two operands with the data type. If equal then the condition is true otherwise false.

let x=10;
let y='10';
console.log(x===y);

Here a===b is false. So the output of the above is :

false

!= (Not Equal) : Compares inequality of two operands. True if operands are not equal.

let x=10;
console.log(x!=11);

Here in this case the output will be true because the value assigned is 10 and it is not eual to 11 so it will be true. The output of the above is :

true

(Greater than > ): This operator checks whether the left side value is greater than the right side value. If yes then it returns true otherwise it returns false.

let x=10;
let y=11;
console.log(x>y);

Here in this case the value of x is less than the value of y. So the Output will be :

false

(Less than < ): This operator checks whether the left side value is less than the right side value. If yes then it returns true otherwise it returns false.

let x=20;
let y=30;
console.log(x<y);

Here in this case the value of x is less than the value of y. So the output will be:

true

(Greater than or Equal to > =): This operator checks whether the left side operand is greater than or equal to the right side operand. If yes then it returns true otherwise it returns false.

let x=20;
console.log(x>=21);

Here the value of x is set to 20 and it is no greater than equal to 21. So the output will be :

false

(Less than or Equal to <=): This operator checks whether the left side operand value is less than or equal to the right side operand value. If yes then it returns true otherwise it returns false.

let x=20;
console.log(x<=50);

Here the value of x is set to 20 and it is less than equal to 50. So the output will be

true

Logical Operator :

&& (Logical AND): It checks whether two operands are non-zero (0, false, undefined and null are considered as zero), if yes then return the last operand when evaluating from left to right.

The && operator returns true if both expressions are true otherwise, it returns false.

let x=10;
let y=15;
console.log(x<20 && y>1);

Here in this case, the value of x which is set to 10 is less than 20 so the output is true and alongside the value of y which is 15 is greater than 1 so then also the output is true with the help of logical && operator.

The output will be :

true

|| (Logical OR): It checks whether two operands are non-zero (0, false, undefined, null is considered as zero), if yes then return the first operand when evaluating from left to right.

The || returns true if one or both expressions are true otherwise it returns false.

let x=20;
let y=30;
console.log(x==10 || y==60);

Here in both the cases the value of x and y which is set to 20 and 30 respectively are to similar to 10 and 60 so the output is set to be false. So the output will be

false

! (Logical NOT): It reverses the boolean result of the operand (or condition).

The NOT operator (!) returns true for false statements and false for true statements.

let x=20;
let y=30;
console.log(!x>y);

Here by the logical NOT OPERATOR x is not greater than y so it returns the value false. So the output will be:

false

typeof Operator :

The typeof operator is a unary operator that is placed before its single operand, which can be of any type. Its value is a string indicating the data type of the operand.

The typeof operator evaluates to "number", "string", or "boolean" if its operand is a number, string, or boolean value and returns true or false based on the evaluation.

Bitwise Operator :

Bitwise operators perform operations on binary representations of numbers.

Operator

Description

>>>

Zero-fill right shift

&

Bitwise AND

|

Bitwise OR

^

Bitwise XOR

~

Bitwise NOT

<<

Left shift

>>

Sign-propagating right shift