JavaScript

1
JavaScript

• INFSCI 1052

2
JavaScript Basics

• Client Side versus Server Side
• Server side
• PHP, ASP, Cold Fusion, Ruby on Rails
• Good for accessing databases
• Client Side
• Good for immediacy of action
• Forms
• WebPages
• Also, Flash, Ajax

3
JavaScript Basics

• Compiled versus interpreted languages
• C, C, JAVA,
• JS, PHP, Python
• Adding JS to a webpage
• Usually add to the ltheadgt section
• Can be added to the ltbodygt section too
• Can be linked to an external JS file

4
JavaScript Basics

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtUntitled Documentlt/titlegt
• lt/headgt
• ltscript type"text/javascript"gt
• alert('helloworld')
• lt/scriptgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

5
JavaScript Basics

• External Linking to JS File- Two separate lines
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtUntitled Documentlt/titlegt
• ltscript type"text/javascript" src"myprogram.js"gt
  lt/scriptgt
• ltscript type"text/javascript"gt
• alert('helloworld')
• lt/scriptgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

6
JavaScript Basics

• Linking and paths
• Absolute paths
• http//www.sis.pitt.edu
• Root-relative paths
• Using a webserver
• Relative to the sites top level folder
• Ex. /myfolder/index.html
• Document-relative paths
• Specifies path from Web page to the JS file
• Ex ../myscripts/myjsfile.js

7
JavaScript Basics

• JavaScriptThe Missing Manual
• http//www.sawmac.com/missing/javascript/tutorials
  /index.php
• http//www.sawmac.com/missing/javascript/tutorials
  /examples/index.html
• Completed tutorials section and working tutorials
• Focus is on basic JS and using JS libraries such
  as JQuery.

8
JavaScript Basics

• Writing text to a web page
• Document.write (ltpgt Hello World lt/P)
• http//www.sawmac.com/missing/javascript/tutorials
  /examples/chapter01/complete_1.2.html
• Attaching external file
• http//www.sawmac.com/missing/javascript/tutorials
  /examples/chapter01/complete_1.3.html

9
JavaScript Basics

• Errors and debugging
• If error in code typically nothing happens
• Web Browsers have consoles that can display JS
  errors
• Firefox has better console than IE
• Lists type of error, name of file, and line
  number
• Select Tools-gtError Console
• Common Errors
• Missing semicolon, missing quote mark, misspelled
  word, missing ), unterminated string literal,
  missing

10
JavaScript Syntax

• Statement the basic unit of JS program, ends in
  semicolon
• Data Types
• Number
• Integer or fractional
• String
• Use quote marks
• Boolean
• True or False
• Variables
• Var varname
• Begin with letter, , or __
• Can only contain letters, numbers, and __
• CaSE SENSITIVE

11
JavaScript Syntax

• Var Examples
• var number0
• var nameBob
• var age26
• var opentrue
• Math operators and order of operations apply
• , -, , /
• Use parenthesis to ensure correct order of
  operations

12
JavaScript Syntax

• Addition and concatenation
• sign for both purposes
• When adding two numbers the sign does addition
• When adding two string or a number and a string
  then the concatenation function is performed
• Ex. var fname Bill
• var lname Smith
• var totalnamefnamelname
• Sample http//www.sawmac.com/missing/javascript/t
  utorials/examples/chapter02/complete_2.1.html

13
JavaScript Syntax

