CSE4001 - Internet and Web Programming

Course Type: LTP Credits: 4

Prepared by
Dr Komarasamy G
Associate Professor (Grade-2)
School of Computing Science and Engineering
VIT Bhopal University

1
 Unit-3 Java Script and JQuery

JavaScript Basics – Functions – Arrays –

DOM - Built-in Objects – Regular
Expression - Event handling –
Validation – JSON Basics– JQuery Basics
– plugins.

2
 Unit-3 Java Script and JQuery
Reference Links

•https://www.w3schools.com/js/js_intro.asp

•https://www.javatpoint.com/javascript-tutorial

•JavaScript Full Course | Edureka: https://youtu.be/o1IaduQICO0

3
 Introduction to Java Script
What is JavaScript?
• JavaScript is a client-side as well as server side scripting
language that can be inserted into HTML pages and is
understood by web browsers.
• JavaScript is an object-based scripting language which is
lightweight and cross-platform.
• JavaScript is not a compiled language, but it is a translated
language.
• The JavaScript Translator (embedded in the browser) is
responsible for translating the JavaScript code for the web
browser.

Unit-3 Java Script / Dr Komarasamy G 4

 Introduction to Java Script
• What is JavaScript
• JavaScript (js) is a light-weight object-oriented programming
language which is used by several websites for scripting the
webpages.
• It is an interpreted, full-fledged programming language that enables
dynamic interactivity on websites when applied to an HTML
document.
• It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been
adopted by all other graphical web browsers.
• With JavaScript, users can build modern web applications to interact
directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and
simplicity.

Unit-3 Java Script / Dr Komarasamy G 5

 Introduction to Java Script
• What is JavaScript?
– It is designed to add interactivity to HTML pages
– It is a scripting language (a lightweight programming
language)
– It is an interpreted language (it executes without preliminary
compilation)
– Usually embedded directly into HTML pages
– And, Java and JavaScript are different

Unit-3 Java Script / Dr Komarasamy G 6

 Introduction to Java Script
JavaScript gives HTML designers a programming tool:
• simple syntax
• JavaScript can put dynamic text into an HTML page
• JavaScript can react to events
• JavaScript can read and write HTML elements
• JavaScript can be used to validate data
• JavaScript can be used to detect the visitor’s browser
• JavaScript can be used to create cookies
• Store and retrieve information on the visitor’s computer

Unit-3 Java Script / Dr Komarasamy G 7

 Introduction to Java Script
• Features of JavaScript
• There are following features of JavaScript:
• All popular web browsers support JavaScript as they provide built-in
execution environments.
• JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
• JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
• JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
• It provides good control to the users over the web browsers.

Unit-3 Java Script / Dr Komarasamy G 8

 Introduction to Java Script
• History of JavaScript
• In 1993, Mosaic, the first popular web browser, came into existence.
In the year 1994, Netscape was founded by Marc Andreessen. He
realized that the web needed to become more dynamic. Thus, a 'glue
language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers.
• Consequently, in 1995, the company recruited Brendan
Eich intending to implement and embed Scheme programming
language to the browser.
• But, before Brendan could start, the company merged with Sun
Microsystems for adding Java into its Navigator so that it could
compete with Microsoft over the web technologies and platforms.
• Now, two languages were there: Java and the scripting language.

Unit-3 Java Script / Dr Komarasamy G 9

 Introduction to Java Script
• History of JavaScript
• Further, Netscape decided to give a similar name to the scripting
language as Java's.
• It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined
the first code of Javascript named 'Mocha'.
• Later, the marketing team replaced the name with 'LiveScript'.
• But, due to trademark reasons and certain other reasons, in
December 1995, the language was finally renamed to 'JavaScript'.
• From then, JavaScript came into existence.

Unit-3 Java Script / Dr Komarasamy G 10

 Introduction to Java Script
• 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.

Unit-3 Java Script / Dr Komarasamy G 11

 Introduction to Java Script
Enumerate the differences between Java and JavaScript?
• Java is a complete programming language.
• In contrast, JavaScript is a coded program that can be
introduced to HTML pages.
• These two languages are not at all inter-dependent and are
designed for the different intent.
• Java is an object - oriented programming (OOPS) or structured
programming language like C++ or C whereas JavaScript is a
client-side scripting language.

Unit-3 Java Script / Dr Komarasamy G 12

 Introduction to Java Script
• The HTML <script> tag is used to insert a JavaScript into an HTML
page
<script type=“text/javascript”>
document.write(“Hello World!”)
</script>
• Ending statements with a semicolon?
– Optional; required when you want to put multiple statements on
a single line
• JavaScript can be inserted within the head, the body, or use
external JavaScript file
• How to handle older browsers?
<script type=“text/javascript”>
document.write(“Hello World!”)
</script>

Unit-3 Java Script / Dr Komarasamy G 13

 Embedding JS into HTML
