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)
Opera
Standardized ECMA script
supporting
JavaScript 1.1
W3C standardized DOM to access HTML and XML

JavaScript 1.2
Servlet files
JSP files
HTML file HTML files

JAVA
SCRIPT
Request
Response
Client Web Server
Script Programs
executes executes on the
locally and server and sends
interacts with 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>
<!—
document.write(“Hello java script”)
-->
</SCRIPT>
<NOSCRIPT>Java script is not supported</NOSCRIPT>
External Script
JSfile.js
<HTML>
<HEAD> document.write(“Hello”)
<BODY>
<SCRIPT LANGUAGE=“JavaScript”
SRC=“JSfile.js”>
</SCRIPT>
</BODY>
</HTML>
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>
document.write(“Hello java script”) Incorrect
</SCRIPT>
</HEAD>
<BODY></BODY>
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
d) Numeric – integer and floating point numbers (64 bit, IEE754
floating point)
e) Strings
f) Boolean- true, false
g) 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
• Creation
Function
• Function with return values
<html> <html><head>
<head> <script language=“JavaScript”>
<script language=“JavaScript”>  return false
</script> }
</head> return true }
<body> -->
<script> </script></head><body>
<!— <script>
display(“hello”) <!—
--> if(isNumber(“123”)
document.write(“number”)
</script>
else
</body>
document.write(“not a number”)
</html>
--></script></body></html>
•Calling a function
function display(x){
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 language=“JavaScript”>
</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
<html><head>
with user
<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>
function display(x){
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()
}}
<body>
<form>
<input type="button" value="Left" onClick="display('left')">
<input type="button" value="Right" onClick="display('right')">
<input type="button" value="Top" onClick="display('top')">
<input type="button" value="Bottom" onClick="display('bottom')">
<input type="button" value="self" onClick="display('self')">
<input type="button" value="back" onClick="display('xx')">
</form>
</body>
</html>
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("text\html")
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>
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>

</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”)
}
<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.
var dt= new Date();
Date object
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( <a href=www.yahoo.com>
www.yahoo.com) Yahoo</a>
small() “Rights <small>Rights
reserved”.small() 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, “hello”.substring(1,3) el
endpos)
charAt(indexPos) “hello”.charAt(4) O

Java Script

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Java Script

Загружено:

Авторское право:

Доступные форматы

JavaScript language

1997 ECMA (European

W3C standardized DOM to access HTML and XML

HTML file HTML files

Client Web Server

Opening a new page on top window

Example 1:bgColor and fgColor

Вам также может понравиться