java script this is a first javascript example. this is a first javascript example
TRANSCRIPT
![Page 1: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/1.jpg)
Java Script<html>
<head><title>This is a first JavaScript example</title><script language="javascript">...</script></head>
<body>This is a first JavaScript example.</body>
</html>
![Page 2: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/2.jpg)
Hierarchical ObjectsWindowFrame
LocationHistory
Navigatordocument
imageformtext
XMLHttpRequest ??
![Page 3: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/3.jpg)
Hierarchy Objects
Object Properties Methods Event Handlers Window defaultStatus
framesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
onLoadonUnloadonBluronFocus
Frame defaultStatusframesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
none (The onLoad and onUnload event handlers belong to the Window object)
Location hashhosthostnamehrefpathnameporprotocolsearch
reloadreplace
none
![Page 4: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/4.jpg)
History lengthforwardgo
back none
Navigator appCodeNameappNameappVersionmimeTypespluginsuserAgent
javaEnabled none
document alinkColoranchorsappletsareabgColorcookiefgColorformsimageslastModifiedlinkColorlinkslocationreferrertitlevlinkColor
clearcloseopenwritewriteln
none (the onLoad and onUnload event handlers belong to the Window object.
![Page 5: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/5.jpg)
image bordercompleteheighthspacelowsrcnamesrcvspacewidth
none none
form actionelementsencodingFileUploadmethodnametarget
submitreset
onSubmitonReset
text defaultValuenametypevalue
focusblurselect
onBluronChargeonFocusonSelect
![Page 6: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/6.jpg)
Built-in Objects
ArrayData
String
![Page 7: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/7.jpg)
Built-in Objects
Object Properties Methods Event Handlers
Array length joinreversesort xx
none
Date none getDategetDaygetHoursgetMinutesgetMonthgetSecondsgetTimegetTimeZoneoffsetgetYearparseprototypesetDatesetHourssetMinutessetMonthsetSecondssetTimesetYeartoGMTStringtoLocaleStringUTC
none
![Page 8: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/8.jpg)
String lengthprototype
anchorbigblinkboldcharAtfixedfontColorfontSizeindexOfitalicslastIndexOflinksmallsplitstrikesubsubstringsuptoLowerCasetoUpperCase
Window
![Page 9: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/9.jpg)
XMLHttpRequest Object Properties for Mozilla, Firefox, Netscape, Chrome
Property Description
channel Contains the channel used to perform the request. Read-only.
readyState Contains the state of the request. Read-only.
responseText Contains the response body as a string. Read-only.
responseXML Contains the response body as XML. Read-only.
status Contains the HTTP status code returned by a request. Read-only.
statusText Contains the HTTP response status text. Read-only.
![Page 10: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/10.jpg)
XMLHttpRequest Object Methods for Mozilla, Firefox, Netscape, Chrome
MethodoverrideMimeType
Description
abort abort Aborts the HTTP request.
getAllResponseHeaders getAllResponseHeaders
Returns all the HTTP headers.
getResponseHeadergetResponseHeader
Returns the value of an HTTP header.
openRequestOpen / send / setRequestHeader
Native (nonscript) method to open a request.
OverrideMimeType Overrides the MIME type the server returns.
![Page 11: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/11.jpg)
Opening XMLRequest Object
• open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
• XMLHttpRequestObject.open(“GET”, datasource);
![Page 12: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/12.jpg)
A in ajax stands for asynchronous• handshaking
function getData(dataSource, divID){if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = callback()
}}
function callback(){...}
![Page 13: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/13.jpg)
Shortcut for callback()function getData(dataSource, divID)
{if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = function(){
.
.
.}
}}
![Page 14: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/14.jpg)
Ready state property
![Page 15: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/15.jpg)
status
![Page 16: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/16.jpg)
![Page 17: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/17.jpg)
ajax
![Page 18: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/18.jpg)
ajax
–Asynchronous JavaScript and XML–Umbrella term for technologies that often:
•Use client-side scripting for layout and formatting•Use less than full page reloads to change content•Use data formats other than HTML•Interact asynchronously with the server
–Not necessarily JavaScript or XML, but we’ll use the term for convenience
![Page 19: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/19.jpg)
MySpaceTraffic
Request:GET http://profile.myspace.com:80/index.cfm?fuseaction=user.viewprofile&friendid=32732620&MyToken=fcf392cd-2a35-4cc2-86fa-cb24b7a330dd HTTP/1.0
Response:
<!---*** WEBPROFILE045 *** ---><html><head><title>www.myspace.com/oskibear</title><meta name="keywords" content="friends networking sharing photos finding friends blogsjournals bloggingjournaling bands music rate picsjoin groups forums classifieds online social networking" /><meta name="description" content="MySpaceProfile -Oski, 64 years old, Male, Berkeley, CALIFORNIA, US, Grrrrrrah!" /><meta http-equiv="expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><link rel="STYLESHEET" type="text/css" href="http://x.myspace.com/js/myspace.css" /><script language="JavaScript">randomseed= Date.parse(newDate());</script><script language="JavaScript" type="text/javascript" src="http://x.myspace.com/js/myspaceJS011.js"></script><BASE HREF="http://www.myspace.com/" TARGET="_self"></BASE></head><body bgcolor="e5e5e5" alink="4e607b" link="4e607b" vlink="4e607b" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" style="visibility:visible; display:block">….…………
![Page 20: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/20.jpg)
Google Maps Traffic
Request:GET http://maps.google.com:80/maps?
spn=0.001247,0.002427&z=19&t=k&vp=37.871279,-122.251825&ev=ziHTTP/1.0
Response:GAddCopyright("k","483",37.4855,-122.6324,38.1363,
-122.2355,12,"");GAddCopyright("k","484",37.4825,-122.2761,38.1346,
-121.8590,12,"");
![Page 21: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/21.jpg)
![Page 22: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/22.jpg)
Ajax in 5 steps
![Page 23: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/23.jpg)
![Page 24: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/24.jpg)
![Page 25: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/25.jpg)
![Page 26: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/26.jpg)
![Page 27: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/27.jpg)
ajax History
•Before there was browser support for asynchronous calls:–There were hidden <IFrame>
•IFramestraditionally used to dynamically •IFrameset to 0px, invisible to the user•Used to GET/POST form fields to the server
•Example:<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="http://www.badguy.com/" frameBorder="0“ scrolling="no"><form action=‘evil.cgi' method='POST'><input type='text' name='field1' value='foo'><input type='text' name='field2' value='bar'> </form></iframe>
![Page 28: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/28.jpg)
Real ajax Started with…–XMLHttpRequestObject (often called XHR)•In Internet Explorer, XMLHttpobject, part of MSXML
–ActiveX object, vsnative object in Firefox–Will be implemented as a native object in IE 71
•Instantiation: if (window.XMLHttpRequest){// If IE7, Mozilla, Safari, etc: Use native objectvarxmlHttp= new XMLHttpRequest()}else {if (window.ActiveXObject){// ...otherwise, use the ActiveX control for IE5.x and IE6varxmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }}
![Page 29: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/29.jpg)
• XMLHttpRequest (XHR) is a DOM API that can be used inside a web browser scripting language, such as JavaScript, to send an HTTP or an HTTPS request directly to a web server and load the server response data directly back into the scripting language.
• Once the data is within the scripting language, it is available as both an XML document, if the response was valid XML markup, and as plain text.
![Page 30: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/30.jpg)
Example AJAX requestxmlHttp= new XMLHttpRequest();xmlHttp.open("GET", “http://www.example.com”);xmlHttp.onreadystatechange= updatePage;xmlHttp.send(null);
Example AJAX response handlingfunction updatePage() {
if (xmlHttp.readyState== 4) {if (request.status== 200) {varresponse = xmlHttp.responseText;
}}
}
![Page 31: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/31.jpg)
Downstream Options•The real beauty of XHR
–Arbitrary structure of content•Not restricted like HTML Forms
–Asynchronous Communication, including callbacks•XHR can handle many types of downstream (from
server) data–XML–Full JavaScript–JavaScript Arrays–JSON–Custom Serialization Frameworks
•Atlas•Google Web Toolkit
![Page 32: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/32.jpg)
![Page 33: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/33.jpg)
![Page 34: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/34.jpg)
![Page 35: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/35.jpg)
![Page 36: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/36.jpg)
![Page 37: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/37.jpg)
![Page 38: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/38.jpg)
![Page 39: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/39.jpg)
![Page 40: Java Script This is a first JavaScript example. This is a first JavaScript example](https://reader035.vdocument.in/reader035/viewer/2022062301/56649ea25503460f94ba581f/html5/thumbnails/40.jpg)
• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting withobjects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use