3.

Advanced JavaScript
What is Script?

In computer programming, a script is a program or sequence of instructions that is

interpreted or carried out by another program rather than by the
computer processor (as a compiled program is).

What is JavaScript?

JavaScript (js) is a light-weight object-oriented programming language which is

used by several websites for scripting the webpages. With the help of Scripting
Language develop dynamic website. JavaScript is interpreted language.

What is interpreted language?

An interpreted language is type of programming language that executes its

instruction directly and freely without compiling machine language instruction in
precious program.

 Feature of JavaScript:-

1] JavaScript is light weight scripting language because it does not support all
feature of object oriented programming language.

2] No need of special software to run javascript program.

3] JavaScript is object oriented Scripting Language and it support event based

programming facility.

4] JavaScript helps the browser to perform input validation without wasting

user time by web server access.

5] It can handle date and time effectively.

6] Software that can run on any hardware platform (Mac, PC) and software
platform (windows, Linux) is called platform independent software. Due to this
feature it is called universal scripting language.
  Types of Scripting Language :-

Client Side Scripting Server Side Scripting

1] The script reside on client 1] This script resides on web server.
computer(browser) that can run on To execute the script it must be
client this placed inside in HTML activated by client then it is executed
document on web server.
2] Client side scripting is used at 2] Server side script is used at the
frontend which user can see from the backend where the source code is not
browser. visible.
3] The client side scripting language 3] The Server side scripting language
involves language as HTML5, involves language as PHP,ASP.net
JavaScript.
4] Server Side Scripting is useful in 4] Client Side Scripting are generally
customizing webpage and implement used for validation purpose.
dynamic website.
5] Special Software(Web server) is 5] No special software require only
require to execute program browser is sufficient.

 JavaScript Comment :-

By adding comment user can add more information about any statement and it
also used to hide information from normal user.

There are two types of comments in JavaScript.

1. Single-line Comment(//)
2. Multi-line Comment(/* ..*/)

 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.
 Rule for Variables:-

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.

Eg. Var variable name;

 JavaScript 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.
1] Primitive data type:-
Data Type Description
String It holds sequence of character
Number It holds number only
Boolean It hold true and false value
Undefined It represent Undefined value
Null It represent null value

 Non-primitive (reference) data type :-

Data Type Description

Object It represent instance through we can
access member
Array Represent group of similar value
RegExp Represent regular Expression

Document.Write(“msg”) :-

By using this line user give message on webpage

Dialog Box in JavaScript :-
JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and
alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss
each dialog box one by one.

Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users. For
example, if one input field requires to enter some text but the user does not
provide any input, then as a part of validation, you can use an alert box to give a
warning message.Alert box gives only one button "OK" to select and proceed.
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>

Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It
displays a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return
true. If the user clicks on the Cancel button, then confirm() returns false. You can
use a confirmation dialog box as follows.
<html>
<head>
 <script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>

Prompt Dialog Box

This dialog box has two buttons: OK and Cancel. If the user clicks the OK
button, the window method prompt() will return the entered value from the text
box. If the user clicks the Cancel button, the window
method prompt() returns null.
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
 <form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>

Q. Write JS code to print addition of two no using prompt dialog box and using form

Using Prompt :-

<html>

<head>

<title>Addition of two no</title>

</head>

<body>

<script>

var a,b,c;

a=parseInt(prompt("Enter First No"));

b=parseInt(prompt("Enter Second No"));

c=a+b;

document.write("addition is:"+c);

</script>

</body>

</html>

Using form :-

<html>

<body>

<form name="f1">

Enter First Number

 <input type="text" name="t1"><br>

Enter Second Number

<input type="text" name="t2"><br>

<input type="button" value="addition" onclick="add()">

</form>

<script>

function add()

var a,b,c;

a=parseInt(f1.t1.value);

b=parseInt(f1.t2.value);

c=a+b;

alert("addition is:"+c);

</script>

