Java script

JavaScript language
fundamentals
Learning Objectives
Brief history of JavaScript
Uses
Language features
Inclusion of script in HTML
<noscript> and hiding scripts
Scripts inside <body> and <head>
External scripts

Brief history of JavaScript
Netscape developed a scripting language called LiveScript
Supported both client side and server side scripting
Netscape Navigator 2
(support for java applets and LiveScript
renamed as JavaScript1.1)
Microsoft- JScript IE 3
1997 ECMA (European
Computer Manufacturers
Association)
Standardized ECMA script
Opera
supporting
JavaScript 1.1
W3C standardized DOM to access HTML and XML
JavaScript 1.2

Response
HTML file
JAVA
SCRIPT
Request
Servlet files
JSP files
HTML files
Client Web Server
Script
executes
locally and
interacts with
the browser
Programs
executes on the
server and sends
the response

Uses
• To create more interactive pages- client side validations etc.
• To generate html dynamically.
• Event handling
• To enhance browser capabilities by giving it a better look – printing
on status bar etc.
• Interaction with embedded components like applets and active x
controls.
Language Features
• Object based language:no object inheritance and subclassing. Object
-based because it depends on built-in objects to function.
• Semicolon, as separator for multiple statements in the same line.
• Syntax similar to c++ and java
• Case sensitive
• Loosely typed
• Platform independent
• Interpreted

Scripts in HTML
<HTML><HEAD><TITLE>Hello</TITLE></HEAD>
<BODY>
First java script code<br>
<SCRIPT>
//Java script single line comment
document.write(“Hello java script”)
/* java script script
multi-line comment */
</SCRIPT></BODY></HTML>
NOSCRIPT and hiding scripts
Some browser don’t support javascript. They will display the javascript on the
web page since they cannot interpret. To avoid that the script need to be
commented. Also for such browsers <NOSCRIPT> tag may be used which
can display alternative text for scripts.
<SCRIPT>
<!—
-->
</SCRIPT>
<NOSCRIPT>Java script is not supported</NOSCRIPT>

External Script
<HTML>
<HEAD>
<BODY>
<SCRIPT LANGUAGE=“JavaScript”
SRC=“JSfile.js”>
</SCRIPT>
</BODY>
</HTML>
JSfile.js
document.write(“Hello”)
Scripts inside body and head
Inside head only declarations should be done. No write
statements must appear inside head tag.
<HTML><HEAD><TITLE>Hello</TITLE>
<SCRIPT>
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Incorrect

Nuts and Bolts
Learning Objectives
Variables and datatypes
Conversion
Operators
Control statements
Arrays
Functions

Variables and Datatypes
• Variable names must begin with a letter, under-score or $.,
subsequent characters can be letter or number.
• Variables need not be declared in JavaScript. They just need to
be assigned with proper data. They are called data stores.
• Data types supported by Java Script are
a) Numeric – integer and floating point numbers (64 bit, IEE754
floating point)
b) Strings
c) Boolean- true, false
d) Null, Undefined and NaN
<HTML><HEAD><SCRIPT LANGUAGE=“JavaScript” >
$I=“hello”
</SCRIPT></HEAD>
<BODY><SCRIPT LANGUAGE=“JavaScript”>
document.write($I)
</script>
</body>

Conversion: parseInt() and parseFloat()
Operators
Arithmetic: + - * / % += -= *= /= %=
Logical: & | ! && ||
Relational: > >= < <= == !=
String concatenation: +
Bit wise: >> << >>> >>= <<= >>>=
Mixing up datatypes:
S=“abc”
I=123
document.write(S+I)  abc123
S=“abc”
B=true
document.write(S+B)  abctrue
B=true
I=123
document.write(B+1)  124

Control statements
• Same as in c++ or java
• if else
• for
• while
• do .. while
• switch
<HTML><HEAD><SCRIPT LANGUAGE=“JavaScript” >
</SCRIPT></HEAD>
<BODY><SCRIPT LANGUAGE=“JavaScript”>
i=15
b=true
for(j=2;j<=i/2;j++){
if(i%j==0){
b=false;
break;}
}
if(b) document.write(i + “ is a prime number”)
else document.write(i + “ is not a prime number”)</script>
</body></html>

