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 validation purpose,
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.

E.g. <script language="JavaScript">

E.g. <script src="scripts/[Link]">

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
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
*= Multiply and assign
/= Divide and assign
%= Modulus and assign
Special Operators
(?:) 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.
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.
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.
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
 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
Returns the Location object for the
location
window
 Returns the Document object for the
document
window
name Sets or returns the name of a window
Sets the text in the status bar of browser
status
window
Returns a Boolean value indicating
closed
whether a window has been closed or not

Methods:
Method Name Description
converts the string passed into
parseInt( )
number/integers.
Displays an alert box with a message
alert( )
and an OK button
Removes focus from the current
blur( )
window.
open( ) Opens a new Browser windwow.
close( ) Closes the current window
Displays a dialog box with a message
confirm( )
and an OK & a Cancel button
focus( ) Sets the focus to the current window
print( ) Prints the content of the current window
Displays a dialog box that prompts the
prompt( )
visitor for input.
Calls a function or evaluates an
setTimeout( ) 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
Returns the code name of the Client's
appCodeName
browser
appName Returns the name of the Client's browser
Returns the version information of the
appVersion Client's browser
userAgent property returns the user-
useragent 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
specifies the title of the document on the
title
Browser's title bar.
bgcolor Gives background color to the document.
URL Specifies URL of the docuemtn.

fgcolor Specifies the text color

Methods:
Method
Description
Name
write( ) Helps to display string into 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 interaction with 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.
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 specified character 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.
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.
Specifies the current value of the password object's
value
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.
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
Selects a radio button programmatically (property of the individual
checked
button).
defaultChecked Specifies the checked attribute (property of the individual button).
Reflects the form containing the radio object (property of the array of
form
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?
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?