DHTML Javascript Internet Technology
What is DHTML? A collection of enhancements to HTML Combination of 11/13/2018 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 Defines the object-oriented model of a document To allow programs to manipulate content/structure/style of documents Example Internet Technology
Document Object Model World Wide Web Consortium (W3C) standard 11/13/2018 Document Object Model World Wide Web Consortium (W3C) standard A standard for accessing/updating documents e.g., Core DOM, XML DOM, HTML DOM HTML DOM Object model & programming interface for HMTL Defines Objects HTML elements Properties Values (e.g., text) Methods Actions (e.g. add/delete/change) Events User Interaction (e.g., mouse click) Javascript with HTML DOM React to HTML events Change/add/remove HTML elements & attributes Change CSS styles Examples: #1, #2 Internet Technology
JavaScript A light-weight, client-side programming language 11/13/2018 JavaScript A light-weight, client-side programming language Designed to add interactivity to HTML React to events (e.g., user action) onClick, onFocus, onBlur, onMouseOver Create dynamic content Generate HTML codes on the fly Validate data Do simple calculations on the fly, manipulate forms Embedded in the HTML code Relatively 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 Syntax: <ELEMENT EVENT=“JAVASCRIPT”> e.g., <button onClick=“alert(‘Hello, World!’)”>Click It</button> Example Internet Technology
How to write JavaScript 11/13/2018 How to write JavaScript In an external file Add a link to the external javascript file in the head section Old: <script type=“text/javascript” src=“myjslib.js”></script> New: <script src=“myjslib.js”></script> Advantages: HTML/JS separation, code reuse, faster loading when cached Inside <head></head> Starts with <script > and ends with </script> // starts a comment till the end of line /* and */ for multi-line comments In Body section Place the code at the bottom for faster loading Example Internet Technology
How to write JavaScript 11/13/2018 How to write JavaScript JavaScript is Case-Sensitive JavaScript Statements 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 <script> function message(txt) { var label = “Warning”; alert = label + “: “ + txt; } </script> <a href=“#” onMouseOver=“message(‘Hello’);”> Example Internet Technology
JavaScript: Events & Objects 11/13/2018 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 e.g., String object has “toLowercase” property Example: JavaScript & CSS Example: iframe navigation #1, #2, #3 Internet Technology