JavaScript, jQuery , and Mashups

JavaScript, jQuery, and Mashups • Incorporating JavaScript, jQuery, and other Mashups into existing pages

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

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

Adding JS to a Web Page • Script element (<script></script>) • <script type=“text/javascript”> </script>

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

Events and Event Handlers • click (onclick), load (onload), mouseover (onmouseover), mouseout (onmouseout), submit (onsubmit), unload (onunload) • <a href=“#” onmouseover=“alert(‘You moused over’);”>Mouseover test</a> • Line Breaks (to display a line break inside a popup box, use “\n” as a hard break)

Variables • Writing HTML with JS • var username; //variable declarationusername=Karen; //variable initializationdocument.write(username); //writing HTML with JS • <p id=“demo”>A Paragraph</p><script type=“text/javascript”>document.getElementById(“demo”).innerHTML=“My First JavaScript”;</script> • Collecting Input with JS using Concatenation • var username;username = prompt(“Please enter your name:”);document.write(“<h2>Hello “ + username + “</h2>”); • Changing BG Color with JS • varusercolor;usercolor = prompt(“Enter the color you choose: “);document.bgColor = usercolor;

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

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>, < (is greater than, is less than)  quantity > 10, quantity < 10>=, <= (is greater than or equals, is less then or equals)!= (is not equal)&& (and), || (or), ! (not)  Logical operators

Conditional Comparison Ex. • <script type=“text/javascript”>var quantity; quantity = prompt(“Type a quantity greater than 0”); if (quantity <= 0) {document.write(“<p>Quantity is not greater than 0.</p>”);document.write(“<p>Please refresh the web page.</p>”); } else {document.write(“<p>Thank you for your order!</p>”); }</script>

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}

Sample JS Functions • <!DOCTYPE html><html><head> <script type=“text/javascript”> function myFunction() {document.getElementById(“demo”).innerHTML=“JS Function.”; } </script></head><body> <h1>My Web Page</h1> <p id=“demo”>A Paragraph</p> <button type=“button” onclick=“myFunction()”>Try this button</button></body></html>

External JS Files • Create myScript.js, put your JS functions in that file • Add: <script type=“text/javascript” src=“myScript.js”></script> to head • Call for usage of the function within the body: <button type=“button” onclick=“myFunction()”>Click Me</button>

Form Handling with JS • <script type=“text/javascript”> function validateForm() { if (document.forms[0].name.value == “”) { alert(“Name field cannot be empty.”); } if (document.forms[0].age.value < 18 ) { alert (“Age is below 18.”); return false; } alert (“Age and name are valid.”); return true;</script>

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

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

JavaScript, jQuery , and Mashups