JavaScript

Unit 3
What is a JavaScript?
JavaScript
• JavaScript is a scripting language, not a programming language in strict
sense.
• It is an object-oriented, dynamically typed, scripting language.
• JavaScript was originally developed as LiveScript by Netscape in the mid
1990s.
• It was later renamed to JavaScript in 1995.
Are JavaScript and Java related?
 Java JavaScript
• Java is a full-fledged compiled, • Conversely, JavaScript is one of
object- oriented language, the world’s most popular
popular for its ability to run on languages, with fewer of the
any platform with a Java Virtual object-oriented features of Java,
Machine installed. and runs directly inside the
browser, without the need for the
JVM.
 Java JavaScript
• Java is strongly typed language • JavaScript is dynamically typed
and variable must be declare first (also called weakly typed) in that
to use in program. In Java the variables can be easily (or
type of a variable is checked at implicitly) converted from one
compile-time. data type to another.
 Java JavaScript
• Objects of Java are class based • JavaScript Objects are prototype
even we can’t make any program based.
in java without creating a class. • JavaScript is object oriented in that
almost everything in the language
is an object. For instance, variables
are objects in that they have
constructors, properties, and
methods. Functions in JavaScript
are also objects.
What all can JavaScript do for you?
• JavaScript allows you to create highly responsive interfaces improving the user experience and
provides dynamic functionality.
• JavaScript creates platforms that can engage a user. It can be used to create games, Application
Program Interfaces (APIs), scrolling abilities and much more.
• JavaScript can load content into the document if and when the user needs it, without reloading the
entire page.
• JavaScript can test for what is possible in your browser and react accordingly.
• JavaScript is very easy to implement. All you need to do is put your code in the HTML document
and tell the browser that it is JavaScript.

8
How JavaScript is different from CSS and HTML ?

Website Structure Website Style Interactivity

9
HTML vs HTML + CSS

HTML HTML+CSS

10
HTML+ CSS + JavaScript

11
HTML vs CSS vs JavaScript

12
Client Side Scripting
• The idea of client-side scripting is an important one in web
development.
• It refers to the client machine (i.e., the browser) running code locally
rather than relying on the server to execute code and return the result.
Figure: Downloading and executing a client-side JavaScript script
Advantages of client-side scripting:
• Processing can be offloaded from the server to client machines,
thereby reducing the load on the server.
• The browser can respond more rapidly to user events than a request to
a remote server ever could, which improves the user experience.
• JavaScript can interact with the downloaded HTML in a way that the
server cannot, creating a user experience more like desktop software
than simple HTML ever could
Disadvantages of client-side scripting:
• There is no guarantee that the client has JavaScript enabled, meaning
any required functionality must be housed on the server, despite the
possibility that it could be offloaded.
• The idiosyncrasies between various browsers and operating systems
make it difficult to test for all potential client configurations. What
works in one browser, may generate an error in another.
• JavaScript-heavy web applications can be complicated to debug and
maintain.
History of
JavaScript

17
JavaScript is the original name when the language was developed by Netscape. JScript is Microsoft's name
of their own implementation. ECMA Script is the name of the language standard developed by the
European Computer Manufacturers Association (ECMA), from the original JavaScript implementation.
So, it's just one language, with different implementations.

18
Document Links

Topic URL

https://medium.com/@benastontweet/lesson-1a-the-history-of-javascript-8c
History of JavaScript 1ce3bffb17

https://www.checkmarx.com/blog/javascript-history-infographic/

19
Video Links

Topic URL

History of JavaScript https://www.youtube.com/watch?v=1H2v5QVBQDQ

20
Where Does JavaScript Go?
• JavaScript can be linked to an HTML page in
Inline
Embedded
External
• Running JavaScript scripts in your browser requires downloading the
JavaScript code to the browser and then running it.
• Pages with lots of scripts could potentially run slowly, resulting in a
degraded experience while users wait for the page to load.
Inline JavaScript
• Inline JavaScript refers to the practice of including JavaScript code
directly within certain HTML attributes.
Embedded JavaScript
• Embedded JavaScript refers to the practice of placing JavaScript code
within a <script> element.
• There are two general areas in HTML document where JavaScript can be placed. First is
between <head>......</head> section, another is specific location in <body>......</body> section. If you
want to display a message 'Good Afternoon' (through the JavaScript alert command) at the time of page
loading then you must place the script at the <head>......</head> section.
Script in the Head
<!DOCTYPE html>
<head>
<title> Script in head section </title>
<script type = "text/javascript"> JavaScript statements....... </script>
</head>
<body>
</body>
</html>

