Extending HTMLExtending HTML

CPSC 120CPSC 120

Principles of Computer SciencePrinciples of Computer Science

April 9, 2012April 9, 2012

HTML Pages are Static Text!HTML Pages are Static Text!

An HTML page contains markup tags that control An HTML page contains markup tags that control the display of the page data.the display of the page data.

HTML links allow user navigation but do not HTML links allow user navigation but do not change the page content, display style, etc.change the page content, display style, etc.

Various methods were proposed for allowing active Various methods were proposed for allowing active “scripts” to be included in HTML pages. “scripts” to be included in HTML pages.

Most common methods are including CSS and Most common methods are including CSS and Javascript. HTML 5 will have more features!Javascript. HTML 5 will have more features!

You can also dynamically generate page content You can also dynamically generate page content using using server-sideserver-side scripting. See our textbook. scripting. See our textbook.

Overview of JavascriptOverview of Javascript

JavascriptJavascript is a programming language, loosely based on is a programming language, loosely based on Sun Microsystems Java, describing commands added to Sun Microsystems Java, describing commands added to an HTML page as a “script”. an HTML page as a “script”.

A script is executed by the web browser. It is a A script is executed by the web browser. It is a client-sideclient-side program, running locally on your computer.program, running locally on your computer.

Javascript is Javascript is interpretedinterpreted by your web browser, first by your web browser, first reading, decoding, then carrying out the script actions.reading, decoding, then carrying out the script actions.

Javascript “knows” about Web page structure via the Javascript “knows” about Web page structure via the Document Object Model or DOM. This includes forms, Document Object Model or DOM. This includes forms, backgrounds, buttons, links, inputs, etc.backgrounds, buttons, links, inputs, etc.

Javascript includes common program structures such as Javascript includes common program structures such as variables, assignments, loops, conditionals, etc. variables, assignments, loops, conditionals, etc. Same Same idea as PBASIC but without mechanicals.idea as PBASIC but without mechanicals.

Javascript Design FeaturesJavascript Design Features

JS is client-side so security is a fundamental concern. JS is client-side so security is a fundamental concern. Most JS scripts cannot directly access local disk files, Most JS scripts cannot directly access local disk files, send email, etc.send email, etc.

JS scripts are active ONLY on the page where they are JS scripts are active ONLY on the page where they are located. You cannot “refer” across pages to variables.located. You cannot “refer” across pages to variables.

JS connects to the DOM so you can access and set JS connects to the DOM so you can access and set values for page content, input fields, colors, etc.values for page content, input fields, colors, etc.

JS can display alert dialogs, open child windows, and JS can display alert dialogs, open child windows, and react to specific key and mouse actions.react to specific key and mouse actions.

JS can modify page characteristics dynamically, JS can modify page characteristics dynamically, changing the display while the user is viewing it.changing the display while the user is viewing it.

Common JS actions are button rollovers, image Common JS actions are button rollovers, image manipulation and movement, input form validation, slide manipulation and movement, input form validation, slide shows, and navigation. shows, and navigation.

DOM HierarchyDOM Hierarchy

DOM Objects For HTML PagesDOM Objects For HTML Pages

Document: entire HTML page contentsDocument: entire HTML page contents

Document objects such as anchors, forms, Document objects such as anchors, forms, buttons, tables, etc located inside the document. buttons, tables, etc located inside the document. These have names and ids used by JS to refer to These have names and ids used by JS to refer to them for access, making changes, etc.them for access, making changes, etc.

For any given object, it has attributes which the For any given object, it has attributes which the HTML codes like HTML codes like

<h1 id=”title” background-color=”blue”> We can <h1 id=”title” background-color=”blue”> We can use Javascript to access and change those use Javascript to access and change those attributes when we invoke the script. attributes when we invoke the script.

Forms and Form ElementsForms and Form Elements

Forms are DOM objects that include input boxes, Forms are DOM objects that include input boxes, buttons, etc that allow user input on HTML pages with buttons, etc that allow user input on HTML pages with some automated actions:some automated actions:

<form id="orderform" action="process.php" method="post" <form id="orderform" action="process.php" method="post" onSubmit="return validateForm();">onSubmit="return validateForm();">

<input type="text" id="firstname" size="20" <input type="text" id="firstname" size="20" maxlength="40" value="">maxlength="40" value="">

<button type="submit">Check User Data</button><button type="submit">Check User Data</button>

