Java Script

What is JavaScript

JavaScript was designed to add interactivity to HTML pages

JavaScript is a scripting language (a scripting language is a lightweight programming language)

A JavaScript consists of lines of executable computer code

A JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

Everyone can use JavaScript without purchasing a license

How javascript helps?

Javascript gives designer a programming tool

It can put dynamic text into HTML page

Can respond to events – mouse over, click, page load etc

Can read, write and manipulate HTML elements

Can help validate use input

Can detect version of browser

First Javascript

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Script Tag Indicates browser that it’s script that needs to be executed Type attributes indicates what type of script is this? This is standard command to write stuff on webpage

Place for Javascript

Java script can put either in ‘head’ section of html page or in ‘body’ section of html page.

If put in body section – the script will be executed automatically when the page is loaded

If it is put in head section – then script has to be called explicitly.

By putting script in head you ensure that script is loaded first even before any part page uses it

Example

<html>

<head>

<script type=text/javascript>

</script>

</head>

<body>

</body>

</html>

<html> <head> </head> <body> <script type=text/javascript> </script> </body> </html> Javascript in Head Javascript in body

Javascript in separate file

Javascript can be present in separate file as well.

You only need to refer it in your html.

You would refer it in body if you want it to get executed on page load.

You would refer it in head if you want to execute it on an event.

Files containing javascript has .js extention

Example

<html>

<head>

<script src= myjscript.js >

</script>

</head>

<body>

</body>

</html>

<html> <head> </head> <body> <script src=myjscript.js > </script> </body> </html> Javascript in Head Javascript in body

Javascript Quick Stuff

Variable

Need not put data type for variables.

Variables are interpreted based on the values assigned.

var x = 10;

var city = “Bangalore”

Variables names are case sensitive

if(condition)

{

}

if(condition) { } else { }

String Operations

Var x = "It is lot of pressure"

Var y = "at Bredge"

Var z = x+y => "It is lot of pressure at Bredge"

Loops

For Loop:

for(x=0; x <= 10; x++)

{

}

While Loop: while(condition { } Do-while Loop: do { } while(condition) For-In for(variable in object) { }

For – In example

<html>

<body>

var xvar mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW "

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

</body>

</html>

Javascript popup boxes

With javascript we can create popup boxes

Three types of popup boxes

Alert Box

Confirm Box

Prompt Box

Example -AlertBox

<html>

<head>

function disp_alert()

{

alert("I am an alert box!!")

}

</script>

</head>

<body>

<input type="button" onclick="disp_alert()" value="Display alert box" />

</body>

</html>

Example Confirm Box

<html>

<head>

function disp_confirm()

{

var r=confirm("Press a button")

if (r==true)

{

document.write("You pressed OK!")

}

else

{

document.write("You pressed Cancel!")

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body>

</html>

Prompt Box

<html>

<head>

function disp_prompt()

{

var name=prompt("Please enter your name","Harry Potter")

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?")

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>

</html>

Functions in JavaScript

Functions are written in head section

Functions do not have return type

However function can return values

Functions can take of arguments

function functionname ( var1,var2,...,varX )

{

some code

}

Functions are called upon document events such as onclick, mouseover and so on.

Function Example

<html>

<head>

function product(a,b)

{

return a*b

}

</script>

</head>

<body>

document.write(product(4,3))

</script>

</body>

</html>

Javascript events

Every element of web page such as <body>,<table>,<form>,<input> and so on have events associated with them.

When these events occur, a javascript piece of code or javascript function can be invoked

Some of the important events are

Mouse click

Webpage loading or image loading

Mouse over

Submitting a page

Example - Events

<html>

<head>

function f1(msg)

{

alert(msg);

}

</script>

</head>

<body>

<b>This example also shows bit layouting. You lay out components using table with border=0</b>

<table>

<tr>

<td>Name</td> <td><input type='text' value="click me" onclick="f1('you clicked on Name')"></input></td>

</tr>

<tr>

<td>Age</td> <td><input type=text value="double click here" ondblclick="f1('you double clicked on Age')"> </input></td>

</tr>

<tr>

<td>Salary</td> <td><input type=text value="type somethig here" onchange="f1('you typed some data in Salary')"> </input></td>

</tr>

</table>

</body>

</html>

onerror event

Onerror event is fired when there is a script error

Since script are not compiled, it will difficult catch typo and other mistakes.

Handling onerror will help identify the error. However this event is fired when the erroneous script is executed

To handle this error we need provide a function which handles it.

Onerror event provides three information – error message, url of the page where error is caused, line number where error is present.

The handling function should take three parameters

Onerror Example

<html>

<head>

onerror=handleErr

var txt=""

function handleErr(msg,url,l)

{

txt="There was an error on this page. "

txt+="Error: " + msg + " "

txt+="URL: " + url + " "

txt+="Line: " + l + " "

txt+="Click OK to continue. "

alert(txt)

return true

}

function message()

{

alert("Welcome guest!")

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

Accessing Elements of Page

Most often javascript need to access your elemets

to validate information

to Modify an attribute of an element

to Dynamically put the values

to add additional elements

Element could be any html element such as <body>, <table>,<input>, <form> etc.

Accessing Elements of Page

All the elements in a html document are stores like tree with <html></html> being root node

Every element can be uniquely identified by giving unit id

<intpu type=text id= " nameField " >

All the attribute values can obtained using document object

var ele = document.getElementById( " nameField " )

Attribute values of element can be accessed using ‘element’ variable

ele.value()

Accessing Elements - Example

<html>

<head>

function infoRead()

{

ele1 = document.getElementById("name");

ele2 = document.getElementById("Age");

ele3 = document.getElementById("Salary");

alert("You have entered "+

"Name - "+ele1.value +

" Age - " + ele2.value +

" Salary - "+ele3.value

)

}

</script>

</head>

<body>

<b>This example also shows bit layouting. You lay out components using table with border=0</b>

<table>

<tr>

<td>Name</td> <td><input type='text' id="name"></input></td>

</tr>

<tr>

<td>Age</td> <td><input type=text id="Age"> </input></td>

</tr>

<tr>

<td>Salary</td> <td><input type=text id="Salary"> </input></td>

</tr>

</table>

<input type=submit onclick="infoRead()" value="Sumit"/>

</body>

</html>

Javascript Objects

javascript is a object oriented language

You can create your own objects

Every object has property and methods

javascript also provide predefined objects

String object

Date Object

Array Object

Math Object

Javascript DOM Objects

HTML DOM – HTML D ocument O bject M odel

It defines standard set of objects for HTML and standard way to access them

All HTML elements, their attributes and containing test can be manipulated using DOM

DOM object list

Java Script

0 comments

Notes on slide 1

2 Favorites

Java Script - Presentation Transcript

More by user

More info about this document

Categories

Tags

Java Script

0 comments

Notes on slide 1

2 Favorites

Java Script - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags