Jscript Fundamentals

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

Netscape Navigator 2 (support for java applets and LiveScript renamed as JavaScript1.1)

Netscape developed a scripting language called LiveScriptSupported both client side and server side scripting

Microsoft- JScript IE 3

1997 ECMA (European Computer Manufacturers Association)Standardized ECMA script

W3C standardized DOM to access HTML and XMLJavaScript 1.2

Opera supporting JavaScript 1.1

Brief history of JavaScript

Response

Client Web Server

Request

HTML file

JAVA SCRIPT

Script executes locally and interacts with the browser

Programs executes on the server and sends the response

Servlet files

JSP files

HTML files

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 commentdocument.write(“Hello java script”)/* java script scriptmulti-line comment */</SCRIPT></BODY></HTML>

NOSCRIPT and hiding scriptsSome 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<HTML><HEAD><BODY> <SCRIPT LANGUAGE=“JavaScript”

SRC=“JSfile.js”></SCRIPT></BODY></HTML>

JSfile.js

document.write(“Hello”)

Scripts inside body and headInside 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”)</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 ared) Numeric – integer and floating point numbers (64 bit, IEE754

floating point)e) Stringsf) Boolean- true, falseg) Null, Undefined and NaN

<HTML><HEAD><SCRIPT LANGUAGE=“JavaScript” > $I=“hello”</SCRIPT></HEAD>

<BODY><SCRIPT LANGUAGE=“JavaScript”>document.write($I)</script></body>

OperatorsArithmetic: + - * / % += -= *= /= %=

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

Conversion: parseInt() and parseFloat()

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=15b=truefor(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 datajunk= new Array(3)

junk[0]=“Sunday” junk[1]=0 junk[2]=true• Array lengtha.length• Array size is incremented dynamicallya= new Array()a[4]=4a.length is 5• Initialized arrayweek=new Array(“sun”,”mon”,”tue”,”wed”,”thu”,”fri”,”sat”)document.write(week[0]) sundocument.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 language=“JavaScript”></script></head><body><script><!—if(isNumber(“123”)

document.write(“number”)else

document.write(“not a number”)--></script></body></html>

•Calling a functionfunction 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 variablesLocal 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.windowdocument link

history anchorlocation imageframes formbutton, 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=

<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>

Communicating with user

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()

}

<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>

open()

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()

}}

</script></head>

documentProperties: 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>

imagesProperties: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>

formProperties: 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>

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>

link, anchor and history

<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)

MathProperties: 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 objectvar 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

E=MC<SUP>2</SUP>“E=MC”+”2”.sup()sup()

h <SUB>2</SUB>o“h”+”2”.sub()+ “o”sub()

<strike>strike</strike>“strike”.strike()strike()

<small>Rights reserver</small>

“Rights reserved”.small()

small()

<a href=www.yahoo.com>

Yahoo</a>

Yahoo.link(www.yahoo.com)

link(url)

<I>Sky</I>“sky”.italics()italics()

<B>Hello</B>“Hello”.bold()bold()

<BLINK>Highlights</BLINK>“Highlights”.blink()blink()

<BIG>Welcome</BIG>“Welcome”.big()big()

<a name=“p2”>Part2</a>“Part2”.anchor(“p2”)anchor(aname)

HTMLExampleMethod

http://www.yahoo.com/

O“hello”.charAt(4)charAt(indexPos)

el“hello”.substring(1,3)substring(startpos,

endpos)

hi“Hi”.toLowerCase()toLowerCase()

1“hello.indexOf(“e”,0)indexOf(searchText,

startposition)

2“hi”.lengthlength

HI“hi”.toUpperCase()toUpperCase()

ResultsExamplesMethods

Jscript Fundamentals

Technology

Transcript of Jscript Fundamentals