1 / 16

JavaScript, jQuery , and Mashups

This guide explores JavaScript fundamentals, focusing on integration with existing web pages, object-oriented principles, and client-side scripting. Learn to manipulate HTML elements through the Document Object Model (DOM), handle events, and create interactive experiences using functions, variables, and conditional statements. Discover how to manage form inputs, change styles dynamically, and enhance your projects with jQuery and other mashups like Google Analytics and social media buttons. Elevate your web development skills with practical examples and coding techniques.

ivana
Télécharger la présentation

JavaScript, jQuery , and Mashups

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 (<script></script>) • <script type=“text/javascript”> <!-- alert(“Welcome to my page!”); //--></script>

  5. 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();

  6. 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)

  7. 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;

  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>, < (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

  10. 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>

  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 • <!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>

  13. 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>

  14. 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>

  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

More Related