Javascript

1
Javascript

• Dick Steflik
• Binghamton University

2
What were going to do

• Lesson 1
• Pretest Review of Javascript Basics
• Lesson 2
• Event Handling
• Lesson 3
• HTML Forms Validation

3
Lesson 1

• Javascript Basics Review

4
What is JavaScript

• Object based (not object oriented) programming
  language
• very limited object creation
• a set of pre-defined objects associated with
• HTML document structure
• many HTML tags constitute JS Objects
• Browser functionality
• provides a limited API to Browser functionality

5
Where did it come from

• Originally called LiveScript at Netscape
• started out to be a server side scripting
  language for providing database connectivity and
  dynamic HTML generation on Netscape Web Servers
• Netscape decided it would be a good thing for
  their browsers and servers to speak the same
  language so it got included in Navigator
• Netscape in alliance w/Sun jointly announced the
  language and its new name Java Script
• Because of rapid acceptance by the web community
  Microsoft forced to include in IE Browser

6
Browser compatibility

• For the most part Java Script runs the same way
  in all popular browsers
• There are a number of areas where there are
  slight differences in how Java Script will run
• There will be a separate set of slides addressing
  these differences and making your pages browser
  neutral.

7
JavaScriptJava ?

• There is no relationship other than the fact that
  Java and JavaScript resemble each other (and C)
  syntactically
• JavaScript is pretty much the de-facto standard
  for client-side scripting (Internet Explorer also
  provides VBScript JScript)
• In Netscape browsers there is an API (Live
  Connect) that allows JavaScript and Java applets
  embedded in the same page to communicate.

8
What can it be used for

• Some pretty amazing things.
• Text animation
• graphic animation
• simple browser based application
• HTML forms submission
• client-side forms data validation (relieving the
  server of this task)
• web site navigation

9
What do I need to get started

• A web browser
• Netscape Navigator 4.x or later
• MS Internet Explorer 3.x or later
• A text Editor
• Wordpad, Notepad
• Vi, Emacs, xemacs

10
Process

• Open your text editor
• create a file containing html and Javascript
• save as text file with file type .htm or .html
• open your browser
• click on file, open file
• locate the file you just created
• open file in browser

11
Putting JavaScript into your HTML

• in an external file
• collect commonly used functions together into
  external function libraries on the server
• added benefit of privacy from all but the most
  curious users
• in-line with your HTML
• as an expression for an HTML tag attribute
• within some HTML tags as Event Handlers

12
ltSCRIPTgtlt/SCRIPTgt

• ltSCRIPT language. srcgtlt/SCRIPTgt
• The ltSCRIPTgt tag indicates to the browser the
  beginning of an embedded script lt/SCRIPTgt
  indicates the end of an embedded script.
• the language attribute indicates the script
  processor to be used
• the src attribute indicates the URL of a file
  on the server containing the script to be
  embedded

13
Scripts

• Since scripts are placed in line with your HTML
  older browsers will attempt to render them as
  text.
• To preclude this hide them in side of an HTML
  comment . lt!-- --gt
• For commenting your JavaScript use the // or
  //

14
ltSCRIPTgt

• ltSCRIPT LANGUAGEJavaScriptgt
• lt!-- start hiding code from old browsersgt
• Your
• Javascript
• Code
• Goes
• Here
• // Stop Hiding code --gt
• lt/SCRIPTgt

15
Programming Fundamentals

• Value Types
• String Sample
• Number 2.52 , 5 , .5
• Boolean true, false
• Null null
• Object - all properties and methods belonging to
  the object or array
• Function - a function definition

16
Variables

• Naming
• start with alpha followed by alphameric (and _)
• Creating
• use the var keyword
• var myName
• definition and initialization can be combined
• var myName Dick

17
Arrays

• One dimensional arrays
• var myarray new Array( ) //empty array
• var myarray1 new Array(10) // 10 elements
• var myarray2 new Array(2,4,6) // 3 elements
  initialized to 2, 4, and 6 respectively
• 0 based - myarray0 is first element

18
User defined objects

• Implemented as associative arrays
• var point new Object() // empty object
• point.x 5 point.y 3 // no longer empty
• var newpoint x4 , y5 // object literal form
• var anotherpoint new Object( )
• anotherpoint newpoint //object assignment

19
User defined functions

• Function definition
• function sum(x,y) return x y
• Function Constructor
• var sum Function(x,y, return x y)
• Function literal format (Javascript 1.2)
• var sum Function(x,y) return x y
• a function assigned to a property of an object is
  called a method of the object