• Arrays
• var months Jan, Feb, Mar
• Var months new Array(Jan, Feb, Mar
• Empty array
• var months
• Accessing arrays
• nameofarray
• Zero based so nameofarray2 references the third
  element
• Adding element to end of array
• Nameofarraynameofarray.length text
• Var colors red, blue, green
• Colors colors.lengthpurple

14
JavaScript Syntax

• Arrays
• Push command to add multiple elements to the
  array
• colors.push(pink, orange, brown)
• Add to the beginning of an array
• .unshift
• Push and unshift return a value the number of
  items in the array
• Removing items in an array
• pop() removes the last item
• shift() removes the first item
• Ex. var x 0,1,2,3
• var removeditem x.pop()
• Adding and deleting in middle of array
• splice function
• Sample http//www.sawmac.com/missing/javascript/t
  utorials/examples/chapter02/complete_2.3.html

15
JavaScript Syntax

• Logic
• If (condition)
• Code statements
• Comparison operators
• gt, lt, gt, lt
• If else and if else if
• and
• or
• ! not
• Sample http//www.sawmac.com/missing/javascript/t
  utorials/examples/chapter03/complete_3.1.html

16
JavaScript Syntax

• Loops
• While
• while (condition)
• JS statements
• For Loops
• for (varx, xlt100 x)
• JS statements
• Do While Loops
• do
• JS statements
• while (condition)
• Sample http//www.sawmac.com/missing/javascript/t
  utorials/examples/chapter03/complete_do_while.html
  

17
JavaScript Syntax

• Functions
• Function functionName()
• JS Statements
• Sample
• http//www.sawmac.com/missing/javascript/tutorials
  /examples/chapter03/complete_3.2.html
• Send information to functions via arguments and
  paramaters

18
JavaScript Syntax

• function functionName ( paramater 1, paramater2)
  
• JS Statements
• functionName (argument1, argument2)
• Retrieving Information from functions
• Function functionName (paramater1, paramater2)
• JS statements
• Return value
• Sample http//www.sawmac.com/missing/javascript/t
  utorials/examples/chapter03/complete_3.3.html

19
DOM

• DOM
• Document Object Model
• Working with Web pages
• Identify an element on a page
• Do something with the element
• Add/remove a class attribute
• Change a property of the element
• Add new content
• Remove the element
• Extract information from the element

20
DOM

• Provides the information that JS needs to
  interact with elements on the webpage
• A navigation structure or map of the elements on
  the webpage
• Standard from the W3C
• Most browsers have adopted but in different ways
• Hierarchical structure of the tags in a web page

21
DOM

• Tags
• Parents
• Chidren
• Siblings
• All nodes
• Text is nodes too
• Nesting determines the relationships
• Selecting a page element
• getElementById()
• Locating a single element that has a unique ID
• Document.getElementById(header)
• Searches page for a tag with an ID of header
• Typically the results of this action are stored
  in a variable
• var headNodedocument.getElementById(header)

22
DOM

• GetElementsByTagName
• Document.getElementsByTagName (a)
• Usually stored in a var
• Var myLinksdocument.getElementsByTagName (a)
• Find all ltagt tags and store results in a var
  named myLinks
• This action returns a list of nodes instead of a
  single node
• Similar to arrays
• Can access a single node using index notation
• Can use the length property
• Can loop using a for loop

23
DOM

• Accessing near by nodes
• .childNodes
• A property of a node
• Ex.
• var headline Document.getElementById(header)
  
• var headlineChildren headline.childNodes
• .parentNode
• A property that represents the direct parent of a
  node
• .nextSibling and .previousSibling
• Properties that access next and previous siblings
• .innerHTML
• Not a standard part of DOM but most browsers
  implement it
• Accesses the text part of a node

24
DOM

• Example
• var pTags document.getElementsByTagName(p)
• var theP pTags0
• alert(theP.innerHTML)
• Opens an alert box and prints out the text of
  the first paragraph.

25
Example

• JavaScript Quiz
• http//www.sis.pitt.edu/perkoski/is1052/quiz.html
  
• JavaScript Libraries
• Small file size
• Web oriented
• Tested
• Free
• Large developer community

26
JQuery

• Jquery.js is a single file that you download that
  you link to a Web page
• http//docs.jquery.com/Downloading_jQuery
• Uncompressed includes comments
• Minified compression
• Browser downloads the file once and caches it
• After downloading the file store the library file
  
• Link this file to your web page
• ltscript typetext/javascript srcjs/jquery.jsgt
  lt/scriptgt
• Once linked write your javascript program

27
JQuery

• Example
• ltscript typetext/javascript srcjs/jquery.jsgt
  lt/scriptgt
• ltscript typetext/javascriptgt
• Javascript code here
• lt/scriptgt

28
JQuery

• Slecting page elements
• CSS Selectors
• Use the jQuery object to select elements
• (selector)
• Can use all CSS 2.1 selectors
• Ex (header)
• Typically used to select IDs, classes and
  element selectors
• Example
• www.sis.pitt.edu/perkoski/is1052/selector.html

29
JQuery

• ID Selector
• ltp idkeygtThe key point lt/pgt
• Var keyparagraphdocument.getElementById (key)
• Or
• Var keyparagraph(key)
• Timesaver
• Element Selector
• Var mylist(a)
• Class selector
• Var mystuff (.classthings)
• Selects all elements with same class name

30
JQuery

• Advanced selectors
• Descendent selectors
• (header a)
• Child selectors
• (body gt p)
• Adjacent siblings
• Attribute selectors
• More advanced selectors not supported by all
  browsers just as in CSS

31
JQuery

• Jquery Selections
• Not like the DOM based results
• Cant use traditional DOM methods on them
• Ex innerHTML will not work
• Most DOM based actions have JQuery equivalent
• Automatic Looping
• Jquery functions have looping built-in
• (slideshow img).hide()
• Automatically slects all images inside of div tag
  with ID slideshow and hides images

32
JQuery

• Chaining
• Ability to perform several operations on a
  selection of elements
• Ex
• (popUp).width(300).height(300).text(Message)
  .fadeIn(1000)
• Sets width and height and adds text and fades
  inside div with ID popUp
• Chaining with the period

33
JQuery

• Some functions
• .html
• Works like innerHtml
• Read current element ( can retrieve what is in an
  element)
• Replace info in current element
• (header).html(ltpgt Look at me Im a new
  headerlt/pgt)
• .remove
• Replace or remove an element
• (footer).remove
• Example of functions available
• www.sis.pitt.edu/perkoski/is1052/functions.html

34
JQuery

• What else can Jquery do?
• Select elements
• Change value of elements
• Replace elements
• Remove elements
• Change value of elements attribute
• Add a class to a tag
• Change a CSS property
• Get the value of an attribute

35
JQuery

• Functions
• .addClass and .removeClass
• Adds a specified class to an element
• Of course the newly added CSS class must have
  been written
• .removeClass removes a class
• .css
• Change CSS property
• (body).css(padding,50)
• .attr
• Read/Set an element attribute
• Var attributeinfo(banner img).attr(src)
• Reads and stores the src attribute of the image
  in the banner
• A second argument would set the src

36
JQuery

• Example
• Using .each
• this
• .clone
• .addClass
• .removeClass
• .before
• http//www.sis.pitt.edu/perkoski/is1052/example/p
  ullquote.html

37
JQuery

• Events
• (document).ready(function()
• Code here
• )
• Makes sure the html of the page loads before the
  Javascript runs.
• Two step process
• 1) Identify the page element you wish to respond
  to
