Your SlideShare is downloading. ×
  • Like
lecture5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
461
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Project 1 1
  • 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. JavaScript <script type="text/javascript"> // <![CDATA[ . . . // ]]> </script> 3
  • 5. JavaScript <script language="Javascript1.5"> // <![CDATA[ . . . // ]]> </script> 4
  • 6. JavaScript <script src="file.js" type="text/javascript"></script> 5
  • 7. noscript <script type="text/javascript"> // <![CDATA[ document.write("hello, world"); // ]]> </script> <noscript> goodbye, world </noscript> 6
  • 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. 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. Validation 9
  • 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. 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. Objects var obj = new Object(); var obj = {}; obj.key = value; obj["key"] = value; var obj = { key: value }; 12
  • 14. Arrays var a = new Array(); var a = []; a[0] = "foo"; a[1] = "bar"; a[2] = "baz"; 13
  • 15. Arrays var a = new Array(); var a = []; a[a.length] = "foo"; a[a.length] = "bar"; a[a.length] = "baz"; 14
  • 16. OOP (Prototype-Based) // constructor function Foo() { // property this.counter = 0; } // method this.protoype.add = function(n) { this.counter += n; } 15
  • 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. CSS Properties className style http://codepunk.hardwar.org.uk/css2js.htm 17
  • 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. YUI Event Utility YAHOO.util.Event.addListener(window, "load", function() { window.setInterval("blinker()", 500); }); http://developer.yahoo.com/yui/event/ 19
  • 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. YUI Library Utilities Animation Utility Drag and Drop Utility ImageLoader Utility ... http://developer.yahoo.com/yui/ 21
  • 23. YUI Library Controls/Widgets AutoComplete Button Calendar Color Picker Container Menu Slider TabView TreeView ... http://developer.yahoo.com/yui/ 22
  • 24. Quirks http://www.quirksmode.org/js/contents.html 23
  • 25. Static Code Analysis http://www.jslint.com/ 24
  • 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. 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. Computer Science E-75 Building Dynamic Websites Harvard Extension School http://cs75.net/ Lecture 5: JavaScript David J. Malan malan@post.harvard.edu 27