Learning About JavaScript (…and its little buddy, JQuery!)


Published on

Slides from an internal workshop at the GWU Library on 26 June 2012. The workshop was organized into three parts: "Understanding JavaScript Basics", "About the DOM (Document Object Model)", and "Where JQuery Fits in and How it Works".

Published in: Technology
  • Be the first to comment

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

No notes for slide

Learning About JavaScript (…and its little buddy, JQuery!)

  1. 1. Learning About JavaScript…and its little buddy, JQuery!GWU Libraries ● 26 June 2012Julie Meloni // @jcmeloni // jcmeloni@gmail.com
  2. 2. Today’s General Outline• Understanding JavaScript Basics• About the DOM (Document Object Model)• Where JQuery Fits in and How it Works
  3. 3. The Very Very Basics• Developed in 1995 – it’s no spring chicken• No relation to the Java programming language• An interpreted rather than a compiled language▫ Interpreted by the web browser software• 98% of web traffic is JavaScript-enabled▫ 2% made up of old screenreader software andultra-security-conscious people
  4. 4. Practical Uses• Improving navigation• Offering dynamic text display• Creating special effects in response to user• As the basis for remote scripting (the J in AJAX)• Offering more interactivity than static HTML▫ But less dynamism than a server-side language
  5. 5. How it Looks in the Source Code<script type="text/javascript"><!-- Hide the script from old browsersdocument.write(document.lastModified);// Stop hiding the script --></script>Might display: 06/25/2012 08:07:51
  6. 6. How it Looks in the Source Code v2<!DOCTYPE html><html><head><title>JS Test</title></head><body><h1>JS Test</h1><p style=“color: red”><script type="text/javascript"><!-- Hide the script from old browsersdocument.write(document.lastModified);// Stop hiding the script --></script></p></body></html>
  7. 7. Moving Into Programming Basics• Like other programming languages, JavaScripthas:▫ Variables (& Arrays)▫ Operators▫ Flow Control▫ Objects
  8. 8. About JavaScript Variables• A variable is a bucket that holds one piece ofinformation.• Examples:• var string_variable = “The Library”;• var numeric_variable = 4;• var myname = “Julie”;
  9. 9. About JavaScript Arrays• An array is a type of variable (or bucket) thatholds many pieces of information.• Example:• rainbow = new array(“red”, “orange”, “yellow”,“green”, “blue”, “indigo”, “violet”); rainbow[0] holds “red” rainbow[1] holds “orange”
  10. 10. About JavaScript Operators• Arithmetic• +, -, *, / (add, subtract, multiply, divide)• Assignment• = (“Assign the value of 4 to the variable called a”) var a = 4;• += (“Add the value of 5 to the variable thatalready holds 4”) var a += 5; // a now holds 9• -= (“Subtract the value of 3 to the variable thatalready holds 4”) var a -= 3; // a now holds 1
  11. 11. About JavaScript Operators• Comparison• == (“when I compare the value in variable a to thevalue in variable be, that comparison is true”) a == b• != (“when I compare the value in variable a to thevalue in variable be, that comparison is not true”)• a != b• >, >= (“the value of variable a is greater than (orgreater than or equal to) the value of variable b”) a > b• <, <= (“the value of variable a is less than (or lessthan or equal to) the value of variable b”) a < b
  12. 12. About JavaScript Operators• Concatenation• + (“this”+ “is a test”= “thisisatest”)• Logical• && (and)• || (or)• ! (not)
  13. 13. About JavaScript Flow Control• ifif (something is true) {do something here}• if ... else if ... elseif (something is true) {do something here} else if (something is true) {do something here} else {do something here}
  14. 14. About JavaScript Flow Control• switchswitch (something) {case “blue”:do something herebreak;case “apple”:do something else herebreak;case “fire truck”:do something else herebreak;default:do something else herebreak;}
  15. 15. About JavaScript Flow Control• whilewhile (something is true) {do something here}• forfor (something is true) {do something here}
  16. 16. About JavaScript Objects• Objects can store multiple pieces of data,but the internal structure of the data isdifferent than that of an array.• The items of data stored in an object are called the properties of theobject. People objects in an address book might include a name, an address, and atelephone number (Bob.address, Bob.phone, etc)• Objects can use methods. Methods are built-in functions that work with the objects data, e.g. Bob.display()• JavaScript supports three kinds of objects:• Built-in to the JavaScript language.• Custom objects you create.• DOM (Document Object Model) -- components of the browser and thecurrent HTML document.
  17. 17. (The Document Object Model)
  18. 18. What is the DOM?• The DOM is the invisible structure of all HTMLdocuments▫ The overall container object is called thedocument. Any container within the document that has an ID isreferenced by that ID. For example, if you have a <div> with an ID calledwrapper, then in the DOM that element is referencedby document.wrapper
  19. 19. But it actually starts before that…• The DOM is not part of JavaScript or any otherprogramming language -- its an API built in tothe browser.• At the top of the browser object hierarchy is thewindow object.• Also access the history object and the location object• Inside a window is a document.• window.document.header-image<img id=“header-image” src=“some.jpg”/>
  20. 20. So what about document?• The document object has several properties,such as:• document.URL• document.title• document.lastModified• document.cookie• document.images• …and more!
  21. 21. And within document?• The document object contains…containers (also callednodes).<!DOCTYPE html><html><head><title>A Simple HTML Document</title></head><body><h1>This is a Level-1 Heading.</h1><p>This is a simple paragraph.</p></body></html>
  22. 22. Nodes Have Properties Too!<h1>This is a Level-1 Heading.</h1>• nodeName is the name of the node, e.g. h1• innerHTML is the text within the node, e.g. “This isa Level-1 Heading”
  23. 23. So…events?• JavaScript can be used to detect events and reactto them• Events include clicked buttons, mouse pointers moving, etc.• The script that you use to detect and respond toan event is called an event handler.• You dont need the <script> tag to define an event handler; youcan add an event handler attribute to an individual HTML tag.<a href="http://www.google.com/"onmouseover="alert(You moved!);">I’m a link.</a><a href="" onmouseover="DoIt();">Move Me</a>
  24. 24. A Few Event Examples• Mouse• onmouseover• onmouseout• onmouseup• onmousedown• onclick• ondblclick• Keyboard• onkeydown• onkeyup• Form Elements• onblur• onchange• onsubmit
  25. 25. Why JQuery (or any library?)• Using a third-party library• enables you to implement cross-browser scripting and sophisticatedUI elements without being a JavaScript expert.• enables you to avoid reinventing the wheel for common tasks• Execute code when the DOM is ready• Collect elements• Modify display• Listen for events and enact upon them• Execute AJAX requests• …and more!
  26. 26. Loading JQuery• Must be present in each calling page.• You can download and host your own, or use a remotely hostedversion.<!DOCTYPE html><html><head><title>JQuery</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script></head><body><!-- more html --></body></html>
  27. 27. Then What?• jQuery has at its heart sophisticated, cross-browser methods forselection of page elements.• Selectors used to obtain elements; based on simple CSS-like selectorstyles.• To get an element that has an ID of someElement, use: $("#someElement")• To reference a collection of elements that use the someClass class name, use: $(".someClass")• You can manipulate HTML and CSS properties using built-in methods.• To append the phrase "powered by jQuery" to all paragraph elements, forexample, we would simply write: $("p").append(" powered by jQuery");• To then change the background color of those same elements, we canmanipulate their CSS properties directly: $("p").css("background-color","yellow");• To hide all elements having in class hideMe, use: $(".hideMe").hide();
  28. 28. Moving Forward• Understanding what you want to do will helpyou find the JQuery examples to do it.▫ Everything is based on interactions (and events)▫ Everything is rooted in things you want to do withHTML and CSS Even if it’s AJAX
  29. 29. Getting the Document Ready<!DOCTYPE html><html><head><title>JQuery</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script></head><body><script type="text/javascript">$(document).ready(function(){// Your code here});</script></body></html>
  30. 30. Getting the Document Ready – Alert!<!DOCTYPE html><html><head><title>JQuery</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script></head><body><script type="text/javascript">$(document).ready(function(){$("a").click(function(event){alert("Hi!");event.preventDefault();});});</script><a href="http://www.google.com">Go to Google</a></body></html>
  31. 31. Fading In – An Effect Example<!DOCTYPE html><html><head><title>JQuery</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script></head><body><div id="clickme">Click here to fade in</div><img id="logo" src="logo.jpg"height="112" width="241" alt="logo"style="display:none" /><script type="text/javascript">$(#clickme).click(function() {$(#logo).fadeIn(slow, function() {});});</script></body></html>
  32. 32. Where to Go From Here?• ANYWHERE• Hopefully right to the JQuery API documentationat http://api.jquery.com