Client-side JavaScript code is embedded within HTML documents in a number
of ways:
• Between a pair of <script> and </script> tags
• From an external file specified by the src attribute of a <script> tag
• In an event handler, specified as the value of an HTML attribute such as on
click or on mouse over
• As the body of a URL that uses the special javascript: protocol

• Example: to display date and time

Unit-3 Java Script / Dr Komarasamy G 14

 Variables
• JavaScript variables are containers for storing data values.

<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body> Output:
</html> JavaScript Variables
In this example, x, y, and z are variables.
The value of z is: 11

Unit-3 Java Script / Dr Komarasamy G 15

 Variables
JavaScript Identifiers
• All JavaScript variables must be identified with unique names.
• These unique names are called identifiers.
• Identifiers can be short names (like x and y) or more descriptive
names (age, sum, totalVolume).
The general rules for constructing names for variables
(unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _ (but we will not use it in this
tutorial)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

Unit-3 Java Script / Dr Komarasamy G 16

 JavaScript Operators
• Assign values to variables and add them together .

<html>
<body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html> JavaScript Operators
x = 5, y = 2, calculate z = x + y, and display
z:
7

Unit-3 Java Script / Dr Komarasamy G 17

 JavaScript Functions
• JavaScript Functions
• JavaScript functions are used to perform operations. We can call
JavaScript function many times to reuse the code.
Advantage of JavaScript function
• There are mainly two advantages of JavaScript functions.
• Code reusability: We can call a function several times so it save coding.
• Less coding: It makes our program compact. We don’t need to write
many lines of code each time to perform a common task.
JavaScript Function Syntax
• The syntax of declaring function is given below.
function functionName([arg1, arg2, ...argN])
{
//code to be executed
}

Unit-3 Java Script / Dr Komarasamy G 18

 JavaScript Functions
JavaScript Function Example
• Let’s see the simple example of function in JavaScript that does not has
arguments.
<html>
<head>
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</head>
</html>

Unit-3 Java Script / Dr Komarasamy G 19

 JavaScript Functions
• JavaScript Function Arguments
• We can call function by passing arguments. Let’s see the example of
function that has one argument.
<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>

Unit-3 Java Script / Dr Komarasamy G 20

 JavaScript Functions
• Function with Return Value
• We can call function that returns a value and use it in our program. Let’s see
the example of function that returns value.
<html>
<body>
<script>
function getInfo(){
return "hello javatpoint! How r u?";
}
</script> Output:
<script> hello javatpoint! How r u?
document.write(getInfo());
</script>
</body>
</html>

Unit-3 Java Script / Dr Komarasamy G 21

 JavaScript Functions
• JavaScript Function Object
• In JavaScript, the purpose of Function constructor is to create a new
Function object. It executes the code globally. However, if we call the
constructor directly, a function is created dynamically but in an unsecured
way.

Syntax
new Function ([arg1[, arg2[, ....argn]],] functionBody)

Parameter
• arg1, arg2, .... , argn - It represents the argument used by function.
• functionBody - It represents the function definition.

Unit-3 Java Script / Dr Komarasamy G 22

 JavaScript Functions
• JavaScript Function Methods
• Let's see function methods with description.

Method Description
apply() It is used to call a function contains this value and a single
array of arguments.

bind() It is used to create a new function.

call() It is used to call a function contains this value and an

argument list.

toString() It returns the result in a form of a string.

Unit-3 Java Script / Dr Komarasamy G 23

 JavaScript Functions
• JavaScript Function Object Examples
• Example 1
• Let's see an example to display the sum of given numbers.

<!DOCTYPE html>
<html>
<body>
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script>
</body> Output:
7
</html>

Unit-3 Java Script / Dr Komarasamy G 24

 JavaScript Functions
• Example 2
• Let's see an example to display the power of provided value.

<!DOCTYPE html>
<html>
<body>
<script>
var pow=new Function("num1","num2","return Math.pow(num1,num2)");
document.writeln(pow(2,3));
</script>
</body>
</html> Output:
8

Unit-3 Java Script / Dr Komarasamy G 25

 JavaScript Functions
Example for today's date and time
<html>
<head>
<title>Today's Date</title>
<script language="JavaScript"> // Define a function for later use
function print_todays_date( )
{ var d = new Date( ); // Get today's date and time
document.write(d.toLocaleString( )); // Insert it into the document
}
</script>
</head>
<body> Output:
The date and time are:<br> The date and time are:
<script language="JavaScript"> 2/1/2022, 9:13:53 PM
print_todays_date( ); // Now call the function we defined above
</script>
</body>
</html>

Unit-3 Java Script / Dr Komarasamy G 26

 JavaScript Functions
Example for arithmetic operation
<html>
<head>
<title>math</title>
<script type= "text/javascript ">
function oper()
{
var ch=parseInt(prompt( "Enter your choice 1.Addition 2.Subtraction
3.Multiplication 4.Division "));
switch(ch)
{
case 1:var v1=parseInt(prompt( "Enter the first value "));
var v2=parseInt(prompt( "Enter the second value "));
var v3=v1+v2;
document.writeln( "<br> "+ "Addition: "+v3);
break;

Unit-3 Java Script / Dr Komarasamy G 27

 JavaScript Functions
Example for arithmetic operation
case 2:var v4=parseInt(prompt( "Enter the first value "));
var v5=parseInt(prompt( "Enter the second value "));
var v6=v4-v5;
document.writeln( "<br> "+ "Subtraction: "+v6);
break;
case 3:var v7=parseInt(prompt( "Enter the first value "));
var v8=parseInt(prompt( "Enter the second value "));
var v9=v7*v8;
document.writeln( "<br> "+ "Multiplication: "+v9);
break;
case 4:var v10=parseInt(prompt( "Enter the first value "));
var v11=parseInt(prompt( "Enter the second value "));
var v12=v10/v11;
document.writeln( "<br> "+ "Divison: "+v12);
break;

Unit-3 Java Script / Dr Komarasamy G 28

 JavaScript Functions
Example for arithmetic operation
case 5:var v13=parseInt(prompt( "Enter the first value "));
var v14=parseInt(prompt( "Enter the second value "));
var v15=v13%v14;
document.writeln( "<br> "+ "Modulus: "+v15);
break;
default: document.writeln( "Enter choice correctly ");
}
}
</script>
</head>
<body onLoad= "oper()"></body>
</html>

Unit-3 Java Script / Dr Komarasamy G 29

Unit-3 Java Script / Dr Komarasamy G 30
• JavaScript Array
• JavaScript array is an object that represents a collection of similar type of elements.
JavaScript Arrays
• There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

Unit-3 Java Script / Dr Komarasamy G 31

 JavaScript Arrays
1) JavaScript array literal
• The syntax of creating array using array literal is given below:
• var arrayname=[value1,value2.....valueN];
• As you can see, values are contained inside [ ] and separated by ,
(comma).
Let's see the simple example of creating and using array in JavaScript.
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
Output:
</script> Sonoo
Vimal
Ratan

Unit-3 Java Script / Dr Komarasamy G 32

 JavaScript Arrays
2) JavaScript Array directly (new keyword)
• The syntax of creating array directly is given below:
• var arrayname=new Array();
• Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
Output:
for (i=0;i<emp.length;i++){ Arun
document.write(emp[i] + "<br>"); Varun
} John

</script>
Unit-3 Java Script / Dr Komarasamy G 33
 JavaScript Arrays
3) JavaScript array constructor (new keyword)
• Here, you need to create instance of array by passing arguments in
constructor so that we don't have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
Output:
</script> Jai
Vijay
Smith

