Introduction JavaScript

Script means small piece of code. Scripting languages are two kinds one is client-
side other one is servers-side scripting. In general client-side scripting is used for
verifying simple validation at client side, server-side scripting is used for database
verifications. VBScript, java script and J script are examples for client-side scripting
and ASP, JSP, Servlets, PHP etc. are examples of server-side scripting.
JavaScript (originally known as "LiveScript") is a scripting language that runs
inside the browser to manipulate and enhance the contents of Web pages. Java Script is
designed to add interactivity to HTML pages. Web pages are two types
Static web page
Dynamic webpage
❖ Static web page where there is no specific interaction with the client
❖ Dynamic web page which is having interactions with client and as well as
validations can be added.
Simple HTML script is called static web page, if you add script to HTML page it is called
dynamic page. Netscape navigator developed java script. Microsoft’s version of
JavaScript is Jscript.
❖ Java script code as written between <script>-----</script>tags
❖ All java script statements end with a semicolon
❖ Java script ignores white space
❖ Java script is case sensitive language
❖ Script program can save as either. Js or. html

Benefits of JavaScript
❖ It is widely supported by web browsers;
❖ It gives easy access to the document objects and can manipulate most of them.
❖ Java Script gives interesting animations with long download times associated
with many multimedia data types;
❖ Web surfers don’t need a special plug-in to use your scripts
❖ Java Script relatively secure - you can’t get a virus infection directly from Java
Script.
❖ JavaScript code resembles the code of C Language; the syntax of both
the language is very close to each other. The set of tokens and constructs are
same in both the language.

Problems with JavaScript

❖ Most scripts relay upon manipulating the elements of DOM;
❖ Your script does not work then your page is useless
❖ Because of the problems of broken scripts many web surfers disable java
script support in their browsers
❖ Script can run slowly and complex scripts can take long time to start up

Similarities between java script and java:

1. Both java script and java having same kind of operators
2. Java script uses similar control structures of java
3. Nowadays both are used as languages for use on internet.
4. Labeled break and labeled continue both are similar
5. Both are case-sensitive languages

Difference between java script and java:

Java Script Java
Java Script is scripting language Java is a programming language
Java Script is object-based programming Java is object –oriented programming
language. language
Java script code is not compiled, only Java is compiled as well as interpreted
interpreted. language
Java Script is Weekly-typed language Java is Strongly-typed language
Java creates applications that run in a
JavaScript code is run on a browser only.
virtual machine or browser
 The syntax of the script tag is as follows:
<script language=‟‟scripting language name‟‟>
-----------------------------------------
</script>
The language attribute specifies the scripting language used in the script.
Both Microsoft internet explorer and Netscape navigator use java script as the default
scripting language. The script tag may be placed in either the head or the body or
the body of an HTML document.
Ex: <script language=‟‟javascript‟‟>
-------------
-------------
-------------
</script>

Comments in JavaScript:
Single line comment- //
Multi-line comment- <!-- comment -->

Operators in JavaScript:
❖ Arithmetic operators (+,-,*,/,%)
❖ Relational operators (<,>,!=,<=,>=)
❖ Logical operators(&&,||,!)
❖ Assignment operator(=)
❖ Increment decrement operators(++,- -)
❖ Conditional/Ternary operator(?:)
❖ Bitwise operators(&,|,!)

Control structures:
❖ If statement
❖ Switch
❖ While
❖ Do-while
❖ For
❖ Break
❖ Continue
Control structures syntax and working as same as java language.

Variables
Variables are like storage units/place holders to hold values. A variable is a memory
location to hold certain different types of data. In Javascript, A variable can store all
kinds of data. It is important to know the proper syntax to which variables must
conform:
❖ They must start with a letter or underscore ("_")
❖ Subsequent characters can also be digits (0-9) or letters (A-Z and/or a-z).
Remember, JavaScript is case-sensitive. (That means that MyVar and myVar are
two different names to JavaScript, because they have different capitalization.)
❖ You cannot use reserved words as variable names.
❖ You cannot use spaces in names.
❖ Names are case-sensitive.

