DHTML Interview Questions - Dynamic HyperText Markup Language interview questions and answers for freshers and experienced. Feel free to comment on any DHTML Interview Questions or answer by the comment feature available on the page.
What is DHTML? What are the features of DHTML?
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:
  • Simplest feature is making the page dynamic.
  • Can be used to create animations, games, applications, provide new ways of navigating through web sites.
  • DHTML use low-bandwidth effect which enhance web page functionality.
  • Dynamic building of web pages is simple as no plug-in is required.
  • Facilitates the usage of events, methods and properties and code reuse.

Which browsers support DHTML and how will non-supporting browsers handle 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.

How DHTML work with JavaScript?
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>
What is Distinguish between Static vs. Dynamic HTML?
  • The easiest difference is static HTML once rendered cannot be changed on the other hand dynamic HTML can be changed.
  • Static web pages cannot have database access but dynamic pages can be connected to database.
  • Using static HTML, no interactions persist between user and server but dynamic HTML has capability to interact with the user.
  • Static HTML does not require server side coding but dynamic HTML requires server side coding.
  • No animation, games can be developed using the static HTML but on the other hand dynamic HTML can perform this task.

What is the Working of DHTML?
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.

What are technologies we use in DHTML? Explain their significance in DHTML application?
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.

How to handle events with DHTML?
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.

What is the Difference between DHTML and HTML?
  • The first and foremost difference is HTML is markup language but DHTML is not a language.
  • DHTML stands with combination of HTML, CSS, JavaScript and DOM but HTML alone is an enough although static.
  • HTML cannot have nay server side code but DHTML may contain server side code also.
  • In HTML there is no need for database connectivity but DHTML may require to connect to database as it interacts with user.

How is FontSize and Font Size differ in DHTML?
  • Font size is an attribute that we used in font tag, where as font-size is a style property.
  • Font size is to be defined for every tag that we need to use in but font-size can be applied as a general class of action

What are the attributes that make up a DHTML? Explain those attributes.
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 markup tags.

What are the important components of Dynamic HTML authoring - Positioning, Style modifications and Event handling?
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.

What is logic match tag?
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>

What is the necessity of empty tag?
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.

Explain about struts dispatch action in DHTML
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>

How to upload struts file in DHTML?
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:
  • Creating a bean
  • Writing the ActionClass.
  • Mapping the bean in struts-config.xml
  • Defining actionmapping
  • Developing the DHTML page.

Steps used to create a tiles application in DHTML
  • Create a template that designs a layout for your application.
  • Create the composing pages.
  • Create a definition which means that suppose that you configured Tiles, in web.xml, to startup using the TilesServlet, we need to specify which files will contain the Tiles definitions to load.
  • Render the definition

How do we create a DHTML drop-down menu?
  • In order to create a DHTML drop down menu we need JavaScript API. The API (Application Programming Interface) consists of core set of cross-browser JavaScript functions to make DHTML programming easy and quick. This API enables moving and hiding page elements as well as acts as getter and setter of page elements attributes.
  • Second we define on image object and off image object and string containing the URL of the "off" version.
  • Then we create the menu items, label items and sub-menu items. If we wish we can use images also.
  • Then we need to define our own global variables that will be used by the menu. Using global goes against oops design but makes sharing data easier.
  • Create the menubar object, adding the menu labels and writing menubars.
  • Create menu object, adding menu items and writing menus.
  • Hiding and displaying the menus and attaching stylesheet.

Request to Download PDF

Post A Comment:

0 comments: