1. Dick Steflik Binghamton University
Javascript
Dick Steflik
Binghamton University

2. What we’re going to do Lesson 1 Lesson 2 Lesson 3
Pretest & Review of Javascript Basics
Lesson 2
Event Handling
Lesson 3
HTML Forms Validation

3. Javascript Basics Review
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. JavaScript…Java ?
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. <SCRIPT>…</SCRIPT>
<SCRIPT language=…. src=……></SCRIPT>
The <SCRIPT> tag indicates to the browser the beginning of an embedded script; </SCRIPT> 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 . <! >
For commenting your JavaScript use the /*…*/ or //

14. <SCRIPT> <SCRIPT LANGUAGE=“JavaScript”>
<!-- start hiding code from old browsers>
Your
Javascript
Code
Goes
Here
// Stop Hiding code -->
</SCRIPT>

15. Programming Fundamentals
Value Types
String “Sample”
Number , 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 Creating
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 0 based - myarray[0] is first element
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 - myarray[0] 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 = {x:4 , y:5} // 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-whitespace
\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 browser’s 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 user’s 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
<input name=bt1 type=button value=ok onClick=“acb( );”>
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
<img name=ball src=images/ball.gif onAbort=“alert(‘You missed a nice picture’)”>

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
<form>
Color: <select onChange=“processSelection()”>
<option value=“R”>Red
<option value=“G”>Green
<option value=“B”>Blue
</select>
</form>

38. onClick
Used with button, checkbox,link, radio, reset, and submit objects.
<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >

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.
<body bgcolor=“lightgrey” onBlur=“document.bgColor=‘black’ onFocus=“document.bgColor=‘white’” >

41. onLoad Activated when the body, frameset, or image is loaded
Used with window, frame and image objects (use with <body ….><frameset ….> and <img ...>)
Activated when the body, frameset, or image is loaded
<img name=spinball src=images/spinball.gif onLoad=“startAnimation(this)”>

42. onMouseOut and onMouseOver
Used with area and link objects
user moves mouse off of an area or link
<map name=flower>
<area name=top coords=“0,0,200,300 href=“javascript:displayMessage()”
onMouseOver=“self.status=‘when you see this message click your left mouse button’ ;
return true”
onMouseOut=“self.status = ‘’ ; return true”>

43. <form onReset=“alert(‘the form has been reset’)” >
Used with form objects
<form onReset=“alert(‘the form has been reset’)” >

44. <input type=text name=line onSelect=“showHelp()” >
Used with text and textarea objects
run some Javascript whenever a user selects a piece of text in a text or textarea object
<input type=text name=line onSelect=“showHelp()” >

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. <body onUnload=“cleanup()” >
Just like onLoad but the handler is run when the window/frame is exited
<body onUnload=“cleanup()” >

47. Lesson 3
HTML Forms Handling

48. the Form object
Tag : <form name = n method = get|post action=URL>
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: <input name=name type=fieldtype ….>
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
* doesn’t apply to hidden fields

51. Additional Events onKeyDown = onKeyUp =
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: Methods: Additional events
checked - true if checked, false otherwise; setting doesn’t 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: Methods: Additional events
checked - true if checked, false otherwise; setting doesn’t 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: Methods: length - number of option elements
option[ ] - element array of the options tags
name - name attribute of the tag
selectedIndex - index of selected option
options[i].defaultSelected -
options[i].index
options[I].selected
Methods:
blur( ) -
focus() -
handleEvent( ) -