HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT

1. Aafreen shaikh pg. 1
CHHATRAPATI SHIVAJI JUNIOR SCIENCE
COLLEGE JALGAON
INFORMATION TECHNOLOGY
Chapter 3 : Adv. JavaScript STD:12TH
JavaScript
• JavaScript is a web scripting language.
• It is an object-oriented language.
• Initially, It was called live script.
• It was created by Brendan Eich at Netscape.
• It was first available in the web browser Netscape Navigator version 2.
• It is used along with the HTML pages either in the body section or head section inside
the <script> </script> tags.
• It is used for validations of data.
• It is used to create dynamic web pages.
• It can capture events (actions done by users) and execute a code.
• JavaScript is case sensitive language.
Types of Scripting Languages
Client side Scripting
IT is executed on client machine by the browser. E.g. JavaScript, VBScript.
The source code of client side scripts can be viewed and altered in the browser
without any authentication.
Client side scripts are used generally for validationpurpose, they provide event driven
interaction.
Client side scripts are executed by the Client Browser.
No network traffic generated.
Server side Scripting
It resides on the Web Server and executed on the Web Server.
It is activated by Client.
E.g. ASP, PHP, Perl, JSP, CGI
The server side scripts are protected by login authentication.
Server side scripts are used for collecting the data when it is submitted by the Client
browser.
Client side scripts require Web Server Software to execute.
Network traffic is generated with Server-side scripting.
Attributes used in <script> tag.
src - To specify the URL of an external file containing the JavaScript source code.
language - indicates the language used in the script.

2. Aafreen shaikh pg. 2
E.g. <script language="JavaScript">
E.g. <script src="scripts/validate.js">
Abbreviations
ASP - Active Server Pages
API - Appliction Programing Interface
JDBC - Java Database Connectivity
DOM - Document Object Model
BOM - Browser Object Model
W3C - World Wide Web Consortium
NaN - Not a Number
Variables
JavaScript variables are containers for storing data values.
var keyword is used to declare variables.
All JavaScript variables must be identified with unique names.
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 _
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names
JavaScript variable names are case-sensitive.
Local variable - variable declared within procedure or function.
Data types in JavaScript
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 (reference) data type
Primitive Data Types in JavaScript
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

3. Aafreen shaikh pg. 3
Undefined represents undefined value
Null represents null i.e. no value at all
Operators
JavaScript operators are symbols that are used to perform operations on operands.
There are following types of operators in JavaScript.
Arithmetic Operators
- + / *
%(Modulus) - To find remainder of division of two numbers
++(increment)
--(decrement)
Comparison (Relational) Operators
== Is equal to
=== Identical (equal and of same type)
!= Not equal to
!== Not Identical
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to
Bitwise Operators
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Right Shift
>>> Bitwise Right Shift with Zero
Logical Operators
&& Logical AND
|| Logical OR
! Logical Not
Assignment Operators
= Assign
+= Add and assign
-= Subtract and assign
*= Multiplyand assign
/= Divide and assign
%= Modulus and assign

