Professional Documents
Culture Documents
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
Displaying clocks etc.
~ tilde ` backquote
! exclamation @ ampersat,at
# hash $ dollar
% percent ^ caret
& and * asterisk
() paranthesis - hyphen
_ underscroll + plus
= equal {} curely braces
[] square brackets <> angular brackets
: colon ; semicolon
" double quotes ' single quote
, camma . fullstop
? question mark / forward slash
\ back slash
Reserved words: The programming language reserved words that should not be used as
identifiers is called reserved words or keywords.
Ex: abstract,arguments,await,boolean,break...
* JavaScript Literals are constant values that can be assigned to the variables that are called
literals or constants.
* JavaScript Literals are syntactic representations for different types of data like numeric,
string, Boolean, array, etc.
integer : 10,20,30,-34,....
float : 8.5,11.6,-9.5.....
string : "brillant","APPLE","Ongole".....
array : var fruits = ["Apple", "Orange", "Mango", "Banana"];
boolean : true,false
variable: A variable is a name given to a memory location where some value will be stored.
1. String x="HELLO"
2. Number x=3;
3. Bigint x=2n
4. Boolean x=true,y=false
5. Undefined x;
6. Null x=null;
7. Symbol x=Symbol('a')
8. Object
Arithmetical Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division(Quotient)
% Modulus (Division Remainder)
++ Increment
-- Decrement
Assigment Operators
Example
x=5
x+=1 x=x+1
5+=1 x=5+1
x=6 x=6
Comparison Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Ternary operator
Operator Description
? ternary operator
Other operators
Operator Description
Bitwise Operators: Bit operators work on 32 bits numbers. Any numeric operand in the
operation is converted into a 32 bit number. The result is converted back to a JavaScript
number.
String operators
+
+=
Console Programming
Console object: In JavaScript, a console is an object which provides access to the browser
debugging console. We can open a console in a web browser by using Ctrl + Shift + I for
windows and Command + Option + K for Mac.
console.log() Method: 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.
Syntax: console.log("");
Ex: console.log("State Bank of India")
Syntax:console.log(variable)
Ex: x=5
console.log(x)
Syntax:console.log("text",variable)
Ex: x=5
console.log("value of x=",x)
The console.error() method in HTML is used to display an error message on the console. The
console.error() method is used for testing purposes. The error message is sent as a parameter
to the console.error() method.
The console.warn() method is used to write a warning message in the console. So open the
console to display the output (warning message).
Syntax:
console.warn( message )
The console.clear() method in HTML is used to clear the console and writes some message
“Console was cleared” on the console whenever it is executed. This method does not require
any parameter.
Syntax:
console.clear()
The console.time() method in HTML is used to start a timer in the console view. The
console.time() method can be used for calculating the time of programs for various testing
purposes. The label is sent as a parameter to the console.time() method.
Syntax:
console.time( label )
The console.timeEnd() method in HTML is used to end a timer started by the console.time()
method. This can be used to calculate the time of certain operations for testing purposes.
Syntax:
console.timeEnd( label )
The console.table() method in HTML is used for writing data in tabular form in the console
view. The table data is sent as a parameter to the console.table() method which must be an
object or an array containing the data to be filled in the table.
Syntax:
The console.count() method in HTML is used to write the number of times the
console.count() method is called. The console.count() method can be added to a label that
will be included in the console view. The label is an optional parameter sent to the
console.count() method.
Syntax:
console.count( label )
The console.group() method in HTML is used to create a group of messages in the console. It
indicates the start of a message group and all the messages written after calling the
console.group() method will write inside the message group. The label is sent as an optional
parameter to the console.group() method.
Syntax:
console.group( label )
The console.groupEnd() method in HTML is used to indicate the end of a group of messages
in the console which has been created using the console.group() method. This method does
not accept any parameter.
Syntax:
console.groupEnd()
https://www.programiz.com/javascript/online-compiler/
a=5;b=3
console.log("values before swap a=",a," ","b=",b)
c=a
a=b
b=c
console.log("values after swap a=",a," ","b=",b)
a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a+b
b=a-b
a=a-b
console.log("values after swap a=",a," ","b=",b)
a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a*b
b=a/b
a=a/b
console.log("values after swap a=",a," ","b=",b)
a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a^b
b=a^b
a=a^b
console.log("values after swap a=",a," ","b=",b)
a=5;b=3
console.log("Addition=",(a+b))
console.log("subtraction=",(a-b))
console.log("multiplication=",(a*b))
console.log("division=",(a/b))
console.log("Modulus=",(a%b))
console.log("Exponentation=",(a**b))
ecode="E101"
eno=101
ename="Anil"
esal=4555.85
egrade='a'
console.log("Ecode=",ecode)
console.log("Eno=",eno)
console.log("Ename=",ename)
console.log("Esal=",esal)
console.log("Egrade=",egrade)
-----------------------------------------------------------------------------------
age=parseInt(prompt("Enter Your age in number..:"))
console.log("Age=",age)
console.log("Typee",typeof(age))
r=parseInt(prompt("Enter Radius...:"))
ci=2*Math.PI*r
console.log("Circumference of Circle=",ci)
a=Math.PI*r*r
console.log("Area of Circle=",a)
-----------------------------------------------------------------------------------------
p=parseInt(prompt("Enter Principal..:"))
t=parseInt(prompt("Enter Time..:"))
r=parseInt(prompt("Enter Rate of Interest..:"))
si=p*t*r/100
console.log("Simple Interest=",si)
c=p*Math.pow(1+r/100,t)
console.log("compound Interest=",c)
-----------------------------------------------------------------------------------------
//celsius to fahrenheit
-----------------------------------------------------------------------------------------
//if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
//if else
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else
{
console.log("b is big")
}
//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}
//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}
else if(a==b)
{
console.log("both are equal")
}
//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}
else
{
console.log("both are equal")
}
//nested if
x=parseInt(prompt("Enter value for x..:"))
if(x>=0)
if(x==0)
{
console.log("zero")
}
else
{
console.log("positive")
}
else
{
console.log("negative")
}
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
t=a>b?a:b
console.log(t," is big")
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
c=parseInt(prompt("Enter c..:"))
d=parseInt(prompt("Enter d..:"))
e=parseInt(prompt("Enter e..:"))
x=a
if(b>x) x=b
if(c>x) x=c
if(d>x) x=d
if(e>x) x=e
console.log(x,"is big")
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
c=parseInt(prompt("Enter c..:"))
if(a>b && a>c)
{
console.log("a is big")
}
else if(b>c)
{
console.log("b is big")
}
else
{
console.log("c is big")
}
year=parseInt(prompt("Enter Year..:"))
age=parseInt(prompt("Enter age..:"))
if(age>=65)
{
console.log("Senior Citizen")
console.log("Eligible To Vote")
}
else if(age<65 && age>=18)
{
console.log("Major Citizen")
console.log("Eligible To Vote")
}
else
{
console.log("Minor Citizen")
console.log("Not Eligible To Vote")
}
x=parseInt(prompt("Enter a..:"))
if(x%2==0)
{
console.log("Even Number")
}
else
{
console.log("Odd Number")
}
Loops:
Loops are used to execute a statement repeatedly until the given condition is satisfied.
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
while loop: In a while loop the condition is evaluated at the beginning of the loop that is
statements will
be executed only when the expression at while is true.
while(expression)
{
statement;
}
i=1
do
{
console.log(i)
i=i+1
}while(i<=10)
i=1
for(i=1;i<=10;i++)
{
console.log(i)
}
i=1
for(i=1;i<=10;i++)
{
if(i>5)
break
console.log(i)
}
i=1
for(i=1;i<=10;i++)
{
if(i%2==0)
continue
console.log(i)
}
i=7
switch(i)
{
case 1:
console.log("good")
break
case 2:
console.log("better")
break
case 3:
console.log("best")
break
default:
console.log("invalid")
}
Arrays
x=[10,20,30,40,50]
console.log(x[0])
x=[10,20,30,40,50]
for(i=0;i<5;i++)
console.log(x[i])
x=[10,20,30,40,50]
for(i=4;i>=0;i--)
console.log(x[i])
s=0
x=[10,20,30,40,50]
for(i=0;i<5;i++)
{
console.log(x[i])
s=s+x[i]
}
av=s/5
console.log("Sum=",s)
console.log("Average=",av)
x=[10,20,30,40,50]
max=x[0]
min=x[0]
for(i=0;i<5;i++)
{
console.log(x[i])
if(x[i]>max)
max=x[i]
else if(x[i]<min)
min=x[i]
}
console.log("Max=",max)
console.log("Min=",min)
x=new Array(10,20,30,40,50)
console.log(x[0])
x=new Array(10,20,30,40,50)
for(i=0;i<5;i++)
{
console.log(x[i])
}
x=new Array(10,20,30,40,50)
max=x[0]
min=x[0]
for(i=0;i<5;i++)
{
console.log(x[i])
if(x[i]>max)
max=x[i]
else if(x[i]<min)
min=x[i]
}
console.log("Max=",max)
console.log("Min=",min)
x=[101,"Madhu",88999.76,'b',1]
for(i=0;i<5;i++)
console.log(x[i])
x=new Array(10,"anil",455.54,'a',3400)
for(i=0;i<5;i++)
{
console.log(x[i])
}
https://anim.ide.sk/basic_algorithms.php
Array methods
length
pop()
push()
shift()
unshift()
join()
delete()
concat()
flat()
splice()
slice()
toString()
Pop — removes the last element from an array and returns the removed element itself.
Shift — removes the first element from an array and returns that removed element.
Sort — sorts the elements of an array in ascending order and returns this array
Fill — adds or replaces all the elements of an array from a start index to an end index with a
provided value.
Find — returns the value of the first element in the provided array that satisfies the provided
testing function.
FindIndex — returns the index of the first element in the array that satisfies the provided
testing function.
IndexOf — returns the first index at which a given element can be found in the array.
Some — returns boolean value whenever at least one element in the array passes the provided
testing callback function.
Every — returns true if every element in this array satisfies the testing function.
Includes — returns boolean if a provided element is present at least once in the array. The
difference from some method —is that here
the element/value itself is passed as an argument, instead of callback function.
Map — returns a new array. It goes each element one by one and modifies them by calling a
provided function.
Filter — returns a new array that will contain only those elements, for which the provided
filtering function returns true.
Join — creates and returns a new string by concatenating all of the elements in an array, but
these elements will be separated by the indicated separator.
Concat — combines two arrays and returns a third one, as a final result.
Flat — if an array contains nested ones, it will move all of them on the higher level, that will
result just one new array. It’s also possible to specify the needed depth of nesting.
Slice — with the provided indexes, it takes a specified section of an original array and creates
a new one with only these elements. Staring index — is included, but end one — is not.
x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x)
x.push("Inkpen")
console.log(x)
x.pop()
console.log(x)
x.shift()
console.log(x)
x.sort()
console.log(x)
x.fill("nipuna")
console.log(x)
console.log(x.includes("desk"))
console.log(x.indexOf("eraser"))
x.reverse()
console.log(x)
x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
y=["apple","mango","grapes","orange"]
z=x.concat(y)
console.log(z)
x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x.at(2))
x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x.slice(1,3))
console.log(firstEvenIndex); // Output: 0
console.log(squareNumbers);
console.log(sum); // Output: 30
console.log(firstElement); // Output: 2
console.log(numbers); // Output: [0, 4, 6, 8, 10]
console.log(firstIndex); // Output: 5
console.log(lastIndex); // Output: 5
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")
Note: Once created a function can be used any number of times we require,this reduces the
length of the
program.
Types of Functions
Math Object
console.log(Math.abs(-100))
console.log(Math.abs(-100.45))
console.log(Math.tan(40))
console.log(Math.sin(60))
console.log(Math.cos(80))
console.log(Math.round(456456.3455))
console.log(Math.floor(456455.345345345))
console.log(Math.ceil(456455.345345345))
console.log(Math.PI)
console.log(Math.E)
console.log(Math.sqrt(4))
console.log(Math.pow(2,4))
String Object
str1="brilliant"
str2="ONGOLE"
str3="state bank of india"
str4=" ongole "
console.log("character at="+str1.charAt(1))
console.log("upper case="+str1.toUpperCase())
console.log("lower case="+str2.toLowerCase())
console.log("trim="+str4.trim())
console.log("substring="+str3.substring(0,5))
console.log("startswith="+str3.startsWith("bri"))
console.log("replace="+str3.replace('a','x'))
Date Object
d=Date()
console.log("Date=",d)
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.fly()
console.log("----------------------------------")
Pigeon=new Bird()
Pigeon.fly()
-------------------------------------------------------------------------------------------------
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
buildnest()
{
console.log("They build nest to live");
}
Parrot=new Bird()
Parrot.fly()
Parrot.buildnest()
console.log("----------------------------------")
Pigeon=new Bird()
Pigeon.fly()
Pigeon.buildnest()
----------------------------------------------------------------------------------------------------
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.age=5
Parrot.wings=2
Parrot.weight=3.4
Parrot.color="GREEN"
console.log("Age of Parrot=",Parrot.age)
console.log("Age of Parrot=",Parrot.wings)
console.log("Age of Parrot=",Parrot.weight)
console.log("Age of Parrot=",Parrot.color)
Parrot.fly()
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.age=5
Parrot.wings=2
Parrot.weight=3.4
Parrot.color="GREEN"
console.log("Age of Parrot=",Parrot.age)
console.log("Age of Parrot=",Parrot.wings)
console.log("Age of Parrot=",Parrot.weight)
console.log("Age of Parrot=",Parrot.color)
Parrot.fly()
console.log("-------------------------------")
Pigeon=new Bird()
Pigeon.age=7
Pigeon.wings=2
Pigeon.weight=4.5
Pigeon.color="GREY"
console.log("Age of Pigeon=",Pigeon.age)
console.log("Age of Pigeon=",Pigeon.wings)
console.log("Age of Pigeon=",Pigeon.weight)
console.log("Age of Pigeon=",Pigeon.color)
Pigeon.fly()
//constructor
class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
}
MC=new MyCalci(20,10)
MC.dispvals()
class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
mysum()
{
return this.a+this.b
}
}
MC=new MyCalci(20,10)
MC.dispvals()
console.log("Sum=",MC.mysum())
class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
mysum()
{
return this.a+this.b
}
}
MC=new MyCalci(20,10)
MC.dispvals()
console.log("Sum=",MC.mysum())
console.log("----------------------------")
MC1=new MyCalci(100,150)
MC1.dispvals()
console.log("Sum=",MC1.mysum())
Inheritance:
Deriving a new class from the already existing class is called
inheritance. Where the already existing class is called base class or parent class or super class
and the newly created class is called child class
or derived class.
//single inheritance
class A
{
funca()
{
console.log("Function of class A")
}
}
class B extends A
{
funcb()
{
console.log("Function of class B")
}
}
objB=new B()
objB.funca()
objB.funcb()
//hierarchical inheritance
class A
{
funca()
{
console.log("Function of class A")
}
}
class B extends A
{
funcb()
{
console.log("Function of class B")
}
}
class C extends A
{
funcc()
{
console.log("Function of class C")
}
}
class D extends A
{
funcd()
{
console.log("Function of class D")
}
}
objB=new B()
objB.funca()
objB.funcb()
console.log("-----------------------------")
objC=new C()
objC.funca()
objC.funcc()
console.log("-----------------------------")
objD=new D()
objD.funca()
objD.funcd()
https://www.javascripttutorial.net/javascript-dom/
The Document Object Model (DOM) is an application programming interface (API) for
manipulating HTML documents. The HTML DOM is a standard object model
and programming interface for HTML. It defines:
In other words: The HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
Selecting elements