DHTML is a Dynamic Hyper Text Mark-up language. It is a Combinations of technologies used to create dynamic websites. It is used include a combination of HTML and JavaScript or VBScript.
DHTML stands for Dynamic HTML. The first thing that we need to clear about DHTML is that it is neither a language like HTML, JavaScript etc. nor a web standard. It is just a combination of HTML, JavaScript and CSS. It just uses these languages features to build dynamic web pages. DHTML is a feature of Netscape Communicator 4.0, and Microsoft Internet Explorer 4.0 and 5.0 and is entirely a “client-side” technology. Features of DHTML: Version of Netscape navigator and Internet Explorer higher than 4.0 or 4.0 supports DHTML in easy way. But as compared to both browsers Internet Explorer 4.0+ supports the DHTML in the best way. DHTML includes JavaScript to make the page dynamic and regardless of which scripts is written for and the scripts are designed in such a way that it can be compatible with as many numbers of browsers as possible. The most important thing that must be kept in the mind is that we must test the code before running it over the server or making it live. Also we certainly cannot guarantee that all users will use the browser that will support the scripts. As DHTML is not a language and it just use the property of HTML, JavaScript and CSS to make dynamic content. So here I will represents the working of DHTML with JavaScript with a simple example that just greets user with its name: <! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>DHTML example</title> <script type=”text/JavaScript”> function greet_user() { var name=document.getElementById(“userName”).value; if(name==””){ alert(“Welcome”+name); } else{ alert(“Please provide User Name”) } } </script> </head> <body> <table border=”1” cellspacing=”3”> <tr> <td colspan=”2”><h6> Please Enter Your Name </h6></td> </tr> <tr> <td><h4>User Name </h4></td> <td><input type=”text” id=”userName” ></td> </tr> <tr> <td colspan=”2”><input type=”button” value=”Submit” onclick=”greet_user()”/> </table> </body> </html> DHTML as it is combination of HTML as well as JavaScript and it uses the HTML to render the text on the browser. It also uses DOM dynamic Object Model which renders its every element as an Object that can be changed by setting properties and methods. This is done with the help of Scripting. DHTML is part of the general computing trend of late ’90s. This is a trend different from structured programming, with a focus on actions and toward object-based programming, where the objects can be compared to nouns in our language. DHTML allows scripting languages to change variable in a web page’s definition language, which in turn affects the look and function of otherwise “static” HTML page content, after the page has been fully loaded and during the viewing process. Speaking in true sense there is nothing dynamic in DHTML but enclosing technologies such as CSS, JavaScript, DOM and the static markup language it becomes dynamic. JavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser.For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page. CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code. DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it Depict with explanation a usable real-world example of DHTML scripting <html> <head> <title> DHTML In Real World <title> <script type=”text/javascript”> function Opens_Child_Window() { var getUsername=document.getElementById(“userName”).value; var openChild= window.open(“”,””,”height=300,width= 600″); openchild.document.Write(“ Welcome!!!!”+getUsername) } </script> </head> <body> <table border=”1″ boredercolor=”blue” cellspacing=”3″> <tr> <td> <b> User Name: </b> </td> <td> <input type=”text” id=”userName” property=”userName”/> </td> </tr> <tr> <td colspan=”2″ align=”center”> <input type=”button” value=”Click Me!!!” onclick=”Opens_Child_Window()”/> </td> </tr> </table> </body> </html> In the above designed DHTML we have a textbox to take the user name and on clicking the button a function of name Opens_Child_Window( ) is called which greets user in new window with his name. The new window is opened with the help of window.open property of Window. A DHTML application supports numerous events, many of them quite analogous to those of a standard VB application. Events are the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handlers comes to its initial state and wait for the user to fire any event. Hence to handle events in DHTML we need to register an event handler. The attributes that make up DHTML are HTML, JavaScript, CSS and DOM. These are explained below as: JavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser. In DHTML JavaScript JavaScript comes with virtually every browser. For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page. CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code. DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it. HTML: It stands for Hyper Text Markup Language. As the names suggest it is not a programming language, it is a markup language which consists of a set of mark-up tags. Positioning: Is somewhat where we need the object to be placed in the graphical view i.e. on screen. If we talk in DHTML sense, then we have two types of positioning: Relative and Absolute. Relative Positioning: Relative positioning is the same as the current HTML3 layout and is best reserved for situations where you want to be sure that the content will revert to this default inside a document that also uses absolute positioning. Absolute Positioning: In DHTML absolute positioning means that the object will remain at the same position regardless of the condition of other elements and the size of the browser. In simple languages if an object/image is absolutely positioned (STYLE=”position: absolute;”), with an offset of 150 pixels to the right and 250 pixels down from the left-hand corner of the browser screen then it will avail this position what ever the circumstances may be. Style Modifications: Style modification indicates the changes in the presentation or the view part that are being made in web page. This part comes under Cascading Style Sheet where the user style his web page by using the attributes and the tags that are pre-defined in CSS. Event Handling: As explained earlier Events is the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handler comes to its initial state and waits for the user to fire any event. Hence to handle events in DHTML we need to register an event handler. Logic match tag is an evaluator which checks the nested body content of tag whether the specified value is an appropriate substring of the requested variable. Matches the variable specified by one of the selector attributes against the specified constant value. If the value is a substring the nested body content of this tag is evaluated. Or in other words are used to control the generation of page output by allowing conditions to be tested, loops to be set up and application flow to be directed to other pages. A comparison will often involve a bean created with one of the bean tags. For e: g: <logic: match header=”User-Agent” value=”Mozilla”> Hi Mozilla browser </logic: match> The first foremost good thing to notice about empty tag is that they need not to be closed. There necessities play an important role in development of web pages as we can create links define input tags which include button, text, hidden fields. Provide links to images and line breaks. For eg: the <hr> tag is an empty tag which is used to draw a horizontal line on the page. DispatchAction is an action that comes with Struts 1.1 or later, that let us combine Struts actions into single class, each with their own method. The org.apache.struts.action.DispatchAction class allows multiple operations to map to the different functions in the same Action class. For e:g; html:hidden property=”dispatch” value=”error”/> <SCRIPT>function set(target) {document. forms[0].dispatch. value=target;}</SCRIPT> The interface org.apache.struts.upload.FormFile is used for the struts file upload application. This interface represents a file that has been uploaded by a client. It is the only interface or class in upload package which is typically referenced directly by a Struts application. This is not specific to Struts in case of DHTML but the two things that are needed in DHTML page is: first, the form needs to specify an enctype of multipart/form-data and second an <input> form control of type file. Following are the steps to load file in DHTML: Steps used to create a tiles application in DHTMLWhat is DHTML? What are the features of DHTML?
Which browsers support DHTML and how will non-supporting browsers handle DHTML?
How DHTML work with JavaScript?
What is distinguish between Static vs. Dynamic HTML?
What is the Working of DHTML?
What are technologies we use in DHTML? Explain their significance in DHTML application?
How to handle events with DHTML?
What is the Difference between DHTML and HTML?
How is Font Size and Font Size differ in DHTML?
What are the attributes that make up a DHTML? Explain those attributes.
What are the important components of Dynamic HTML authoring - Positioning, Style modifications and Event handling?
What is logic match tag?
What is the necessity of empty tag?
Explain about struts dispatch action in DHTML
How to upload struts file in DHTML?
How do we create a DHTML drop-down menu?
Related posts:
- CSS3 Interview Questions and Answers
- Drupal Interview Questions and Answers
- HTML DOM Interview Questions and Answers
- HTML Interview Questions and Answers
- HTML5 Interview Questions and Answers
- PHP Developer Interview Questions and Answers
- SoapUI Interview Questions and Answers
- UI Developer Interview Questions and Answers