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 end
  of 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)

17
JavaScript Syntax

• Functions
• Function functionName()
• JS Statements
• Sample
• http//www.sawmac.com/missing/javascript/tutorials
  /examples/chapter03/complete_3.2.html
• More with using the Date object
• http//www.elated.com/articles/working-with-dates/
  
• 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.