Arrays • Declaration: are objects in JavaScript
a= new Array(3)
a[0]=1 a[1]=2 a[2]=3
• A single array can hold any kind of data
junk= new Array(3)
junk[0]=“Sunday” junk[1]=0 junk[2]=true
• Array length
a.length
• Array size is incremented dynamically
a= new Array()
a[4]=4
a.length is 5
• Initialized array
week=new Array(“sun”,”mon”,”tue”,”wed”,”thu”,”fri”,”sat”)
document.write(week[0]) sun
document.write(week) sun, mon, tue, wed …
• Array of array: matrix= new Array(new Array(1,2,3), new Array(4,5,6)
a[0][1] 2

Function • Creation
<html>
<head>
<script language=“JavaScript”>

</script>
</head>
<body>
<script>
<!—
display(“hello”)
-->
</script>
</body>
</html>
• Function with return values
<html><head>

</script></head><body>
<script>
<!—
if(isNumber(“123”)
document.write(“number”)
else
document.write(“not a number”)
--></script></body></html>

•Calling a function
if(x==null)
x=“Greetings”
document.write(x) }
Can be called as : display() or display(“hello”)
No overloading possible. If overloaded functions are provided, only the last
function is considered
•Function arguments: arguments array can be used to collect the arguments
of a function.
</script>

•Local and Global variables
Local variables are created using var
</script>
…<
script>
<!—
document.write(total) // ok doesn't display if local variable
-->
</script>

JavaScript Object Model,
window object
Learning Objectives
Object Model
window object
properties
methods
events
Example communicating with the user
Example displaying status bar messages on window events
Example working with timer

JavaScript Object Model
• Also called DOM (document object model) or web
browser object model.
• JavaScript interacts with the web browser using the
objects defined in the Object model.
windowdocument  link
history anchor
location image
frames formbutton, text,
password,radio,
checkbox, select
submit, reset, hidden
Array, String, Date, Math

window object
•window is the default object that is available to the JavaScript.
•document.write  document is an object inside window and instead
of document.write we can also write window.document.write implying
write on current window’s document.
•Properties:
name, self, top, parent, opener, defaultStatus, status, closed, length
Methods: alert(displayString), String prompt(question,defaultanswer),
boolean confirm(question), Timer setTimeOut(expression, millsecs),
clearTimeOut(timerobj), blur(), focus(), open(url,name,[options]),
close()
Events: onLoad, onUnload, onFocus, onBlur, OnError
[options]: menubar=,toolbar,status, width=, height=

Communicating with user
<html><head>
<script>
function communicate(){
alert(“Hello”)
s=prompt(“What is your name”, “xyz”)
b=confirm(“Do you want to see your name displayed in colors”)
a=new Array(“RED”,”GREEN”,”BLUE”,”YELLOW”, “BLACK”,”PURPLE)
while(b){
document.write(“<font color=“+a[i]+”>”+s+”</font>”)
if(i++>a.length)i=0
b=confirm(“Do you want to continue”)}}
</script>
</head><body onUnload=“alert(‘Bye!’)”>
<script> communicate()</script>
</body></html>

status bar and window events
<html><head>
<script>
function setStatus(x){
status=x
}
</script>
</head>
<body onLoad=“defaultStatus=‘welcome’”
onBlur=“setStatus(‘OUT’) onFocus=“setStatus(“ON”)>
Look at the status bar
</body>
</html>

Timer
<html><head>
<script>
a=new Array(“Welcome”,”to”,”jis”)
i=0
function setTimer(){
setTimeout(“display()”,1000);
}
function display(){
status=a[i]
i=i++%3
setTimer()
}

open()
<html>
<head>
<title>win4</title>
</head>
<body onLoad="open('win2.html','x' ,'menubar=0')">
1. HTTP is a ______________ protocol<br>
a) application layer<br>
b) session layer<br>
c) transport layer<br>
d) network layer
</body>
</html>

location, frames, history,
Opening a new page on top window

