Javascript: from basics to complicated solutions

1
Javascript from basics to complicated solutions

• Part II Client-side Javascript

Nikolay Samokhvalov ITpeople September 2005
2
Contents

• Introduction
• Client-side Javascript
• Tag ltscriptgt
• Events
• DOM Level 0
• AJAX
• Two web application models
• Interaction patterns
• Sample code
• Examples
• JSHttpRequest
• Conclusion further discussions
• References

3
1. Introduction
4
Javascript

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

5
2. Client-side Javascript
6
Tag ltscriptgt

• ltscriptgt/ ... /lt/scriptgt
• ltscript language"Javascript"gt/ ... /lt/scriptgt
• ltscript language"Javascript1.5"gt/ ...
  /lt/scriptgt
• ltscript type"text/javascript"gt/ ... /lt/scriptgt
• ltmeta http-equiv"Content-Script-Type"
  content"text/javascript"gt
• ltscript defergt/ ... /lt/scriptgt
• ltscript src"/common5.9.2.js"gtlt/scriptgt

7
Events

• ltinput type name"opts" onclick"alert(this.value)
  "gt
• 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

8
DOM Level 0
plugin
navigator Navigator
mimetype
frames Window
elements array of Button CheckBox FileUpload H
idden Password Radio Reset Select Submit Text Text
Area
location Location
forms Form
self, window, parent, top, Window
history History
anchors Anchor
screen Screen
links Link
document Document
images Image
applets applet objects
options Option
Select
embeds embedded objects
9
3. AJAX Asynchronous JavaScript and XML
10
Two web application models
11
Interactions patterns
12
Sample code

• ltscriptgt
• 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)
• lt/scriptgt
• ltinput type"button" value"Show me"
  onclick"doLoad()"gt

13
Examples

• Google Suggest http//www.google.com/webhp?comple
  te1hlen
• Google Maps http//maps.google.com
• Gmail http//gmail.com
• Amazons A9 SE http//a9.com
• http//www.flickr.com/
• Zimbra Collaboration Suite http//www.zimbra.com
  /

14
JSHttpRequest

• ltscript src"/load.php?codeokparam123"
  id"s1"gtlt/scriptgt
• ltbutton
• onclick"document.getElementById('s1').scr
  "/load.php?codeokparam2005
• gt ...

15
JSHttpRequest examples

• http//itpeople.ru
• http//forum.dklab.ru

16
4. Conclusion further discussions
17
Conclusion

• Javascript is quite powerful yet intricate
  language
• Javascript helps to improve web applications
  functionality
• AJAX/JSHttpRequest techniques makes web
  applications more powerful and attractive

18
What next?

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

19
JavaScript 1.6 (ECMA-357)

• E4X
• ltscript type"text/javascript e4x1"gt
• var xml ltrootgt
• ltchild1gtvalue1lt/child1gt
• ltchild2gtvalue2lt/child2gt
• lt/rootgt
• alert(xml.child1)
• xml.child2 'something else'
• alert(xml)
• lt/scriptgt
• Array extras
• indexOf(), lastIndexOf()
• every(), some()
• filter(), map()
• forEach()

20
JavaScript 1.6 (ECMA-357)

• Array and String generics

function isLetter(character) return
(character gt "a" character lt "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 example var num 15 alert(String.replac
e(num, /5/, '2'))
21
5. References

• David Flanagan. JavaScript The Definitive Guide.
  Fourth Edition. OReilly.
• ECMA home http//www.ecma-international.org
• Mozilla Developer Center http//developer.mozilla
  .org/en/docs/Main_Page
• http//www.devguru.com/Technologies/ecmascript/qui
  ckref/
• http//msdn.microsoft.com/
• http//www.quirksmode.org
• XUL Samples http//www.xulplanet.com/tutorials/xu
  ltu/advmenu.html
• DOM window Interface http//www.mozilla.org/docs/
  dom/domref/dom_window_ref.html1004028
• http//developer.apple.com/internet/webcontent/xml
  httpreq.html
• http//www.ajaxdeveloper.org
• http//dklab.ru/lib/Subsys_JsHttpRequest/
• Gmail Agent API http//johnvey.com/features/gmail
  api/
• JSDoc http//jsdoc.sourceforge.net/

22
Thanks!