Advanced Javascript

1. Advanced Javascript Dick Steflik Binghamton University

2. 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

3. 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

4. Lesson 1 Javascript Basics Review

5. 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

6. 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

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

8. 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.

9. 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

10. 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

11. 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

12. 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

13. <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

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

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

16. 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

17. 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”

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

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

32. Lesson 2 Event Handling

33. 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

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

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

36. 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’)”>

37. 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

38. 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>

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

40. 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

41. 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’” >

42. onLoad • 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)”>

43. 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”>

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

45. onSelect • 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()” >

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

47. onUnload • Just like onLoad but the handler is run when the window/frame is exited <body onUnload=“cleanup()” >

48. Lesson 3 HTML Forms Handling

49. 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 • handleEvent( ) • reset( ) - reset all elements to initial value • submit( ) - submit to server for processing (like submit button)

50. Text Based Objects • text • password • textarea • hidden