• 2) Assign an event and define a function to run
  when event occurs

38
JQuery

• Events
• Mouse Events
• click
• dblclick
• mousedown
• mouseup
• mouseover
• mouseout
• Document Window Events
• Load
• Resize
• Scroll
• Unload
• Form Events
• Submit
• Reset - button
• Change
• Focus enter a field
• Blur exit a field

39
JQuery

• Events
• Keyboard Events
• keypress
• keydown
• Keyup
• Using Events with Jquery
• 1) Select element
• 2) Assign an event
• (a).mouseover() - adds mousever to every link
  
• 3) Pass a function to event
• (a).mouseover(startSomething())
• Or pass an anonymous function
• (a).mouseover (function()
• Code here
• )

40
JQuery

• Example
• desecendent selectors
• .mouseover
• anonymous function
• .addClass
• .mouseout
• Example
• http//www.sis.pitt.edu/perkoski/is1052/example/t
  able.html

41
JQuery

• Events
• When web browser fires an event information is
  stored about the event in an event object
• Vertical and horizontal coordinates
• the element
• when event occurred
• The event object is available to the function
  handling the event
• Ex
• (document).click(function(evt)
• var xPosevt.pageX
• var yPosevt.pageY
• )
• Note evt is not a keyword use any word

42
JQuery

• Stopping an events normal behavior
• Evt. preventDefault()
• Ex. To prevent a link being clicked and moving
  off the page