Advanced Javascript Dick Steflik Binghamton University What were

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 Java. Script • 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 Live. Script 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 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.

Java. Script…Java ? • There is no relationship other than the fact that Java and Java. Script resemble each other (and C++) syntactically • Java. Script 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 Java. Script 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 Java. Script 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

<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

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 Java. Script use the /*…*/ or //

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

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 my. Name – definition and initialization can be combined • var my. Name = “Dick”

Arrays • One dimensional arrays – var myarray = new Array( ) //empty array – var myarray 1 = new Array(10) // 10 elements – var myarray 2 = 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 Reg. Exp( ) 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, W Match any wordnon-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

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

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 history link anchor textarea password layer radio checkbox document form button reset submit location applet toolbar image file. Upload select option area

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 = “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

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 Text Object = HTML text tag B l u r () default. Value form name Select() type focus() value handle. Event Red - gettable and settable

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 • <input name=bt 1 type=button value=ok on. Click=“acb( ); ”> – 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”);

Events • • • • on. Abort on. Blur on. Change on. Click on. Error on. Focus on. Load on. Mouse. Out on. Mouse. Over on. Reset on. Select on. Submit on. Unload

on. Abort • Activated when a user aborts the loading of an image <img name=ball src=images/ball. gif on. Abort=“alert(‘You missed a nice picture’)”>

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

on. Change • Used with select, text and textarea objects • use instead of on. Blur to validate only if a value has changed <form> Color: <select on. Change=“process. Selection()”> <option value=“R”>Red <option value=“G”>Green <option value=“B”>Blue </select> </form>

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

on. Error • 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 Java. Script generated errors

on. Focus • Used with frame, select, textarea and window objects. • Just the opposite of on. Blur; i. e. invoked when the object gets focus. <body bgcolor=“lightgrey” on. Blur=“document. bg. Color=‘black’ on. Focus=“document. bg. Color=‘white’” >

on. Load • 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 on. Load=“start. Animation(this)”>

on. Mouse. Out and on. Mouse. Over • 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: display. Message()” on. Mouse. Over=“self. status=‘when you see this message click your left mouse button’ ; return true” on. Mouse. Out=“self. status = ‘’ ; return true”>

on. Reset • Used with form objects <form on. Reset=“alert(‘the form has been reset’)” >

on. Select • 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 on. Select=“show. Help()” >

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

on. Unload • Just like on. Load but the handler is run when the window/frame is exited <body on. Unload=“cleanup()” >

Lesson 3 HTML Forms Handling

the Form object • Tag : <form name = n method = get|post action=URL> • 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 – handle. Event( ) – 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: <input name=name type=fieldtype …. > – Properties: • default. Value - 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 • handle. Event( ) * • select( ) * - selects the text in the field * doesn’t apply to hidden fields

Additional Events • on. Key. Down = – as soon as the key is depresses • allows filtering of key strokes before the character is displayed • on. Key. Up = – as soon as key is released • on. Key. Up = signals the end of a key down and a key up sequence

Carriage returns. . . • Forewarned is forearmed…. – Windows – Mac – Unix rn r 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 – handle. Event( ) - • Additional events– on. Mouse. Down = – on. Mouse. Up =

checkbox object • Properties: – – – checked - true if checked, false otherwise; setting doesn’t cause a click default. Checked - 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( ) – handle. Event( ) - • Additional events – on. Mouse. Down = – on. Mouse. Up =

radio object • one of n choices • Properties: – – – checked - true if checked, false otherwise; setting doesn’t cause a click default. Checked - 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( ) – handle. Event( ) - • Additional events – on. Mouse. Down = – on. Mouse. Up =

select object • Properties: – – – – length - number of option elements option[ ] - element array of the options tags name - name attribute of the tag selected. Index - index of selected options[i]. default. Selected options[i]. index options[I]. selected • Methods: – blur( ) – focus() – handle. Event( ) -

Lesson 4 Advanced Forms Handling

Lesson 5 Javascript & Database Interactivity

Lesson 6 Dynamic HTML

Lesson 7 Animation

Lesson 8 Wrap-up and Exam