Javascript Notes
Javascript Notes
1. Introduction to javascript
2. variables in javascript
3. operatoers in javascript
4. Datatypes in javascript
Primitives of datatype
Non-primitives’ datatypes
5. Function in javascript
6. Types of functions
1) Normal functions
2) function with parameters
3) function with returntypes
4) Anonymous functions
5) function with expression
6) arrow function
7) call back function
8) immediately invoked function
9) higher order function
10) First order function
11) constructor function
7. Closures
8. Advance javascript (ECMA scripting)
9. Introduction to array in java script
10. Array inbuilt methods
11. Strings in java script
12. String inbuilt methods
13. Objects in java scripts
i. Objects using literals
ii. Objects using constructor
iii. Object using class
14. Document object model
15. Selectors of DOM
i. Getelementbyid()
ii. Get element by class name ()
iii. Get elements by tagname()
iv. Get element by name()
v. Query selectors()
vi. Query select all()
16. Create elements using dom
17. Operations on table using dom
18. Hosting in javascript
19. Promises in javascript
20. Synchronous and asynchronous javascript
21. Asynic &await in javascript
22. Destructure in javascript
23. Spread operator and rest parameter in javascript
Introduction to javascript
1. It is a scripting and programming language introduced by company known as Netscape navigation
2. Javascript was introduced by a person known as berden eich in the year 1995
3. The main reason of introducing javascript was for generating live responses or dynamic response in a
webpage
4. Javascript introduces as a client side language
5. Difference between client side & server side
Client side Server side
In a client side lang the In a server side lang ,the execution
execution happens on happens on the application /database
the users system .ie server
browser
No need to install an In a server side lang if uses have to use
external engine the language they have to install they
/compilation engine .It have install external engine/
will be present in the compilation engine
browser
Ex:html ,css, javascript Ex: C# ,java , ruby ,python
HTML
JS
CSS
1. Internal javascript
2. External javascript
3. Javascript using node.js
1)Internal javascript
2)External javascript
1. To execute a js program on a server side and client side we use one software known as node.js
2. To execute a node.js program on a terminal we use a command “node filename.js”
Variables in javascript
1. Var
2. Let
3. const
Var
It is a variable keyword that is used in js to declare a variable and also initialize a value
Using var we can re-initialize (change the value ) a value to the same variable number of times
Ex:
a=100; // initialized
a=300; // re-initialized
console.log(“ a is “+a);
let
It is a variable keyword that is used in js to declare a variable and also initialize a value
Using let we can re-initialize a new value to the same variable but we cannot re-declare the same variable .
Ex:
let a;
a=100;
a=300;
console.log(“ a is “+a);
Const
It is a variable keyword that is used in js to declare a variable and also initialize a value
Ex:
const a=200;
console.log(“ a is “+a);
Js is a programming language in which each line of program is executed in a single thread one after the other
The variables and functions that is created in js will be in the form of objects
Every variable and function are executed in java script in the form of key and value pair
1.Memory allocation
Is a temporary space created in java script engine to store the objects during execution
MAC in js supports auto garbage collection that means the variables and functions which are not in use will be
automatically freed by garbage collectors
2.Global execution context (GEC)
Is also known as code component or thread component in which execution of every variable and function get
performed
Write a js program to count the total number of even elements present from zero to 99
const username='Dinesh';
let password=7777;
let Accname="Dinesh V C";
let bal_amount=5000;
let last_v ='30-jun-2024';
if(username=='Dinesh' && password==7777){
console.log(Accname+ "\n"+ bal_amount +"\n"+ last_v);
}else{
console.error("Invalid username or password");
}
Comparison operator
“==” & “!=” both are considered as comparison operators in javascript that is used to compare only the values of
operands on both the sides
Using == comparison operator we can not compare the both values and its datatype of the variable
console.log(a==b); // true
console.log(a!=b); //false
To avoid this problem in javascript we use a special operator known as strict comparison operator (“===” & ”!==”)
Strict comparison operator is a special operator that is used in java script to compare the values and the datatypes of
both operands
strict comparison operator returns a Boolean value of true is both the operands values and datatype are same or
else it will return false
Its is special operator that is used in java script to return the data type of a variable
let a=100; let b=’100’; console.log(typeof a); // number console.log(typeof b); //String
Identifiers in js
Identifiers are the variable names or the names that is given for a function ,class ,value , object ,array etc…
Keywords in js
Keywords are the predefined words That is already defined to perform some specific function in java script
Ex: var , function , let , const ,promise , pop , Document ,Promise ,async ,await, then , this , try , catch , splice,
Reverse , length
Datatypes in js
1)Primitive datatypes
We have elements like number , strings ,Boolean , null , undefined , bigint , symbol
2)Non-Primitive
1)Number
It is part of primitive datatypes in js that is used to store different types of mathematical numbers
2)Strings
It is part of primitive datatypes in js that is used to store any values that is return inside ‘ ‘ || “ ”
3)boolean
It is part of primitive datatypes in js that can accept only 2 values that is either true or false
Its is a Object
5)undefined
If a variable is declared in js and does not get initialized with any values then the datatypes of that variables will be
undefined.
Using function we can write a program once and run it any no of times
Advantage of functions
2)Less complexity
3)Easy to understand
To use the functions in js we have to call to function by using the function name . ex: function check() { }
1)User-defined functions
2)Pre-defined functions
//logic |
} |
The function without any parameters are values is known as empty function or normal function
Eg: function print(){ | print()
Console.log(“Welcome”);
}
The function with arguments and its corresponding values is known as function with parameter
Eg: let c=0; || add(5,6);
Function add(a,b){
C=a+b;
Console.log(c);
}
The function that accepts arguments and return a value is known as function with return keyword
To create a function with a return type we need to use the keyword return
The value retuned needs to be stored in a separate variable outside the function
Arrays are the collection of homogenous and heterogenous elements that is stored in a variable
In java script the array elements are dynamic /automatic in allocation that means user can add or remove an element
from the array dynamically
In java script arrays are dynamic in length that means the size of the array can increase or decrease during execution
In java script the bucket that stores the elements of array will be dynamically removed once we take the element
from the array that leads to automatic garbage collection
• Easy to configure
• Allocation and reallocation is easy
• Less restrictions
• Application is used in shopping kart
• Used in wishlist etc…
Array in-built methods
push – is used to insert multiple elements at the last index position of the array
ex: let arr=[1,”hi”,null,5]; output : [1,”hi”,null,5, ‘hello’,’dude’]
arr.push(‘hello’,’dude’);
pop – is used to remove one element at the last index position of the array
ex: let arr=[1,”hi”,null,5]; arr.pop(); output : [1,”hi”,null,5, ‘hello’];
unshift – its is used to add no of elements at the starting index position .using unshift will change the index of each
position in arr
ex: arr.unshift(‘hello’,’hellboy’); output:[‘hello’,’hellboy’, 1,”hi”,null,5, ‘hello’]
shift - its is used to remove one element from the starting index position .using shift will change the index of each
position in arr
ex: arr.shift(); output:[’hellboy’, 1,”hi”,null,5, ‘hello’]
splice – it is used to add no of elements and to remove no elements at any specified index position in the array .
its has 3 parameters splice (“start index”,”delete count”,”new elememts…”)
ex: arr.splice(0,2,”Hello “ ,”Deadpool”); output:[“Hello”,”Deadpool”, 1,”hi”,null,5, ‘hello’]
slice- it cannot affect the original array it returns a sub part of an array as an output .
it has 2 arguments slice(“start index”,”end index”)
from start index to the end index ecluding the end index and return the sub array
reverse- It cannot affect the original array it returns a sub part of an array as an output .
It is used to reverse the order of element that is present in the array based on its index position
ex: let arr=[1,”hi”,null,5]; output : [’dude’,’hello,5,null,”hi”,1]
arr.reverse();
String in javascript
Strings are the collection of primitive datatypes of characters in javascript that is written inside of “” or ‘ ‘ .
Str.length is a special keyword that is used in js to find the total length of a string
Str.toUpperCase() :it converts all char to uppercase and return a new string
Str.toLowerCase()::it converts all char to lowercase and return a new string
Str.replace(“l”,”t t”) : replace the first occurance of the given substring with the new substring and return a new string
Str.replaceAll(“l”,”t t”) : : replace the all occurance of the given substring with the new substring and return a new
string
Str.charAt(0): return the new string with the char in that index position
Str.indexOf(‘a’,5): returns a new string with index position of that string from that starting point
Str.lastIndexOf(“Z”): returns a new string with index position of that string from the last index position
Objects in js
Objects are the collection of non-primitive datatypes that is used in javascript to store the collection of elements in
key and value pair.
In js each and every item that is present in inherited from object class
In this method the element are created inside a block of curly braces directly by the developer in the from of key and
value pair.
Eg:
Syntax: Const students={
Id:”101”,
Const objName ={
Name:”abc”,
Key1:value1,
Subject:{“java”,”web”},
Key2:value2,
Marks:{java:123,web:40}
Key3:value3…}
}
Console.log(students.marks.web);
Console.log(students.name);
2.object using Functions
It is a method of creating a normal function in js that will initialise the arguments of the function into keys
The values passed to the functions during the function call will be considered as a value for the object and the
function name will be considered as a object name.
We can create the object by performing the function call followed by “new”
Using the reference variable the stores the function and we can create the objects in the form of key and value pair.
Eg:
Function students(id,name,subject){
This.id=id;
This.name=name;
This.subject=subject;
}
Let s1=new students(10,”dinesh”,{“java”,”web”});
Operations on objects
Create and read -We can create a new key and value pair into the existing object dynamically
We can also view the object that has been created dynamically
Eg:
Std1.sal=120000;
Output:
Students {Id:”101”,Name:”abc”,subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}
Update- we can update the existing key and value pair into the object dynamically
Eg:
Std1.id=12;
Output:
Students {Id:12,Name:”abc”,subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}
Delete-we can the delete the data from the object dynamically using the “delete” keyword .
Eg:
delete std1.name;
Students {Id:”101”, subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}