1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07.

rfXcel ConfidentialCopyright 20071

Web TechnologyJavaScript

12/10/07


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


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>

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"></SCRIPT><BR><B>This is a line of code after the script</B></P></BODY></HTML>

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 –


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.


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.


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


JavaScript Objects Hierarchy

• Standard Objects

– Window• Location• History

• Frames • Navigator

– Plugin– Mime-type

– Document



• Standard Objects– Window– Document

• Anchor• Applet• Link and Area• Image• Form



• Standard Objects– Window– Document

• Form – Button– Checkbox– FileUpload– Hidden– Password– Radio– Reset– Select– Submit– Text– Textarea


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


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


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


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


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


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.


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.


AJAX

• Setting up the XMLHttpRequest.

var xmlHttp;

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlHttp=new XMLHttpRequest();

}


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)


AJAX

• Generate the XML response.

response.setContentType("text/xml");

response.getWriter().write("<valid>true</valid>");


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

} } }


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


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.

1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07.

Documents

Transcript of 1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07.