Extending HTML CPSC 120 Principles of Computer Science April 9, 2012

HTML Pages are Static Text!  An HTML page contains markup tags that control the display of the page data.  HTML links allow user navigation but do not change the page content, display style, etc.  Various methods were proposed for allowing active “scripts” to be included in HTML pages.  Most common methods are including CSS and Javascript. HTML 5 will have more features!  You can also dynamically generate page content using server-side scripting. See our textbook.

Overview of Javascript  Javascript is a programming language, loosely based on Sun Microsystems Java, describing commands added to an HTML page as a “script”.  A script is executed by the web browser. It is a client-side program, running locally on your computer.  Javascript is interpreted by your web browser, first reading, decoding, then carrying out the script actions.  Javascript “knows” about Web page structure via the Document Object Model or DOM. This includes forms, backgrounds, buttons, links, inputs, etc.  Javascript includes common program structures such as variables, assignments, loops, conditionals, etc. Same idea as PBASIC but without mechanicals.

Javascript Design Features  JS is client-side so security is a fundamental concern. Most JS scripts cannot directly access local disk files, send , etc.  JS scripts are active ONLY on the page where they are located. You cannot “refer” across pages to variables.  JS connects to the DOM so you can access and set values for page content, input fields, colors, etc.  JS can display alert dialogs, open child windows, and react to specific key and mouse actions.  JS can modify page characteristics dynamically, changing the display while the user is viewing it.  Common JS actions are button rollovers, image manipulation and movement, input form validation, slide shows, and navigation.

DOM Hierarchy

DOM Objects For HTML Pages  Document: entire HTML page contents  Document objects such as anchors, forms, buttons, tables, etc located inside the document. These have names and ids used by JS to refer to them for access, making changes, etc.  For any given object, it has attributes which the HTML codes like We can use Javascript to access and change those attributes when we invoke the script. We can use Javascript to access and change those attributes when we invoke the script.

Forms and Form Elements Forms are DOM objects that include input boxes, buttons, etc that allow user input on HTML pages with some automated actions: Check User Data Check User Data </form>

Javascript Access to DOM We use a dot notation to access items in the DOM using Javascript. Dots indicate we are moving lower in the hierarchy, ending with attributes and values at the lowest level. Examples: document.body.bgColor refers to the current background color of my page. We can change this by a JS assignment statement: document.body.bgColor = ‘#ff0000’; document.body.bgColor = ‘#ff0000’; Or use the built-in DOM method setAttribute: document.body.setAttribute(‘bgColor’, ‘#ff0000’); document.body.setAttribute(‘bgColor’, ‘#ff0000’); To immediately access a lower level document element, say an img: we can assign it an id then use code like this: document.getElementById(‘myImage’).src=‘lolcat.jpg’; we can assign it an id then use code like this: document.getElementById(‘myImage’).src=‘lolcat.jpg’;

Notice Javascript Uses Functions  JS built-in commands often take the form of mathematical functions: f(x) or f(x,y).  So, to invoke an alert dialog box we use: alert(‘Alert message goes here’); alert(‘Alert message goes here’);  The string supplied to the function is called a parameter. Parameters can be strings, numbers, or even DOM objects.  Functions can also return values so we often return a true or false value in our code: function doAlert() { alert(‘Caution: input field empty!’); return false; } function doAlert() { alert(‘Caution: input field empty!’); return false; }

Built-in Javascript  Remember, JS is interpreted by the browser so it needs to be fed our commands in some way.  We code our JS actions as functions and then invoke them (much like subroutines in PBASIC) when desired.  A common method is to invoke a JS functions when some user action is done on our page such as clicking a button, loading the page itself, etc. Example: Say something! Say something! Here we are enhancing an HTML button object which has text Say something! When the button is clicked, the browser invokes the onClick handler which calls the built-in JS alert function. This displays a dialog box. The words in the box are the string parameter to alert().

Javascript using section  We often need to perform more elaborate operations in a page so we collect some JS functions which can be called when needed.  The functions are inside a script tag like so: … our custom JS functions go here … … our custom JS functions go here …  We try to create functions that accept appropriate parameters and return useful values.  Example: // A comment. Function to test if parameter is empty string or not. // A comment. Function to test if parameter is empty string or not. function checkEmptyString (myString) { if ( myString.length == 0 ) return true; else return false; // Respond } // End of function </script>

Working with Javascript  The syntax is more complex than seems necessary. Fussy issues of ==, semi-colon, etc.  Errors in JS can be hard to debug. Typically something just does not work as desired. Where is the trouble? We have a JS console in Firefox and Firebug is a more complex debugger tool.  Users worried about security can turn off JS in their browser so your scripts will not work.  Different browsers may interpret JS in slightly different ways.  CSS can often provide a better solution to style changes, rollovers, etc.