Web Technology

Unit-II

By
Prof. Priyanka S. Jadhav
(Assit. Prof., Comp. Dept. , SKNCOE, Pune)
Contents
 Introduction to JavaScript
 Basic Syntax
 Variables and Data Types
 Statements
 Operators
 Literals
 Functions
 Objects
 Arrays
 Built in Objects
 JavaScript Debuggers
Contents
 DOM: Introduction to Document Object Model
 DOM history and levels
 Intrinsic event handling
 Modifying element style
 The document tree
 DOM event handling
 jQuery
Introduction to JavaScript
• JavaScript is an object-based scripting
language which is lightweight and cross-platform.
• JavaScript is used to create interactive websites.

• Application of JavaScript :
 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.
Advantages of Client-Side
JavaScript
• Less server interaction − You can validate user input
before sending the page off to the server. This saves
server traffic, which means less load on your server.
• Immediate feedback to the visitors − They don't
have to wait for a page reload to see if they have
forgotten to enter something.
• Increased interactivity − You can create interfaces
that react when the user hovers over them with a
mouse or activates them via the keyboard.
• Richer interfaces − You can use JavaScript to include
such items as drag-and-drop components and sliders
to give a Rich Interface to your site visitors.
JavaScript Syntax
• JavaScript can be implemented using JavaScript
statements that are placed within the <script>...
</script> HTML tags in a web page.

 Two important attributes −

1. Language
2. Type
JavaScript Outputs
• document.write() - Writing into the HTML output
• window.alert() - Writing into an alert box
• console.log() - Writing into the browser console
JavaScript Variables
• Variables are containers for storing data

• 4 Ways to Declare a JavaScript Variable:

1. Using var
2. Using let
3. Using const
4. Using nothing
JavaScript Variables
• The var keyword is used in all JavaScript code from
1995 to 2015.
• The let and const keywords were added to
JavaScript in 2015.
• If you want your code to run in older browsers, you
must use var.
When to Use var, let, const?
• If you want a general rule: always declare
variables with const.
• If you think the value of the variable can change,
use let.
• If you want your code to run in older browsers, you
must use var.

• Example:
JavaScript Datatypes
• JavaScript Data types (Primitive)
1. Number
2. String
3. Boolean
4. Undefined
5. Null

 The object data types: (non-primitive)

1. Object
2. Array
JavaScript Datatypes
JavaScript Datatypes
JavaScript Statements
• A computer program is a list of "instructions" to be
"executed" by a computer.
• In a programming language, these programming
instructions are called statements.
• A JavaScript program is a list of
programming statements.
• Semicolons are used to separate JavaScript
statements.

• Example:
JavaScript Operators

• Types of JavaScript Operators:

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
JavaScript Arithmetic Operators
JavaScript Comparison
Operators
JavaScript Logical Operators
JavaScript Bitwise Operators
JavaScript Assignment
Operators
JavaScript Special Operators
JavaScript - If Statement
 if..else statement :
◦ if statement
◦ if...else statement
◦ if...else if... statement.

 Example:
JavaScript – Switch Case
 switch..case statement :

Syntax with Example:

JavaScript – Loops
 There are four types of loops in JavaScript:

1. for loop
2. while loop
3. do-while loop
4. for-in loop
JavaScript – for loop
 The for loop iterates the elements for the fixed
number of times.
 It should be used if number of iteration is known.

 Syntax :

 Example :
JavaScript – while loop
 The while loop iterates the elements for the infinite
number of times.
 It should be used if number of iteration is not known.

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

 Syntax Example:
JavaScript Functions
 JavaScript functions are used to perform operations

 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.

 Syntax:
JavaScript Functions
 Example:

Function

Event
 JavaScript – Function with Arguments

 Example:
Argument/Parameter

Function

Passing Argument
JavaScript – Function with Return
Value

 Example:

“Hello!!
Return ”;
JavaScript – Anonymous Function

 Example:

