1 rfxcel confidential copyright 2007 web technology javascript 12/10/07
TRANSCRIPT
![Page 1: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/1.jpg)
rfXcel ConfidentialCopyright 20071
Web TechnologyJavaScript
12/10/07
![Page 2: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/2.jpg)
rfXcel ConfidentialCopyright 20072
JavaScript Overview
• A Scripting language for web• Written by Netscape in 1995• Netscape Navigator 2.0
– JavaScript 1.0• Object Based• Language – Not Compiled• Language – Case sensitive• Can be embedded with HTML tags or separately• JavaScript Interacts with Document Object Model of Browser• DOM Not Totally Standardized• JavaScript allows for interactivity
![Page 3: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/3.jpg)
rfXcel ConfidentialCopyright 20073
JavaScript and HTML
• Runs in Browser • Add to HTML with Script Tag
<HTML><BODY><SCRIPT language="JavaScript">
document.write("This text was written with JavaScript!");
</SCRIPT></BODY></HTML>
![Page 4: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/4.jpg)
rfXcel ConfidentialCopyright 20074
JavaScript and HTML
<HTML><HEAD><TITLE>My First Java Script</TITLE></HEAD><BODY><P><B>This is a line of code before the script</B><BR><SCRIPT language="JavaScript"><!--var rightNow = new Date();
document.write("This text was written with JavaScript! ");document.write("It is now!" + rightNow);//--></SCRIPT><BR><B>This is a line of code after the script</B></P></BODY></HTML>
![Page 5: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/5.jpg)
rfXcel ConfidentialCopyright 20075
JavaScript and HTML
• HTML Script Tag may call an external file<SCRIPT language=“javascript” src=“extfile.src”></SCRIPT>
• External files supported in Netscape and Microsoft Internet Explorer 4.0 and above
• Single lien comment – // document.write("This text was written with JavaScript!");
• Multi-line comment – <!--
document.write("This text was written with JavaScript!");document.write("This text was written with JavaScript!");
-->
![Page 6: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/6.jpg)
rfXcel ConfidentialCopyright 20076
JavaScript and HTML
document.write("This text was written with JavaScript!");
• document – javascript object• write – method contained in the object• (“This text….”) – string argument passed to method• Place javascript that outputs directly to the page in the BODY
of the HTML page• Place javascript that does not output to the page in the HEAD
section of the HTML page• document.name – named element in document• document.images – array of images• document.forms – array of forms• Ways to access window, cookies, etc.
![Page 7: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/7.jpg)
rfXcel ConfidentialCopyright 20077
JavaScript and HTML
• Where Do I Put Them– Scripts in the body section will execute while the page loads– Scripts in the head section will be executed when called– You can place an unlimited number of scripts in your document,
so you can have scripts in both the body and the head section.
![Page 8: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/8.jpg)
rfXcel ConfidentialCopyright 20078
JavaScript Objects Reference Website
Window Screen Object Layer Form Button
Textarea Reset Number Image FileUpload Boolean
Text RegExp Navigator History Event Array
Submit Radio Math Hidden DocumentArea
String Password Location Function Date Applet
Screen Option Link Frame Checkbox Anchor
![Page 9: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/9.jpg)
rfXcel ConfidentialCopyright 20079
JavaScript Objects Hierarchy
• Standard Objects
– Window• Location• History
• Frames • Navigator
– Plugin– Mime-type
– Document
![Page 10: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/10.jpg)
rfXcel ConfidentialCopyright 200710
JavaScript Objects Hierarchy
• Standard Objects– Window– Document
• Anchor• Applet• Link and Area• Image• Form
![Page 11: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/11.jpg)
rfXcel ConfidentialCopyright 200711
JavaScript Objects Hierarchy
• Standard Objects– Window– Document
• Form – Button– Checkbox– FileUpload– Hidden– Password– Radio– Reset– Select– Submit– Text– Textarea
![Page 12: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/12.jpg)
rfXcel ConfidentialCopyright 200712
JavaScript Methods
• Methods are functions and procedures used to perform an operation on an object, variable, or constant. With the exception of built-in functions, methods must be used with an object:
object.method()
Method Reference
http://www.devguru.com/Technologies/ecmascript/quickref/js_methods.html
![Page 13: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/13.jpg)
rfXcel ConfidentialCopyright 200713
JavaScript Properties
• A JavaScript object has properties associated with it. You access the properties of an object with a simple notation:
objectName.propertyName Different Objects have a different set of
properties
Property Reference
![Page 14: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/14.jpg)
rfXcel ConfidentialCopyright 200714
JavaScript Events
• JavaScript applications are typically event-driven. Events are actions that occur, usually as a result of something the user does. For example, a button click is an event, as is giving focus to a form element. You can define Event handlers, scripts that are automatically executed when an event occurs
W3Schools ReferenceDevGuru Reference
![Page 15: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/15.jpg)
rfXcel ConfidentialCopyright 200715
JavaScript Events
• Events apply to HTML tags as follows:
– Focus, Blur, Change events: text fields, textareas, and selections
– Click events: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
– Select events: text fields, textareas
– MouseOver event: links
![Page 16: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/16.jpg)
rfXcel ConfidentialCopyright 200716
JavaScript Events
Event Occurs when... Event Handler
blur User removes input focus from form element onBlur
click User clicks on form element or link onClick
change User changes value of text, textarea, or select element onChange
focus User gives form element input focus onFocus
load User loads the page in the Navigator onLoad
mouseover User moves mouse pointer over a link or anchor onMouseOver
select User selects form element's input field onSelect
submit User submits a form onSubmit
unload User exits the page onUnload
![Page 17: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/17.jpg)
rfXcel ConfidentialCopyright 200717
AJAX
– Asynchronous Javascript And Xml.
– The JavaScript communicates with the server using
XMLHttpRequest, receives a response in the form of XML from
the server side component, which is used by the JavaScript to
manipulate the HTML to present data to the user.
![Page 18: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/18.jpg)
rfXcel ConfidentialCopyright 200718
AJAX
• Four Steps to implement AJAX
– Setting up the XMLHttpRequest.
– Calling the server-side component.
– Generate the XML response.
– Registering and implementing call-back handler and at the
server side.
![Page 19: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/19.jpg)
rfXcel ConfidentialCopyright 200719
AJAX
• Setting up the XMLHttpRequest.
var xmlHttp;
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
![Page 20: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/20.jpg)
rfXcel ConfidentialCopyright 200720
AJAX
• Calling the server-side component
i. setRequestHeader
xmlHttp.setRequestHeader("Content-Type", "application/x-
www-form-urlencoded; charset=UTF-8");
ii. open
xmlHttp.open("GET",”http://localhost:81/SCM/register?
user=”+user, true);
iii.send
var params=”user=”+user+”&pass=”+pass;
xmlHttp.send(params)
![Page 21: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/21.jpg)
rfXcel ConfidentialCopyright 200721
AJAX
• Generate the XML response.
response.setContentType("text/xml");
response.getWriter().write("<valid>true</valid>");
![Page 22: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/22.jpg)
rfXcel ConfidentialCopyright 200722
AJAX
• Registering and implementing call-back handler and at the server
side.
xmlHttp.onreadystatechange=handleStateChange;
function handleStateChange(){
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) { document.getElementById("results").innerHTML=xmlHttp.responseText;
} else { alert("Error "+ xmlHttp.status +":"+xmlHttp.statusText);
} } }
![Page 23: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/23.jpg)
rfXcel ConfidentialCopyright 200723
AJAX
• Status of the Request.
– 0: The request is uninitialized (before you've called open()).
– 1: The request is set up, but not sent (before you've called
send()).
– 2: The request was sent and is in process (you can usually get
content headers from the response at this point).
![Page 24: 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07](https://reader030.vdocument.in/reader030/viewer/2022020320/56649e725503460f94b70cb0/html5/thumbnails/24.jpg)
rfXcel ConfidentialCopyright 200724
AJAX
• Status of the Request.
– 3: The request is in process; often some partial data is
available from the response, but the server isn't finished with
its response.
– 4: The response is complete; you can get the server's
response and use it.