• within the body of a function arguments
  contains an array of the arguements

20
Built-in functions

• Many commonly used functions are built into the
  language for
• string manipulations
• math operations
• built-in object methods
• parsing
• dynamic expression evaluation

21
Regular Expressions

• Javascript 1.2 supports using the same syntax as
  Perl 4
• specified literally asa sequence of
  characterswith forward slashes (/) or as a
  Javascript string passed to the RegExp( )
  constructor

22
Regular Expression Syntax
/n,/r,/t match literal newline, carraige
return, tab \\, \/, \ match a special character
literally, ignoring or escaping its special
meaning Match any one character between the
brackets Match any one character not between
the brackets . Match any character other than the
newline \w, \W Match any word\non-word
character \s, \S Match any whitespace/non-whitespa
ce \d, \D Match any digit/non-digit , require
match at beginning/end of a string or in
multi-line mode, beginning/end of a line \b,
\B require a match at a word/non-word
boundary ? Optional term Match zero or one
time Match previous term one or more times
23
Regular Expressions (more)
Match term zero or more times n Match
pervious term n times n, Match previous term n
or more times n,m Match prev term at least n
time but no more than m times a b Match either
a or b (sub) Group sup-expression sub into a
single term and remember the text that it
matched \n Match exactly the same chars that were
matched by sup-expression number n n In
replacement strings, substitute the text that
matched the nth sub-expression
24
Object Based not Object Oriented

• Javascript treats the browsers objects as a
  pre-defined set of objects to which Javascript
  provides an API.
• Javascript, in addition to being a programming
  language, is meant to be a way to program a
  users browser

25
Object Hierarchy
window
history
document
location
toolbar
link
anchor
layer
form
applet
image
area
text
radio
button
fileUpload
select
textarea
checkbox
reset
option
password
submit
26
Objects

• window - the current browser window
• window.history - the Netscape history list
• window.document - the html document currently in
  the browser client area
• window.location - the browser location field
• window.toolbar - the browser toolbar
• window.document.link - an array containing all of
  the links in the document
• window.document.anchor - an array of all the
  anchor points in the document

27
Objects (more)

• Window.document.layer - a named document layer
• window.document.applet - a named java applet area
• window.document.image- a named image tag
• window.document.area - a named area
• window.document.form - a named form or the
  default form
• ect, ect

28
A few examples...

• window.location http//www.yahoo.com
• will take you to the specified URL (like a goto)
• window.history.back()
• back( ) is a method on history
• will be like clicking the back button in Nav 3
• in Nav 4 will take you back to prev window
• window.history.goto(1)
• takes you back to first URL in history array

29
The Object Model

• It is very important to understand the object
  model
• each object has its own properties, some of which
  are read only some of which you can be set
  directly by assignment (as location)
• each object also has a set of behaviors called
  methods

30
Object Model
Text Object HTML text tag

B l u r ()
defaultValue form name type value
Select()
focus()
Red - gettable and settable
handleEvent
31
Lesson 2

• Event Handling

32
Object Event Handlers

• Most of the objects that make up the Document
  Object Model respond to asynchronous, user
  generated events through predefined event
  handlers that handle the event and transfer
  control to a user provided event handling
  function
• Each object has particular events that they will
  respond to
• the way you specify an event handler is by adding
  an additional attribute to the HTML tag that
  specifies the event and the particular handler
• ltinput namebt1 typebutton valueok
  onClickacb( )gt
• if the button is click the function abc( ) will
  be run

33
Alert
The Alert function is useful in user
notification and debugging of Javascripts. Pops
up a message in a pop-up dialog box Ex,
alert(help, help, help)
34
Events

• onAbort
• onBlur
• onChange
• onClick
• onError
• onFocus
• onLoad
• onMouseOut
• onMouseOver
• onReset
• onSelect
• onSubmit
• onUnload

35
onAbort

• Activated when a user aborts the loading of an
  image

ltimg nameball srcimages/ball.gif
onAbortalert(You missed a nice picture)gt
36
onBlur

• Used with frame, select, text, textarea and
  window objects
• invoked when an object loses focus
• use with select, text and textarea for data
  validation

37
onChange

• Used with select, text and textarea objects
• use instead of onBlur to validate only if a value
  has changed

ltformgt Color ltselect onChangeprocessSelection()
gt ltoption valueRgtRed ltoption
valueGgtGreen ltoption valueBgtBlue lt/selectgt lt
/formgt
38
onClick

• Used with button, checkbox,link, radio, reset,
  and submit objects.