<script>
var showMessage =
function (){
alert("Hello World!");
};
showMessage();
</script>
JavaScript Objects
 Object is an entity having state and behavior

properties
method

 There are 3 ways to create objects.

1. By object literal
2. By creating instance of Object directly (using new
keyword)
3. By using constructor (using new keyword)
Creating Objects in JavaScript

 Way 1: By using object literal

Syntax:

Example:
Creating Objects in JavaScript
 Way 1I: By creating instance of Object

Syntax:

Example:
Creating Objects in JavaScript
 Way III: By using an Object Constructor (new
keyword)

Example:
Built-In Objects in JavaScript
JavaScript – Array Object
 JavaScript array is an object that represents a
collection of elements.

 There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array (using new keyword)
3. By using Array constructor (using new keyword)
Creating Array in JavaScript

 Way 1: By array literal

Syntax:

Example:
Creating Array in JavaScript
 Way 1I: By creating instance of Array

Syntax:

Example:
can mention Array size here
Creating Array in JavaScript
 Way III: By using Array Constructor

Example:

var emp = new Array(“Ram”, “Shyam”,

“Mohan”) ;
Array Methods & Properties
 Properties of the Array

1. Length - Returns the number of elements in the array.

 Methods of the Array object

1. reverse() - Reverses the array elements

2. concat() - Joins two or more arrays
3. sort() - Sort the elements of an array
4. push() - Appends one or more elements at the end of an array
5. pop() - Removes and returns the last element of array
JavaScript – String Object
 Creating String Object

 Syntax:

 Example :
JavaScript – String Object
 Methods of String Object

1. toUpperCase() - It converts the given string into uppercase letter.

2. toLowerCase() - It converts the given string into lowercase letter.
3. charAt() - It provides the char value present at the specified index.
4. concat() - It provides a combination of two or more strings.
5. indexOf() - It provides the position of a char value present in the
given string.
6. lastIndexOf() - It provides the position of a char value present in the
given string by searching a character from the last position.
7. replace() - It replaces a given string with the specified replacement.
8. substring() - It is used to fetch the part of the given string on the
basis of the specified index.
9. slice() - It is used to fetch the part of the given string. It allows us to
assign positive as well negative index.
JavaScript - Date Object
 Creating Date Object :

 Methods of Date object :

1. getDate() - Returns the date of the month for the specified date
2. getDay() - Returns the day of the week for the specified date
3. getMonth() – Returns integer value between 0 and 11 that
represents the month on the basis of local time.
4. getHours() - Returns the hour in the specified date according to
local time.
5. getMinutes() - Returns the hour in the specified date according to
local time.
6. getSeconds() - Returns the seconds in the specified date according
to local time.
7. getMilliseconds() - It returns the integer value between 0 and 999
that represents the milliseconds on the basis of local time.
JavaScript – Math Object
 Methods of Math object

1. max(a,b) - Returns largest of a and b

2. min(a,b) - Returns least of a and b
3. round(a) - Returns nearest integer
4. pow(a,b) - Power
5. abs(a) - Returns absolute value of a
6. random() - Returns a pseudo random number between
0 and 1
7. sqrt(a) - Returns square root of a
8. ceil(a) - It returns a smallest integer value, greater than
or equal to a.
9. floor(a) - It returns largest integer value, lower than or
equal to a.
JavaScript - Debugger
 All modern browsers have a built-in JavaScript
debugger
 To perform debugging, we can use any of the
following approaches:
1. Using console.log() method
2. Using debugger keyword
 The console.log() method displays the result in the
console of the browser. If there is any mistake in the
code, it generates the error message.
JavaScript - Debugger
 JavaScript provides ”debugger” keyword to set the
breakpoint through the code itself.
 The debugger stops the execution of the program at
the position it is applied &we can start the flow of
execution manually.
Advantages of JavaScript
 Speed: Client-side JavaScript is very fast because it can be
run immediately within the client-side browser.

 Simplicity: JavaScript is relatively simple to learn and

