DHTML

DHTML

DHTML (Dynamic HTML)

INTRODUCTION
DHTML stands for Dynamic Hypertext markup language
Dynamic means the subject change at any time
Dynamic HTML means web page can react to the user without relying on the server of
depending on an embedded program;
The Dynamic HTML document takes on a structure of its own which is
Document Object Model (DOM)
CHANGING TAGS & CONTENTS
The document object model capabilities to change tags and their content
Each heading is a special hyperlink that runs a script instead of loading another page
click on the heading without any browser server the page is changed
DYNAMIC FONTS
The style sheet or the command you have probably
become
aware of severe limitation because
you specify a font doesn’t mean that the user has it
on machine
The page developer doesn’t know how the page is going to appear
DATA BINDING
Data binding enable page element and displaying database records
Currently requires advanced programming in a language
The data binding is a direct data
binding , this is middle ground of database processing is passed over,
while user
modification of information is passed back to the database for
updating

DYNAMIC WEB PAGE

CREATING DYNAMIC WEB PAGE

Create the basic HTML for the basic content ,then build the page if the user doesn’t have Dynamic HTML capability add the style sheet information
This includes special color and font information, layers and divisions so on else doing the page stand out of from a crowd
  • Make the page dynamic
  • Add the script and attribute to make the content
DYNAMICALLY CHANGING STYLE
You might change the style because booster a pages attention-grabbing
potential and to capture the imagination of your audience
The style provides the feedback to your audience
  • Define two or more styles with class names and attributes within the tag pair
  • Define the object name with an ID=attribute
  • Attach a style class name, CLASS=attribute
  • Attach the script function name to one more event attribute that you
    want to enable for the text
Example


Changing the style sheet
.redtext {color: red}
.greentext {color: green}
function change ()
{
    if (h1, className==”greentext”)
    {
        h1.className=”redtext”
    }
    else
   {
       H1.className=”greentext”
   }
}


heading 1


DYNAMIC HTML EVENTS

DYNAMIC HTML EVENTS

Dynamic HTML enable to receive more information about events and the condition on the document
and browser at the time the event occurred
The object is passed as argument to an event handler when the event occurs
LOAD & UNLOAD EVENTS
The load event is generated after the browser has retrieved but not yet display,
all the content between the tag
When any initialization is needed before the page is presented that time place to put it;
The unload event make sure the completed a certain action such as the submitting the form
If the user hasn’t completed the action, the function trigged by the unload can inform the user or perform another action
LOAD EVENT
Example


Onload event
function show ()
{
alert (“The load event is generated after the browser has retrieved”);
}

UNLOAD EVENT
Example


Unload event
   function submit()
    {
       if (confirm (“Do you want to submit”))
        {
           form [0].submit ()
        }
    }

EVENTS

MOUSEOVER & MOUSEOUT EVENT

