Javascript: from basics to complicated solutions

Part II: Client-side Javascript

Nikolay SamokhvalovITpeople

September 2005

Contents1. Introduction2. Client-side Javascript

1. Tag <script>2. Events3. DOM Level 0

3. AJAX1. Two web application models2. Interaction patterns3. Sample code4. Examples5. JSHttpRequest

4. Conclusion; further discussions5. References

1. Introduction

Javascript

C-like; scripting language; dynamically typed; interpreter ECMAscript family (ECMA-262, http://www.ecma-international.org) NOT Java Not simple No real objects (‘objects’ in JavaScript are hashes)

2. Client-side Javascript

Tag <script>

<script>/* ... */</script> <script language="Javascript">/* ... */</script> <script language="Javascript1.5">/* ... */</script> <script type="text/javascript">/* ... */</script> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script defer>/* ... */</script> <script src="/common5.9.2.js"></script>

Events

<input type name="opts" onclick="alert(this.value)">

onClick (Button, Document, Checkbox, Link, Radio, Reset, Submit)

onMouseDown, onMouseUp (Button, Document, Link) onMouseOver, onMouseOut (Layer, Link) onChange (FileUpload, Select, Text, TextArea) onSubmit, onReset (Form) onLoad, onUnLoad (Image, Layer, Window) onAbort (Image) onBlur (Button, Checkbox, FileUpload, Layer, Password, Radio,

Reset, Select, Submit, Text, TextArea, Window)… find more at

http://www.devguru.com/Technologies/ecmascript/quickref/js_eventhandler.html

DOM Level 0

self, window, parent, top, …

Window

navigatorNavigator

frames[]Window

locationLocation

plugin

mimetype

historyHistory

documentDocument

screenScreen

forms[]Form

anchors[]Anchor

links[]Link

applets[]applet objects

images[]Image

embeds[]embedded objects

elements[]array of:Button

CheckBoxFileUpload

HiddenPassword

RadioReset

SelectSubmit

TextTextArea

options[]Option

Select

3. AJAX: Asynchronous JavaScript and XML

Two web application models

Interactions patterns

Sample code

<script>

function doLoad()

{

var req = window.XMLHttpRequest ? new XMLHttpRequest() :

new ActiveXObject("Microsoft.XMLHTTP");

req.onreadystatechange = function() {

if (req.readyState == 4) {

alert('Loaded:\n'+req.responseText);

}

}

req.open("GET", document.location, true); req.send(null);

}

</script>

<input type="button" value="Show me" onclick="doLoad()">

Examples

Google Suggest: http://www.google.com/webhp?complete=1&hl=en Google Maps: http://maps.google.com Gmail: http://gmail.com Amazon’s A9 SE: http://a9.com http://www.flickr.com/ Zimbra™ Collaboration Suite: http://www.zimbra.com/

JSHttpRequest

<script src="/load.php?code=ok&param=123" id="s1"></script>

<button

onclick="document.getElementById('s1').scr = "/load.php?code=ok&param=2005“

> ...

JSHttpRequest examples

http://itpeople.ru http://forum.dklab.ru

4. Conclusion; further discussions

Conclusion

Javascript is quite powerful yet intricate language Javascript helps to improve web application’s

functionality AJAX/JSHttpRequest techniques makes web

applications more powerful and attractive

What next?

Knowledge of XML and DOM AJAX and HTML versions Javascript library. UML. JSDoc. Firefox browser: XUL technology ECMA-357?

JavaScript 1.6 (ECMA-357) E4X:

<script type="text/javascript; e4x=1">var xml = <root> <child1>value1</child1> <child2>value2</child2> </root>;alert(xml.child1);xml.child2 = 'something else';alert(xml);</script>

Array extras indexOf(), lastIndexOf() every(), some() filter(), map() forEach()

JavaScript 1.6 (ECMA-357)

Array and String genericsfunction isLetter(character) { return (character >= "a" && character <= "z");}

if (Array.prototype.every.call(str, isLetter)) alert("The string '" + str + "' contains only letters!")

// using Generics:if (Array.every(str, isLetter)) {

alert("The string '" + str + "' contains only letters!"); }

// One more examplevar num = 15;alert(String.replace(num, /5/, '2'));

5. References David Flanagan. JavaScript: The Definitive Guide. Fourth Edition. O’Reilly. ECMA home: http://www.ecma-international.org Mozilla Developer Center: http://developer.mozilla.org/en/docs/Main_Page http://www.devguru.com/Technologies/ecmascript/quickref/ http://msdn.microsoft.com/ http://www.quirksmode.org XUL Samples: http://www.xulplanet.com/tutorials/xultu/advmenu.html DOM window Interface: http://www.mozilla.org/docs/dom/domref

/dom_window_ref.html#1004028 http://developer.apple.com/internet/webcontent/xmlhttpreq.html http://www.ajaxdeveloper.org http://dklab.ru/lib/Subsys_JsHttpRequest/ Gmail Agent API: http://johnvey.com/features/gmailapi/ JSDoc: http://jsdoc.sourceforge.net/

Thanks!