JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing...
-
Upload
andra-harrington -
Category
Documents
-
view
262 -
download
2
Transcript of JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing...
JavaScript, JavaScript, jQuery, and jQuery, and MashupsMashups
Incorporating JavaScript, jQuery, and Incorporating JavaScript, jQuery, and other Mashups into existing pagesother Mashups into existing pages
Brief Look at JavaScriptBrief Look at JavaScript
Object-oriented programming language (refers Object-oriented programming language (refers to objects within the code)to objects within the code)
Client-side scripting languageClient-side scripting language
Rendered by your browser in a “sandbox” Rendered by your browser in a “sandbox” environmentenvironment
Popular Uses of JavaScriptPopular Uses of JavaScript
Alert messageAlert message
Popup windowPopup window
Jump menuJump menu
Mouse Movement techniquesMouse Movement techniques
Image swappingImage swapping
Adding JS to a Web PageAdding JS to a Web Page
Script element (<script></script>)Script element (<script></script>)
<script type=“text/javascript”><script type=“text/javascript”><!--<!--
alert(“Welcome to my page!”);alert(“Welcome to my page!”);//-->//-->
</script></script>
Document Object Model Document Object Model (DOM)(DOM)
JS can manipulate HTML elementsJS can manipulate HTML elements
To manipulate items, you must know their To manipulate items, you must know their object reference in the DOMobject reference in the DOM
document.write(“<p>text to be <h1>written</h1> to the doc</p>”);document.write(“<p>text to be <h1>written</h1> to the doc</p>”);
window.alert(“message”);window.alert(“message”);
document.formname.submit();document.formname.submit();
Events and Event HandlersEvents and Event Handlers
click (onclick), load (onload), mouseover click (onclick), load (onload), mouseover (onmouseover), mouseout (onmouseout), (onmouseover), mouseout (onmouseout), submit (onsubmit), unload (onunload)submit (onsubmit), unload (onunload)
<a href=“#” onmouseover=“alert(‘You moused <a href=“#” onmouseover=“alert(‘You moused over’);”>Mouseover test</a>over’);”>Mouseover test</a>
Line Breaks (to display a line break inside a Line Breaks (to display a line break inside a popup box, use “\n” as a hard break)popup box, use “\n” as a hard break)
VariablesVariablesWriting HTML with JSWriting HTML with JS
var username;var username; //variable declaration//variable declarationusername=Karen;username=Karen; //variable initialization//variable initializationdocument.write(username);document.write(username); //writing HTML with JS//writing HTML with JS
<p id=“demo”>A Paragraph</p><p id=“demo”>A Paragraph</p><script type=“text/javascript”><script type=“text/javascript”>document.document.getElementByIdgetElementById(“demo”).innerHTML=“My First JavaScript”;(“demo”).innerHTML=“My First JavaScript”;</script></script>
Collecting Input with JS using ConcatenationCollecting Input with JS using Concatenation
var username;var username;username = prompt(“Please enter your name:”);username = prompt(“Please enter your name:”);document.write(“<h2>Hello “ + username + “</h2>”);document.write(“<h2>Hello “ + username + “</h2>”);
Changing BG Color with JSChanging BG Color with JS
var usercolor;var usercolor;usercolor = prompt(“Enter the color you choose: “);usercolor = prompt(“Enter the color you choose: “);document.bgColor = usercolor;document.bgColor = usercolor;
Arithmetic OperatorsArithmetic Operators
Typical arithmetic operatorsTypical arithmetic operators
+ (addition), - (subtraction), * + (addition), - (subtraction), * (multiplication), / (division), % (modulus), ++ (multiplication), / (division), % (modulus), ++ (increment), -- (decrement)(increment), -- (decrement)
Can perform arithmetic operations on Can perform arithmetic operations on numbers (values), but not strings or Booleansnumbers (values), but not strings or Booleans
To “+” a string is the same as concatenationTo “+” a string is the same as concatenation
Decision Making Decision Making (conditionals)(conditionals)
Conditional StatementsConditional Statements
if (condition) {if (condition) { //if…then conditional //if…then conditional statementstatement
…commands to execute if true;…commands to execute if true;} else {} else {
…commands to execute if false;…commands to execute if false;}}
Comparison OperatorsComparison Operators
== (is exactly equal to) == (is exactly equal to) quantity ==10 quantity ==10>, < (is greater than, is less than) >, < (is greater than, is less than) quantity > 10, quantity < 10 quantity > 10, quantity < 10>=, <= (is greater than or equals, is less then or equals)>=, <= (is greater than or equals, is less then or equals)!= (is not equal)!= (is not equal)
&& (and), || (or), ! (not) && (and), || (or), ! (not) Logical operators Logical operators
Conditional Comparison Conditional Comparison Ex.Ex.
<script type=“text/javascript”><script type=“text/javascript”>var quantity;var quantity;quantity = prompt(“Type a quantity greater than 0”);quantity = prompt(“Type a quantity greater than 0”);if (quantity <= 0) {if (quantity <= 0) {
document.write(“<p>Quantity is not greater than document.write(“<p>Quantity is not greater than 0.</p>”);0.</p>”);
document.write(“<p>Please refresh the web page.</p>”);document.write(“<p>Please refresh the web page.</p>”);} else {} else {
document.write(“<p>Thank you for your order!</p>”);document.write(“<p>Thank you for your order!</p>”);}}
</script></script>
JS FunctionsJS Functions
Since we commonly do things over and over, it Since we commonly do things over and over, it makes no sense to continually code the same makes no sense to continually code the same things. Instead, create a function then call it things. Instead, create a function then call it as needed.as needed.
Functions typically coded in the head, then Functions typically coded in the head, then called in the bodycalled in the body
function function_name() {function function_name() {…JS statements…JS statements
}}
Sample JS FunctionsSample JS Functions<!DOCTYPE html><!DOCTYPE html><html><html><head><head>
<script type=“text/javascript”><script type=“text/javascript”>function myFunction()function myFunction(){{
document.getElementById(“demo”).innerHTML=“JS document.getElementById(“demo”).innerHTML=“JS Function.”;Function.”;
}}</script></script>
</head></head><body><body>
<h1>My Web Page</h1><h1>My Web Page</h1><p id=“demo”>A Paragraph</p><p id=“demo”>A Paragraph</p><button type=“button” onclick=“myFunction()”>Try this <button type=“button” onclick=“myFunction()”>Try this
button</button>button</button></body></body></html></html>
External JS FilesExternal JS Files
Create myScript.js, put your JS functions in that Create myScript.js, put your JS functions in that filefile
Add: <script type=“text/javascript” Add: <script type=“text/javascript” src=“myScript.js”></script> to headsrc=“myScript.js”></script> to head
Call for usage of the function within the body: Call for usage of the function within the body: <button type=“button” <button type=“button” onclick=“myFunction()”>Click Me</button>onclick=“myFunction()”>Click Me</button>
Form Handling with JSForm Handling with JS
<script type=“text/javascript”><script type=“text/javascript”>function validateForm() {function validateForm() {
if (document.fif (document.forms[0].nameorms[0].name.value == “”) {.value == “”) {alert(“Name field cannot be empty.”);alert(“Name field cannot be empty.”);
}}if (document.if (document.forms[0]forms[0]..ageage.value < 18 ) {.value < 18 ) {
alert (“Age is below 18.”);alert (“Age is below 18.”);return false;return false;
}}alert (“Age and name are valid.”);alert (“Age and name are valid.”);return true;return true;
</script></script>
jQuery and DojoToolKitjQuery and DojoToolKit
Pick out which UI widgets you would likePick out which UI widgets you would like
Link the js file to your HTML document so you Link the js file to your HTML document so you will have access to the librarieswill have access to the libraries
Copy/paste UI code into your HTMLCopy/paste UI code into your HTML
Create complete site style with jQueryCreate complete site style with jQuery
jQuery MobilejQuery Mobile
Other MashupsOther Mashups
Google AnalyticsGoogle Analytics
Google MapsGoogle Maps
Facebook LIKE buttonsFacebook LIKE buttons
Google+ SubscribeGoogle+ Subscribe
Twitter FollowTwitter Follow
Pinterest LIKEPinterest LIKE