Unit Ii Notes

UNIT II
CLIENT SIDE PROGRAMMING
Java Script: An introduction to JavaScript–JavaScript DOM Model-Exception

Handling-Validation Built-in objects-Event Handling- DHTML with
JavaScript- JSON introduction – Syntax – Function Files
Java Script: An Introduction to Java
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.
Features of JavaScript
There are following features of JavaScript:
1. 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.
2. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
3. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
4. It is a light-weighted and interpreted language.
5. It is a case-sensitive language.
6. JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
7. It provides good control to the users over the web browsers.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
o Displaying clocks etc.
Example
1 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

<html>
<body>
<h2>Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript by JavaScript");
</script>
</body>
</html>
3 Places to put JavaScript code
1. Between the body tag of html

2. Between the head tag of html
3. In .js file (external javaScript)
Between the body tag
<html>
<body>
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
</body>
</html>
Between the head tag
<html>

<head>
function msg(){
</script>
</head>
<body>
<p>Welcome to Javascript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
External javascript
Message.js
function msg(){
}
HTML File
<html>
<head>

<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Javascript Data Types
JavaScript provides different data types to hold different types of values. There are two types
of data types in JavaScript.
1. Primitive data type

2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the
data type. It can hold any type of values such as numbers, strings etc. For example:
1. var a=40;//holding number

2. var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
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
JavaScript Comment
 The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily
interpret the code.
Types of Comments
1. Single-line Comment
2. Multi-line Comment
JavaScript Single line Comment
 It is represented by double forward slashes (//). It can be used before and after the
statement.
 Example:
<html>
<body>
<script>
// It is single line comment
document.write("hello javascript");
</script>
</body>
</html>
JavaScript Multi line Comment
 It can be used to add single as well as multi line comments. So, it is more convenient.

 It is represented by forward slash with asterisk then asterisk with forward slash. For
example:
/* your code here */
Example:
<html>
<body>
<script>
/* It is multi line comment.
It will not be displayed */
document.write("example of javascript multiline comment");
</script>
</body>
</html>
JavaScript Variable
 A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript: local variable and global variable.
 There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore ( _ ), or dollar( $ )

sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.
Correct JavaScript variables
var x = 10;
var _value="sonoo";
Incorrect JavaScript variables
var 123=30;
var *aa=320;
Example Program
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
</body>
</html>
JavaScript local variable
 A JavaScript local variable is declared inside block or function.

 It is accessible within the function or block only. For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
Or,
<script>
if(10<13){
var y=20;//JavaScript local variable
}
</script>
JavaScript global variable

 A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
Java Script Output
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
Using innerHTML
 To access an HTML element, JavaScript can use the document.getElementById(id) method.
 The id attribute defines the HTML element. The innerHTML property defines the
HTML content
Example Using Inner HTML Output
<!DOCTYPE html> My First Web Page

<html>
My First Paragraph.
<body>
<h2>My First Web Page</h2> 11
<p>My First Paragraph.</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =5 + 6;
</script>
</body>
</html>
Using document.write()
Example Using document.write Output

My First Web Page
<!DOCTYPE html>
<html>
My first paragraph
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p> 11
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using window.alert()
Example Using window.alert Output
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using console.log()
 For debugging purposes, you can call the console.log() method in the browser to
display data.
Using console.log () Output
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Prompt Box
 A prompt box is often used if you want the user to input a value before entering a page.

 When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.
 If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.
Syntax
 window.prompt("sometext","defaultText");
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 

6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>
10 <title>An Addition Program</title>
11
12 <script type = "text/javascript">

13 
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's
this?"/>
</form>
</body>
</html>
MouseOver Event
Program Output
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<p onmouseover="mouseoverevent()"> Keep cursor over
me</p>
</body>
</html>
Focus Event
Program Output
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>

</script>
</body>
</html>
Keydown Event
Program Output
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>


</script>
</body>
</html>
Load Event
Program Output
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>

</script>
</body>
</html>
DHTML with JAVA SCRIPT
Introduction to DHTML
 DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
 Components of Dynamic HTML
o HTML 4.0
o CSS
o JavaScript
o DOM.
 HTML 4.0
o HTML is a client-side markup language, which is a core component of the
DHTML. It defines the structure of a web page with various defined basic
elements or tags.
 CSS
o CSS stands for Cascading Style Sheet, which allows the web users
or developers for controlling the style and layout of the HTML
elements on the web pages.
 JavaScript
o JavaScript is a scripting language which is done on a client-side.
o DHTML uses the JavaScript technology for accessing, controlling,
and manipulating the HTML elements.
 DOM
o DOM is the document object model. It is a w3c standard, which is a
standard interface of programming for HTML.
 Difference between HTML and DHTML
HTML DHTML
It is used for developing and It is used for creating and designing
creating web pages. the animated and interactive web
sites or pages.
This markup language creates This concept creates dynamic
static web pages. web pages.
A simple page which is created A page which is created by a
by a user without using the user using the HTML, CSS,
scripts or styles called as an DOM, and JavaScript
HTML page. technologies called a DHTML
page.
HTML is simply a markup DHTML is not a language, but it
language. is a set of technologies of web
development.
DHTML Tasks
Following are some of the tasks that can be performed with JavaScript:
• Performing html tasks
• Performing CSS tasks
• Handling events
• Validating inputs
Performing HTML Tasks:
DHTML Code performing HTML tasks Output
<html>
<head>
<title>DOM programming</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p id = "geeks">Hello Geeks!</p>
<script style = "text/javascript">
document.getElementById("geeks").innerHTML ="A
computer science portal for geeks";
</script>
</body>
</html>
Performing CSS Tasks:
DHTML CSS for changing the style of the HTML element

<html>
<head>
<title>
changes the particular HTML element example
</title>
</head>
<body>
<p id="demo"> This text changes color when click on the following
different buttons. </p>
<button onclick="change_Color('green');"> Green </button>
<button onclick="change_Color('blue');"> Blue </button>
function change_Color(newColor) {
var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html>
DHTML Events
• An event is defined as changing the occurrence of an object.
• It is compulsory to add the events in the DHTML page. Without events, there will be
no dynamic content on the HTML page. The event is a term in the HTML, which
triggers the actions in the web browsers.
• Example of events:
• Click a button.
• Submitting a form.
• An image loading or a web page loading, etc.
<html>
<head>
<title>
Example of onclick event
</title>
function ChangeText(ctext)
{
ctext.innerHTML=" Hi Akshaya!!!";
}
</script>
</head>
<body>
<font color="red"> Click on the Given text for changing it: <br>
</font>
<font color="blue">
<h1 onclick="ChangeText(this)"> Hello World! </h1>
</font>
</body>
</html>
Validate input data using JavaScript.

Validate input data using JavaScript. Output
<style>
body {
margin-left: 50%;
}
h1 {
color: green;
}
</style>
<h1>
GeeksforGeeks
</h1>
<h4>
DHTML JavaScript
</h4>
<p>
Enter graduation percentage:
</p>
<input id="perc">
<button type="button" onclick="Validate()">
Submit
</button>
<p id="demo"></p>
<script>
function Validate() {
var x,text;
x=document.getElementById("perc").value;
if(isNaN(x)||x<60) {
window.alert("Not selected in GeeksforGeeks");
} else {
document.getElementById("demo").innerHTML=
"Selected: Welcome to GeeksforGeeks";
document.getElementById("demo").style.color="#009900";
}
}
</script>
JSON Introduction
 JSON is a text-based data exchange format derived from JavaScript that is used in
web services and other connected applications.
 JSON defines only two data structures
Objects and Arrays
 An object is a set of name-value pairs
 Array is a list of values
 JSON defines seven value types: string, number, object, array, true, false and null.
 Objects are enclosed in braces ({})
 Array are enclosed in brackets ([])
JSON Syntax
JSON syntax is derived from JavaScript object notation syntax:
 Data is in name/value pairs

 Data is separated by commas
 Curly braces hold objects
 Square brackets hold arrays
JSON Data - A Name and a Value

JSON data is written as name/value pairs (aka key/value pairs).
A name/value pair consists of a field name (in double quotes), followed by a colon,
followed by a value: "name":"John"
JSON Objects
• JSON objects are written inside curly braces.
• Just like in JavaScript, objects can contain multiple name/value pairs:
• {"firstName":"John", "lastName":"Doe"}
JSON Arrays
• JSON arrays are written inside square brackets.
• Just like in JavaScript, an array can contain objects:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
In the example above, the object "employees" is an array. It contains three objects.
Each object is a record of a person (with a first name and a last name).
{"employees":[
{"name":"Ram", "email":"[email protected]", "age":23},
{"name":"Shyam", "email":"[email protected]", "age":28},
{"name":"John", "email":"[email protected]", "age":33},
{"name":"Bob", "email":"[email protected]", "age":41}
]}
Example for JSON Array:
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonObjectArray = {
// Assigned a JSON array of objects

// to the key "books"
"books": [
{
"name": "Let Us C",
"author": "Yashavant Kanetkar"
},
{
"name": "Rich Dad Poor Dad",
"author": "Robert Kiyosaki "
},

{
"name": "Introduction to Algorithms",
"author": "Cormen"
},
]
};
var x = jsonObjectArray.books[0];
document.getElementById("para").innerHTML= x.name + " by " + x.author;
</script>
</body>
</html>
Output:
Let Us C by Yashavant Kanetkar
JSON Function files:
Using JSON, it is possible to define a function in a separate external JS file and we
can access this functionality from HTML document.
Example code
myFile.js
student({
{“name”: “AAA”, “roll_no”: “10”, “city”: “Pune”},
{“name”: “BBB”, “roll_no”: “20”, “city”: “Mumbai”},
{“name”: “CCC”, “roll_no”: “30”, “city”: “Kolkata”},
{“name”: “DDD”, “roll_no”: “40”, “city”: “Chennai”},
JSON_File_Demo.html
<!DOCTYPE html>
<html>
<body>
<div id="myID"></div>
<script>

function Student(arr){
var out="";
var i;
out+='<table border=1>'
out+='<tr><td>'+arr[i].roll_no+'</td><td>'+arr[i].name+'</td><td>'+arr[i].city+'</
td></tr>';
}
out+='</table>'
document.getElementById("myID").innerHTML=out;
}
</script>
<script src="myFile.js"></script>
</body>
</html>
Output
Roll_No Name City
10 AAA Pune
20 BBB Mumbai
30 CCC Kolkata
40 DDD Chennai

Unit Ii Notes

Uploaded by

Copyright:

Available Formats

Unit Ii Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit Ii Notes

Uploaded by

Copyright:

Available Formats

UNIT II

CLIENT SIDE PROGRAMMING

Java Script: An introduction to JavaScript–JavaScript DOM Model-Exception

JavaScript is used to create interactive websites. It is mainly used for:

1 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

document.write("Hello JavaScript by JavaScript");

3 Places to put JavaScript code

1. Between the body tag of html

Between the body tag

Between the head tag

2 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

<input type="button" value="click" onclick="msg()"/>

3 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

Javascript Data Types

1. Primitive data type

1. var a=40;//holding number

JavaScript primitive data types

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

JavaScript Single line Comment

// It is single line comment

JavaScript Multi line Comment

5 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

/* your code here */

/* It is multi line comment.

It will not be displayed */

document.write("example of javascript multiline comment");

1. Name must start with a letter (a to z or A to Z), underscore ( _ ), or dollar( $ )

Correct JavaScript variables

Incorrect JavaScript variables

JavaScript local variable

 A JavaScript local variable is declared inside block or function.

JavaScript global variable

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

Example Using Inner HTML Output

<!DOCTYPE html> My First Web Page

<p>My First Paragraph.</p>

Example Using document.write Output

Example Using window.alert Output

<h1>My First Web Page</h1>

9 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

5

8 <html xmlns = "http://www.w3.org/1999/xhtml">

12 <script type = "text/javascript">

20 // read in first number from user as a string

10 UNIT II PREPARED BY : Mr.V.Balamurugan, AP (Sr. G.)/CSE

Operator Description Example

* Multiplication 10*20 = 200

% Modulus (Remainder) 20%10 = 0

= Multiply and assign var a=10; a=20; Now a = 200