The mouseover event happens when the mouse
Pointer over a hyperlink or other block element
The mouseout event, which happens when the pointer moves out of the block
Example
h1 {color: green}
function changecolor ()
{
h_1.style.color:”blue”
h_1.style.fontStyle:”Italic”
}
function changecolorback ()
{
h_1.style.color:”pink”
h_1.style.fontStyle:”normal”


MOUSEMOVE EVENT
The mousemove event is used to exclusively with the Event Object and
used track the location of the pointer on the screen within the current page
KEYPRESS KEYDOWN & KEYUP EVENT
These three events related to keyboard actions from the user
A keypress is created by the combination of a keydown and keyup event
The keypress event always begins with a key pressed down, which enables to initiate an event handler when the user holds a keydown
Modifier property for combination of special key
Modifier value
Additonal key Pressed
0
None
1
Alt
2
Ctrl
3
Alt+ctrl
4
Shifr
5
Alt+Shifr
6
Ctrl+Shifr
7
Alt+Ctrl+Shifr
MOUSEDOWN AND MOUSEUP EVENT
The click event detects the user pressing a button on a from, clicking hyperlinks or the other elements on the page.
When the user clicks the button, the event handed off the function where value from the form are totaled.
Example
function call ()
  {
    window.status=”status is fine”
   }
ERROR EVENT
The error event is provided help to handle the errors before they generates the message for the user.
Errors will occur when the browser attempt to load interpret the page.

SUBMIT & RESET

FORM EVENT

SUBMIT & RESET EVENT
The submit and reset event s handle the click event
This two button are placed within the
tag rather than within the
individual button tag because of action generated by the button
If the returning the true enables the from process to complete submitting
or resetting the from contents
Example
function show ()
{
alert (“submit the information”);
}
function show1 ()
{
if (confirm (“Reset the information”))
return true;
else
return false;
}
FOCUS & BLUR EVENT
Focus and blur event is used when a form element, window or frame gains or losses focus
The blur event used to check the users input as well as the user leaves the element
The focus events can be trigged by a method same name.
Example


function isempty ()
  {
    if (x.value==””)
     {
        alert (“The alertbox is empty”);
         return true;
     }
     else
      {
        return false;
       }
   }

IMAGE EVENT

IMAGE EVENT

The image object is representing all of the ‘IMG’ tag on page. The user prevents the images from loading, the image object generated an abort event
ABORT EVENT
The user stop a page before the image is complete or prevents a specifice
image from loading, javascript returns an abort events, this events isn’t

affected by enabling or disabling automatic image loading on a browser.

Example:
< IMG src=”image.gif” onAbort=”imageAborted ( )”>
CHANGING TEXT ATTRIBUTE
Dynamic HTML to dynamically change the text attribute in responses to your readers mouse keyboard actions.
Dynamic HTML each time you want to change a text attribute
.
CHANGING TEXT COLOR
Color can be represented by a simple string identifier or by an RGB component

list.
The simple string is more straightforward and RGB can use more specifice colors their red green and blue components.
Many technologies use a red,
green and blue color definition scheme.
The dynamic HTML format specifying

RGB values uses three short integers from 0 to 255.
.
Example
Changing the color

 function setColor ()
{
  t=new Date ();
  d=t.geTime ();
}
function colorme ()
{
t=new Date ();
d=t.getTime ();
SrcElement=window.event.srcElement;
if (d<4000 br="">{
srcElement.style.color:”red”;
}
elseif (d<8000 br="">{
srcElement.style.color:”green”;
 }
else
{
srcElement.style.color:”pink”;
}
d=t.getTime ();
}

Changing the color

 function setColor ()
{
  t=new Date ();
  d=t.geTime ();
}
function colorme ()
{
t=new Date ();
d=t.getTime ();
SrcElement=window.event.srcElement;
if (d<4000 br="">{
srcElement.style.color:”red”;
}
elseif (d<8000 br="">{
srcElement.style.color:”green”;
 }
else
{
srcElement.style.color:”pink”;
}
d=t.getTime ();
}


TEXT ATTRIBUTE

INLINE TEXT ATTRIBUTE CHANGES

The dynamic change to a web page that you create solely within a single
HTML tag is called an inline change. The inline change is very straightforward
Example

”this.style.color=’red’” onMouseout=
”this.style.color=’blue’”>welcome

CHANGING TEXT CONTENT
HTML replacement means
The text content change through a Dynamic
HTML mechanism.HTML replacement is Dynamic HTML approach to defining
the existing HTML tags and text is a text blocks as an object that you can
change dynamically by page script routine. The tag pair
parses because it is standard HTML syntax.
HTML element tag pair properties
  • innerHTML
  • outerHTML
  • innerText
  • outerText
DYNAMICALLY ALERTING THE PLACEMENT OF ELEMENTS
POSITION ELEMENT
The web page occupies a position within the web page browser window.
Dynamic HTML still relies heavily on the initial position in which a web author elements within a web page. Position graphics are similar to motives for
controlling text style & content. The position graphics provides to play game
or feedback to the web page provider.
ZINDEX STYLE ATTRIBUTE
The zindex style attribute provide the freedom to move text and graphics
around on the web page, and also control multiple images appear when they share the same position on a page. The zindex is a component of the style specification. The office software is flat & defines only x (left to right) and
y (top to bottom)axes
One Element of Style Attribute:
  • STYLE=”ZINDEX:1”
Second Element of Style Attribute:
  • STYLE=”ZINDEX:2″


No comments:

Post a Comment

Subscribe to: Posts (Atom)