</body>

</html>

Home Work:-

1] Write JS Code print code to display area (hint area=n*n) accept value from user.

2] Write JS code to calculate avg of three no.

3] Write JS code to swap two no.

 JavaScript Conditional Statement:-

1] If statement:-

If condition become true then that block of statement is execute.

If (expression)

//code to execute

2] If..else statement :-

If the condition become true then if block execute and if condition become false
then else block is execute.

if(expression)

else

3] if..else if statement :-

User want to check more than one condition then if..else if statement is used

If(expression)

{
 }

else if(expression)

else

 Switch Case Statement :-

JavaScript has a built-in multiway decision statement known as Switch. The switch
statement test the value of given expression with all case. There should not be
duplicity between cases. The value for the case must be similar data type as the
variable in switch. The default statement is not mandatory.

Syntax:-

switch(expression)

Case value1:

Statement block 1;

Break;

Case value 2:

Statement block 2;
 Break;

Default :

Statement block;

 Looping Statement:-

While creating programming logic. We need to execute some statements

repeatedly. Iteration refers to execution of statement or group of statement of code
for fixed period of time. The condition should be Boolean condition.

1] For... Loop:-

This loop executes statement as long as condition become true, control comes out
from the loop when condition becomes false. Benefit of for loop is that it combine
initialization, condition and increment and decrement in single statement.

Syntax:-

for (initialization; condition; iteration)

Statement block;

Initialization is assigning initial value to the variable, which execute only once then
condition is checked.

Loop will execute statements when condition become true, and when condition
becomes false then control is transferred out of loop.

Iteration means increment and decrement value of variable.

2] While…loop:-

This loop executes statement as long as condition is true. As long as condition

becomes false control comes out of loop.

Syntax:-

Initialization;

While (condition)

Statement block;

The statement within loop may be single line or block of statement. If the
statement within loop is single line then parenthesis is optional. Here loop is
executed repeatedly as long as condition is true. Note that if condition always true
then loop would execute infinitely so after some execution condition become false.

For loop :-

<html>

<head>

<title>Print 1 to 10</title>

</head>

<body>

<script>

var i;

for(i=1;i<=10;i++)

{
 document.write("print 1 to 10 no:"+i);

document.write("<br>");

</script>

</body>

</html>

While loop:-

<html>

<head>

<title>Print 1 to 10</title>

</head>

<body>

<script>

var i=1;

while(i<=10)

document.write("no is:"+i);

i++;

document.write("<br>");

</script>

</body>

</html>
Home Work:-

1] Write JS code to print sum of 50 natural no.

2] Write JS code to print all even no from 10 to 50.

 Break and continue statement:-

Break statement is used to jump out of loop. It is used to make early exit from
loop. When keyword break is used then control automatically passes to next
statement.

Sometime in looping it may be necessary to skip statement block and it pass to

control to beginning of iteration then we use continue statement in javascript.

 Object in Javascript :-

Javascript is an object based scripting language. Almost everything is an

object in javascript. A javascript is a properties and method. An object can group
together with function needed to manipulate it. Tangible things known as object.
Consider example as car object. It has properties like name, model and color and
its method like start, stop and break etc. all car have same method but perform
differently.

Object Properties Methods

Car.name=Ferrari Car.start()
Car.color=red Car.stop()
car
Car.model=F430 Car.drive()
Properties and methods of object are accessed with ‘.’ operator. Javascript support
2 types of object.

1] Built in Object - Math, string, Array and Date.

2] User defined object – new keyword used to create user defined object.
D=new Date ()

Here d is new instance created date object.

 DOM(Document Object Model):-

When HTML document is loaded into web browser it becomes document object
model. It defines logical structure of document. By using this way HTML
content is accessed and modified called document object model.

The w3c Document object model is platform and language interface that allow
program and script dynamically access and update content, structure and style
document.

1] Window Object:-

a] location object b] Document object c] Navigator d] History