24
Script in the Body
<!DOCTYPE html>
<head>
<title> Script in the Body </title>
</head>
<body>
<script type = "text/javascript"> JavaScript statements....... </script>
</body>
</html>

25
Scripts in the Head and Body
<!DOCTYPE html>
<head>
<title> Script in head and body section </title>
<script type = "text/javascript"> JavaScript statements....... </script>
</head>
<body>
<script type = "text/javascript"> JavaScript statements....... </script>
</body>
</html>

26
External JavaScript
Variables
Variables
• Variables in JavaScript are dynamically typed, meaning a variable can
be an integer, and then later a string, then later an object, if so desired.
• This simplifies variable declarations, so that we do not require the
familiar type fields like int, char, and String.
• Instead, to declare a variable x, we use the var keyword, the name, and
a semicolon.
 var x; Variable x is declared

var y=0; Variable y is declared and

initialized to 0.

y=4; Variable y assigned the value

4
 <script type="text/javascript"> In this example, price and
var price; name are variables
var name;

</script>

You can also declare multiple variables with the same var keyword as follows:

<script type="text/javascript">

var price, name;

</script>
Variable Rules

• Letters, numbers, underscore(_) and dollar($) characters are allowed.

For example, first_name, lit896.

• No spaces.

For example, the “first name” is not a valid variable name.

• Should start with a letter or an underscore or a dollar sign. It cannot start with a number.

For example, fname, _age, l_name and $money are valid, however, 45gt, 8_list are invalid.

• Case sensitive.

For example, first_name and First_Name are two different variables.

• Reserved words like var, if, for cannot be used as variable names.
32
Input and Output
JavaScript models the HTML document as the document object.

• The document object contains a method named write to output text and data on to
the document.

