DHTML DHTML DHTML stands for Dynamic HTML HTML

DHTML • DHTML stands for Dynamic HTML – HTML supports Java. Script – HTML

DHTML • DHTML is the art of combining HTML, Java. Script, DOM, and CSS

Javascript • Java. Script can create dynamic HTML content. – You can place any

Script tag • In HTML, Java. Script code must be inserted between <script> and

Javascript in <head> <html><head> <script> function my. Function() { document. get. Element. By. Id("demo").

Javascript in <body> • <html> <body> <h 1>My Web Page</h 1> <p id="demo">A Paragraph</p>

External Javascript • <html> <body> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="my. Script. js"></script> </body> </html> • my. Script.

Variables • Java. Script allows you to declare and use variables to store values.

Which one is legal? My_variable $my_variable 1 my_example _my_variable @my_variable My_variable_example ++my_variable %my_variable #my_variable

Data Types • Java. Script allows the same variable to contain different types of

Javascript Objects • • Window Document Form History Navigator Image Array etc….

Window object • Methods – Alert – Prompt – Confirm

Using the alert() Method <head> <script language=“Java. Script”> alert(“An alert triggered by Java. Script”);

Using the confirm() Method <head> <script language=“Java. Script”> confirm(“Are you happy with the class?

Using the prompt() Method <head> <script language=“Java. Script”> prompt(“What is your student id number?

Three methods <script language="Java. Script"> alert("This is an Alert method"); confirm("Are you OK? ");

Variable on-the-fly <head> <script language=“Java. Script”> Variable declaration var id; id = prompt(“What is

Javascript Functions alert is the name of a predefined function in the Java. Script

General Function Definition Syntax function Function. Name ( parameter 1, . . . ,

Function parameters • Parameter: – Variable used within a function • Placing a parameter

Keyword function User-defined function name 0 or more parameters Opening and closing brackets

Sample Function <head> <title>Function Example</title> Function <script type="text/javascript"> Definition function Print. Message() { alert("A

DOM(Document Object Model) • The HTML DOM is a standard object model and programming

WHY DOM? • Document Object Model – Your web browser builds a model of

This is what the browser reads <html> <head> <title>Sample DOM Document</title> </head> <body> <h

Document This is a drawing of the model that the browser is working with

DOM • The HTML DOM can be accessed with Java. Script (and with other

Why is this useful? • Because we can access the model too! – the

Example-Change an element • The following example changes the content of an h 1

Change an attribute • The following example changes the src attibute of an img

Finding HTML Elements • document. get. Element. By. Id( ) -Find an element by

Changing HTML Elements • element. inner. HTML=Change the inner HTML of an element •

Slides: 35

Download presentation

DHTML

DHTML • DHTML stands for Dynamic HTML – HTML supports Java. Script – HTML supports the Document Object Model (DOM) – HTML supports HTML Events – HTML supports Cascading Style Sheets (CSS) • DHTML is about using these features, to create dynamic and interactive web pages.

DHTML • DHTML is the art of combining HTML, Java. Script, DOM, and CSS – Java. Script is the most popular scripting language on the internet, and it works in all major browsers. • DHTML is about using Java. Script to control, access and manipulate HTML elements. – The HTML DOM(Document Object Model) defines a standard way for accessing and manipulating HTML documents. • DHTML is about using the DOM to access and manipulate HTML elements. – HTML Events are a part of the HTML DOM. • DHTML is about creating web pages that reacts to (user)events. – CSS defines how to display HTML elements. • DHTML is about using Java. Script and the HTML DOM to change the style and positioning of HTML elements.

Javascript • Java. Script can create dynamic HTML content. – You can place any number of scripts in an HTML document. – Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. • Java. Script can be placed in the <body> and the <head> sections of an HTML page. • Scripts can also be placed in external files. – External scripts are practical when the same code is used in many different web pages. • In Java. Script, the statement: document. write(), is used to write output to a web page.

Script tag • In HTML, Java. Script code must be inserted between <script> and </script> tags. • <html> <body> <script type="text/javascript"> document. write(Date()); </script> </body> </html>

Javascript in <head> <html><head> <script> function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Paragraph changed. "; } </script> </head> <body> <h 1>My Web Page</h 1> <p id="demo">A Paragraph</p> <button type="button" onclick="my. Function()">Try it</button> </body> </html>

Javascript in <body> • <html> <body> <h 1>My Web Page</h 1> <p id="demo">A Paragraph</p> <button type="button" onclick="my. Function()">Try it</button> <script> function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Paragraph changed. "; } </script> </body> </html>

External Javascript • <html> <body> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="my. Script. js"></script> </body> </html> • my. Script.

External Javascript • <html> <body> <script src="my. Script. js"></script> </body> </html> • my. Script. js <script> document. get. Element. By. Id("demo"). inner. HTML = "My First Java. Script"; </script>

Variables • Java. Script allows you to declare and use variables to store values. • How to assign a name to a variable? – – – – Include uppercase and lowercase letters Digits from 0 through 9 The underscore _ and the dollar sign $ No space and punctuation characters First character must be alphabetic letter or underscore Case-sensitive No reserved words or keywords

Which one is legal? My_variable $my_variable 1 my_example _my_variable @my_variable My_variable_example ++my_variable %my_variable #my_variable ~my_variable my. Variable. Example Legal Illegal

Data Types • Java. Script allows the same variable to contain different types of data values. • Primitive data types – Number: integer & floating-point numbers – Boolean: logical values “true” or “false” – String: a sequence of alphanumeric characters • Composite data types (or Complex data types) – Object: a named collection of data – Array: a sequence of values

Javascript Objects • • Window Document Form History Navigator Image Array etc….

Window object • Methods – Alert – Prompt – Confirm

Using the alert() Method <head> <script language=“Java. Script”> alert(“An alert triggered by Java. Script”); </script> </head> • It is the easiest methods to use amongst alert(), prompt() and confirm(). • You can use it to display textual information to the user (simple and concise). • The user can simply click “OK” to close it.

Using the confirm() Method <head> <script language=“Java. Script”> confirm(“Are you happy with the class? ”); </script> </head> • This box is used to give the user a choice either OK or Cancel. • It is very similar to the “alert()” method. • You can also put your message in the method.

Using the prompt() Method <head> <script language=“Java. Script”> prompt(“What is your student id number? ”); prompt(“What is your name? ”, ”No name”); </script> </head> • This is the only one that allows the user to type in his own response to the specific question. • You can give a default value to avoid displaying “undefined”.

Three methods <script language="Java. Script"> alert("This is an Alert method"); confirm("Are you OK? "); prompt("What is your name? "); prompt("How old are you? ", "20"); </script>

Variable on-the-fly <head> <script language=“Java. Script”> Variable declaration var id; id = prompt(“What is your student id number? ”); alert(id); name = prompt(“What is your name? ”, ”No name”); alert(name); </script> </head> • We should use “var” because it is more easy to keep track of the variables.

Javascript Functions alert is the name of a predefined function in the Java. Script language alert("Hello World!"); this statement is is known as a function call this is a string we are passing as an argument (parameter) to the alert function 19

General Function Definition Syntax function Function. Name ( parameter 1, . . . , parametern ) { variable declaration(s) statement(s) } • If there are no parameters, there should be nothing inside of the ()'s function Function. Name() {. . . } • There may be no variable declarations. 20

Function parameters • Parameter: – Variable used within a function • Placing a parameter name within the parentheses of a function definition is the same as declaring a new variable • Functions do not have to contain parameters – In this case use empty parentheses

Keyword function User-defined function name 0 or more parameters Opening and closing brackets

Sample Function <head> <title>Function Example</title> Function <script type="text/javascript"> Definition function Print. Message() { alert("A message for you: nn. Have a nice day!"); } </script> </head> <body> <script type="text/javascript"> Print. Message(); </script> </body> Function Call 23

Screenshot of Function Example 24

DOM(Document Object Model) • The HTML DOM is a standard object model and programming interface for HTML. • It defines: – The HTML elements as objects – The properties of all HTML elements – The methods to access all HTML elements – The events for all HTML elements • In other words: – The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

WHY DOM? • Document Object Model – Your web browser builds a model of the web page (the document) that includes all the objects in the page (tags, text, etc) – All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects – Those objects are accessible via scripting languages in modern web browsers

This is what the browser reads <html> <head> <title>Sample DOM Document</title> </head> <body> <h 1>An HTML Document</h 1> <p>This is a <i>simple</i> document. </body> </html> This is what the browser displays on screen.

Document This is a drawing of the model that the browser is working with for the page. <html> <head> <body> <title> "Sample DOM Document" <h 1> <p> "An HTML Document" "This is a" <i> "simple" "document"

DOM • The HTML DOM can be accessed with Java. Script (and with other programming languages). • In the DOM, all HTML elements are defined as objects. • The programming interface is the properties and methods of each object. – A property is a value that you can get or set (like changing the content of an HTML element). – A method is an action you can do (like add or deleting an HTML element).

Why is this useful? • Because we can access the model too! – the model is made available to scripts running in the browser, not just the browser itself • A script can find things out about the state of the page • A script can change things in response to events, including user requests

Example-Change an element • The following example changes the content of an h 1 element: • <html> <body> <h 1 id="header">Old Header</h 1> <script type="text/javascript"> document. get. Element. By. Id("header"). inner. HTML ="New Header"; </script> </body> </html> • In the example above, get. Element. By. Id is a method, while inner. HTML is a property.

Change an attribute • The following example changes the src attibute of an img element: • <html> <body> <img id="image" src="smiley. gif"> <script type="text/javascript"> • document. get. Element. By. Id("image"). src="landscape. jpg"; </script> </body> </html>

Finding HTML Elements • document. get. Element. By. Id( ) -Find an element by element id – var my. Element = document. get. Element. By. Id(“main"); • document. get. Elements. By. Tag. Name() -Find elements by tag name – var x = document. get. Elements. By. Tag. Name("p"); • document. get. Elements. By. Class. Name() -Find elements by class name – var x = document. get. Elements. By. Class. Name("intro");

Changing HTML Elements • element. inner. HTML=Change the inner HTML of an element • element. attribute=Change the attribute of an HTML element • element. set. Attribute(attribute, value)=Change the attribute of an HTML element • element. style. property=Change the style of an HTML element

DEMO on Objects