Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript Used by many.  Understood by few. Matthew Batchelder Lead Developer, Plymouth State University
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><li>“ The World’s Most Misunderstood Programming Language” </li></ul><ul><li>-Douglas Crockford </li></ul>
Complaints <ul><li>“JavaScript is not a language I know” </li></ul><ul><li>“The browser programming experience is awful.” ...
JS: What is it? <ul><li>Client Side Scripting language. </li></ul>
JS: What is it? <ul><li>JavaScript is  not  Java.  In fact, it has succeeded where Java has failed. </li></ul>
JS: What is it? <ul><li>Prototypal Inheritance </li></ul><ul><li>Dynamic Object </li></ul><ul><li>Lambda Functions </li></...
JS: The Bad Stuff <ul><li>Global Variables </li></ul><ul><li>+ is used for adding AND concatenation </li></ul><ul><li>Semi...
== and != <ul><li>‘’  == ‘0’ //false </li></ul><ul><li>0 == ‘’ //true </li></ul><ul><li>0 == ‘0’ //true </li></ul><ul><li>...
JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li...
JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li...
JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li...
JS: Good Stuff <ul><li>Lambda Functions </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li...
Inheritance <ul><li>Prototypical Inheritance </li></ul><ul><ul><li>Class free </li></ul></ul><ul><ul><li>Objects inherit f...
JS: Sweetness <ul><li>JavaScript is Sandboxed Client Side </li></ul><ul><ul><li>Data Transport (JSON vs XML) </li></ul></u...
What is the DOM? <ul><li>DOM == Document Object Model </li></ul><ul><li>The DOM is  hierarchical </li></ul><html> <head> <...
Finding DOM Elements <ul><li>document.getElementById() </li></ul><ul><ul><li>returns a specific element </li></ul></ul><ul...
DOM Element Attributes <ul><li>nodeName </li></ul><ul><li>nodeValue </li></ul><ul><li>nodeType </li></ul><ul><li>parentNod...
Manipulating the DOM <ul><li>Dynamically creating and adding elements </li></ul><ul><ul><li>document.createElement </li></...
innerHTML <ul><li>Why go through the trouble of creating Nodes? </li></ul><ul><li>More efficient </li></ul><ul><li>Easier ...
Events <ul><li>Click </li></ul><ul><li>Dblclick </li></ul><ul><li>Mousedown </li></ul><ul><li>Mouseup </li></ul><ul><li>Mo...
JS: Usage <ul><li>Drop this puppy in your page:  </li></ul><html> <head> <title>Example JS Page</title> <script type=“text...
Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butte...
Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quo...
Hiding/Displaying Elements <ul><li>Element visibility is a nice use of events and DOM manipulation </li></ul><ul><li>examp...
AJAX <ul><li>AJAX  (Asychronous Javascript and XML) </li></ul><ul><li>Gives you the ability to load content  dynamically !...
Ajax: XMLHttpRequest <ul><li>Loading content on demand: </li></ul><script type=&quot;text/javascript&quot;> function ajax(...
WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much?  Well most of the above.
WTF? jQuery.  That’s what we use on campus.  It is awesome.
What is jQuery? <ul><li>jQuery is a sweet JavaScript Library </li></ul><ul><ul><li>Its Mantra:  Find stuff and do stuff wi...
Finding Elements <ul><li>Say goodbye to document.getElementById() and document.getElementByTag() </li></ul><ul><li>Say hel...
Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an  ex...
Lets do some of the stuff we already did… <ul><li>Adding Text Fields </li></ul><ul><li>Toggling Element Visibility </li></...
jQuery Coolness <ul><li>Browser data </li></ul><ul><ul><li>$.browser </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>...
jQuery Plugins <ul><li>Pluggable!  Additional jQuery functionality added by including  jQuery plugins . </li></ul>
jQuery in myPlymouth <ul><li>Go Sidebar </li></ul><ul><li>Bookmarks </li></ul><ul><li>Tab Stack </li></ul><ul><li>Etc… </l...
Before We Start! <ul><li>Important tools to have </li></ul><ul><ul><li>Use Firefox  </li></ul></ul><ul><ul><ul><li>Firebug...
The End. Resources:  JS: The Good Parts ,  Slide Examples ,  jQuery ,  Image Sprites ,  Mega Man !
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Develop a vanilla.js spa you and your customers will love
Next
Download to read offline and view in fullscreen.

Share

Javascript 2009

Download to read offline

JavaScript Guest Lecture to PSU Web Programming Class 2009

Related Books

Free with a 30 day trial from Scribd

See all

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>ohhai2u.foo = ‘bar’; </li></ul><ul><li>// you can now do </li></ul><ul><li>alert(ohhai2u.foo); </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>ohhai2u.foo = ‘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;http://borkweb.com&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;); request.open(&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('http://borkweb.com/examples/js_workshop/dynamic_content1.html','',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 !
  • Stormy44

    Oct. 23, 2016
  • espig

    Apr. 16, 2010

JavaScript Guest Lecture to PSU Web Programming Class 2009

Views

Total views

11,874

On Slideshare

0

From embeds

0

Number of embeds

7,897

Actions

Downloads

35

Shares

0

Comments

0

Likes

2

×