JavaScript Notes
JavaScript:
1. It is a lightweight, cross-platform, interpreted compiled programming language which
is also known as scripting language for webpages.
2. It is well known for the development of web pages many non-browser environments
also use it.
3. It is a client-side and server-side scripting development language.
4. It is an imperative and declarative type of language.
5. It contains a standard library or objects, like array, date, and math and a core set of
languages like operators, control structures and statements.
6. It is a weakly typed language.
Some popular engines:
1) V8 engine for google
2) Spidermonkey for mozilla
3) Javascriptcore for safari
4) Chakra for internet explorer
Characteristics of js:
1) It is purely object oriented language (based on objects for storing most king of data.)
2) It is interpreted language not compiled
- Line by line code is executed, like first it will check if it is correct then it
executes and check next line
3) It uses just-in-time (JIT).
4) It is synchronous in nature.
- Single-threaded architecture has one stack for execution.
JavaScript Implementation:
We can execute js instruction directly in the console provided by the browser.
We can execute js instruction by embedding in the html page
1) Internal js implementation (with the help of script tag we can embed js code
instruction)
2) External js implementation (create new js file with .js extension, link the js file
with html using script tag)
JavaScript Notes
Tokens:
A smallest individual unit of programming language.
Types of tokens:
1. Keywords:
- It is a predefined word, reserved word, or system in-built word, already task is
assigned to the keywords.
- Keywords always should be in lowercase.
- It can’t used as an identifier.
2. Identifier:
- It means a name given to the component like variable name, function name,
class name
- identifier can’t be used as a keyword.
3. Literals/Values: providing value to the member.
Variable: It is one type of container in which we can store any type of value
Types:
1) Let
2) Var
3) const
Scope of variable: Visibility of variable within the code.
JavaScript Notes
Global Scope Block Scope
1. We can declare variable anywhere Access within the block of code.
within the code or access the
variable anywhere within the code.
2. Var is a global scope.
JavaScript Notes
Operators:
1. Arithmetic Operator (+,-,%,/,*)
2. Relational Operator (Comparison)
3. Logical Operator (&&, ||, !)
4. Assignment Operator (+=, -=, *=, /=, %=)
5. Bitwise Operator (^(XOR), ~(NOR), &(AND), >>, <<)
JavaScript Notes
JavaScript Notes
Looping Statements:
It helps the programmers to execute the set of instructions repeatedly
Eg:
1. For loop:
for(initialization; condition; increment/decrement)
{
//block of code
}
2. While loop:
while(condition)
{
//block of code
}
3. Do while loop:
do
{
//block of code
}
While(condition)
Decision making statement:
1. If else
2. Switch
3. If else if
Switch Statement:
JavaScript Notes
Prompt: It is a dialogue box that allows to user to input the data. It includes a text field
where the user can type their responses. You can create prompt using prompt() function.
Alert: It is a simple dialog box that displays a message to the user. It typically contains a
information or warning. You can create using the alert() function.
Confirm: It is dialog box is used to get user confirmation for an action. It typically has two
buttons “Ok” & ”Cancel”. You can create confirm using the confirm() function.
Array: An array is a continuous block of memory to store the data. array is a homogeneous
& heterogeneous type of storage
1. homogeneous means the same kind of data stored in that array
2. heterogeneous means different kinds of data stored in that array
3. array[10, 20, 30, 40, 50];
4. array["Laila",'mala',`sheela`, true,20,20.25, null, True,{name: "Gauri"}]
5. In the javascript array is an object using three ways you can create an array in an
object:
1) by creating literals
syntax: let arr=[value1, value2, value3.....valuen];
example: let arr=[10,30,20]
[Link](arr);
2) by creating an instance of an array using a new operator
let arr2 = = new Array();
3) by creating an instance of an array and initializing the elements using an array can
be stopped.
let arr = new Array(10,20,30);
JavaScript Notes
Array methods:
1. Shift:
2. Unshift
3. Push
4. Pop
5. Reverse
6. Sort
7. Indexof
8. Length
9. Includes
10. Slice
11. splice
Object Writable: When a property is writable, its value can be changed and if a property is
not writable then attempts to change its value will be ignored. And the value will remain
unchanged
Object Enumerable: When a property is enumerable it can be iterated over using a loop
such as for in if a property is not enumerable it will be skipped during iteration.
String:
JavaScript Notes
Collection of characters
Anything which is enclosed within “”, ‘’, `` is considered as string in javascript
We can create string by using two ways:
1) Directly using literals
Var str = “guari”;
[Link](str);
2) Using new keyword
Var str1 = new String(“Gauri”);
[Link](str1);
Function():
1. It is a block of instruction which is used to perform task.
2. It get executed only when it is called.
3. Main advantage of function is we can achieve code reusability.
4. To call a function we need its reference and ()
Note: In JavaScript functions are beautiful, every function is nothing but an object.
Syntax:
Function function name(){
}
Nested function
Arrow function:
It was introduce from E56 of JS
Main function of using arrow function is to reduce the syntax
(parameter list) => {=}
Parameter is optional
If function has only one statement, then block also optional
It is mandatory to create block if return keyword is used.
Eg:
● Error statement: const c = (n1 + n2) => return n1 + n2;
[Link] (10, 20)
● Correct statement:
const c = (n1, n2) => {return n1 + n2};
[Link] (c(10, 20))
JavaScript Notes
IIFE:
Call stack
Map Filter
Reduce method
Reduce method: the javascript [Link]() method in javascript. It is used to reduce the
array to a single value and executes a provided function for each value of the array (from left
to right) and the return value of the function is stored in an accumulator.
- Syntax: [Link](function(total, current value, current index, arr), initial value)
JavaScript Notes
Parameters: the method accepts five parameters
1. function(total, current value, index, arr): It is the required parameters and is used
to run for each element of the array it contains four parameters which are listed
below:
a. Total: it is a required parameter and is used to specify the initial value for the
previously returned value of the function
b. Current value: it is a required parameter and is used to specify the value of
the current element
c. Current index: it is an optional parameter and is used to specify the array
index of the current element
d. Arr: It is an optional parameter to be used to specify the array object the
current element belongs to.
2. Initial value: It is an optional parameter and is used to specify the value to be passed
to the function as initial value.
Javascript setTimeout() method:
- settimeout() in javascript is used to execute a function after waiting for a specific time
interval. This method returns a numeric value that represents the id value of the timer
- Syntax: setTimeout(function, miliseconds);
Javascript setInterval() method:
- setInterval() in javascript is used to repeat a specified function at every given time
interval. It evaluates an expression or calls a function at given intervals. This method
continues the calling of function until the window closes the clearInterval() method is
called
Spread operator(...):
- It is used to expand elements of an array or object. It allows an iterable like array or
string to be expanded in places where zero or more arguments(function calls) or
elements are expected.
Rest operator(...):
- The rest parameter syntax allows a function to accept an indefinite number of
arguments as an array, making it easy to work a function that can accept any number
of arguments.
Closure: Javascript allows a function to access variables from an enclosing scope even
after the outer function has completed executing.
Higher order function: It is a function that accepts a function as a parameter and or returns
a function
Callback function: It is a function that is to be executed after another function has finished
execution OR a function that is passed as an argument to another function so that it can be
executed in that other function called a callback function.
JavaScript Notes
DOM: Document Object Model
1. It represents the whole HTML document.
2. When html document is loaded in the browser. It becomes a document object
3. It is the root element that represents the HTML document.
4. It has some properties and methods with the help of a document object. We can add
dynamic content to our web page.
Methods in document object:
1. write(“string”): Write the given string on the document.
2. writeln(“string”): Writes the given string on the document with a newline character at
the end.
3. getElementId(“value”): returns the element having the given id value.
4. getElementByTagName(): returns all elements having the given tag name.
5. getElementByClassName(): returns all the elements having the same class name.
Why DOM is required?
HTML is used to structure the web pages and javascript is used to add behaviour to our
webpage. When an HTML file is loaded on the browser, the javascript cannot understand the
HTML document directly. So, the corresponding document is created (dom). DOM is
basically the representation of the HTML document but in a different format with the use of
objects. Javascript interprets DOM easily i.e. javascript cannot understand the tags (h1, p,
img, a) in HTML document but can understand objects in DOM. Now, Javascript can access
each of object using (h1, p) using different functions.
Why called an object model?
Documents are modeled using objects, and the model includes not only the document
structure but also the document behaviour and the object composed like a tag element with
attributes in HTML.
Promise: promises in real life express a trust between two or more persons and an
assurance that a particular thing will surely happen in javascript, a promise is an object
which ensures to produce a single value in the future (when required), promise in js is used
for managing and tackling asynchronous operations.
1. A promise can never fail OR succeed twice OR more. This happen only once time
2. A promise can neither switch from success to failure, to success. If promise has
either succeed OR matter the event happened earlier.
Constructor in promise:
new Promise(function(resolve, reject){});
Terminology in promise:
1. Pending: a pending promise is neither rejected nor fulfilled yet.
2. Fulfilled: promise action is fulfilled successfully.
3. Rejected: the related promise action is failed to be fulfilled.
4. Settled: either the action is fulfilled or rejected.
JavaScript Notes
Error:
1. runtime error: Occurs during the execution of the code.
2. Syntax error: This occurs when the code violates the language syntax rules.
3. Logical error:
4. Type error.
5. Reference error.
Methods in JavaScript:
1. call()
2. apply()
3. bind()
OOPS:
Object Oriented Programming
Class:
1. Instance of object
2. Blueprint of object
3. Template for creating objects
4. Class is a collection of objects with common behaviour
Syntax:
Class classname{
//body
}
JavaScript Notes
Constructor:
Syntax:
constructor (name, id)
{
[Link] = name;
[Link] = id;
}
Encapsulation:
1. Wrapping of data members & data methods to one single unit.
2. Encapsulation is used for security purposes.
3. Direct access to the members of the other object is not possible.
4. So by using the getter & setter method, you can achieve data hiding.
Abstraction:
1. It hides implementation details & shows functionality to the user.
2. Private(abstract) => You can’t create an object.
Inheritance:
1. Acquiring properties parent class to child class.
2. Parent class properties inherited in that child class.
3. If you want to inherit parent and child then you can use ‘extends’ keyword.
Prototype:
1. In JavaScript, every function has a property called as prototype
2. By default this property is empty.
3. You can add properties and methods to it.
Prototype-based inheritance: This inheritance allows objects to inherit properties and
methods from other objects.