Example:
document.write(“Welcome to JavaScript" );

• To display multiple lines of text using write method

document.write(“Welcome <br> to <br> JavaScript" );

There are three methods used to perform input/output
• alert
• confirm
• prompt
alert() method
• The alert() method displays an alert box with a specified message and
an OK button.
• An alert box is often used if you want to make sure information comes
through to the user.
Example:
alert(" Hello World");
confirm() method
• The confirm() method displays a dialog box with a specified message,
along with an OK and a Cancel button.
• It returns true if the user clicked "OK", and false otherwise.
• A confirm box is often used if you want the user to verify or accept
something.
Example:
confirm(" Do you want to proceed");
prompt() method
• The prompt() method displays a dialog box that prompts the visitor for
input.
• It returns the input value if the user clicks "OK". If the user clicks "cancel"
the method returns null.
• A prompt box is often used if you want the user to input a value before
entering a page.
Example:
var person = prompt("Please enter your name", "Harry Potter");

Default text(Optional)
Data Types

39
JavaScript provides different Data Types to hold different types of values.
There are two types of data types in JavaScript:
• Primitive data type
• Non-primitive data type

40
• JavaScript is a dynamic type language, means you do not need to specify a type of the
variable because it is dynamically used by JavaScript engine.
• You need to use var to specify the data type.
• It can hold any type of values such as numbers, strings etc.
Example
var a=40; //holding numeric value
var b="Rohit"; //holding string
Note : //This is a single line comment

41
JavaScript Primitive Data Types
There are five types of primitive data types in JavaScript:

Data Type Description

String Represents sequence of characters Example, “good“.
Number Represents numeric values Example, 2000.
Boolean Represents Boolean value either false or true.
Undefined Represents undefined value.
Null Represents null That is., no value at all.

42
JavaScript Non-Primitive Data Types
The non-primitive data types are as follows:

Data Type Description

Object Represents instance through which we can access members.
Array Represents group of similar values.
RegExp Represents regular expression.

43
Operators

44
JavaScript Operators are symbols that are used to perform operations on operands.

There are following types of operators in JavaScript:

• Arithmetic Operators.

• Comparison (Relational) Operators.

• Bitwise Operators.

• Logical Operators.

• Assignment Operators.

• Special Operators.

45
JavaScript Arithmetic Operators

Arithmetic operators are used to performing arithmetic operations on the operands. The following
operators are available as arithmetic operators:

Operator Description Example

var a=1;
+ Addition var b=20;
var x= a+b;
- Subtraction var y= b-a;
* Multiplication var z= b*100;
/ Division var c = b/a;
% Modulus (Remainder) var d = b%2;
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9

46
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands. The comparison operators are as follows:
Operator Description Example
var x=5;
== Is equal to
x==20 ;  returns false
var x=8
=== Identical (equal and of same type)
x===“8“;  returns false
var x=5;
!= Not equal to x!=8;  returns true
x!=5;  returns false
var x=5;
!== Not Identical x !== "5" ;  returns true
x !== 5;  returns false
var x=5;
> Greater than
x > 8;  returns false
var x=5;
>= Greater than or equal to
x >= 8;  returns false
< Less than var x=5; x < 8;  returns true
<= Less than or equal to var x=5; x <= 8;  returns true

47
JavaScript Bitwise Operators

The Bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Right Shift
>>> Bitwise Right Shift with Zero

48
Example OUTPUT

<script type="text/javascript">
var a = 6;
var b = 1;
// AND Operation
document.write("A & B = " + (a & b) + '<br>');
// OR operation
document.write("A | B = " + (a | b) + '<br>');
// NOT operation
document.write("~A = " + (~a) + '<br>');
// Sign Propagating Right Shift
document.write("A >> B = " + (a >> b) + '<br>');
// Zero Fill Right Shift
document.write("A >>> B = " + (a >>> b) + '<br>');
// Left Shift
document.write("A << B = " + (a << b) + '<br>');
</script>
JavaScript Logical Operators
The following operators are known as JavaScript Logical operators:

Operator Description Example

var a=10, b=20;
&& Logical AND
(a==b && b<33)  returns false
var a=10, b=20;
|| Logical OR
(a<b || b==33)  returns ture
! Logical Not !(a==20)  returns true

50
JavaScript Assignment Operators
The following operators are known as JavaScript Assignment operators:
Operator Description Example
= Assign var z=200;
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0

51
JavaScript Special Operators
The following operators are available as JavaScript Special operators:

Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-else.
, Comma Operator allows multiple expressions to be evaluated as single statement.
delete Delete Operator deletes a property from the object.
in In Operator checks if object has the given property
instanceof Checks if the object is an instance of given type
new Creates an instance (object)
typeof Checks the type of object.
void It discards the expression's return value.

52
Document Links
Topic URL

Operators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_O
perators

JS
https://www.w3schools.com/jsref/jsref_operators.asp
Operators

Video Links

Topic URL

Operators https://www.youtube.com/watch?v=BYZswgIg6lc

53
Control statements
JavaScript has number of statements that control flow of the program.
There are:
• Conditional statements: perform different actions depending on the
value of an expression.
eg: if-else, switch
• Looping Statements : execute other statements repetitively.
eg: while, do-while, for, for-in, for-of
• Jumps Statements : cause a jump to another part of the program.
eg: break, continue, labeled statement
Conditional
Statements

56
JavaScript If-else

The JavaScript if-else statement is used to execute the code whether a condition is true or false. There
are three forms of if statements:

• If Statement

• If else statement

• If else if statement

57
JavaScript If statement

It evaluates the content only if expression is true. The syntax of JavaScript if statement is :

if(expression)

//content to be evaluated

58
Example
<html> Output
<body> value of a is greater than 10
<script>
var a=20;
if(a>10)
{
document.write("value of a is greater than 10");
}
</script>
</body>
</html> 59
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is:

if(expression)
{
//content to be evaluated if condition is true
}
else
{
//content to be evaluated if condition is false
}

60
Example
<html> </body>
<body> </html>
<script> Output
var a=20; a is an even number
if(a%2==0){
document.write("a is an even number");
}
else{
document.write("a is an odd number");
}
</script> 61
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The syntax is:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
62
}
Example
<html> document.write("a is equal to 20");
<body> }
<script> else{
var a=20; document.write("a is not equal to 10, 15 or 20");
if(a==10){ }
document.write("a is equal to 10"); </script>
} </body>
else if(a==15){ </html>
document.write("a is equal to 15");
} Output
else if(a==20){ a is equal to 20 63
JavaScript Switch
The JavaScript switch statement is used to break;
execute one code from multiple expressions. It is ......
just like else if statement. But it is convenient default:
than if..else..if because it can be used with
numbers, characters etc. The syntax is: code to be executed if above values are not
matched;
switch(expression)
}
{
case value1:
code to be executed;
break;
case value2:
code to be executed;

64
Example
<html> case 'C':
<body> result="C Grade";
<script> break;
var grade='B'; default:
var result; result="No Grade";
switch(grade){ }
case 'A': document.write(result);
result="A Grade"; </script>
break; </body>
case 'B': </html>
result="B Grade"; Output
break; B Grade 65
Document Links

Topic URL

Conditional
https://www.guru99.com/how-to-use-conditional-statements-in-javascript.ht
Statements ml

Video Links

Topic URL

Conditional https://www.youtube.com/watch?v=TPDz_84UJGw
Statements https://www.youtube.com/watch?v=1Osb_iGDdjk

66
Looping Statements

67
JavaScript Loops

The loops are used to iterate a piece of code using for, while, do while or for-in loops. It makes the code
compact. There are four types of loops:

• for loop

• while loop

• do-while loop

• for-in loop

68
JavaScript For loop

The for loop iterates the elements for the fixed number of times. It should be used if a number of
iterations are known. The syntax of for loop is:

for (initialization; condition; increment)

code to be executed

69
Example
<script>
for (i=1; i<=6; i++)
{
document.write(i + "<br/>")
}
</script>
Output
1
2
3
4
5
70
6
JavaScript while loop

The while loop iterates the elements for the infinite number of times. It should be used if a number of
iteration is not known. The syntax of while loop is:

while (condition)

code to be executed

71
Example
<script> Output
var i=10; 10
11
while (i<=14)
12
{ 13
document.write(i + "<br/>"); 14
i++;
}
</script>

72
JavaScript do while loop

The do while loop iterates the elements for the infinite number of times like while loop. But, a code
is executed at least once whether the condition is true or false. The syntax of do while loop is:

do{

code to be executed

}while (condition);

73
Example
<script>
var i=22;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
Output
22
23
24
25 74
Document Links
Topic URL
Looping Statements http://www.cev.washington.edu/lc/CLWEBCLB/jst/js_looping.html
For Loop https://www.w3schools.com/js/js_loop_for.asp

While Loop https://www.w3schools.com/js/js_loop_while.asp

Video Links

Topic URL
While Loop https://www.youtube.com/watch?v=yH0StKyH6rE

For Loop https://www.youtube.com/watch?v=Coxgr66EwRk

75
Jumps Statements

76
 break Statement
• Use the break statement to terminate a loop, switch, or in conjunction with a labeled
statement.

• When you use break without a label, it terminates the innermost enclosing while, do-
while, for, or switch immediately and transfers control to the following statement.

• When you use break with a label, it terminates the specified labeled statement.

• The syntax of the break statement looks like this:

break;

Using the optional label reference:

break labelname;
 continue Statement
• The continue statement breaks one iteration (in the loop) if a specified condition occurs,
and continues with the next iteration in the loop.

• The difference between continue and the break statement, is instead of "jumping out" of
a loop, the continue statement "jumps over" one iteration in the loop.

Syntax:
continue:

Using the optional label reference:

continue labelname;
Expressions
Expressions
• Any unit of code that can be evaluated to a value is an expression.
• The value may be a number, a string, or a logical value.
• JavaScript has the following kinds of expressions:
• Primary Expressions
• Arithmetic Expressions
• String Expressions
• Logical Expressions
• Assignment Expression etc
Primary Expressions
• Primary expressions refer to stand alone expressions such as literal
values, certain keywords and variable values.

'hello world'; // A string literal

23; // A numeric literal

true; // Boolean value true

sum; // Value of variable sum

this; // A keyword that evaluates to the current object

Arithmetic Expressions
• Arithmetic expressions evaluate to a numeric value. Examples include
the following

3+4; // This is an expression that is evaluated to produce the numeric value 7

i++;

i-=2;
String Expressions
• String expressions are expressions that evaluate to a string. Examples
include the following

'hello' + 'world'; // evaluates to the string 'hello world‘

'something' ;
Logical Expressions
• Expressions that evaluate to the boolean value true or false are
considered to be logical expressions. This set of expressions often
involve the usage of logical operators && (AND), ||(OR) and !(NOT).
Examples include

10 > 9; // evaluates to boolean value true

10 < 20; // evaluates to boolean value true

true; //evaluates to boolean value true

a===20 && b===30; // evaluates to true or false based on the values of a and b
Assignment Expressions
• When expressions use the = operator to assign a value to a variable, it
is called an assignment expression. Examples include

X=7; //is an expression that assigns x the value 7. This expression itself evaluates to 7

Average=55;
 Conditional Expressions
A conditional expression can have one of two values based on a condition. The syntax is

(condition) ? val1 : val2

If condition is true, the expression has the value of val1, Otherwise it has the value of val2.
You can use a conditional expression anywhere you would use a standard expression.

For example,

status = (age >= 18) ? "adult" : "minor" ; //This statement assigns the value "adult" to the variable status if age is eighteen
or greater. Otherwise, it assigns the value "minor" to status.
Objects

87
• A JavaScript Object is an entity having state and behaviour (properties and method). For example car,
pen, bike, chair, glass, keyboard, monitor etc.
• JavaScript is an object-based language. Everything is an object in JavaScript.
• JavaScript is template based not class based. Here, we do not create a class to get the object. But, we
directly create objects.
Creating Objects in JavaScript
There are three ways to create objects:
• By object literal
• By creating an instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)