Syntax:
var v_name = value;
Examples of legal variable names are fname, temp99, and _name.

When you declare a variable by assignment outside of a function, it is called global

variable, because it is available everywhere in the document. When you declare a
variable within a function, it is called local variable, because it is available only within the
function. To assign a value to a variable, you use the following notation:
var num = 8;
var real= 4.5;
 var myString = "Web Technologies";
Values of Variables (Data types)
JavaScript recognizes the following types of values:
❖ Numbers, such as 42 or 3.14159
❖ Boolean values, either true or false
❖ Strings, such as "Howdy!"
❖ NULL, a special keyword which refers to nothing.

Functions
Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript
procedure -a set of statements that performs a specific task when called. A function definition
has these basic parts:
❖ The function keyword
❖ A function name
❖ A comma-separated list of arguments to the function in parentheses
❖ The statements in the function in curly braces: { }

Defining a Function
Defining the function means, name the function and specifies what to do when the
function is called. You define a function within the <SCRIPT>...</SCRIPT> tags within
the <HEAD> ... </HEAD> tags. While defining a function, you can also declare the
variables which you will be calling in that function. Here's an example of defining a
function:
function msg()
{
window.alert(“This is an alert box.”);
}
Here's an example of a function that takes a parameter:
function welcome(string)
{
window.alert(“Hi”+string);
}
When you call this function, you need to pass a parameter (such as the word that the
user clicked on) into the function.
Calling a Function
Calling the function actually performs the specified actions. When you call a function, this is
usually within the BODY of the HTML page, and you usually pass a parameter into the
function on which the function will act.
Here's an example of calling the same function:
msg();
For the other example, this is how you may call it:
<inupt type="button" name=”welcome” onClick="msg1()"/>

OBJECTS IN JAVA SCRIPT

When you load a document in your Web browser, it creates a number of
JavaScript objects with properties and capabilities based on the HTML in the document
and other information. These objects exist in a hierarchy that reflects the structure of
the HTML page itself. The pre-defined objects that are most commonly used are the
window and document objects. Some of the useful Objects are:
1. Document
2. Window
3. Browser
4. Form
5. Math
6. Date

The Document Object

A document is a web page that is being either displayed or created. The document has a
number of properties that can be accessed by JavaScript programs and used to
manipulate
the content of the page.
write or writeln
Html pages can be created on the fly using JavaScript. This is done by using the write or
writeln methods of the document object.
Syntax:
document.write (“String”);
document.writeln (“String”);
In this document is object name and write () or writeln () are methods. Symbol period is
used as connector between object name and method name. The difference between these
two methods is carriage form feed character that is new line character automatically added
into the document.
Exmaple: document.write(“<body>”);
document.write(“<h1> Hello </h1>”);
bgcolor and fgcolor
These are used to set background and foreground(text) color to webpage. The methods
accept either hexadecimal values or common names for colors.
Syntax:
document.bgcolor=”#1f9de1”;
document.fgcolor=“silver”;
anchors
The anchors property is an array of anchor names in the order in which they appear in the
HTML Document. Anchors can be accessed like this:
Syntax:
document.anchors[0];
:
document.anchors[n-1];
Links
Another array holding all links in the order in which they were appeared on the Webpage.
Forms
Another array, this one contains all of the HTML forms. By combining this array with the
individual form objects each form item can be accessed.

The Window Object

The window object is used to create a new window and to control the properties of window.
Methods:
1. open(“URL”,”name”) : This method opens a new window which contains the
document specified by URL and the new window is identified by its name.
2. close(): this shutdowns the current window.
Properties:
toolbar = [1|0] location= [1|0] menubar = [1|0] scrollbars = [1|0] status =
[1|0] resizable = [1|0]
where as 1 means on and 0 means off