implement.

 Popularity: JavaScript is used everywhere on the web.

 Interoperability: JavaScript plays nicely with other languages

and can be used in a huge variety of applications.

 Server Load: Being client-side reduces the demand on the

website server.

 Rich Interface: Gives the ability to create rich interfaces.

Disadvantages of JavaScript
 Client-Side Security: Because the code executes on
the user’s computer, in some cases it can be
exploited for malicious purposes. This is one reason
some people choose to disable JavaScript.

 Browser Support: JavaScript is sometimes interpreted

differently by different browsers. This makes it
somewhat difficult to write cross-browser code
DOM: Document Object Model
 JavaScript can access all the elements in a webpage
making use of Document Object Model (DOM).

 The document object represents the whole html

document.

 The web browser creates a DOM of the webpage

when the page is loaded.

 The DOM defines a standard for accessing

documents.

 The DOM model is created as a tree of objects.

 DOM: Tree Structure
Document Object

<html>
<head>
<title> My Text
</title>
</head>
<body>
<h1> My Header
</h1>
<p> My Paragraph
</p>
</body>
</html>
DOM - Methods
 Methods of document object :
DOM - Properties
 Properties of document object :
DOM Examples -
getElementById
 Example :

<html>
<head>
<script>
function f1() {
var a=
document.getElementById("t1").value;
alert(a); }
</script>
</head>
<body>
<input type="text" id="t1" >
<input type=“button” value="click"
onclick="f1()">
</body>
</html>
 DOM Examples-
getElementsByTagName
 Example :

<html>
<head>
<script>
function f1() {
document.getElementsByTagName("p")[0].innerHTML="HTML";
</script>
</head>
<body>
<p> Hello</p>
<p > How Are You </p>
<input type=“button” value="click" onclick="f1()">
</body>
</html>
DOM Examples-
getElementsByClassName
 Example :

<html>
<head>
<script>
function f1() {
document.getElementsByClassName("a1")
[1].innerHTML="HTML"; }
</script>
</head>
<body>
<p> Hello</p>
<p class= “a1”> How Are You </p>
<h1 class= “a1”>Good Day </h1>
<input type=“button” value="click" onclick="f1()">
</body>
</html>
DOM – JavaScript Events
 The change in the state of an object is known as
an Event.

 In html, there are various events which represents

that some activity is performed by the user or by the
browser

 JavaScript handles the HTML events via Event

Handlers.

 For example,
Click Event - when a user clicks over the browser or
over any HTML element

onclick() – Event handler of JS

DOM – JavaScript Events
 Mouse Events :
DOM – JavaScript Events
 Click Event : Example
DOM – JavaScript Events
 MouseOver Event : Example
DOM – JavaScript Events
 Keyboard Events :
DOM – JavaScript Events
 Keydown Event : Example
DOM – JavaScript Events
 Form Events :
DOM – JavaScript Events
 Focus Events : Example
DOM – JavaScript Events
 Window Events :
DOM – JavaScript Events
 Load Event : Example
 jQuery
 jQuery is a JavaScript Library.
 jQuery is easy to learn.
 jQuery greatly simplifies JavaScript programming.
jQuery - Features
 The jQuery library has following features:

1. HTML/DOM manipulation
2. CSS manipulation
3. HTML event methods
4. Effects and animations
5. AJAX
6. Utilities
jQuery – How to Add?
 Two ways to Add jQuery in Your Web Pages :
jQuery – CDN
 CDN link for adding jQuery :

<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/j
query.min.js">
</script>
</head>
jQuery – Syntax
jQuery – How to Use
 jQuery Example – To Hide
Paragraph
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>

<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
</body>
 jQuery Example – To
change CSS Property
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>

<script>
$(document).ready(function(){
$("p").click(function(){
$(this).css("background-color","Red");
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
</body>
 jQuery Example – To
append/ Add element
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).append("Hello");
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
</body>
 jQuery Example – To
remove element
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).remove();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
</body>
Any Questions?