88
JavaScript Object by object literal
The syntax of creating object using object literal:

object={property1:value1,property2:value2.....propertyN:valueN}

Example
<script>
var emp={id:1020,name:“Rohit",salary:4000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

Output
1020 Rohit 4000 89
By creating instance of Object
The syntax of creating object is:
var objectname=new Object();
Example
<script>
var emp=new Object();
emp.id=1010;
emp.name="Ravi";
emp.salary=51000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

Output
1010 Ravi 51000 90
By using an Object constructor
Here, you need to create a function with arguments. Each argument value can be assigned in the current
object by using this keyword. This keyword refers to the current object.
Example
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
var e=new emp(1003,“Veena",3000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
Output
91
1003 Veena 3000
Document Links
Topic URL

Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Video Links

Topic URL

Objects https://www.youtube.com/watch?v=mgwiCUpuCxA

92
Arrays

93
• JavaScript Array is an object that represents a collection of similar type of elements.

• There are three ways to construct array in JavaScript:

• By array literal.

• By creating an instance of Array directly (using new keyword).

• By using an Array constructor (using new keyword).

94
JavaScript Array literal

The syntax of creating array using array literal is:

var arrayname=[value1,value2.....valueN];
Example
<script>
var emp=["Sonu","Veena","Rohit"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
Output
Sonu
Veena
Rohit

95
JavaScript Array directly (new keyword)

The syntax of creating array directly is:

var arrayname=new Array();
Example Output
<script> A
var i; B
var emp = new Array(); C
emp[0] = "A";
emp[1] = "B";
emp[2] = "C";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
96
JavaScript Array constructor (new keyword)

Here, we create instance of array by passing arguments in constructor.

Example
<script>
var emp=new Array("Jaideep","Vijay","Smitha");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>

Output
Jaideep
Vijay
Smitha

97
JavaScript Array Methods

Methods Description
concat() It returns a new array object that contains two or more merged arrays.
It copies the part of the given array with its own elements and returns the modified
copywithin()
array.
It determines whether all the elements of an array are satisfying the provided function
every()
conditions.
fill() It fills elements into an array with static values.
It returns the new array containing the elements that pass the provided function
filter()
conditions.

98
 It returns the value of the first element in the given array that satisfies the specified
find()
condition.
It returns the index value of the first element in the given array that satisfies the
findIndex()
specified condition.
forEach() It invokes the provided function once for each element of an array.
includes() It checks whether the given array contains the specified element.
It searches the specified element in the given array and returns the index of the first
indexOf()
match.
join() It joins the elements of an array as a string.

99
 It searches the specified element in the given array and returns the index of the
lastIndexOf()
last match.
map() It calls the specified function for every array element and returns the new array
pop() It removes and returns the last element of an array.
push() It adds one or more elements to the end of an array.
reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
slice() It returns a new array containing the copy of the part of the given array.
sort() It returns the element of the given array in a sorted order.
splice() It add/remove elements to/from the given array.
unshift() It adds one or more elements in the beginning of the given array.

100
Document Links

Topic URL

https://www.codingame.com/playgrounds/6181/javascript-arrays---tips-tricks-and-examples
Arrays
https://www.dofactory.com/tutorial/javascript-arrays

Video Links

Topic URL

Arrays https://www.youtube.com/watch?v=ugFlyUdO3H4

101
Functions

102
JavaScript Functions are used to perform operations. We can call a JavaScript function many times to reuse a
piece of code to make a programme compact.

The syntax of declaring function is:

Output
function functionName([arg1, arg2, ...argN])
{
//code to be executed
}

JavaScript functions can have 0 or more arguments.

Example
<script>
function msg(){
alert("hello! this is message");
}
</script> <input type="button" onclick="msg()" value="call function"/>
103
JavaScript Function Arguments
We can call the function by passing arguments.
Example (function with one argument) Output
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>

104
Function with Return Value

We can call the function that returns a value and use it in our programme.
Example
<script>
function getInfo(){
return “Hello! How are you?";
}
</script>
<script>
document.write(getInfo());
</script>

Output
Hello! How are you?
105
Example
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script>

Output
7

106
Document Links

Topic URL

https://javascript.info/function-basics
Functions
https://www.tutorialspoint.com/javascript/javascript_functions.htm

Video Links
Topic URL

Functions https://www.youtube.com/watch?v=vTz--7qeJ3g

107
Pattern matching using Regular Expressions
 Regular Expressions

• Regular expressions are patterns used to match character

combinations in strings.
• In JavaScript, regular expressions are also objects.
• These patterns are used with the exec() and test() methods
of RegExp,
• And with the match(), matchAll(), replace(), replaceAll(),
search(), and split() methods of String.
Creating Regular Expressions
• There are two ways to create a new regular expression variable:

Literal notation

Literal Notation Syntax:

var pattern1 = /pattern/attributes
• For example pattern − A string that specifies the pattern of the regular
var regDog = /dog/ ; expression or another regular expression.
attributes − An optional string containing any of the "g", "i",
and "m" attributes that specify global, case-insensitive, and
multi-line matches, respectively.
Creating Regular Expressions
• RegExp object creation

Object Creation Syntax:

var pattern1 = new RegExp(pattern, attributes);

• For example
var Dog= new RegExp(“dog");
Method that use Regular Expressions
Method Description
Executes a search for a match in a string. It returns an array of information or null on a
exec() mismatch.

test() Tests for a match in a string. It returns true or false.

Returns an array containing all of the matches, including capturing groups, or null if no
match() match is found.

matchAll() Returns an iterator containing all of the matches, including capturing groups.

search() Tests for a match in a string. It returns the index of the match, or -1 if the search fails.
Executes a search for a match in a string, and replaces the matched substring with a
replace() replacement substring.
Executes a search for all matches in a string, and replaces the matched substrings with a
replaceAll() replacement substring.

split() Uses a regular expression or a fixed string to break a string into an array of substrings.
Example-1
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /dog/;
var strTest = " My dog smells worse than your dog";
if(Dog.test(strTest ))
alert("Found a dog!");
else{alert("Not Found");} This program will display a popup-alert box
because the regular expression finds a match in
</script> the text.
</body></html>
Example-2
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /dog/;
var strTest = "My doggie smells worse than your pooch";
if(Dog.test(strTest ))
alert("Found a dog!"); Even though both occurrences of "dog" have changed, the
test will still return true. That's because the first regular
else{alert("Not Found");} expression we defined doesn't care what's in front or
</script> behind the pattern. It's just looking for the three letters,
exactly how they are written in the expression.
</body> </html>
Example-3 (To find the individual word "dog")
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /\bdog\b/;
var strTest = "My doggie smells worse than your pooch";
if(Dog.test(strTest ))
alert("Found a dog!");
The special meaning of the "\b" is to match any non-word
else{alert("Not Found");} character. Things like spaces, new lines, and punctuation.
</script>
</body> </html>
Example-4
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /\bdog\b/;
var strTest = " My pooch smells worse than your DOG!";
if(Dog.test(strTest ))
alert("Found a dog!");
The test will now fail, because the upper case "D" in "DOG"
else{alert("Not Found");} does not match the lower case "d" used in the regular
</script> expression.

</body> </html>
Example-4 (To make the expression match both "dog" and "Dog")
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /[Dd]og/;
var strTest = " My pooch smells worse than your Dog!";
if(Dog.test(strTest ))
alert("Found a dog!");
This square brackets "[ ]" enclose a list of acceptable
else{alert("Not Found");} variations in a single-character match. As many characters
</script> can be put in square brackets as needed to cover all
variations needed for the match.
</body> </html>
Example-5
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /[Ddlgm]og/;
var strTest = " My pooch smells worse than your Dog!";
if(Dog.test(strTest ))
alert("Found a dog!");
This expression matches "Dog," "dog," "log," "gog" and
else{alert("Not Found");} "mog."
</script>
</body> </html>
Example-6 (makes the match case insensitive)
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /dog/i;
var strTest = " My pooch smells worse than your DOG!";
if(Dog.test(strTest ))
alert("Found a dog!");
The "i" following the end of the expression is called an
else{alert("Not Found");} attribute. There are only a few attributes and they are
</script> generally for more advanced features. But this one is easy, it
makes the match case insensitive.
</body> </html>
Example-7 (the expression to match an arbitrary number of characters.)
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expressions</title>
</head>
<body>
<script type="text/javascript">
var Dog = /do+g/;
var strTest = " My pooch smells worse than your dooooog!";
if(Dog.test(strTest ))
alert("Found a dog!");
The "+" symbol means match one or more occurrences of
else{alert("Not Found");} the preceding thing. In this case, the "+" is preceded with
</script> the single "o" character so it will match "dog," "doog,"
"dooog" or any number of "o"s in the word "dog."
</body> </html>
Errors in scripts
Error using Try and Catch
• When the browser’s JavaScript engine encounters an error, it will
throw an exception.
• These exceptions interrupt the regular, sequential execution of the
program and can stop the JavaScript engine altogether.
• However, you can optionally catch these errors preventing disruption
of the program using the try–catch block.
Throwing Your Own exceptions
• Although try-catch can be used exclusively to catch built-in JavaScript
errors, it can also be used by your programs, to throw your own
messages.
• The throw keyword stops normal sequential execution, just like the
built-in exceptions.
Event Handling

124
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
Examples include:
Loading of a page
The user clicking a button
Closing a window
Pressing a key
HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
125
onclick Event Type
This is the most frequently used event type which //-->
occurs when a user clicks the left button of his </script>
mouse. You can put your validation, warning etc.,
against this event type. Try the following code and </head>
check the output. <body> <p>Click the following button and see
Example result</p>
<html> <form> <input type="button" onclick="sayHello()"
value="Say Hello" /> </form>
<head>
</body>
<script type="text/javascript">
</html>
<!-- function sayHello()
{ alert("Hello World") }

126
onsubmit Event type

onsubmit is an event that occurs when you try true or false }

to submit a form. You can put your form //-->
validation against this event type. Try the </script>
following code and check the output. </head>
Example <body>
<html> <form method="POST" action="t.cgi"
<head> onsubmit="return validate()"> .......
<script type="text/javascript"> <input type="submit" value="Submit" />
<!-- function validation() </form> </body> </html>
{ all validation goes here ......... return either
127
onmouseover and onmouseout
These two event types will help you create nice effects with images or even with text as well.
The onmouseover event triggers when you bring your mouse over any element and the onmouseout triggers
when you move your mouse out from that element. Try the following code and check the output.
Example
<html>
<head>
<script type="text/javascript">
<!-- function over()
{ document.write ("Mouse Over");
}
function out()
{ document.write ("Mouse Out");
} //-->
</script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div
onmouseover="over()" onmouseout="out()"> <h2> This is inside the division </h2> </div> </body>
</html> 128
Document Links
Topic URL

Event Handling https://www.wired.com/2010/02/javascript_events/

Video Links
Topic URL

Event Handling https://www.youtube.com/watch?v=7UstS0hsHgI

129