height=pixels, width=pixels : These properties can be used to set the window size.
The following code shows how to open a new window
newWin = open(“first.html”,”newWin”,”status=0,toolbar=0,width=100,height=100”);

Window object supports three types of message boxes.

1. Alert box
2. Confirm box
3. Prompt box

Alert box is used to display warning/error messages to user. It displays a text string
with OK button.
Syntax: window. Alert (“Message”);

Confirm Box is useful when submitting form data. This displays a window containing message with two
buttons: OK and Cancel. Selecting Cancel will abort the any pending action, while OK will let the action
proceed.
Syntax
window.confirm(“String”);
 Prompt box used for accepting data from user through keyboard. This displays simple
window that contains a prompt and a text field in which user can enter data. This
method has two parameters: a text string to be used as a prompt and a string to use as
the default value. If you don‟t want to display a default then simply use an empty string.
Syntax
Variable=window.prompt(“string”,”default value”);

The Form Object

Two aspects of the form can be manipulated through JavaScript. First, most commonly
and probably most usefully, the data that is entered onto your form can be checked at
submission. Second you can actually build forms through JavaScript.
Form object supports three events to validate the form
onClick = “method()”
This can be applied to all form elements. This event is triggered when the user clicks
on the element.
onSubmit = “method()”
This event can only be triggered by form itself and occurs when a form is submitted.

onReset = “method()”
This event can only be triggered by form itself and occurs when a form is reset.

