Core JS PDF
Core JS PDF
• HTML
• CSS
What is JavaScript ?
JavaScript is the programming language of HTML and the Web.
It makes web page dynamic. It is an interpreted programming
language with object-oriented capabilities.
JavaScript History
• 1995 by Brendan Eich (NetScape)
• Mocha
• LiveScript
• JavaScript
• ECMAScript
Server
User
HTML
CSS
JavaScript
Tools
• Notepad
• Notepad ++
• Any Text Editor
JavaScript and Java Same?
Advantage of JavaScript
• Client Side Execution
• Validation on Browser
• Easy Language
Disadvantage of JavaScript
• Less Secure
• No Hardware Access
• JavaScript Enable Browsers
Way of adding JavaScript
• Inline
– Inside head Tag
<script>
– Inside body Tag
• External file </script>
– Inside head Tag
– Inside body Tag
Inline
• Inside head Tag
<html>
<head><title>Hello JS</title>
<script type="text/javascript">
document.write(“Hello Geekyshows”);
</script>
</head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
</body>
</html>
Inline
• Inside body Tag
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<script type="text/javascript">
document.write(“Hello Geekyshows”);
</script>
</body>
</html>
External Notepad
<html>
<head><title>Hello JS</title>
<script type="text/javascript">
src=“geek.js” type="text/javascript">
</script>
document.write(“Hello Geekyshows”);
</script>
• Save with .js extension
</head> Ex: - geek.js
<body> • Now link this file to HTML
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
</body>
</html>
External Notepad
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p> • Save with .js extension
<script type="text/javascript">
src=“geek.js” type="text/javascript"> Ex: - geek.js
</script>
document.write(“Hello Geekyshows”); • Now link this file to HTML
</script>
</body>
</html>
<script type="text/javascript"> <script src = “geek.js” type="text/javascript">
document.write(“Hello World”);
</script>
</script>
</body>
</html>
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<script type="text/javascript">
<script src = “geek1.js” type="text/javascript">
document.write(“Hello world”);
document.write(“Hello world”);
</script>
</script>
<script src = “geek1.js” type="text/javascript"> </script>
</body>
</html>
Display
• document.write( )
• window.alert( )
• console.log( )
• innerHTML
document.write( )
This function is used to write arbitrary HTML and content into
page. If we use this function after an HTML document is fully
loaded, will delete all existing HTML. It is used only for testing
purpose.
Ex: - document.write(“Hello World”);
document.write(variable);
document.write(4+2);
document.write(“Hello World.<br>”);
document.write(“Hello World.<br>” + variable + “<br>”);
window.alert( )
This function is used to display data in alert dialog box. alert
really should be used only when you truly want to stop
everything and let the user know something.
Ex: - window.alert(“Hello World”);
window.alert(variable);
window.alert(4+2);
window.alert(“Hello World” + variable);
console.log( )
This function is used to display data in console. This is used for
debugging purpose. We can identify our code‟s error.
Ex: - console.log(“Hello World”);
console.log(variable);
console.log(4+2);
console.log(“Hello World” + variable);
Identifier
An identifier is a name having a few letters, numbers and
special characters _ (underscore). It is used to identify a
variable, function, symbolic constant and so on.
Ex : -
X2
PI
Sigma
matadd
Variables
A variable is an identifier or a name which is used to refer a
value. A variable is written with a combination of letters,
numbers and special characters _ (underscore) and $ (dollar)
with the first letter being an alphabet.
Ex: c, fact, b33, total_amount etc.
Rules
• Variable can contain combination of letters, digits, underscores ( _ ), and
dollar signs ( $ ).
• Must begin with a letter A-Z or a-z or underscore or dollar sign
• A variable name cannot start with a number
• Must not contain any space characters
• JavaScript is case-sensitive
• Can‟t use reserved keywords
Keywords or Reserved Words
var delete for let break
super void case do static
function new switch while interface
catch else if package finally
this with class enum default
implements private throw yield typeof
const export import protected return
true continue extends in instanceof
public try debugger false
In JavaScript we do not need to specify type of the variable because it is
dynamically used by JavaScript engine.
We can use var data type. It can hold any type of data like String, Number,
Boolean, etc.
var price;
var name;
var name = “geeky shows”; name = “geeky shows”;
name = “geeky shows”;
var price;
var price = 125.36; price = 125.36;
price = 125.36;
• Inline
<head><title>Geeky Shows</title>
<style> <style>
p{color: red;} p{color: red;}
h1{color: #F0E68C;} h1{color: #F0E68C;}
</body>
</html>
Good Approach
• Inside head Tag <html>
<head><title>Geeky Shows</title>
<html>
<head><title>Geeky Shows</title>
<style>
<style>
• Inside body Tag p{color: red;}
h1{color: #F0E68C;}
p{color: red;}
h1{color: #F0E68C;}
</style>
</style> </head>
<script>
document.write("Hello"); <body>
document.write("Hello"); <h1>I am Heading</h1>
document.write("Hello"); <p>I am paragraph</p>
document.write("Hello"); <script>
document.write("Hello");
document.write("Hello");
document.write("Hello");
document.write("Hello"); document.write("Hello");
</script> document.write("Hello");
</head> document.write("Hello");
<body> document.write("Hello");
<h1>I am Heading</h1> </script>
<p>I am paragraph</p> </body>
</html>
</body>
</html>
If Statement
It is used to execute an instruction or block of instructions only if a condition is
fulfilled.
Syntax: -
if (condition)
{
block of statements;
}
If statement with logical operator
if ( (condition1) && (condition2) )
{
block of statements;
}
If else Statement
if… else statement is used when a different sequence of instructions is to be executed depending
on the logical value(True/False) of the condition evaluated.
Syntax: -
if(condition)
{
Statement_1_Block;
}
else
{
Statement_2_Block;
}
Statement_3;
Else If Statement
To show a multi-way decision based on several conditions, we use else if statement.
Syntax: -
If(condition_1)
{
statements_1_Block;
}
else if(condition_2)
{
statement_2_Blocks;
}
else if(condition_n)
{
Statements_n_Block;
}
else
statements_x;
Switch Statement All the cases will be evaluated
if you don't use break
statement.
Check several possible constant values for an expression.
Syntax: -
switch(expression){ switch(expression){
case expression 1: case expression 1:
block of statements 1; block of statements 1;
break;
break;
case expression 2:
case expression2;: case expression 3:
block of statements 2; block of statements 2;
break; break;
.
default:
.
default block of instructions;
default: }
default block of instructions;
}
For Loop
The for loop is frequently used, usually where the loop will be traversed a
fixed number of times.
Syntax:
for (initialization; test condition; increment or decrement)
{
block of statements;
}
for (initialization; test condition; increment or decrement)
{
block of statements;
}
var i = 0; var i = 0;
for(i = 0; i < 5; i++)
for( ; i < 5; i++) for(; ; i++)
{
{ {
document.write(i); document.write(i); if(i==3)
} } {
break;
var i = 0; }
for( ; i<5 ; ) document.write(i);
{ }
i++;
document.write(i);
}
Nested For Loop
For loop inside for loop.
Syntax:
for (initialization; test condition; increment or decrement)
{
block of statements;
for (initialization; test condition; increment or decrement)
{
block of statements;
}
}
for(i = 0; i < 3; i++)
{
document.write(i);
for(j = 0; j < 5; j++)
{
document.write(j);
}
}
While loop
The while loop keeps repeating an action until an associated condition returns
false.
Syntax:
var i = 0;
while (test condition) var i = 0; while (true)
{ while (i < 5) {
body of the loop; { if (i == 3)
document.write(i); break;
increment/decrement ;
i++ ; document.write(i);
} } i++ ;
}
Nested While loop
While Loop inside While Loop
var i = 0;
while (i < 3)
{
document.write(i);
i++ ;
var j = 0;
while (j < 5)
{
document.write(j);
j++ ;
}
}
Do While Loop
The do while loop is similar to while loop, but the condition is checked after the loop
body is executed. This ensure that the loop body is run at least once.
Syntax :
var i = 0;
do var i = 0; do
{ do {
{ if (i == 3)
statements; document.write(i); break;
} while(test condition); i++ ; document.write(i);
} while (i < 5); i++ ;
} while (true);
Nested Do While Loop
Do while inside Do while
var i = 0;
do
{
document.write(i);
i++ ;
var j = 0;
do
{
document.write(j);
j++ ;
} while (j < 5);
} while (i < 3);
Break and Continue
Break Statement – This statement is used to "jumps out" of a loop.
The break statement breaks the loop and continues executing the code after the
loop (if any).
Type of Function
– Library or Built-in functions
Ex: - valueOf( ) , write( ), alert( ) etc
– User-defined functions
Creating and Calling a Function
Creating a Function Calling a Function
Syntax: - Syntax: -
function function_name( ) function_name( );
{ Ex: -
Block of statement; Body of Function display( );
}
Ex: -
function display( )
{
document.write(“Geekyshows”);
}
Rules
• Function name only starts with a letter, an underscore ( _ ).
• Function name cannot start with a number.
• Do not use reserved keywords. e.g. else, if etc.
• Function names are case-sensitive in JavaScript.
How Function Call Works
The code inside a function isn‟t executed until that function is called.
Ex: -
function display(name)
{
document.write(name);
}
add(10, 20);
Many Function Arguments
If a function is called with too many arguments, these arguments can be reached using
the arguments object which is a built-in.
Syntax: -
function function_name (para1, para2=“value”, para3) // problem undefined
{
Block of statement;
}
Default Parameter
Syntax: -
function function_name (para1, para2=“value”, para3) // problem undefined
{
Block of statement;
}
Syntax: -
function function_name (para1, para2=“value1”, para3=“value2”)
{
Block of statement;
}
Default Parameter
Ex: -
function add (a, b, c=70)
{
document.write(“A= ” + a + "<br>");
document.write(“B= ” + b + "<br>");
document.write(“C= ” + c + "<br>");
}
add(10, 20); // 10 20 70
add(10, 20, 30); // 10 20 30
add(10); // 10 undefined 70
Default Parameter
JavaScript also allows the use of arrays and null as default values.
Ex: -
function add (a, b, c=null) // null is case sensitive
{
function add(a=[101])
document.write("A= " + a + "<br>"); {
document.write("B= " + b + "<br>"); document.write("A= " + a[0] + "<br>");
document.write("C= " + c + "<br>"); }
} add([10]); // 10
add(); // 101
add(10, 20); // 10 20 null
add(10, 20, 30); // 10 20 30
add(10); // 10 undefined null
Rest Parameters
The rest parameter allows to represent an indefinite number of arguments as an
array.
Syntax: - Syntax: -
function function_name (…args) function function_name (a, …args)
{ {
Block of statement; Block of statement;
} }
• Rest parameters are only the ones that haven't been given a separate name,
while the arguments object contains all arguments passed to the function.
• The arguments object is not a real array, while Rest Parameters are Array
instances, meaning methods like sort, map, forEach or pop can be applied
on it directly.
• The arguments object has additional functionality specific to itself (like the
callee property).
Return Statement
A return statement may be return Any type data, including arrays and objects.
Syntax : -
return (variable or expression);
Ex: -
return (3);
return (a + b);
return (a);
Return Statement
Syntax: -
function function_name(para1, para2, ….. )
{
Block of statement;
return (expression);
}
Ex: -
function add(a, b) {
return (a + b); // return a + b ;
}
Variable Scope
JavaScript has two scopes: -
• Global
• Local
Global Scope
A variable that is declared outside a function definition is a global variable,
and its value is accessible and modifiable throughout your program.
In a web browser, global variables are deleted when you close the browser
window (or tab), but remain available to new pages loaded into the same
window.
Semicolon
Store Anonymous Function in Variable
var a = function ( ) {
document.write(“Geekyshows”);
};
a();
document.write(disp(function(){
return "GeekyShows";
}));
Returning Anonymous Function
function disp(a){
return function(b){
return a+b;
};
}
var af = (disp(10));
document.write(af(20));
Arrow Function
An arrow function expression (previously, and now incorrectly known as fat
arrow function) has a shorter syntax compared to function expressions. Arrow
functions are always anonymous.
Syntax: -
( ) => { statements};
• An arrow function cannot contain a line break between its parameters and
its arrow.
var myfun = ( )
=> { document.write("Geekyshows");};
myfun();
Arrow Function
• With one Parameter
Syntax: (para) => {statement};
Syntax: para => {statement};
• No Parameter
Syntax: ( ) => {statement};
Arrow Function
• Default Parameter
Syntax: (para1, para2 = value) => {statement};
• Rest Parameter
Syntax: (para1, …args) => {statement};
Arrow Function
Syntax: (para1, para2) => expression;
Ex: (a, b) => a+b;
Above code is equivalent to:
function add(a, b) {
return a + b;
}
Syntax: (para1, para2) => {expression}; // it won‟t work
Ex: (a, b) => {a+b};
Syntax: (para1, para2) => {return expression};
Ex: (a, b) => {return a+b};
Immediately Invoked Function Expression (IIFE)
IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as
soon as it is defined.
It is a design pattern which is also known as Self-Executing Anonymous Function and
contains two major parts. The first is the anonymous function with lexical scope
enclosed within the Grouping Operator (). This prevents accessing variables within the
IIFE idiom as well as polluting the global scope.
The second part is creating the immediately executing function expression (), through
which the JavaScript engine will directly interpret the function.
Ex: -
(function( ) { document.write(“Geekyshows”);})( );
(function(a, b) { document.write(a + “ ” + b);})(10, 20);
Immediately Invoked Function Expression (IIFE)
• Avoid Creating Global variable and Functions
• As it doesn‟t define variable and function globally so there
will be no name conflicts
• Scope is limited to that particular function
Pass by Value
• JavaScript arguments are passed by value: The function only gets to know the
values, not the argument's locations.
• If a function changes an argument's value, it does not change the parameter's
original value.
• Changes to arguments are not visible (reflected) outside the function.
Pass by reference
• In JavaScript, object references are values.
• Because of this, objects will behave like they are passed by reference:
• If a function changes an object property, it changes the original value.
• Changes to object properties are visible (reflected) outside the function.
Typeof operator
The typeof operator is used to get the data type (returns a string)
of its operand. The operand can be either a literal or a data
structure such as a variable, a function, or an object.
Syntax: -
typeof operand
typeof(operand)
Ex: -
typeof “a”;
Undefined
The undefined type is used for variable or object properties that
either do not exist or have not been assigned a value. The only
value an undefined type can have is undefined.
var a;
document.write(a); // Not assigned a value - Undefined
document.write(b); // Not exist – Undefined Error
Null
The null value indicates an empty value; it is essentially a
placeholder that represents “nothing”. The null value is defined as
an empty object so using typeof operator on a variable holding
null shows its type to be object.
var a = null;
document.write(a + “<br>”);
document.write(typeof(a) + “<br>”);
Undefined Vs Null
Undefined means the value hasn‟t been set, whereas
null means the value has been set to be empty.
var, let and const
var - The scope of a variable declared with var is its current execution context, which is
either the enclosing function or, for variables declared outside any function, global.
let - let allows you to declare variables that are limited in scope to the block, statement,
or expression on which it is used.
const - This declaration creates a constant whose scope can be either global or local to
the block in which it is declared. Global constants do not become properties of the
window object, unlike var variables. An initializer for a constant is required; that is,
you must specify its value in the same statement in which it's declared which can't be
changed later.
Object Oriented Programming
Object-oriented programming (OOP) is a programming
language model organized around objects rather than "actions"
and data rather than logic.
Concepts of OOP
• Encapsulation
• Abstraction
• Inheritance
• Polymorphism
Objects
An object is a collection of properties, and a property is an association between
a name (or key) and a value. A property's value can be a function, in which
case the property is known as a method. In addition to objects that are
predefined in the browser, you can define your own objects.
var fees ={
Rahul: 100,
Sumit: 200, Properties
Rohan: 300
total : function ( ) { return(100+200+300); } Methods
};
Type of Objects
• User-defined Objects – These are custom objects created by the programmer to bring structure
and consistency to a particular programming task.
• Native Objects – These are provided by the JavaScript language itself like String, Number,
Boolean, Function, Date, Object, Array, Math, RegExp, Error as well as object that allow
creation of user-defined objects and composite types.
• Host Objects – These objects are not specified as part of the JavaScript language but that are
supported by most host environments, typically browsers like window, navigator.
• Document Objects – These are part of the Document Object Model (DOM), as defined by the
W3C. These objects presents present the programmer with a structured interface to HTML
and XML documents. Access to the document objects is provided by the browser via the
document property of the window object (window.document).
Declaration and initialization of Object
• Using Object Literal
Syntax: - var object_name = { };
Ex: -
var fees = {};
fees[„Rahul‟] = 100; fees.Rahul = 100;
fees[„Sumit‟] = 200; fees.Sumit = 200;
fees[„Rohan‟] = 300; fees.Rohan = 300;
var fees ={Rahul: 100, Sumit: 200, Rohan:300, “Super Man”: 400};
Declaration and initialization of Object
• Using Object Literal
Syntax: - var object_name = {key1:value1, key2:value2, key_n:value_n, key: function};
Ex: - var fees ={ Rahul: 100, Sumit: 200, Rohan: 300, total: function ( ) {
return(100+200+300); } };
var fees ={
Rahul: 100,
Sumit: 200,
Rohan: 300,
total : function ( ) { return(100+200+300); }
};
Declaration and initialization of Object
• Using Object Constructor
Syntax: - var object_name = new Object( );
Ex: - var fees = new Object ( ); var fees = { };
fees[„Rahul‟] = 100; fees.Rahul = 100;
fees[„Sumit‟] = 200; fees.Sumit = 200;
fees[„Rohan‟] = 300; fees.Rohan = 300;
Declaration and initialization of Object
• Using Object Constructor function sum ( )
Syntax: - var object_name = new Object ( ); {
return(100+200+300);
Ex: -
}
var fees = new Object ( );
fees[„Rahul‟] = 100; fees.Rahul = 100;
fees[„Sumit‟] = 200; fees.Sumit = 200;
fees[„Rohan‟] = 300; fees.Rohan = 300;
fees[„total‟] = function ( ) { return(100+200+300); };
fees[„total‟] = sum;
fees.total = function ( ) { return(100+200+300); };
fees.total = sum;
Accessing Properties
A property of an object is some piece of named data it contains. These are accessed with dot
operator applied to an object alternative to the dot operator is the array [ ] operator.
Syntax: - object_name.property_name
Ex: -
var fees ={Rahul: 100, Sumit: 200, Rohan: 300};
var fees = { };
document.write(fees[„Rahul‟]);
document.write(fees[“Rahul”]);
document.write(fees.Rahul);
Accessing Properties
var fees ={Rahul: 100, Sumit: 200, Rohan: 300, “Super Man”: 400};
var fees = { };
document.write(fees[„Super Man‟]);
document.write(fees[“Super Man”]);
document.write(fees.Super Man);
Accessing Methods
Object members that are functions are called methods. These are accessed with dot operator applied
to an object alternative to the dot operator is the array [ ] operator.
Syntax: - object_name.Method_name( );
Ex: -
var fees ={Rahul: 100, Sumit: 200, Rohan: 300, total: function ( ) { return(100+200+300); } };
var fees = { };
document.write(fees.total( ));
document.write(fees.[“total”]( ));
Adding Properties/Methods
Syntax:-
Object_name.Property_name = value;
Object_name[„Property_name‟] = value;
Ex: -
fees.Sonam = 600;
fees[„Sonam‟] = 600;
Deleting Properties
Delete operator is used to delete instance properties.
Syntax:- delete object_name.property_name
Ex: - delete fees.Rahul;
Ex:- if(nokia.hasOwnProperty(„color‟)) {
document.write(“Available”);
} else {
document.write(“Doesn‟t exist”);
}
For in loop
The for...in loop is used to loop through an object's properties.
Syntax: -
for (var variable_name in object_name){
block of statement
}
Ex: -
for (var specs in samsung) {
document.write(specs);
}
Class
A specific category can be defined as class.
Example:-
Class
Mobile Person
Samsung LG Nokia
Objects Rahul Sonam Sujit
Model Name
Ram Address
Color
Properties/Methods Mobile
Price Email
Calling( ) Eating ( )
Defining a Class
We define class in JavaScripts using custom constructor.
var Mobile = function(model_no, sprice) {
this.model = model_no;
this.color = „white‟;
this.price = 3000;
this.sp = sprice;
this.sellingprice = function() {
return (this.price + this.sp);
};
};
var samsung = new Mobile(„Galaxy‟, 2000);
var nokia = new Mobile(„3310‟, 1000);
Private Properties and Methods
Using var or let or const you can create private
properties and methods.
Ex: -
this.price
var price
let price
Prototype
Every object has an internal prototype that gives it its structure.
This internal prototype is a reference to an object describing the
code and data that all objects of that same type will have in
common.
Prototype Object
Every object is associated with another Object in JavaScript.
A
Object Properties
A is prototype Object of Object B
Object.prototype
Object Properties
Object.prototype is prototype Object of Object B
B
Object Properties
B will inherit All properties of Object.prototype
B1
Object B1 will inherit All properties of Object.prototype
Properties
B2
Object B2 will inherit All properties of Array.prototype
Properties
Object Object.prototype
Array.prototype
Array RegExp b
b2
prototype is the property of function which points to the prototype object. Prototype Object
Prototype object can be accessed using Function_Name.prototype
__proto__ __proto__
}
prototype
I am looking for a
function Mobile( ) { Function Prototype
this.a = 10
}
prototype
// 10
I am looking for a
function Mobile( ) { Function Prototype
}
prototype
Mobile.prototype.a = 10
I am looking for a
Mobile.prototype.a === lg.__proto__.a
function Mobile( ) { Function Prototype
this.a = 10
} prototype
Mobile.prototype.a = 10
var lg = new Mobile()
Object
lg.a
__proto__
// 10
I am looking for a
Object.prototype
__proto__ null
Mobile.prototype.z = 30
var m = new Mobile() m Object
__proto__
s Object
var s = new Samsung()
__proto__
Object.prototype
__proto__ null
Mobile.prototype.z = 30
var m = new Mobile() m Object
__proto__
s Object
var s = new Samsung()
__proto__
Object.prototype
__proto__ null
Mobile.prototype.z = 30
var m = new Mobile() m Object
__proto__
class Mobile { }
Parent Parent
Child Child
GrandChild
Class Inheritance
The extends keyword is used in class declarations or class
expressions to create a class which is a child of another class.
The extends keyword can be used to subclass custom classes as
well as built-in objects.
class Father {
Father
}
Son
class Son extends Father {
}
Class Inheritance
• Inherit Built-in Object
– Date
– String
– Array
}
Super
Super ( ) is used to initialize parent class constructor. If there is a constructor present in subclass,
it needs to first call super() before using "this". A constructor can use the super keyword to call the
constructor of a parent class.
Class Father {
constructor (money) {
this.Fmoney = money;
}
}
Class Son extends Father {
constructor (money){
super(money);
}
}
var s = new Son(10000);
Method Overriding
Same function name with different implementation.
Index Value
geek[0] Rahul
geek[1] Ram
geek[2] 56
geek[3] Jay
Index Value
geek[0] Rahul
geek[1] Ram
geek[2] 56
geek[3] Jay
Undefined
Accessing Array Elements
Access all at once
var geek = [“Rahul”, “Ram”, 56, “Jay”];
document.write (geek);
Ex: -
for (var value of geek){
}
Input from User in Array
You can get input from user in an empty array :-
• var geek= [ ];
• var geek = new Array( );
• var geek = new Array(3); // 3 is length of array
Multidimensional Array
Multidimensional array is Arrays of Arrays.
Multidimensional array can be 2D, 3D, 4D etc.
Ex: -
2D - var name[ [ ], [ ], [ ] ]
Multidimensional Array
Rahul Dell 10
Sonam Hp 20
Sumit Zed 30
End
If end is omitted, slice extracts through the end of the sequence (arr.length).
If end is greater than the length of the sequence, slice extracts through to the end of the sequence (arr.length).
A negative index can be used, indicating an offset from the end of the sequence. slice(2,-1) extracts the third
element through the second-to-last element in the sequence.
slice extracts up to but not including end.
Splice ( ) Method
The splice() method changes the contents of an array by removing existing elements
and/or adding new elements. This method changes the original array.
Syntax:- array_name.splice (start, deletecount, replacevalues);
Start – The first argument start specifies at what position to add/remove items, use
negative values to specify the position from the end of the array.
}, thisValue)
Boolean
Boolean is the built-in object corresponding to the primitive Boolean data type.
JavaScript boolean can have one of two values: true or false.
Primitive Values
var primitiveTrue = true;
var primitiveFalse = false;
Boolean Function
var functionTrue = Boolean(true);
var functionFalse = Boolean(flase);
Boolean Constructor
var constructorTrue = new Boolean(true);
var constructorFalse = new Boolean(false);
Boolean
If value parameter is omitted or is 0, -0, null, false, NaN, undefined, or the
empty string (""), the object has an initial value of false.
Ex:-
var a = Boolean() // false
var a = Boolean(0) // false
var a = Boolean(-0) // false
var a = Boolean(NaN) // false
var a = Boolean(null) // false
String
String is the built in object corresponding to the primitive string data type.
String is group of characters.
Ex: -
“Welcome” „Welcome‟ `Welcome`
“Geeky Shows” „Geeky Shows‟ `Geeky Shows`
“12345” „12345‟ `12345`
String
Primitive
var str = “Hello GeekyShows”;
var str = „Hello GeekyShows‟; String
var str = `Hello GeekyShows`;
Constructor
var str = new String (“Hello GeekyShows”);
var str = new String („Hello GeekyShows‟); Object
var str = new String (`Hello GeekyShows`);
Accessing String
document.write(“Hello GeekyShows”);
document.write(„Hello GeekyShows‟);
document.write(`Hello GeekyShows`);
document.write(str);
Access String
document.write(“Hello „GeekyShows‟ World”);
document.write(„Hello “World” GeekyShows‟);
String Concatenation
var str1 = “Hello”;
var str2 = „GeekyShows‟;
document.write(str1 str2);
document.write (str1 “Geekyshows”);
+ Concat Operator
var str1 = “Hello”;
var str2 = „GeekyShows‟;
document.write(str1 + str2);
document.write (str1 + “Geekyshows”);
document.write (str1 + “Something” + str2);
Concat ( ) Method
The concat ( ) method accepts any number of arguments and returns the string
obtained by concatenating the arguments to the string on which it was invoked.
Syntax: - string.concat(string1, string2, string_n);
Ex: - “Hello”.concat(“Something”, “Geekyshows”);
var str1 = “Hello”;
var str2 = „GeekyShows‟;
var new_str = str1.concat(str2);
var new_str = str1.concat(“Something”, str2);
Escape Notation
• \0 the NULL character
• \' single quote
• \" double quote
• \\ backslash
• \n new line
• \r carriage return
• \v vertical tab
• \t tab
• \b backspace
• \f form feed
Template Literal/ Template Strings
Template literals are string literals allowing embedded expressions. You can
use multi-line strings and string interpolation features with them.
Template literals are enclosed by the back-tick (` `) character instead of double
or single quotes.
document.write(`${str1} World`);
document.write(`${5+4} World`);
document.write(`${a+b} World`);
document.write(`${functionCall} World`);
Tagged Template
Tagged Templates are advanced form of Template literal. Tags allow you to
parse template literals with a function. The first argument of a tag function
contains an array of string values. The remaining arguments are related to the
expressions. In the end, your function can return your manipulated string.
String Methods
• charAt ( ) • indexOf( )
• charCodeAt( ) • Search ( )
• toUpperCase( ) • Slice ( )
• toLowerCase ( ) • Substring( )
• Substr ( )
• Trim( )
• Replace ( )
• Split ( )
Numbers
Number type in JavaScript includes both integer and floating point values.
JavaScript numbers are always stored as double precision floating point
numbers, following the international IEEE 754 standard.
JavaScript also provide an object representation of numbers.
Ex-
12
23.45
5e3
Numbers
Primitive
var a = 10; // Whole Number
var a = 10.45; // Decimal Number
var a = 5e3; // 5000 // 5 x 10^3 exponent Number
var a = 34e-5; // 0.00034 exponent
Constructor
var a = new Number(10);
var a = new Number(10.45); Object
var a = new Number(5e3);
Accessing Number
var a = 10;
var a = 10.45;
var a = 5e3;
var a = 34e-5;
var a = new Number(10);
var a = new Number(10.45);
var a = new Number(5e3);
document.write(a);
Number with String
var a = “50”; // String
var b = 10; // Number
var c = 20; // Number
var d = “Hello”; // String
document.write(a + b); // 5010
document.write(a - b); // 40
document.write(b+c+a); // 10+20+ “50” = 3050
document.write(a+b+c); // “50” +10+ 20 = 501020
var x = “Result: ” + b + c; // Result: 1020
NaN
The NaN property represents "Not-a-Number" value. This property indicates
that a value is not a legal number. NaN never compare equal to anything, even
itself.
The NaN property is the same as the Number.Nan property.
Global isNaN ( ) Method
The isNaN() function is used to determines whether a value is an illegal number (Not-
a-Number).
This function returns true if the value equates to NaN. Otherwise it returns false.
This function is different from the Number specific Number.isNaN() method.
The global isNaN() function, converts the tested value to a Number, then tests it.
Syntax: - isNaN(value)
Infinity and – Infinity
Infinity or -Infinity is the value JavaScript will return if a number is too large
or too small. All Infinity values compare equal to each other.
Ex:-
document.write(5 / 0); // infinity
• Subscribe our Youtube Channel for All Free videos based on this
Notes :
https://www.youtube.com/user/GeekyShow1