Advanced Javascript Dick Steflik Binghamton University

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

What we’re going to do (cont.) Lesson 5 –Javascript & Database Interactivity Lesson 6 –Dynamic HTML Cascading Style Sheets, scripting, DOM Lesson 7 –Animation Lesson 8 –Post test

Lesson 1 Javascript Basics Review

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

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

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.

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.

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

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

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

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

… The tag indicates to the browser the beginning of an embedded 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

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 //

Your Javascript Code Goes Here // Stop Hiding code -->

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

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”

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 - myarray[0] is first element

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

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

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

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

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, \WMatch any word\non-word character \s, \SMatch any whitespace/non-whitespace \d, \DMatch any digit/non-digit ^, $require match at beginning/end of a string or in multi-line mode, beginning/end of a line \b, \Brequire a match at a word/non-word boundary ?Optional term : Match zero or one time +Match previous term one or more times

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 | bMatch either a or b (sub)Group sup-expression sub into a single term and remember the text that it matched \nMatch exactly the same chars that were matched by sup-expression number n $nIn replacement strings, substitute the text that matched the nth sub-expression

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

Object Hierarchy window linkanchorlayerformappletimagearea historydocumentlocationtoolbar textradiobuttonfileUploadselect textarea password checkboxreset submit option

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

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

A few examples... window.location = “ –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

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

Object Model defaultValue form name type value Red - gettable and settable = B l u r () focus() handleEvent Select() Text Object HTML text tag

Lesson 2 Event Handling

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 –if the button is click the function abc( ) will be run

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”);

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

onAbort Activated when a user aborts the loading of an image

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

onChange Used with select, text and textarea objects use instead of onBlur to validate only if a value has changed Color: Red Green Blue

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

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

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

onLoad Used with window, frame and image objects (use with and ) Activated when the body, frameset, or image is loaded

onMouseOut and onMouseOver Used with area and link objects user moves mouse off of an area or link <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”>

onReset Used with form objects

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

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

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

Lesson 3 HTML Forms Handling

the Form object Tag : Properties: –action - action attribute of tag –elements[ ] - creeated 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)

Text Based Objects text password textarea hidden

Properties and methods –Tag: –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

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

Carriage returns... Forewarned is forearmed…. –Windows \r\n –Mac\r –Unix\n

Button objects button submit reset checkbox radio

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 =

checkbox object Properties: –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 =

radio object one of n choices Properties: –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 =

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 –options[i].defaultSelected - –options[i].index –options[I].selected Methods: –blur( ) - –focus() - –handleEvent( ) -

Lesson 4 Advanced Forms Handling

Lesson 5 Javascript & Database Interactivity

Lesson 6 Dynamic HTML

Lesson 7 Animation

Lesson 8 Wrap-up and Exam