Movatterモバイル変換

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> <!— 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 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”) </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 language=“JavaScript”>  </script></head><body> <script> <!— if(isNumber(“123”) document.write(“number”) else document.write(“not a number”) --></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 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> 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>

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

Movatterモバイル変換

Change Language

Java script

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Java script

More from Soham Sengupta

Recently uploaded

Java script