b] 1] Form Object 2] Link Object 3] Image Object 4] Anchor Object

innnerHTML property:-

The innerHTML property is useful for getting html element and changing its
content. The innerHTML property can be used to change HTML element
include <html> and <body>.

<html>

<head>

<script type="text/javascript">

functionchangeText()

var style="<h2 style='color:green'>";

 var txt="Welcome to HTML5 and JavaScript";

varclosestyle="</h2>";

document.getElementById('para').innerHTML=style+text+closestyle;

function hello()

alert("hi");

</script></head>

<body style="background-color:cyan">

<h1 align="center">

<p id="para">Welcome to the site</p>

<input type="button" onclick="hello()" value="click this button

to change above text">

</h1>

</body></html>
 Window Object :-

Window object is topmost object in hierarchy. Window object is a parent object

it represent an open window in a browser. Window object represent open
window in browser.

Property Description
Name Set or return name of window
Location Return location object for window
Document Return document object for window
Status Set or return text in status bar in window
Closed Return Boolean value indicating whether window has been
closed or not
Method Description
alert() Display alert box containing msg with ok button
Confirm() Display alert box containing msg with ok and cancel
button
Prompt() It take input from textbox
Open() Open new window
Close() Close current window
Blur() Remove focus from current window
Focus() Set focus to current window
Print() Print content of current window
setTimeout() Calls function and evaluate expression after specified no of
miliseconds
<!DOCTYPE html>

<html>

<head>

<title>Window open and close</title>

<script>

functionmakeWindow()

varnewwin=window.open();

newwin.document.write("<h1> This is newwindow</h1>");

newwin.document.body.style.backgroundColor="skyblue";

</script>

</head>

<body>

<form>

<input type="button" value="create new window"

onclick="makeWindow()">

</form>

</body>

</html>
setTimeout.html

<!DOCTYPE html>

<html>

<head>

<title>setTimeout Function</title>

<script>

functionsamplefunction()

window.setTimeout(next(),4000);

function next()

alert("4 second have passed");

</script>

</head>

<body style="background-color:cyan">

<h1 align="center">

<input type="button" value="Timeout Functiononclick="samplefunction()">

</h1>
 </body>

</html>

 JavaScript Event :-

Event is action done by user or an application that occur on the webpage. In

previous year we studied keyboard event (onkeypress, onkeydown) and mouse
event (onclick, onMousemove) there are some event with form object.

Event Handler Description

onblur It losses focus on element
onfocus It occur when element get focus
onchange It occur when user change content of element
onselect It occur when user selects some text of element
onsubmit It occur when user click on submit button
onreset It occur when user
onload It occur when page has been loaded
onunload It occur when page has been unload

 JavaScript Built-in Object :-

JavaScript has several built in or core language object. These built in object are
available regardless of window content and operates independently of whatever
page browser loaded.

1] String Object: -

String is used to store zero or more character of text within single or double quote.
String is generally used to store and manipulate text.

Property Description
Length Return number of character in a string
Method Description
charAt() Return the character at specified
position
indexOf() Return the index of first occurrence
specified character in given string or -1
specify it never occur
lastindexOf() Return the index of last occurrence of
specified character in given string
Substr(14,7) It return 7 character from 14th character
Substring(14,7) Return all character from 7th to 14th
Trim() Trim() method remove white space from
string
toLowerCase() Convert string into lowercase
toUpperCase() Convert string into uppercase

 Number Object :-

It helps to work with number. Primitive value (like 34 or 3.14) cannot have
properties and method, but with JavaScript it is available with primitive value.

Property Description
MIN_VALUE Return the largest minimum value
MAX_VALUE Return the largest maximum value
NaN It represent not a number value
Method Description
isInteger() It return whether the given value is
integer
parseFloat() It convert the given string into floating
frame
parseInt() It convert the given string into integer
 number
isFixed() It return that string represent no with
exact digit after decimal point