location
<html><head>
</head>
<body>
<form>
<input type=button onCLick=“location.href=‘x.html’”>
</form>
</body>
</html>
Properties:
href, port,path, pathname

<html><head>
<title>Shop with us</title>
<script>
switch(x){
case 'left':
parent.b.l.location.href="img.jpg"
break
case 'right':
parent.b.frames[1].location.href="img.jpg"
break
case 'top':
top.location.href="img.jpg"
break
case 'bottom' :
parent.b.location.href="img.jpg"
break
case 'self' :
location.href="img.jpg"
break
default:
location.href=history.back()
}}
</script></head>

document
Properties: images[], forms[], links[], anchors[],bgColor, fgColor,
title, linkColor, alinkColor, vlinkColor
Methods: open([mimetype]), write(expr1), close()
Example 1:bgColor and fgColor
<body onFocus=“bgColor=‘white’;fgColor=‘black’”
onBlur=“bgColor=‘black’;fgColor=‘black’”>
Example 2:Generating a document
<html><head><script>
function generate(){
win=open("","gen")
win.document.open("texthtml")
win.document.write("<html><body onLoad=alert('ok')><U>Welcome</U>")
win.document.write("</body></html>")
win.document.close() }
</script>
<body><form><input type=‘button’ onClick=‘generate()’></form></body>
</html>

images
Properties:border, height, width, src, name, complete
Creating new Image object:
im=new Image()
im=new Image(40,50)
Events:
onLoad, onError, onAbort, onMouseOver, onMouseOut, onDblClick
Example 1:
<html><head>
<script>
i=0
imgs=new
Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg")
function change(){
document.images[0].src=imgs[i++ % imgs.length]}
</script></head>
<body><img src="image5.jpg" onMouseOver="change()">
</body>
</html>

