lecture5

567 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
567
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

lecture5

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

×