</form></form>

Javascript Access to DOMJavascript Access to DOMWe use a We use a dot notationdot notation to access items in the DOM using Javascript. to access items in the DOM using Javascript. Dots indicate we are moving lower in the hierarchy, ending with Dots indicate we are moving lower in the hierarchy, ending with attributes and values at the lowest level.attributes and values at the lowest level.

Examples: document.body.bgColor refers to the current background Examples: document.body.bgColor refers to the current background color of my page. We can change this by a JS assignment statement: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: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:To immediately access a lower level document element, say an img:

<img id=”myImage” src=”junk.png” alt=”junk”><img id=”myImage” src=”junk.png” alt=”junk”>

we can assign it an id then use code like this: we can assign it an id then use code like this: document.getElementById(‘myImage’).src=‘lolcat.jpg’;document.getElementById(‘myImage’).src=‘lolcat.jpg’;

Notice Javascript Uses FunctionsNotice Javascript Uses Functions JS built-in commands often take the form of mathematical JS built-in commands often take the form of mathematical

functions: f(x) or f(x,y).functions: f(x) or f(x,y).

So, to invoke an alert dialog box we use: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 The string supplied to the function is called a parameterparameter. . Parameters can be strings, numbers, or even DOM Parameters can be strings, numbers, or even DOM objects.objects.

Functions can also return values so we often return a true Functions can also return values so we often return a true or false value in our code:or false value in our code:

function doAlert() {function doAlert() { alert(‘Caution: input field empty!’); alert(‘Caution: input field empty!’);

return false;return false;}}

Built-in JavascriptBuilt-in Javascript Remember, JS is interpreted by the browser so it needs Remember, JS is interpreted by the browser so it needs

to be fed our commands in some way.to be fed our commands in some way. We code our JS actions as functions and then invoke We code our JS actions as functions and then invoke

them (much like subroutines in PBASIC) when desired.them (much like subroutines in PBASIC) when desired. A common method is to invoke a JS functions when A common method is to invoke a JS functions when

some user action is done on our page such as clicking a some user action is done on our page such as clicking a button, loading the page itself, etc. Example:button, loading the page itself, etc. Example:

<button onClick="alert('Hello there!');">Say something!</button><button onClick="alert('Hello there!');">Say something!</button>

Here we are enhancing an HTML button object which has Here we are enhancing an HTML button object which has text Say something! When the button is clicked, the text Say something! When the button is clicked, the browser invokes the onClick handler which calls the built-browser invokes the onClick handler which calls the built-in JS alert function. This displays a dialog box. The in JS alert function. This displays a dialog box. The words in the box are the string parameter to alert().words in the box are the string parameter to alert().

Javascript using <script> sectionJavascript using <script> section We often need to perform more elaborate operations in a We often need to perform more elaborate operations in a

page so we collect some JS page so we collect some JS functionsfunctions which can be called which can be called when needed.when needed.

The functions are inside a script tag like so:The functions are inside a script tag like so: <script type=“text/JavaScript”><script type=“text/JavaScript”> … … our custom JS functions go here …our custom JS functions go here … </script></script> We try to create functions that accept appropriate We try to create functions that accept appropriate

parameters and return useful values.parameters and return useful values. Example:Example:<script type=“text/JavaScript”><script type=“text/JavaScript”> // 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) {function checkEmptyString (myString) {if ( myString.length == 0 ) return true; else return false; // Respondif ( myString.length == 0 ) return true; else return false; // Respond

} // End of function} // End of function</script></script>

Working with JavascriptWorking with Javascript

The syntax is more complex than seems The syntax is more complex than seems necessary. Fussy issues of ==, semi-colon, etc.necessary. Fussy issues of ==, semi-colon, etc.

Errors in JS can be hard to debug. Typically Errors in JS can be hard to debug. Typically something just does not work as desired. Where something just does not work as desired. Where is the trouble? We have a JS console in Firefox is the trouble? We have a JS console in Firefox and Firebug is a more complex debugger tool.and Firebug is a more complex debugger tool.

Users worried about security can turn off JS in Users worried about security can turn off JS in their browser so your scripts will not work.their browser so your scripts will not work.

Different browsers may interpret JS in slightly Different browsers may interpret JS in slightly different ways. different ways.

CSS can often provide a better solution to style CSS can often provide a better solution to style changes, rollovers, etc.changes, rollovers, etc.