4. Aafreen shaikh pg. 4
Special Operators
(?:) Conditional Operator returns value based on the condition. It is like if-else.
, Comma Operator allows multiple expressions to be evaluatedas 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.
yield checks what is returned in a generator by the generator's iterator.
Comments in JavaScript
// - single line comments
/* */ - multiple line comments
Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
It is a block of JavaScript code that performs a specific task and returns a value.
A function id defined by using keyword "function".
E.g.
<script>
function msg() {
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
Objects in JavaScript
In JavaScript, almost "everything" is an object.
An object is a software bundle of variables and related methods. You can represent real-
world objects using software objects.
In JavaScript, 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.
The new keyword is used for creating objects in JavaScript.
Objects, methods and properties are the basic building blocks of Object oriented
programming language.

5. Aafreen shaikh pg. 5
The object binds data and functions(methods) together which works on data. Functions are
called as methods.
Once Object is defined and it can be used as a template to create many objects of same type.
JavaScript has predefined objects and it supports user defined objects also.
Core JavaScript contains a set of objects:
• Number
• Date
• Math
• Array
• String
• Boolean
and language constructs such as operators, control structures, statements, etc.

6. Aafreen shaikh pg. 6
Select object is the parent of option object.
In Client Side JavaScript, the Core JavaScript is extended by adding objects to control
a Browser Object model and Document Object Model
DOM and BOM standards are developed by W3C (World Wide Web Consortium)
DOM (Document Object Model )
DOM is a platform or interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents.
Browser Object Model provides objects supported by Browsers. It allows JavaScript to "talk
to" the browser.
• Window Object
• Location Object
• History Object
• Document Object

7. Aafreen shaikh pg. 7
• Navigator Object
• Screen Object
DOM (Document Object Model)
The DOM is a standard object model and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.
Window Object
Window object is a top level client side object for each window or frame.
Properties:
Property Description
location Returns the Location object for the window
document Returns the Document object for the window
name Sets or returns the name of a window
status Sets the text in the status bar of browser window
closed
Returns a Boolean value indicating whether a window has been
closed or not
Methods:
Method Name Description
parseInt( ) converts the string passed into number/integers.
alert( ) Displays an alert box with a message and an OK button
blur( ) Removes focus from the current window.
open( ) Opens a new Browser windwow.
close( ) Closes the current window
confirm( )
Displays a dialog box with a message and an OK & a Cancel
button
focus( ) Sets the focus to the current window
print( ) Prints the content of the current window
prompt( ) Displays a dialog box that prompts the visitor for input.

8. Aafreen shaikh pg. 8
setTimeout( )
Calls a function or evaluates an expression after a specified
number of milliseconds.
setInterval( )
Calls a function or evaluates an expression at specified
intervals.
clearInterval( ) clears a timer set with setInterval( ).
clearTimeout( ) clears a timer set with setTimeout( ).
parseFloat( ) converts the string passed into numbers with decimals
(floating point numbers).
Navigator Object
The navigator object is used for browser detection and can return useful infromation about
the visitor's browser and system. It can be used to get browser information such as appName,
appCodeName, userAgent etc.
Properties:
Property Description
appCodeName Returns the code name of the Client's browser
appName Returns the name of the Client's browser
appVersion
useragent
Returns the version information of the Client's browser
userAgent propertyreturns the user-agent header sent by the
browser to the server
Document Object
Document object is created when HTML document is loaded into the browser.
Properties:
Property Description
title specifies the title of the document on the Browser's title bar.
bgcolor Gives background color to the document.
URL Specifies URL of the docuemtn.
fgcolor
Specifies the text color
Methods:

9. Aafreen shaikh pg. 9
Method Name Description
write( ) Helps to display stringinto document windwow.
writeln( ) Displays string into docuement on new line
Events:
Event can be something the browser does, or something a user does.
JavaScript's interactionwith HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event.
When the user clicks a button, that click too is an event. Other examples include events like
pressing any key, closing a window, resizing a window, etc.
Events are the signals generated when specific action occurs.
Events List
click
dblclick
mouseover
mouseout
blur
focus
abort
load
unload
reset
select
keypress
keydown
keyup
Event Handler
An event handler typically is a software routine that processes events - actions such as
keystrokes and mouse movements.
Event handlers are triggered in the browser by user actions.
Frame/Object Events
onload - The event occurs when an object is loaded. When a page is loaded into the Web
Browser.
onunload - event occurs once a page has unloaded (user leaves)
onerror - The event occurs when an error happens during loading of a docuement or image.
onabort - event occurs when an image is stopped from loading before completely loaded.
onblur - event occurs when the focus is removed from an form element or window.
onfocus - event occurs when an element gets focus.

10. Aafreen shaikh pg. 10
onselect - event occurs when user selects some text.
onchange - The event occurs when the value of form field is changed by the user.
onsubmit - The event occurs when a form is submitted.
onreset - event occurs when a form is reset.
Mouse Events
onclick - event occurs when user clicks in the document or on a link or form element.
(is the only event handler for radio button)
ondblclick - event occurs when the user clicks in the document twice .
onmouseover - The event occurs when the user moves the pointer over an object.
onmouseout - The event occurs when the user moves the pointer off a clickable area.
onmousedown - event occurs when the user presses a mouse button over an element.
onmouseup - event occurs when the user releases a mouse button over an element.
Keyboard Events
onkeydown - event occurs when the user is pressing a key.
onkeypress - event occurs when the user presses a key.
onkeyup - event occurs when the user releases a key.
Important Functions
confirm( ) - Displays a dialog box with an OK and cancel button.
prompt( ) - Displays a dialog box that prompts the visitor to input.(accepts data from user)
alert( ) - Displays an alert box with a message and OK button.
eval( ) - used for evaluating a strin representing arithmetic expression.
indexOf( ) - used to search for the specified character in a string. Returns the index vlaue of
the first occurence. Find a certain string is present within a given string.
lastindexOf( ) - used to search for the specifiedcharacter in a string. Returns the index vlaue
of the last occurence.
substring( ) - used to extract a subset or certain portion of string.
parseInt( ) - used to convert string into number/integer.
parseFloat( ) - used to convert string into floating point number.
getDay( ) - method of the Date object returns the weekday in number.
getMonth( ) - method of the Date object returns the month in number.
getYear( ) - method of the Date object returns year part from the date.
charAt( ) - method of String returns the character at the specified index value.
toLowerCase( ) - method of String object returns string into lowercase.
cInt( ) -converts character to number
Methods of form elements
click( ) - method of checkbox object emulates the action of clicking the checkbox.
blur( ) - method of button object emulates the action of removing focus on a button.
select( ) - method of password, textbox, textarea object selects the text in the field.
focus( ) - method of radio object gives focus to the radio button.
reset( ) - method of the form object resets the form.

11. Aafreen shaikh pg. 11
Form Objects Methods
Name Description
reset( ) Simulates a mouse click on a reset button for the calling form.
submit( ) Submits a form.
Button Objects Property
Name Description
form Refers to the associated form.
name Indicate the name attribute.
type Indicate the type attribute.
value Indicate the value attribute.
Button Objects Methods
Name Description
blur( ) Focus lost from the button.
click( ) Indicate a mouse click on the button.
focus( ) To get focus to the button.
Password Object Property
Name Description
defaultValue Specifies the value attribute.
form Reflects the form containing the password object.
name Specifies the name attribute.
type Specifies the type attribute.
value
Specifies the current value of the password object's
field.
Password Object Methods
Name Description
blur( ) Removes focus from the object.
focus( ) Gives focus to the object.
select( ) Selects the text
Checkbox Object Property
Name Description
checked Indicate the current state of the checkbox.
defaultChecked Indicate the checked attribute.
form Form containing the checkbox object.

12. Aafreen shaikh pg. 12
name Indicate the name attribute.
type Indicate the type attribute.
value Indicate the value attribute.
Checkbox Object Methods
Name Description
blur( ) Lost focus from the checkbox.
click( ) Indicates a mouse click on the checkbox.
focus( ) Set focus to the checkbox.
Radio Object Property
Name Description
checked Selects a radio button programmatically (property of the individual button).
defaultChecked Specifies the checked attribute (property of the individual button).
form Reflects the form containing the radio object (property of the array of buttons).
name Reflects the name attribute (property of the array of buttons).
type Reflects the type attribute (property of the array of buttons).
value Reflects the value attribute (property of the array of buttons).
Radio Object Methods
Name Description
blur( ) Removes focus from the radio button.
click( ) Simulates a mouse-click on the radio button.
focus( ) Gives focus to the radio button.
Textarea Object Property
Name Description
defaultValue Represents the value attribute.
form Represents the form containing the Textarea object.
name Represents the name attribute.
type Represents that an object is a Textarea object.
value Represents the current value of the Textarea object.
Textarea Object Methods
Name Description
blur( ) Removes focus from the object.
focus( ) Gives focus to the object.
select( ) Selects the input area of the object.
Short Questions
1. What is JavaScript?

13. Aafreen shaikh pg. 13
2. Explain Client-side Scripting.
3. Explain Server-side Scripting.
4. Give the difference between Client-side and server side scripts.
5. What is Document Object? List any 5 properties of doucment object
6. Explain any four built-in fucntions in JavaScript.
7. How to write function in JavaScript?
Write Program Questions
1.Write JavaScript code to print subtraction of 2 numbers.
2.Write JavaScript code to print addition of 2 numbers.
3.Write JavaScript code to print multiplication of 2 numbers.
4.Write JavaScript code to print division of 2 numbers.
5.Write JavaScript code to print addition, subtraction, multiplication & division of 2 numbers.
6.Write JavaScript code to display area, accept value from user.
7.Write JavaScript code to print area of triangle.
8.Write JavaScript code to calculate the average of three numbers.
9.Write JavaScript code to print perimeter of rectangle.
10.Write JavaScript code to print perimeter of trapezium.
11.Write JavaScript code to check whether the number is odd or even.
12.Write JavaScript code to print multiplication table of 3.
13.Write JavaScript code to print numbers from 1 to 10.
14.Write JavaScript code to print sum of 50 natural numbers.
15.Write JavaScript code to print all even numbers from 10 to 50.
16.Write JavaScript code when user click on button, it will display sum of even numbers from 1 to 10.
17.Write JavaScript code to print all odd numbers from 50 to 100.
18.Write JavaScript code to print factorial of 7 on button click.
19.Write JavaScript code to print square of a accepted number.
20.Write JavaScript code to count length of accepted string after click on the button.
21.Write JavaScript code to accept two dates and find the difference in those dates.
22.Write JavaScript code to take a input of string and reverse the string in output.
23.
Write JavaScript code to input 3 digit number and find sum and product of its digit of the number use onblur
event for the program.
24.Write JavaScript code to print factorial of accepted number.