JavaScript, jQuery, and Mashups

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 (ltscriptgtlt/scriptgt)
• ltscript typetext/javascriptgt lt!-- alert(W
  elcome to my page!) //--gtlt/scriptgt

5
Document Object Model (DOM)

• JS can manipulate HTML elements
• To manipulate items, you must know their object
  reference in the DOM
• document.write(ltpgttext to be lth1gtwrittenlt/h1gt to
  the doclt/pgt)
• window.alert(message)
• document.formname.submit()

6
Events and Event Handlers

• click (onclick), load (onload), mouseover
  (onmouseover), mouseout (onmouseout), submit
  (onsubmit), unload (onunload)
• lta href onmouseoveralert(You moused
  over)gtMouseover testlt/agt
• 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 declarationusernameK
  aren //variable initializationdocument.write(u
  sername) //writing HTML with JS
• ltp iddemogtA Paragraphlt/pgtltscript
  typetext/javascriptgtdocument.getElementById(d
  emo).innerHTMLMy First JavaScriptlt/scriptgt
• Collecting Input with JS using Concatenation
• var usernameusername prompt(Please enter
  your name)document.write(lth2gtHello
  username lt/h2gt)
• Changing BG Color with JS
• var usercolorusercolor 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) //ifthen conditional
  statement commands to execute if true else
  commands to execute if false
• Comparison Operators
• (is exactly equal to) ? quantity 10gt, lt (is
  greater than, is less than) ? quantity gt 10,
  quantity lt 10gt, lt (is greater than or equals,
  is less then or equals)! (is not equal)
  (and), (or), ! (not) ? Logical operators

10
Conditional Comparison Ex.

• ltscript typetext/javascriptgt var
  quantity quantity prompt(Type a quantity
  greater than 0) if (quantity lt 0)
  document.write(ltpgtQuantity is not greater
  than 0.lt/pgt) document.write(ltpgtPlease
  refresh the web page.lt/pgt) else
  document.write(ltpgtThank you for your
  order!lt/pgt) lt/scriptgt

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

• lt!DOCTYPE htmlgtlthtmlgtltheadgt ltscript
  typetext/javascriptgt function
  myFunction() document.getElementById(demo
  ).innerHTMLJS Function. lt/scriptgtlt/headgt
  ltbodygt lth1gtMy Web Pagelt/h1gt ltp iddemogtA
  Paragraphlt/pgt ltbutton typebutton
  onclickmyFunction()gtTry this
  buttonlt/buttongtlt/bodygtlt/htmlgt

13
External JS Files

• Create myScript.js, put your JS functions in that
  file
• Add ltscript typetext/javascript
  srcmyScript.jsgtlt/scriptgt to head
• Call for usage of the function within the body
  ltbutton typebutton onclickmyFunction()gtClick
  Melt/buttongt

14
Form Handling with JS

• ltscript typetext/javascriptgt function
  validateForm() if (document.forms0.name.valu
  e ) alert(Name field cannot be
  empty.) if (document.forms0.age.value lt
  18 ) alert (Age is below 18.) return
  false alert (Age and name are
  valid.) return truelt/scriptgt

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