DHTML
DHTML DHTML stands for Dynamic HTML HTML supports JavaScript 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, JavaScript, DOM, and CSS JavaScript is the most popular scripting language on the internet, and it works in all major browsers. DHTML is about using JavaScript 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 JavaScript and the HTML DOM to change the style and positioning of HTML elements.
Javascript JavaScript 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. JavaScript 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 JavaScript, the statement: document.write(), is used to write output to a web page.
Script tag In HTML, JavaScript 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 myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
Javascript in <body> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html>
External Javascript <html> <body> <script src="myScript.js"></script> </body> </html> myScript.js <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>
Variables JavaScript 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? Legal Illegal My_variable $my_variable 1my_example My_variable_example ++my_variable %my_variable #my_variable ~my_variable myVariableExample Legal Illegal
Data Types JavaScript 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=“JavaScript”> alert(“An alert triggered by JavaScript”); </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=“JavaScript”> 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=“JavaScript”> 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="JavaScript"> 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=“JavaScript”> var id; id = prompt(“What is your student id number?”); alert(id); name = prompt(“What is your name?”,”No name”); alert(name); </script> </head> Variable declaration 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 JavaScript 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
General Function Definition Syntax function FunctionName ( parameter1, . . . , parametern ) { variable declaration(s) statement(s) } If there are no parameters, there should be nothing inside of the ()'s function FunctionName() ... There may be no variable declarations.
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
Opening and closing brackets Keyword function User-defined function name 0 or more parameters
Sample Function <head> <title>Function Example</title> <script type="text/javascript"> function PrintMessage() { alert("A message for you:\n\nHave a nice day!"); } </script> </head> <body> PrintMessage(); </script> </body> Function Definition Function Call
Screenshot of Function Example
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 Mental model of a car. When you rent a car that you have never driven before, do you freak out about it? No! You have a model of how to drive it in your mind. This is called a mental model. Your web browser builds an actual model of a web page...
This is what the browser reads <html> <head> <title>Sample DOM Document</title> </head> <body> <h1>An HTML Document</h1> <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" <h1> <p> "An HTML Document" "This is a" <i> "document" "simple"
DOM The HTML DOM can be accessed with JavaScript (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 h1 element: <html> <body> <h1 id="header">Old Header</h1> <script type="text/javascript"> document.getElementById("header").innerHTML="New Header"; </script> </body> </html> In the example above, getElementById is a method, while innerHTML 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.getElementById("image").src="landscape.jpg"; </script> </body> </html>
Finding HTML Elements document.getElementById( ) -Find an element by element id var myElement = document.getElementById(“main"); document.getElementsByTagName() -Find elements by tag name var x = document.getElementsByTagName("p"); document.getElementsByClassName() -Find elements by class name var x = document.getElementsByClassName("intro");
Changing HTML Elements element.innerHTML=Change the inner HTML of an element element.attribute=Change the attribute of an HTML element element.setAttribute(attribute,value)=Change the attribute of an HTML element element.style.property=Change the style of an HTML element
DEMO on Objects