DHTML: Dynamic HTML Internet Technology1

What is DHTML? A collection of enhancements to HTML ► To create dynamic and interactive websites Combination of ► Static Markup language (e.g., HTML) ► Client-side Scripting language (e.g., JavaScript) ► Presentation Definition Language (e.g., CSS) ► Document Object Model To allow programs to manipulate content/structure/style of documents  ExampleExample 2

JavaScript A light-weight, client-side programming language ► Designed to add interactivity to HTML Create dynamic content  generate HTML codes on the fly React to events (e.g., user action)  Popup message, display status, open & close windows Validate data  do simple calculations on the fly, manipulate forms ► Embedded in the HTML code ► Easy to learn & use ► Every HTML element, Document and browser Window are Objects Objects have properties that can be manipulated to control document appearance, content and browser behavior ► Event handlers can provide interaction e.g., onClick, onFocus, onBlur, onMouseOver Internet Technology 3

How to write JavaScript In an external file ► Add a link to the external javascript file in the head section ► Inside ► Starts with ► Ends with ► // starts a comment till the end of line ► /* and */ for multi-line comments In Body text ► Starts with ► Ends with  ExampleExample 4

Internet Technology How to write JavaScript ► JavaScript is Case-Sensitive ► JavaScript Statements Tell browser what to do End with semicolon (optional) OR end-of line.  e.g. document.write(“Hello, World!”); ► Use var to declare variablesvariables ► Use operators (e.g., =, +, -, *, /) to manipulate values.operators ► Use function to declare functions function message(txt) { var label = “Warning”; alert = label + “: “ + txt; }  ExampleExample 5

Internet Technology JavaScript: Events & Objects ► Events Events User actions that trigger JavaScript  OnClick: A mouse click  OnMouseOver: A mouse over an HTML element  OnLoad: Page loading ► Objects Objects Things that have properties and methods Properties  Values associated with an object  e.g., String object has “length” property Methods  Values associated with an object  e.g., String object has “toLowercase” property  Example: Mouse events & String objectMouse events & String object  Example: JavaScript & CSSJavaScript & CSS  Example: iframe navigationiframe navigation 6