https://www.javatpoint.com/javascript-array

Unit-3 Java Script / Dr Komarasamy G 34

 JavaScript Arrays
• JavaScript Array Methods
• Let's see the list of JavaScript array methods with their description.

Methods Description
concat() It returns a new array object that contains two or more merged
arrays.
copywithin() It copies the part of the given array with its own elements and
returns the modified array.
entries() It creates an iterator object and a loop that iterates over each
key/value pair.
every() It determines whether all the elements of an array are satisfying
the provided function conditions.
flat() It creates a new array carrying sub-array elements concatenated
recursively till the specified depth.
flatMap() It maps all array elements via mapping function, then flattens the
result into a new array.
fill() It fills elements into an array with static values.

Unit-3 Java Script / Dr Komarasamy G 35

 JavaScript Arrays
Methods Description
from() It creates a new array carrying the exact copy of another array
element.
filter() It returns the new array containing the elements that pass the
provided function conditions.
find() It returns the value of the first element in the given array that
satisfies the specified condition.
findIndex() It returns the index value of the first element in the given array
that satisfies the 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.
indexOf() It searches the specified element in the given array and returns
the index of the first match.
isArray() It tests if the passed value ia an array.

Unit-3 Java Script / Dr Komarasamy G 36

 JavaScript Arrays
Methods Description
join() It joins the elements of an array as a string.
keys() It creates an iterator object that contains only the keys of the
array, then loops through these keys.
lastIndexOf() It searches the specified element in the given array and returns
the index of the last match.
map() It calls the specified function for every array element and
returns the new array
of() It creates a new array from a variable number of arguments,
holding any type of argument.
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.
reduce(function, It executes a provided function for each value from left to right
initial) and reduces the array to a single value.

Unit-3 Java Script / Dr Komarasamy G 37

 JavaScript Arrays
Methods Description
reduceRight() It executes a provided function for each value from right to left
and reduces the array to a single value.
some() It determines if any element of the array passes the test of the
implemented function.
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.
toLocaleString() It returns a string containing all the elements of a specified
array.
toString() It converts the elements of a specified array into string form,
without affecting the original array.
unshift() It adds one or more elements in the beginning of the given
array.
values() It creates a new iterator object carrying values for each index in
the array.

Unit-3 Java Script / Dr Komarasamy G 38