What is Javascript?

JavaScript is a text-based programming language used both on the client-side and

server-side that allows you to make web pages interactive. Where HTML and CSS are
languages that give structure and style to web pages, JavaScript gives web pages
interactive elements that engage a user.

● Javascript code only can run in the browser so its a Javascript Engine
● Browser and node provide a runtime environment for a javascript code
● Console: How does Javascript run in the browser?

Let's see Javascript in Practical:

“Let” does not allow to redeclare variables and “var” allows to redeclare variables

The first program in Javascript:

// // This is my first Javascript code

console.log("Hello World");

Variables:

// // Variables in Javascript
let name = 'collegeranker';
console.log(name);

//Rules:
//Can not be a user keyword
//meaningfulcannot start with a number
//Cannot contain a space or hyphen (-)

let firstName = "College";

let lastName = "Ranker";

1
Constants: they always remain the same throughout the program and can not be
changed when we use “const”.

// Constants = const

let interestRate = 0.3;

interestRate = 1;
console.log(interestRate);

While Loop in Javascript: it works as a continue to do something while a condition get

false

// while loop in javascript

let i = 0;
while(i<=9){
console.log(i);
i++
}

Do While loop: do something while the condition get true or false

//do while loop

let i = 0;
do{
console.log(i);
i++;
}
while(i<=10)

2
For Loop: These are very important in javascript. As we iterate over a loop to print
things to some sort of conditions.

//for loop

for(let i = 0; i<=5; i++){

console.log(i);
}

// For loop to iterate over arrays

// An array with some elements

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Loop through all the elements in the array

for(var i=0; i<fruits.length; i++) {
console.log(fruits[i]);
}

How do you render(show) elements by iterating over an array on a webpage?

● It works the same as a simple array iterating by using for loop

● Next, you need to use “document.write()” function
● What does it is? It manipulates DOM and renders things on the webpage.

// render array elements on webpage using forloop and array

// An array with some elements

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Loop through all the elements in the array

for(var i=0; i<fruits.length; i++) {
document.write("<p>"+ fruits[i] +"</p>")
}

3
The for in Loop:

//The for in loop with object

// An object with some properties

var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// Loop through all the properties in the object

for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

The for of Loop:

//The for of Loop

//Iterating over array

let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {

console.log(letter); // a,b,c,d,e,f
}

// Iterating over string

let greet = "Hello World!";

for(let character of greet) {

console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

4
Datatypes in javascript:

● Primitive/Value Datatypes:

1. String
2. Number
3. Boolean
4. Undefined
5. null

// Primitive/Value Types and referance type

let name = "collegeranker"; // String literal

let age = 30; //Number Literal
let isApproved = true; //Boolean Literal
let firstName = undefined; //undefined
let selectedColor = null;

// // Static and dynamic typed

// typeof name; // to run in console

// name = "shivam";
// typeof name; //dynamic

● Reference Datatypes:

1. Objects
2. Arrays
3. Functions

5
Objects:

An object is an instance that contains a set of key-value pairs. Unlike primitive data types,
objects can represent multiple or complex values and can change over their lifetime.
example: car, pen, bike, chair, glass, keyboard, monitor, etc

let person = {
personname: "shivam",
age: 22,
};

// Dot notation
person.name = "onkar";

//Bracket Notation
let selection = 'name';
person[selection] = "me"; //let['name'] = 'me';

console.log(person.name);

Arrays:

An array is an object that can store multiple values at once. For example, const words = ['hello',
'world', 'welcome']; Here, words is an array.

Note:

● In Javascript we can store different types of elements means we can use elements of
different data types.
●
● In other languages that are not like same as Js. in those languages only we can store is
the set of similar datatypes.

// //Arrays

let selectedColors = ["red", "blue"];

selectedColors[2] = 1; // we can save different types in an array
console.log(selectedColors);

6
console.log(selectedColors.length);

//or

console.log(selectedColors[0]);

// // typeof selectedColors; //to run in console

Functions: A function in JavaScript is similar to a procedure and set of statements that perform
a task or calculate a value.

// //Functions

// // Performing a task
function greet(name, lastName) {
console.log('hello' + ' ' + name + ' ' + lastName);
}

greet("jhon", "smith");

// //Types of functions

// Calculating a value
function square(number) {
return number*number;
}

console.log(square(2));

7
Javascript VIMPS:
Best way to understand when to use var, let, and const with three concepts.

● Scope
● Reassigning a new value
● When you access a variable before declaring