Javascript 2009


Published on

JavaScript Guest Lecture to PSU Web Programming Class 2009

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Javascript isn’t held in very good esteem. People don’t feel like they need to learn it before they start using it…because it *looks* familiar. Looks familiar. Works differently. When people try to use it and it doesn’t work as expected, they hate it even more.
  • All valid: JavaScript is forced upon the developer if programming on the web or a platform with embedded JS This is true. The DOM (Document Object Model) sucks. Luckily there are JS libraries that ease that pain. Once again, the fault of the DOM This is hard to avoid, though there are companies – like Google – that are exerting effort to make JS . Well…there are a number of mistakes…but there are good parts too that make it powerful.
  • Global: No linker. All variables get tossed in a global namespace. Reliability and security problems. XSS +: In a strongly typed environment like Java, that’s hunky dory. In a weakly typed environment…well…it isn’t always obvious if you are going to add or concatenate. Semicolon: These aren’t required and JavaScript tries to insert them for you. How? When the compiler runs into an error, it backs up to a line feed and converts it to a semicolon. typeof: A useful tool as it tells what the type of something is. If you ask what the type of an Object is…it says it is an object. If you do the same for a Number, NULL, a Function, etc…Object. Arrays: Arrays are all just hash tables. Keys are turned into strings. This has a performance hit (though it makes things really easy) == and !=: Type coercion. False: Too many bottom values that are confusing and mean different things
  • Luckily there is a === that would answer false to everything.
  • Javascript 2009

    1. 1. JavaScript Used by many. Understood by few. Matthew Batchelder Lead Developer, Plymouth State University
    2. 2. Agenda <ul><li>JavaScript: What it is and isn't </li></ul><ul><li>What is the DOM? </li></ul><ul><li>What is AJAX? </li></ul><ul><li>jQuery FTW! </li></ul><ul><ul><li>Manipulating page elements (the DOM) in sweet ways </li></ul></ul><ul><ul><li>Simplified AJAX </li></ul></ul><ul><ul><li>Other Coolness </li></ul></ul><ul><ul><li>Pluggability </li></ul></ul><ul><li>jQuery in myPlymouth </li></ul>
    3. 3. <ul><li>“ The World’s Most Misunderstood Programming Language” </li></ul><ul><li>-Douglas Crockford </li></ul>
    4. 4. Complaints <ul><li>“JavaScript is not a language I know” </li></ul><ul><li>“The browser programming experience is awful.” </li></ul><ul><li>“It’s not fast enough.” </li></ul><ul><li>“The language is just a pile of mistakes.” </li></ul>-Douglas Crockford
    5. 5. JS: What is it? <ul><li>Client Side Scripting language. </li></ul>
    6. 6. JS: What is it? <ul><li>JavaScript is not Java. In fact, it has succeeded where Java has failed. </li></ul>
    7. 7. JS: What is it? <ul><li>Prototypal Inheritance </li></ul><ul><li>Dynamic Object </li></ul><ul><li>Lambda Functions </li></ul><ul><li>Loosely Typed </li></ul><ul><li>C Family Syntax </li></ul><ul><li>Java-like Conventions </li></ul><ul><li>Perl Regular Expressions </li></ul>
    8. 8. JS: The Bad Stuff <ul><li>Global Variables </li></ul><ul><li>+ is used for adding AND concatenation </li></ul><ul><li>Semicolon insertion </li></ul><ul><li>Typeof </li></ul><ul><li>Phony arrays </li></ul><ul><li>== and != </li></ul><ul><li>False, null, undefined, NaN </li></ul>
    9. 9. == and != <ul><li>‘’ == ‘0’ //false </li></ul><ul><li>0 == ‘’ //true </li></ul><ul><li>0 == ‘0’ //true </li></ul><ul><li>false == ‘false’ // false </li></ul><ul><li>false == ‘0’ //true </li></ul><ul><li>false == undefined //false </li></ul><ul><li>false == null //false </li></ul><ul><li>null == undefined //true </li></ul><ul><li>“ “ == 0 //true </li></ul>
    10. 10. JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Literals </li></ul><ul><li>A function is an Object Too! </li></ul><ul><li>var bob = function(){ alert(‘cheeseypoof’); } </li></ul>
    11. 11. JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Literals </li></ul><ul><li>At any time you can take an object and dynamically add a property to it. </li></ul><ul><li>// create an object </li></ul><ul><li>var ohhai2u = new Object(); </li></ul><ul><li>// then do </li></ul><ul><li> = ‘bar’; </li></ul><ul><li>// you can now do </li></ul><ul><li>alert(; </li></ul>
    12. 12. JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Literals </li></ul><ul><li>Flexibility in not defining variable types…just like PHP. </li></ul>
    13. 13. JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Literals </li></ul><ul><li>You don’t need to use “new” syntax to define objects: </li></ul><ul><li>// create an object </li></ul><ul><li>var ohhai2u = {}; </li></ul><ul><li>// then do </li></ul><ul><li> = ‘bar’; </li></ul><ul><li>// ohhai2u now looks like this </li></ul><ul><li>{foo: ‘bar’} </li></ul>
    14. 14. Inheritance <ul><li>Prototypical Inheritance </li></ul><ul><ul><li>Class free </li></ul></ul><ul><ul><li>Objects inherit from other objects </li></ul></ul><ul><ul><li>An object contains only what makes it different from inherited objects. </li></ul></ul>
    15. 15. JS: Sweetness <ul><li>JavaScript is Sandboxed Client Side </li></ul><ul><ul><li>Data Transport (JSON vs XML) </li></ul></ul><ul><ul><li>UI Manipulation </li></ul></ul><ul><li>… DOM! </li></ul>
    16. 16. What is the DOM? <ul><li>DOM == Document Object Model </li></ul><ul><li>The DOM is hierarchical </li></ul><html> <head> <title>Example JS Page</title> </head> <body> <form id=“some_form”> <input type=“text” name=“bork”/> <input type=“submit” value=“Go”/> </form> </body> </html>
    17. 17. Finding DOM Elements <ul><li>document.getElementById() </li></ul><ul><ul><li>returns a specific element </li></ul></ul><ul><li>document.getElementByTag() </li></ul><ul><ul><li>returns an array of elements </li></ul></ul>
    18. 18. DOM Element Attributes <ul><li>nodeName </li></ul><ul><li>nodeValue </li></ul><ul><li>nodeType </li></ul><ul><li>parentNode </li></ul><ul><li>childNodes </li></ul><ul><li>firstChild </li></ul><ul><li>lastChild </li></ul><ul><li>previousSibling </li></ul><ul><li>nextSibling </li></ul><ul><li>attributes </li></ul><ul><li>ownerDocument </li></ul><ul><li>1 = an HTML element </li></ul><ul><li>2 = an element attribute </li></ul><ul><li>3 = text </li></ul><ul><li>8 = an HTML comment </li></ul><ul><li>9 = a document </li></ul><ul><li>10 = a document type definition </li></ul>DOM Attributes Node Types Here’s a good article that uses these.
    19. 19. Manipulating the DOM <ul><li>Dynamically creating and adding elements </li></ul><ul><ul><li>document.createElement </li></ul></ul><ul><ul><li>appendChild </li></ul></ul><ul><li>example </li></ul>
    20. 20. innerHTML <ul><li>Why go through the trouble of creating Nodes? </li></ul><ul><li>More efficient </li></ul><ul><li>Easier </li></ul><ul><li>example </li></ul>
    21. 21. Events <ul><li>Click </li></ul><ul><li>Dblclick </li></ul><ul><li>Mousedown </li></ul><ul><li>Mouseup </li></ul><ul><li>Mouseover </li></ul><ul><li>Mousemove </li></ul><ul><li>Mouseout </li></ul><ul><li>Keypress </li></ul><ul><li>Keydown </li></ul><ul><li>Keyup </li></ul><ul><li>Select </li></ul><ul><li>Change </li></ul><ul><li>Submit </li></ul><ul><li>Reset </li></ul><ul><li>Focus </li></ul><ul><li>Blur </li></ul><ul><li>Load </li></ul><ul><li>Unload </li></ul><ul><li>Abort </li></ul><ul><li>Error </li></ul><ul><li>Resize </li></ul><ul><li>Scroll </li></ul>Mouse Keyboard Frame/Object Form
    22. 22. JS: Usage <ul><li>Drop this puppy in your page: </li></ul><html> <head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script> </head> <body> … </body> </html>
    23. 23. Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>
    24. 24. Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quot;> function doLoad() { document.getElementById('sweet-link').addEventListener(‘click’, confirmClick, false); }//end doLoad function confirmClick() { return confirm(‘Are you sure you wish to go to that link?’); }//end confirmClick window.addEventListener(‘load’, doLoad, false); </script> </head> <body> <a id=&quot;sweet-link&quot; href=&quot;;>BorkWeb</a> </body> </html> example
    25. 25. Hiding/Displaying Elements <ul><li>Element visibility is a nice use of events and DOM manipulation </li></ul><ul><li>example </li></ul>
    26. 26. AJAX <ul><li>AJAX (Asychronous Javascript and XML) </li></ul><ul><li>Gives you the ability to load content dynamically ! </li></ul><ul><ul><li>Loading content on demand </li></ul></ul><ul><ul><li>Possible usability Issues </li></ul></ul><ul><ul><li>Possible performance problems and benefits </li></ul></ul><ul><li>Limitation : No AJAX calls beyond the sandbox. </li></ul><ul><ul><li>Note: The way around this is with XSS (Cross Site Scripting)…which can be dangerous if done poorly. </li></ul></ul>
    27. 27. Ajax: XMLHttpRequest <ul><li>Loading content on demand: </li></ul><script type=&quot;text/javascript&quot;> function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&quot;MSXML2.XMLHTTP.3.0&quot;);;GET&quot;, url, true); request.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ if (request.responseText){ callbackFunction(request.responseText); } } }; request.send(vars); }//end ajax function out(text){ document.getElementById('content').innerHTML = text; }//end out function ajaxCall(){ ajax('','',out);return false; }//end ajaxCall function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad window.addEventListener('load', doLoad, false); </script> <ul><li>example </li></ul>
    28. 28. WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.
    29. 29. WTF? jQuery. That’s what we use on campus. It is awesome.
    30. 30. What is jQuery? <ul><li>jQuery is a sweet JavaScript Library </li></ul><ul><ul><li>Its Mantra: Find stuff and do stuff with it </li></ul></ul><ul><ul><li>Focuses on simplicity </li></ul></ul><ul><li>Get it here </li></ul><ul><li>Check out the docs </li></ul>
    31. 31. Finding Elements <ul><li>Say goodbye to document.getElementById() and document.getElementByTag() </li></ul><ul><li>Say hello to: $() </li></ul><ul><ul><li>Uses CSS Selectors to find elements and returns them as an array of elements. </li></ul></ul>
    32. 32. Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an example . Check out the selector syntax for more info.
    33. 33. Lets do some of the stuff we already did… <ul><li>Adding Text Fields </li></ul><ul><li>Toggling Element Visibility </li></ul><ul><li>Ajax Content </li></ul>
    34. 34. jQuery Coolness <ul><li>Browser data </li></ul><ul><ul><li>$.browser </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>Sliding </li></ul></ul><ul><ul><li>Fading </li></ul></ul><ul><ul><li>Animating </li></ul></ul><ul><li>Chaining </li></ul><ul><ul><li>$(‘a’).click(function(){alert(‘hello’); return false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’); </li></ul></ul>
    35. 35. jQuery Plugins <ul><li>Pluggable! Additional jQuery functionality added by including jQuery plugins . </li></ul>
    36. 36. jQuery in myPlymouth <ul><li>Go Sidebar </li></ul><ul><li>Bookmarks </li></ul><ul><li>Tab Stack </li></ul><ul><li>Etc… </li></ul><ul><li>Check out the source . </li></ul>
    37. 37. Before We Start! <ul><li>Important tools to have </li></ul><ul><ul><li>Use Firefox </li></ul></ul><ul><ul><ul><li>Firebug </li></ul></ul></ul><ul><ul><ul><li>JS Debugging FTW </li></ul></ul></ul><ul><ul><ul><li>Web Developer Toolbar (handy) </li></ul></ul></ul><ul><ul><li>A sexy text editor (not notepad) </li></ul></ul>
    38. 38. The End. Resources: JS: The Good Parts , Slide Examples , jQuery , Image Sprites , Mega Man !