ltinput typebutton namebtn1 valueClick Me
onClickalert(button was clicked gt
39
onError

• Used with image and window objects to invoke a
  handler if an error occurs while an image or
  window is loading.
• Setting window.onerror null will prevent users
  from seeing JavaScript generated errors

40
onFocus

• Used with frame, select, text, textarea and
  window objects.
• Just the opposite of onBlur i.e. invoked when
  the object gets focus.

ltbody bgcolorlightgrey onBlurdocument.bgColor
black onFocusdocument.bgColorwhite gt
41
onLoad

• Used with window, frame and image objects (use
  with ltbody .gtltframeset .gt and ltimg ...gt)
• Activated when the body, frameset, or image is
  loaded

ltimg namespinball srcimages/spinball.gif
onLoadstartAnimation(this)gt
42
onMouseOut and onMouseOver

• Used with area and link objects
• user moves mouse off of an area or link

ltmap nameflowergt ltarea nametop
coords0,0,200,300 hrefjavascriptdisplayMessag
e() onMouseOverself.statuswhen you
see this message click your left mouse button
return true onMouseOutself.statu
s return truegt
43
onReset

• Used with form objects

ltform onResetalert(the form has been reset) gt
44
onSelect

• Used with text and textarea objects
• run some Javascript whenever a user selects a
  piece of text in a text or textarea object

ltinput typetext nameline onSelectshowHelp()
gt
45
onSubmit

• Use with form objects to run a handler whenever a
  form has been submitted.
• Usefull to validate all fields prior to actual
  submission

46
onUnload

• Just like onLoad but the handler is run when the
  window/frame is exited

ltbody onUnloadcleanup() gt
47
Lesson 3

• HTML Forms Handling

48
the Form object

• Tag ltform name n method getpost
  actionURLgt
• Properties
• action - action attribute of tag
• elements - created from like named form
  elements
• encoding - ENCTYPE attribute of tag
• length - length of an elements array
• method - method attribute of tag
• name - name attribute of tag
• target - target attribute of tag, where to
  display response page
• Methods
• handleEvent( )
• reset( ) - reset all elements to initial value
• submit( ) - submit to server for processing (like
  submit button)

49
Text Based Objects

• text
• password
• textarea
• hidden

50
Properties and methods

• Tag ltinput namename typefieldtype .gt
• Properties
• defaultValue - value attribute of tag
• form - form that this field is an element of
• name - name attribute of tag
• type - type attribute of tag (text, password,
  textarea, hidden)
• value - user entered value or value attribute of
  tag
• Methods
• blur( ) - unselects any selected text
• focus( ) - readies the field for user input
• handleEvent( )
• select( ) - selects the text in the field

doesnt apply to hidden fields
51
Additional Events

• onKeyDown
• as soon as the key is depresses
• allows filtering of key strokes before the
  character is displayed
• onKeyUp
• as soon as key is released
• onKeyUp signals the end of a key down and a key
  up sequence

52
Carriage returns...

• Forewarned is forearmed.
• Windows \r\n
• Mac \r
• Unix \n

53
Button objects

• button
• submit
• reset
• checkbox
• radio

54
button, submit and reset

• Properties
• name - name attribute of tag
• type - type attribute of tag (button submit
  reset )
• value - value attribute of tag (text on face of
  button )
• Methods
• click( ) - simulates the button being clicked on
• handleEvent( ) -
• Additional events-
• onMouseDown
• onMouseUp

55
checkbox object

• Properties
• checked - true if checked, false otherwise
  setting doesnt cause a click
• defaultChecked - true if CHECKED attribute is
  present, false otherwise
• name - name attribute of the tag
• type - type attribute of the tag
• value - value attribute of the tag
• Methods
• click( ) -
• handleEvent( ) -
• Additional events
• onMouseDown
• onMouseUp

56
radio object

• one of n choices
• Properties
• checked - true if checked, false otherwise
  setting doesnt cause a click
• defaultChecked - true if CHECKED attribute is
  present, false otherwise
• name - name attribute of the tag
• type - type attribute of the tag
• value - value attribute of the tag
• Methods
• click( ) -
• handleEvent( ) -
• Additional events
• onMouseDown
• onMouseUp

57
select object

• Properties
• length - number of option elements
• option - element array of the options tags
• name - name attribute of the tag
• selectedIndex - index of selected option
• optionsi.defaultSelected -
• optionsi.index
• optionsI.selected
• Methods
• blur( ) -
• focus() -
• handleEvent( ) -