JavaScript JavaScript Computer Science E-75 <script type="text/javascript"> Building Dynamic, Scalable Websites Core JavaScript 1.5 Reference // <![CDATA[ http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference Harvard Extension School A re-introduction to JavaScript . http://www.cs75.net/ http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript // ]]> JavaScript Reference </script> http://www.w3schools.com/jsref/ Lecture 7: JavaScript JavaScript Tutorial http://www.w3schools.com/js/ David J. Malan [email protected] 0 1 2 JavaScript JavaScript noscript <script language="Javascript1.5"> <script src="file.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ // <![CDATA[ . document.write("hello, world"); // ]]> // ]]> </script> </script> <noscript> goodbye, world </noscript> 3 4 5 Statements Arrays Arrays break var a = new Array(); var a = new Array(); const continue var a = []; var a = []; do ... while for for ... in a[0] = "foo"; a[a.length] = "foo"; for each ... in function a[1] = "bar"; a[a.length] = "bar"; if ... else return a[2] = "baz"; a[a.length] = "baz"; switch throw try ... catch var while with ... http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference#Statements 6 7 8 focus() Validation Regular Expressions <script type="text/javascript"> // <![CDATA[ RegEx // put cursor in username field if empty http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:RegExp if (document.forms.login.username.value == "") { String document.forms.login.username.focus(); document.forms.login.username.value = document.forms.login.username.value; http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:String } // else put cursor in password field else { http://www.w3schools.com/jsref/jsref_obj_regexp.asp document.forms.login.password.focus(); document.forms.login.password.value = document.forms.login.password.value; } // ]]> 9 10 11 Global Objects Objects Event Handlers Array var obj = new Object(); onblur onchange Boolean var obj = {}; onclick Date onfocus Function obj.key = value; onkeydown Math onkeyup onload Number obj["key"] = value; onmousedown Object onmouseup RegExp var obj = { key: value }; onmouseout String onmouseover onmouseup ... onresize onselect http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference#Global_Objects onsubmit ... http://www.w3schools.com/jsref/jsref_events.asp 12 13 14 CSS Properties blink YUI Event Utility className function blinker() YAHOO.util.Event.addListener(window, "load", function() { style { window.setInterval("blinker()", 500); var blinks = document.getElementsByName("blink"); }); for (var i = 0; i < blinks.length; i++) http://codepunk.hardwar.org.uk/css2js.htm { if (blinks[i].style.visibility == "visible") http://developer.yahoo.com/yui/event/ blinks[i].style.visibility = "hidden"; else blinks[i].style.visibility = "visible"; } } 15 16 17 Libraries Quirks Static Code Analysis Dojo http://dojotoolkit.org/ http://www.quirksmode.org/js/contents.html http://www.jslint.com/ Ext JS http://extjs.com/ jQuery http://jquery.com/ MooTools http://mootools.net/ Prototype http://www.prototypejs.org/ script.aculo.us http://script.aculo.us/ YUI http://developer.yahoo.com/yui/ ... 18 19 20 Debuggers Compressors Computer Science E-75 FireBug JSMin Building Dynamic, Scalable Websites https://addons.mozilla.org/en-US/firefox/addon/1843 http://javascript.crockford.com/jsmin.html Harvard Extension School JavaScript Debugger packer http://www.cs75.net/ https://addons.mozilla.org/en-US/firefox/addon/216 http://dean.edwards.name/packer/ ShrinkSafe http://dojotoolkit.org/docs/shrinksafe Lecture 7: JavaScript YUI Compressor http://developer.yahoo.com/yui/compressor/ David J. Malan [email protected] 21 22 23.