Building Managing Web Sites Clientside Javascript 10192021 1999

Client-side Scripting • Client-side scripting uses simplified programming languages to add interactivity and conditional behavior to web pages. • Interactivity achieved by embedding code in HTML that manipulates browser’s document object model. Code triggered by events. • Client-side scripting requires the browser to support the scripting language. • Javascript is THE standard for Internet pages. • VBScript can be used in Intranets or other environments where users only use IE 3. 01 +. 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 2

Javascript Overview • Javascript is NOT Java. • Javascript embedded in documents using inline scripts or the <SCRIPT> element. • Preferred method is with <SCRIPT> elements and functions. • Javascript triggered by events -- called event handlers. 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 3

Javascript Events • Mouse events caused by the user (e. g. , on. Mouse. Over, On. Mouse. Out, On. Click) • Keyboard events caused by the user (e. g. , on. Key. Down, on. Key. Press) [HTML 4. 0 standard] • Document events – Document level (on. Load, on. Unload) – Forms (On. Submit, On. Reset) – Form elements (on. Blur, on. Select, On. Change) 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 4

Javascript Overview • Javascript standard is now ECMAScript. • Javascript comes in many flavors. Version 1 and 1. 1 should work ok on most browsers. • Javascript is the foundation of Dynamic HTML. 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 5

Inline Javascript <html> <head> <title>Javascript Status bar</title> </head> <body> <h 2>Test Page</h 2> <a href="valtara. com" On. Mouse. Over="window. status='Great site!'; return true; ">Valtara. com</a> </body> </html> 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 6

Open a New Window <SCRIPT LANGUAGE=JAVASCRIPT> <!-function Open. Window() { str. Features = "toolbar=no, location=no, directories=no, status=yes, sc rollbars=yes, resizeable=yes, copyhistory=no, top=100, l eft=100, width=500, height=300"; obj. New. Window = window. open("http: //valtara. com/", "Request. Window", str. Features); } // --> </SCRIPT>. . . <A HREF="javascript: Open. Window()")>Submit</A> 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 7

Window Closes Itself <SCRIPT LANGUAGE=JAVASCRIPT> <!-function closewindow(which) { self. window. close() } // --> </SCRIPT>. . . <p><a HREF="javascript: closewindow()"><b>Return to Search Page</b></a></p> 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 8

Mouse. Over Graphic Buttons 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 9

Form Validation • Very common use of client-side Javascript. • Validation can occur at two different times: – Field level validation: occurs as user tabs out of field using the field’s onblur event. – Form level validation: occurs when user presses the submit button but before data is sent using the form’s onsubmit event. 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 10

Field Level Validation Example <script Language="javascript"> <!-function Empty. Alert(the. Field, s) { if ( s. length == 0 ) { alert(the. Field. name + " must be completed. ") the. Field. focus() return false } } // --> </script>. . . <input type="text" name="Your. Name" size="30" onblur="Empty. Alert(this, this. value)"> 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 11

Form Level Validation Example <script Language="javascript"> <!-function Form. Check(myform) { if ( myform. YOURNAME. value. length == 0 || myform. EMAIL. value. length == 0 ) { alert("Please complete the name field. "); return false; } } // --> </script>. . . <form method="POST" action="output. asp" on. Submit="return Form. Check(this)"> 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 12

Javascript Considerations • Lots of sample code -- learn the basics and copy, copy! • Microsoft vs. Netscape Javascript incompatibilites are significant. Test, test! • Much documentation not good at showing versioning problems. • If you go into DHTML and need cross-browser support, use Dreamweaver or similar products. 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 13

Javascript Gotchas • Javascript is VERY case sensitive! • “=“ assigns values to a variable, but must use “==“ to determine equality. Thus, experienced Javascript programmers put the constant on the right so it generates a compile error if = is used in place of == (e. g. , 5==x and not x==5) 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 14

Javascript Gotchas • Semicolon placement is important -- all statements should conclude with a semicolon. • For safety’s sake, always enclose blocks of code in braces { } even if the block of code is one line. • Constants should be in uppercase, and variables should start with a lowercase letter and be mixed case (e. g. , Hungarian notation) 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 15

Javascript Resources • ECMAScript specification – http: //www. ecma. ch/STAND/Ecma-262. htm • Netscape Dev. Edge – http: //developer. netscape. com/ • Microsoft MSDN Scripting Page – http: //msdn. microsoft. com/scripting/ 10/19/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 16