Embed Size (px)
Citation preview
DHTML:Dynamic HTML
Internet Technology 1
Internet Technology
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
Example
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
Internet Technology
How to write JavaScript In an external file
► Add a link to the external javascript file in the head section
► <script type=“text/javascript” src=“myjslib.js”></script> Inside <head></head>
► Starts with <script type=“text/javaScript"> ► Ends with </script>► // starts a comment till the end of line► /* and */ for multi-line comments
In Body text► Starts with <script type=“text/javascript”>► Ends with </script>
Example
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 variables► Use operators (e.g., =, +, -, *, /) to manipulate values.► Use function to declare functions
function message(txt) { var label = “Warning”; alert = label + “: “ + txt;}<a href=“#” onMouseOver=“message(‘Hello’);”>
Example5
Internet Technology
JavaScript: Events & Objects► Events
• User actions that trigger JavaScript OnClick: A mouse click OnMouseOver: A mouse over an HTML element OnLoad: Page loading
► 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 object Þ Example: JavaScript & CSS Þ Example: iframe navigation
6
