1. JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages

2. Brief Look at JavaScript Object-oriented programming language (refers to objects within the code) Client-side scripting language Rendered by your browser in a “sandbox” environment

3. Popular Uses of JavaScript Alert message Popup window Jump menu Mouse Movement techniques Image swapping

4. Adding JS to a Web Page Script element ( )

5. Document Object Model (DOM) JS can manipulate HTML elements To manipulate items, you must know their object reference in the DOM document.write(“ text to be written to the doc ”); window.alert(“message”);document.formname.submit();

6. Events and Event Handlers click (onclick), load (onload), mouseover (onmouseover), mouseout (onmouseout), submit (onsubmit), unload (onunload) Mouseover test Mouseover test Line Breaks (to display a line break inside a popup box, use “\n” as a hard break)

7. Variables Writing HTML with JS var username;//variable declaration username=Karen;//variable initialization document.write(username);//writing HTML with JS A Paragraph document.getElementById(“demo”).innerHTML=“My First JavaScript”; A Paragraph document.getElementById(“demo”).innerHTML=“My First JavaScript”; Collecting Input with JS using Concatenation var username; username = prompt(“Please enter your name:”); document.write(“ Hello “ + username + “ ”); Changing BG Color with JS var usercolor; usercolor = prompt(“Enter the color you choose: “); document.bgColor = usercolor;

8. Arithmetic Operators Typical arithmetic operators + (addition), - (subtraction), * (multiplication), / (division), % (modulus), ++ (increment), -- (decrement) Can perform arithmetic operations on numbers (values), but not strings or Booleans To “+” a string is the same as concatenation

9. Decision Making (conditionals) Conditional Statements if (condition) {//if…then conditional statement …commands to execute if true; } else { …commands to execute if false; } Comparison Operators == (is exactly equal to)  quantity ==10 >, 10, quantity =,, 10, quantity =, <= (is greater than or equals, is less then or equals) != (is not equal) && (and), || (or), ! (not)  Logical operators

10. Conditional Comparison Ex. var quantity; quantity = prompt(“Type a quantity greater than 0”); if (quantity Quantity is not greater than 0. ”); document.write(“ Please refresh the web page. ”); } else { document.write(“ Thank you for your order! ”); } var quantity; quantity = prompt(“Type a quantity greater than 0”); if (quantity Quantity is not greater than 0. ”); document.write(“ Please refresh the web page. ”); } else { document.write(“ Thank you for your order! ”); }

11. JS Functions Since we commonly do things over and over, it makes no sense to continually code the same things. Instead, create a function then call it as needed. Functions typically coded in the head, then called in the body function function_name() { …JS statements }

12. Sample JS Functions function myFunction() { document.getElementById(“demo”).innerHTML=“JS Function.”; } My Web Page A Paragraph Try this button function myFunction() { document.getElementById(“demo”).innerHTML=“JS Function.”; } My Web Page A Paragraph Try this button

13. External JS Files Create myScript.js, put your JS functions in that file Add: to head Call for usage of the function within the body: Click Me Call for usage of the function within the body: Click Me

14. Form Handling with JS function validateForm() { if (document.forms[0].name.value == “”) { alert(“Name field cannot be empty.”); } if (document.forms[0].age.value function validateForm() { if (document.forms[0].name.value == “”) { alert(“Name field cannot be empty.”); } if (document.forms[0].age.value

15. jQuery and DojoToolKit Pick out which UI widgets you would like Link the js file to your HTML document so you will have access to the libraries Copy/paste UI code into your HTML Create complete site style with jQuery jQuery Mobile

16. Other Mashups Google Analytics Google Maps Facebook LIKE buttons Google+ Subscribe Twitter Follow Pinterest LIKE