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