JavaScript - PowerPoint PPT Presentation

1 / 42
About This Presentation
Title:

JavaScript

Description:

INFSCI 1052. Example: Use of searching for h2 within section of ID of main .prepend a class ... Using a transparent .png. http://www.sis.pitt.edu/~perkoski ... – PowerPoint PPT presentation

Number of Views:54
Avg rating:3.0/5.0
Slides: 43
Provided by: per6
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com