On the internet it takes time to download the image. So to check if the
image has been downloaded and do the required we need image as object.
<script>
i=0
imgs=new Array(5)
for(i=0;i<5;i++){
imgs[i]=new Image()
imgs[i].src="image"+ (i+1)+".jpg“ }
i=0
function set(){ setTimeout('change()',1000) }
function change(){
if(imgs[i].complete){
document.images[0].src=imgs[i++ % imgs.length].src
set()}}
</script>
</head>
<body><img src="image5.jpg">
<script>set()</script></body></html>

form
Properties: action, method, name, elements[], target
Events: onSubmit, onReset
Form elements:
Events:All form elements: onBlur, onFocus
Select,text, textarea: onChange
Text, texrarea: onSelect
Button,submit,reset,radio,checkbox: onClick
Button: onMouseDown, onMouseUp,
TextArea: onKeyDown, onKeyUp, onKeyPress
Properties:
All : name, type, value (except select)
radio, checkbox: checked, defaultChecked
select: length, options[], selectedIndex
text, password, textarea:defaultValue
Methods:
All form elements: focus(), blur()
button,submit, reset: click()

Example 1: Working with text, radio and checkbox
<html><head><title>Validate</title><script>
<!--
function check(){
with(document.forms[0]){
if ((name.value=="") ){
alert("Please ensure that all fields are filled up")
return false }
if(like[0].checked)
s= "Thankyou, "+name.value +"."
else
s="Sorry !"
s=s+" As per your suggestion we shall look into areas:(";
for(i=0;i<better.length;i++)
if (better[i].checked)
s=s+ better[i].value+","
s=s+" and more ) for further improvements " }
alert(s)
return true}

//-->
</script>
</head><body>
<form action="Frame.html" onSubmit="return check()">
Name: <input type=text name=name><br><br>
Do you like our site
<input type=radio name="like" checked>Yes
<input type=radio name="like" >No<br><br>
Tell us how we can make this site better for you:<br>
<input type=checkbox name="better" value="Change bgcolor">Change the bg
color<br>
<input type=checkbox name="better" value="Change fgcolor">Change the fg
color<br>
<input type=checkbox name="better" value="Change layout">Change the
layout<br>
<input type=checkbox name="better" value="More services">Include more
services<br><br>
<input type=submit></form>
</body>
</html>

Example 2: Working with select
<html><head><script>

</script></head>
<body>
<form name=f1>
Which of the following is not true about JavaScript?
<select name="choose" onChange="check()">

<option>-------Select the best answer--------</option>
<option>JavaScript is object-oriented language</option>
<option>JavaScript is loosely typed language</option>
<option>JavaScript is used for client side validations</option>
<option>JavaScript is platform independent</option>
</select>
</form>
</body>
</html>

link, anchor and history
links, anchors: array
properties: href, hostname, pathname, port, target, protocol
Events: onClick, onDblClick, onKeyDown, onKeyUp, onKeyPress,
onMouseDown, onMouseUp, onMouseOver, onMouseOut
Example: Game
<html><head>
<script>
arr=new Array(‘one.hif’,’two.gif’)
i=0
im=“”
function f(x){
r=Math.floor(Math.random()*2)
document.images[x].src=arr[r]
if(i==0) im=arr[r]
if(i++>0 && im==arr[r])
alert(“You have won in “+ i + “ attempts”)
}
</script>

<body>
<table><tr>
<td><a href=“#” onClick=f(1)><img src=“blank.gif”></a></td>
<td><a href=“#” onClick=f(2)><img src=“blank.gif”></a></td></tr>
<td><a href=“#” onClick=f(3)><img src=“blank.gif”></a></td>
<td><a href=“#” onClick=f(4)><img src=“blank.gif”></a></td></tr>
</table>
</body>
</html>
History
Property: length
Methods:
back()
forward()
go(x)

Math
Properties: PI, E
Methods: sin(x), cos(x), tan(x), asin(x), acos(x), atan(x),
round(x), floor(x), ceil(x), max(x,y), min(x,y), sqrt(x), pow(x,y),
random(), log(x)
Rounding:
with(Math){
X=floor(3.5)  3
Y=ceil(3.5)4
Z=round(3.5) 4
}
r=Math.floor(Math.random()*2)
r between 0 and 1.

Date object var dt= new Date();
Creates a new date object which contains system’s current date and
time.
Methods:
getDate() getMonth() getYear()
getHours() getMinutes() getSeconds()
setDate(value) setMonth(value)
setYear(value) setHours(value)
setMinutes(value) setSeconds(value)
toGMTString() toLocalString()
Example 1:
<html><head><title>time</title><script>
<!--
function setTime()
{
dt= new Date();
str=dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
document.forms[0].time.value=str;
timer=setTimeout("setTime()",1000);
}
</script>

</head>
<body><form>
<input type=text name="time" readonly size=6>
</form>
<script>setTime()</script>
</body></html>
Example 2:
Difference between two dates:
<script>
Function diff(){
dt1=new Date();
dt2=new Date(2005,8,5)
millsec=1000*60*60*24
Days=Math.round((dt1-dt2)/millsec)
alert(“no of days “+ days)
}

String object
Method Example HTML
anchor(aname) “Part2”.anchor(“p2”) <a name=“p2”>Part2</a>
big() “Welcome”.big() <BIG>Welcome</BIG>
blink() “Highlights”.blink() <BLINK>Highlights</BLINK>
bold() “Hello”.bold() <B>Hello</B>
italics() “sky”.italics() <I>Sky</I>
link(url) Yahoo.link(
www.yahoo.com)
<a href=www.yahoo.com>
Yahoo</a>
small() “Rights
reserved”.small()
<small>Rights
reserver</small>
strike() “strike”.strike() <strike>strike</strike>
sub() “h”+”2”.sub()+ “o” h <SUB>2</SUB>o
sup() “E=MC”+”2”.sup() E=MC<SUP>2</SUP>

Methods Examples Results
toLowerCase() “Hi”.toLowerCase() hi
toUpperCase() “hi”.toUpperCase() HI
length “hi”.length 2
indexOf(searchText,
“hello.indexOf(“e”,0) 1
startposition)
substring(startpos,
endpos)
“hello”.substring(1,3) el
charAt(indexPos) “hello”.charAt(4) O

Java script

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java script (20)

More from Soham Sengupta (20)

Recently uploaded (20)

Java script