Example: HTML program that applies a random background color when you
click on button
<html>
<head>
<script language = "javascript">
function change()
{
var clr = document.bgColor=parseInt(Math.random()*999999);
document.f1.color.value=clr;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="color"/>
<input type="button" value="Cick me" onclick="change()"/>
</form> </body></html>

Fig.1: On first run background is white Fig.2: After clicking on button”Click me”:
background changed to “black”
The browser Object
The browser is JavaScript object that can be used to know the details of
browser. Some of the properties of the browser object is as follows:

Property Description
It returns the internal name for the browser. For major
navigator.appCodeName
browsers it is Mozilla
It returns the public name of the browser – navigator or
navigator.appName Internet Explorer
navigator.appVersion It returns the version number, platform on which the
browser is running.
navigator.userAgent The strings appCodeName and appVersion concatenated
together
navigator.plugins An array containing details of all installed plug-ins
Navigator.mimeTypes An array of all supported MIME Types

Example: Write javascript to display internal details of a browser (Test.html)

<script language = "javascript">

<!--
document.writeln("Internal Name:"+navigator.appCodeName);
document.writeln("<br/>Public Name:"+navigator.appName);
document.writeln("<br/>Version:"+navigator.appVersion);
-->
</script>
Output:
The Math Object
The Math object holds all mathematical functions and values. All the functions and
attributes used in complex mathematics must be accessed via this object.
Syntax:
Math.methodname();
Math.value;

Method Description Example

Math.abs(x) Returns the absolute value Math.abs(-20) is 20
Math.ceil(x) Returns the ceil value Math.ceil(5.8) is 6
Math.ceil(2.2) is 3
Math.floor(x) Returns the floor value Math.floor(5.8) is 5
Math.floor(2.2) is 2
Math.round(x) Returns the round value, nearest integer Math.round(5.8) is 6
value Math.round(2.2) is 2
Math.trunc(x) Removes the decimal places it returns only Math.trunc(5.8) is 5
integer value Math.trunc(2.2) is 2
Math.max(x,y) Returns the maximum value Math.max(2,3) is 3
Math.max(5,2) is 5
Math.min(x,y) Returns the minimum value Math.min(2,3) is 2
Math.min(5,2) is 2
Math.sqrt(x) Returns the square root of x Math.sqrt(4) is 2
Math.pow(a,b) This method will compute the ab Math.pow(2,4) is 16
Math.sin(x) Returns the sine value of x Math.sin(0.0) is 0.0
Math.cos(x) Returns cosine value of x Math.cos(0.0) is 1.0
Math.tan(x) Returns tangent value of x Math.tan(0.0) is 0
Math.exp(x) Returns exponential value i.e ex Math.exp(0) is 1
Math.random(x) Generates a random number in between 0 Math.random()
and 1
Math.log(x) Display logarithmic value Math.log(2.7) is 1
Math.PI Returns a ∏ value a = Math.PI;
a = 3.141592653589793

The Date Object

This object is used for obtaining the date and time. In JavaScript, dates and times
represent in milliseconds since 1st January 1970 UTC. JavaScript supports two time
zones: UTC and local. UTC is Universal Time, also known as Greenwich Mean Time(GMT),
which is standard time throughout the world. Local time is the time on your System. A
JavaScript Date represents date from -1,000,000,000 to -1,000,000,000 days relative to
01/01/1970.
Date Object Constructors:
new Date(); Constructs an empty date object.
new Date(“String”); Creates a Date object based upon the contents of a text string.
new Date(year, month, day[,hour, minute, second] ); Creates a Date object based
upon the numerical values for the year, month and day.

var dt=new Date();

document.write(dt); // Tue Dec 23 11:23:45 UTC+0530 2015

Methods in Date object:

Java script date object provides several methods, they can be classified is string
form, get methods and set methods. All these methods are provided in the following
table.
Method Description
getDate() Returns day of the month i.e. 1 to 31
getDay() Returns an integer representing day of the week(0 - 6),
Sunday to Saturday respectively.
getMonth() Returns month of the year from 0 to 11, January to
December respectively.
 getFullYear() Returns four-digit year number
getHours() Returns hour field of the Date Object in 24 hours time
format (0 to 23)
getMinitues() Returns minute field of the Date Object from 0 to 59
getseconds() Returns seconds field of the Date Object 0 to 59
setDate(v)
setDay(v)
To set the date, day, month and full year
setMonth(v)
setFullYear(y,m,d)
setHours(v)
setMinutes(v) To set the hours, minutes, seconds of time
setSeconds(v)
toString() Returns the Date as a string

Example: Write javascript to display internal details of a browser (Test.html)

<script language = "javascript">
<!--
var dt = new Date(); var day = dt.getDate();
var month = dt.getMonth()+1; var year = dt.getFullYear();
document.writeln("<h4>Today's Date:"+day+"/"+month+"/"+year);-
-->
</script>
Output:

Event Handling in Java Script

Introduction to Event Handling

• Event Handling is a software routine that processes actions, such as keystrokes and mouse movements.
• It is the receipt of an event at some event handler from an event producer and subsequent processes.

Functions of Event Handling

• Event Handling identifies where an event should be forwarded.

• It makes the forward event.
• It receives the forwarded event.
• It takes some kind of appropriate action in response, such as writing to a log, sending an error or recovery
routine or sending a message.
• The event handler may ultimately forward the event to an event consumer.
Event Handlers

Category Event Handler Description

onload The browser has completed loading the document.
onunload The browser has completed unloading the document.
onabort The transfer of an image as been aborted.
Window and
onerror An error has occurred in the JavaScript program.
Document events
onmove The user has moved the browser window.
onresize The user has resized the browser window.
onscroll The user has moved the scrollbar.
onfocus The user has entered an input field.
onblur The user has exited an input field.
onchange The content of an input field has changed.
Form events
onselect The user has selected text in an input or textarea field.
onsubmit A form has been submitted.
onreset The user has clicked the Reset button.
onkeydown The user has begun pressing a key.
onkeyup The user has released a key.
onkeypress The user has pressed and released a key.
onclick The user has clicked the mouse button.
Keyboard and ondblclick The user has double-clicked the mouse button.
Mouse events onmousedown The user has begun pressing the mouse button.
onmouseup The user has released the mouse button.
onmousemove The user has moved the mouse pointer.
onmouseover The user has moved the mouse over an element.
onmouseout The user has moved the mouse out from an element.