JavaScript, Third Edition
This presentation is the property of its rightful owner.
Sponsored Links
1 / 60

Chapter 10 PowerPoint PPT Presentation


  • 139 Views
  • Uploaded on
  • Presentation posted in: General

JavaScript, Third Edition. Chapter 10. Dynamic HTML (DHTML). Objectives. Use JavaScript to modify CSS styles Work with CSS positioning Create DHTML menus Learn how to check for browser compatibility. Introduction.

Download Presentation

Chapter 10

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Dynamic html dhtml

JavaScript, Third Edition

Chapter 10

Dynamic HTML (DHTML)


Objectives

Objectives

  • Use JavaScript to modify CSS styles

  • Work with CSS positioning

  • Create DHTML menus

  • Learn how to check for browser compatibility

JavaScript, Third Edition


Introduction

Introduction

  • DHTML requires a strong knowledge of XHTML, Cascading Style Sheets (CSS), and JavaScript

  • Specifically, you will learn:

    • How to use JavaScript to dynamically modify CSS styles and dynamically position elements

    • How to create DHTML menus and check for browser compatibility

JavaScript, Third Edition


Javascript and css

JavaScript and CSS

  • Earlier versions of Internet Explorer and Navigator supported incompatible Document object properties and methods

  • JavaScript uses Document object properties and methods to access CSS styles

JavaScript, Third Edition


Javascript and css cont

JavaScript and CSS (Cont.)

  • To manipulate CSS in older browsers, you had three options:

    • Write code that functioned only in Navigator

    • Write code that functioned only in Internet Explorer

    • Write both sets of code and design the script so that correct set would execute depending on which browser rendered the page

JavaScript, Third Edition


Javascript and css cont1

JavaScript and CSS (Cont.)

  • If you anticipate that your DHTML code will run in older browsers:

    • Learn the DTHML techniques for each type of browser

JavaScript, Third Edition


Modifying styles with the this reference

Modifying styles with the this reference

  • To refer to a CSS style in JavaScript:

    • Use the this reference and the style property in an event handler within the element itself

  • The style property:

    • Every element has a style property.

    • Use itto modify an element’s CSS properties with JavaScript

JavaScript, Third Edition


Modifying styles with the this reference cont

Modifying styles with the this reference (Cont.)

  • To refer to a style with the this reference:

    • Use a period to append the style property to it, followed by another period and a CSS property

    • Seems that you can store a value into a style property, but cannot get a value out of a style property unless you’ve stored a value in it

      • Cannot test to see what value a style has!

JavaScript, Third Edition


Modifying styles with the this reference cont1

Modifying styles with the this reference (Cont.)

<html>

<head>

<title>Example of this</title>

<style type="text/css">

p{color:green; text-align:center}

</style>

<SCRIPT LANGUAGE="JavaScript">

function changeColor(junk) {

if (junk == 'blue')

return("green");

else

return("blue");

}

</SCRIPT>

</head>

<body>

<p onClick = " this.style.color = changeColor(this.style.color);">This is an example</p>

</body>

</html>

JavaScript, Third Edition


Modifying styles with the getelementbyid method

Modifying Styles with the getElementById() Method

  • To modify CSS properties without using the this reference:

    • First gain access to the styles by using either

      • The getElementById(ID) method OR

      • The getElementsByTagName(element) method

JavaScript, Third Edition


Modifying styles with the getelementbyid method cont

Modifying Styles with the getElementById() Method (Cont.)

  • Cascading Style Sheets

    • ID attribute

      • Value of an ID attribute uniquely identifies individual tags in an HTML document

      • Syntax:

        • <tag id=“unique_name”>

      • Example:

        <style type = "text/css">

        #level1 {color: red; font-family: “serif”}

        </style>

        <h1 id=“level1”>This is red text</h1>

JavaScript, Third Edition


Modifying styles with the getelementbyid method cont1

Modifying Styles with the getElementById() Method (Cont.)

  • Example:

    • thisExample.html

JavaScript, Third Edition


Modifying styles with the getelementbyid method cont2

Modifying Styles with the getElementById() Method (Cont.)

  • The getElementById(ID) methodreturns the element represented by ID

  • The getElementsByTagName(element) methodreturns an array of elements represented by element. The element will be something like “p” or “b”

JavaScript, Third Edition


Modifying styles with the getelementbyid method cont3

Modifying Styles with the getElementById() Method (Cont.)

  • To use the getElementById() method:

    • Append it to the document object with a period

    • Pass it the value assigned to the ID attribute of the element whose styles you want to manipulate

      document.getElementById(“idName”);

JavaScript, Third Edition


Modifying styles with the getelementbyid method cont4

Modifying Styles with the getElementById() Method (Cont.)

  • You may assign the value returned from the getElementById() method to a variable

  • Append the style property and specific CSS property to the variable

    var myEl = document.getElementById(“idName”);

    myEl.style.color = “red”;

    Or can access directly:

    document.getElementById(“idName”).style.color = “red”;

JavaScript, Third Edition


Css positioning

CSS Positioning

  • Used to position or lay out elements on a Web page

JavaScript, Third Edition


Using javascript and styles with w3c dom

Using JavaScript and Styles with W3C DOM

  • Node properties

    • can change a property using methods:

      getAttribute( ), setAttribute( ), removeAttribute( )

    • example:

      var headline = document.getElementById(“headline”);

      headline.setAttribute(“align”, “center”);

    • or can access properties directly:

      headline.align = “center”;

JavaScript, Third Edition


Using javascript and styles with w3c dom1

Using JavaScript and Styles with W3C DOM

  • example:

    var headline = document.getElementById(“headline”);

    headline.setAttribute(“style”, “background-color:red;”+“font-family:monospace; border: solid black 3px;”);

  • or

    headline.style = “background-color:red; font-family:monospace;” + “ border: solid black 3px”;

  • or

    headline.style = “background-color:red; font-family:monospace; border: solid black 3px”;

JavaScript, Third Edition


Replacing text and html shortcuts

Replacing text and html shortcuts

  • Use special properties:

    innerText, outerText, innerHTML, outerHTML

    • These are not actually part of DOM. There are built-in functions that replace HTML and text in DOM.

    • However, most major browser recognizes these short cuts.

  • Firefox properties:

    textContent, innerHTML, outerHTML

  • JavaScript, Third Edition


    Animation and cascading style sheets

    Animation and Cascading Style Sheets

    Replacing text and html

    • innerHTML: setting this property of any element to a string of HTML text causes that HTML to be parsed and inserted as the content of the element. Does not change the actual element type.

    • outerHTML: replaces an element’s content and the entire element itself with a specified string of HTML text.

    • innerText: same as innerHTML but does not parse the string, rather treats it as text.

    • outerText: same as innerHTML but does not parse the string, rather treats it as text.

    • textContent: same as innerText but only works in Firefox

    JavaScript, Third Edition


    Replacing text and html in older ie and in w3c dom

    Replacing text and html in Older IE and in W3C DOM

    • Example:

      var idTag = document.getElementById(“pText”);

      var pTag = document.getElementsByTagName("p");

      document.getElementById(“pText”).innerText = "Thanks for comming!";

      idTag.innerText = "We appreciate your business!";

      pTag[0].innerText = "Please come again!";

      // in Firefox:

      idTag.textContent = "We appreciate your business!";

      pTag[0]. textContent = "Please come again!";

    JavaScript, Third Edition


    Replacing text and html example 1

    Replacing text and html Example 1

    <script type = "text/javascript">

    function start(theNode)

    {

    theNode.innerHTML= “<b style=‘color:green’>Thanks for coming<b>.";

    }

    </script>

    </head>

    <body onload = "start(getElementById(“pText”)) ">

    <h1>Changing tags</h1>

    <p id = "pText">Welcome to our Web page!</p>

    <p> Note that you have to use the function with the <b>onload</b>

    event. If you just try to put the code into a script in the head

    section, then the code will run before the html body is loaded and

    the script will not know the id's assigned to the tags. </p>

    </body>

    JavaScript, Third Edition


    Replacing text and html example 2

    Replacing text and html Example 2

    <script type = "text/javascript">

    function start(theNode)

    {

    theNode[0].innerHTML= “<b style=‘color:green’>Thanks for coming<b>.";

    }

    </script>

    </head>

    <body onload = "start(getElemenstByTagName(“p”)) ">

    <h1>Changing tags</h1>

    <p id = "pText">Welcome to our Web page!</p>

    <p> Note that you have to use the function with the <b>onload</b>

    event. If you just try to put the code into a script in the head

    section, then the code will run before the html body is loaded and

    the script will not know the id's assigned to the tags. </p>

    </body>

    JavaScript, Third Edition


    Dynamic html dhtml

    Function start changes the text of pNode

    We check to see if the innerText property is defined for the body tag. If so, we can use it. If not, we must be in Firefox so use the textContent property instead

    The innerText property of the object is dynamically changed (Thanks for coming.).

    The onloadevent calls the JavaScript start function when document loading completes.

    Use textContent to change

    the text in Firefox

    1 <?xml version = "1.0"?>

    2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    4

    5 <!-- Fig. 13.1: reference.html -->

    6 <!-- Object Model Introduction -->

    7

    8 <html xmlns = "http://www.w3.org/1999/xhtml">

    9 <head>

    10 <title>Object Model</title>

    11

    12 <script language = “JavaScript">

    13 <!--

    14 function start(pNode)

    15 {

    // check to see if we’re in Firefox or some other browser

    var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;

    if (hasInnerText){

    alert(pNode.innerText);

    pNode.innerTextL= “Thanks for coming";

    }

    else{

    alert(pNode.textContent);

    pNode.textContent = “Thanks for coming";

    }

    18 }

    19 // -->

    20 </script>

    21

    22 </head>

    23

    24 <body onload ="start(getElementById(“pText”))">

    25 <p id ="pText">Welcome to our Web page!</p>

    26 </body>

    27 </html>


    Program output

    The value of pNode.innerText when the page is first loaded.

    An alert box displaying the value of pNode.innerText.

    The value of pNode.innerText after the function start is invoked.

    Program Output


    Css positioning1

    CSS Positioning

    JavaScript, Third Edition


    Dynamic positioning

    Dynamic positioning

    • Easiest way to dynamically position an element with CSS:

      • Use left and top properties

    • Left property:

      • Specifies an element’s horizontal distance from the upper-left corner of the window

    JavaScript, Third Edition


    Dynamic positioning cont

    Dynamic positioning (Cont.)

    • The top property:

      • Specifies an element’s vertical distance from the upper-left corner of the window

    • Both property values are assigned in pixels

    JavaScript, Third Edition


    Dynamic positioning with w3c dom compliant browsers

    Dynamic Positioning with W3C DOM-Compliant Browsers

    • CSS Positioning

      • Can dynamically change CSS styles to implement traveling animation

      • Example:

        • document. getElementByID(“sampleimage”) .style.left = “3.00in”;

          • Moves element with an ID of sampleimage three inches to the right by changing its left property

    JavaScript, Third Edition


    Dynamic positioning with w3c dom compliant browsers1

    Dynamic Positioning with W3C DOM-Compliant Browsers

    • See

      • OrbitW3C.html

      • BlizzardW3C.html.

      • FishTankW3C.html.

      • KangarooW3C.html.

      • PilotW3C.html.

      • RacetrackW3C.html.

    JavaScript, Third Edition


    Dhtml menus

    DHTML Menus

    • Types include:

      • Expandable menus

      • Navigation menus

      • Sliding menus.

    • DHTML menus are most often used for organizing navigational links to other Web pages

    JavaScript, Third Edition


    Expandable menus

    Expandable Menus

    • The display property:

      • Specifies whether to display an element on a Web page

      • Can be used to simulate expandable and collapsible menus on a Web page

      • Used with a block-level element

        • Gives a Web page its structure

    JavaScript, Third Edition


    Expandable menus cont

    Expandable Menus (Cont.)

    • Inline, or text-level, elements:

      • Describe the text that appears on a Web page

      • Unlike block-level elements, they do not appear on their own lines

        • Appear within the line of the block-level element that contains them

    JavaScript, Third Edition


    Expandable menus cont1

    Expandable Menus (Cont.)

    • <div> element:

      • Formats a group of block-level and inline elements with styles

      • By placing elements and text within a <div> element, you can use the display property to simulate expandable and collapsible menus

    JavaScript, Third Edition


    Expandable menus cont2

    Expandable Menus (Cont.)

    • A class selector:

      • Defines different groups of styles for the same element

    • You create a class selector within a <style> element by:

      • Appending a name for the class to a selector with a period

      • Then assign the class name to the class attribute of elements in the document that you want to format with the class’s style definitions

    JavaScript, Third Edition


    Navigation menus

    Navigation Menus

    • Menus:

      • Can greatly improve the design of the Web page

      • Are very useful in helping visitors navigate through the Web site

    • Easiest way to create a navigation menu:

      • Use a table to contain your menu items

    JavaScript, Third Edition


    Navigation menus cont

    Navigation Menus (Cont.)

    • Visibility property:

      • Used to show and hide each menu

      • Determines whether an element is visible

      • Differs from the display property in that it allocates space for an element on a Web page

    JavaScript, Third Edition


    Example pop up menus

    Example: pop up menus

    JavaScript, Third Edition


    Example pop up menus first create named classes

    This is the name of the styles

    The position determines

    exactly where the popUp

    menu will appear on the

    page

    Example: pop up menusfirst create named classes

    <style type="text/css">

    #layer1{ position: absolute; left: 1.1in; top: 1.25in;

    color:blue; background-color: lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    #layer2{ position: absolute; left: 1.1in; top: 1.65in;

    color:green; background-color:lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    #layer3{ position: absolute; left: 1.1in; top: 2.05in;

    color:red; background-color:lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    </style>

    JavaScript, Third Edition


    Example pop up menus in body create the menu bar

    The div tag will contain the menu

    items. Set its size and color

    Each item will capture the onMouseOver event

    and then call the function display to hide and

    show the appropriate boxes.

    This div is just a hidden box (its color is white) that

    is positioned next to the menu bar. When the user

    goes out of a menu box and into this div, all menu

    boxes will be hidden

    Example: pop up menusin body, create the menu bar

    <body>

    <div style="width:100px;height:300px; background-color:lightblue">

    <h1 onMouseOver="display('visible','hidden', 'hidden');">Item 1.</h1>

    <h1 onMouseOver="display('hidden','visible', 'hidden');">Item 2.</h1>

    <h1 onMouseOver="display('hidden', 'hidden','visible');">Item 3.</h1>

    </div>

    <div style="position:absolute; left:1.15in; top:1.05in; width:140px;height:300px;

    background-color:white"

    onMouseOver="display('hidden','hidden', 'hidden');">

    <br />

    </div>

    JavaScript, Third Edition


    Example pop up menus in body create the pop up menus

    Each box is positioned by it’s named style (eg, “layer1”)

    Links are added to the div box

    Example: pop up menusin body, create the pop up menus

    <div id="layer1">

    <a href="visibilityExample.html">Visibility example</a>

    <a href="pop-upTest.html">Pop-up example</a>

    </div>

    <div id="layer2">

    <a href="visibilityExample.html">Visibility example</a>

    <a href="pop-upTest.html">Pop-up example</a>

    </div>

    <div id="layer3" style="font-size:12pt">

    <a href="http://www.google.com">Google</a><br />

    <a href="http://www.apple.com">Apple Computer</a><br />

    <a href="http://www.ithaca.edu">Ithaca College</a>

    </div>

    </body>

    </html>

    JavaScript, Third Edition


    Example pop up menus in head create the script

    Example: pop up menusin head, create the script

    <SCRIPT LANGUAGE="JavaScript">

    function display(value1, value2, value3){

    document.getElementById("layer1").style.visibility = value1;

    document.getElementById("layer2").style.visibility = value2;

    document.getElementById("layer3").style.visibility = value3;

    }

    }

    </SCRIPT>

    JavaScript, Third Edition


    Example pop up menus script that checks for browser type

    Example: pop up menusscript that checks for browser type

    <SCRIPT LANGUAGE="JavaScript">

    <!-- HIDE FROM INCOMPATIBLE BROWSERS

    function display(value1, value2, value3){

    if (document.layers){// test for Netscape

    document.layers.layer1.visibility = value1;

    document.layers.layer2.visibility = value2;

    document.layers.layer3.visibility = value3;

    }

    else if (document.getElementById){// W3C complient

    document.getElementById("layer1").style.visibility = value1;

    document.getElementById("layer2").style.visibility = value2;

    document.getElementById("layer3").style.visibility = value3;

    }

    else {// o.w. it's old IE

    document.all.layer1.style.visibility = value1;

    document.all.layer2.style.visibility = value2;

    document.all.layer3.style.visibility = value3;

    }

    }

    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->

    </SCRIPT>

    JavaScript, Third Edition


    Pop up menus version 2

    pop up menus version 2

    JavaScript, Third Edition


    Pop up menus version 2 first create named classes same

    pop up menus version 2first create named classes (same)

    <style type="text/css">

    #layer1{ position: absolute; left: 1.1in; top: 1.25in;

    color:blue; background-color: lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    #layer2{ position: absolute; left: 1.1in; top: 1.65in;

    color:green; background-color:lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    #layer3{ position: absolute; left: 1.1in; top: 2.05in;

    color:red; background-color:lightgreen;

    visibility:hidden; width:125px;height:50px;

    text-align:left; padding:.5em;

    }

    </style>

    JavaScript, Third Edition


    Pop up menus version 2 in body create the menu bar

    For each item in each pop out menu

    add a onmouseover event handler

    to show this menu and hide the others.

    O.w. menu will disappear when mouse

    leaves each item!

    pop up menus version 2in body, create the menu bar

    <body>

    <div style="width:100px;height:300px; background-color:lightblue">

    <h1 onMouseOver="display('visible','hidden', 'hidden');">Item 1.</h1>

    <h1 onMouseOver="display('hidden','visible', 'hidden');">Item 2.</h1>

    <h1 onMouseOver="display('hidden', 'hidden','visible');">Item 3.</h1>

    </div>

    <div id="layer1" onMouseOut="display('hidden','hidden', 'hidden');">

    <a href="visibilityExample.html"

    onmouseover="display('visible','hidden', 'hidden');">Visibility example</a>

    <a href="pop-upTest.html"

    onmouseover="display('visible','hidden', 'hidden');">Pop-up example</a>

    </div>

    JavaScript, Third Edition


    Pop up menus version 2 in body create the menu bar1

    For each item in each pop out menu

    add a onmouseover event handler

    to show this menu and hide the others.

    o.w. menu will disappear when mouse

    leaves each item!

    pop up menus version 2in body, create the menu bar

    <div id="layer2" onMouseOut="display('hidden','hidden', 'hidden');">

    <a href="visibilityExample.html"

    onmouseover="display('hidden','visible', 'hidden');">Visibility example</a>

    <a href="pop-upTest.html"

    onmouseover="display('hidden','visible', 'hidden');">Pop-up example</a>

    </div>

    <div id="layer3" style="font-size:12pt" onMouseOut="display('hidden','hidden', 'hidden');">

    <a href="visibilityExample.html"

    onmouseover="display('hidden','hidden', 'visible');">Visibility example</a>

    <a href="pop-upTest.html"

    onmouseover="display('hidden','hidden', 'visible');">Pop-up example</a>

    </div>

    JavaScript, Third Edition


    Pop up menus version 2 in body create the pop up menus same

    pop up menus version 2in body, create the pop up menus (same)

    <div id="layer1">

    <a href="visibilityExample.html">Visibility example</a>

    <a href="pop-upTest.html">Pop-up example</a>

    </div>

    <div id="layer2">

    <a href="visibilityExample.html">Visibility example</a>

    <a href="pop-upTest.html">Pop-up example</a>

    </div>

    <div id="layer3" style="font-size:12pt">

    <a href="http://www.google.com">Google</a><br />

    <a href="http://www.apple.com">Apple Computer</a><br />

    <a href="http://www.ithaca.edu">Ithaca College</a>

    </div>

    </body>

    </html>

    JavaScript, Third Edition


    Example pop up menus in body create the pop up menus version 2 same

    Example: pop up menusin body, create the pop up menusVersion 2 (same)

    <SCRIPT LANGUAGE="JavaScript">

    function display(value1, value2, value3){

    document.getElementById("layer1").style.visibility = value1;

    document.getElementById("layer2").style.visibility = value2;

    document.getElementById("layer3").style.visibility = value3;

    }

    }

    </SCRIPT>

    JavaScript, Third Edition


    Sliding menus

    Sliding Menus

    • Menus that appear to slide open and closed

    • Although the visibility and display properties are quite effective in showing and hiding menus:

      • They simply display their associated elements without any sort of effect

    JavaScript, Third Edition


    Sliding menus cont

    Sliding Menus (Cont.)

    • In order to simulate a sliding effect:

      • Use the left and top properties along with simple animation techniques

    • With a horizontal navigation menu, you must create each individual menu within its own table

    JavaScript, Third Edition


    Sliding menus cont1

    Sliding Menus (Cont.)

    • Example:

      • slideDownMenu.html

    JavaScript, Third Edition


    Checking browser compatibility

    Checking Browser Compatibility

    • Browser sniffer:

      • JavaScript program that checks which type of browser is running

    • Easiest way to test whether a Web browser is compatible with the W3C DOM:

      • Check whether the browser includes the getElementById() method

    JavaScript, Third Edition


    Checking browser compatibility cont

    Checking Browser Compatibility (Cont.)

    • You can check whether a browser includes the getElementById() method:

      • Use a statement similar to if (document.getElementById)

      • If the method is available in the browser, then a value of true is returned

        • Browser is compatible with the W3C DOM

    JavaScript, Third Edition


    Using javascript and styles with w3c dom2

    Using JavaScript and Styles with W3C DOM

    • Node properties

      • each node that represents an HTML element has a property for each attribute of that element

      • example: all elements have the following properties:

        id, style, title, lang, dir, className

    JavaScript, Third Edition


    Chapter summary

    Chapter Summary

    • Easiest way to refer to a CSS style in JavaScript:

      • Use the this reference and the style property in an event handler within the element itself

    • The style property:

      • Used to modify an element’s CSS properties with JavaScript

    JavaScript, Third Edition


    Chapter summary cont

    Chapter Summary (cont.)

    • The getElementById(ID) method:

      • Returns the element represented by ID

    • The getElementsByTagName(element) method:

      • Returns a collection of elements represented by element

    • CSS positioning:

      • Used to position or lay out elements on a Web page

    JavaScript, Third Edition


    Chapter summary cont1

    Chapter Summary (cont.)

    • The position property:

      • Determines the type of positioning applied to an element

    • The left and top properties:

      • Used to dynamically position an element with CSS

    • DHTML menus:

      • Most often used for organizing navigational links to other Web pages

    JavaScript, Third Edition


    Chapter summary cont2

    Chapter Summary (cont.)

    • The display property:

      • Specifies whether to display an element on a Web page

    • Inline, or text-level, elements:

      • Describe the text that appears on a Web page

    • <div> element:

      • Formats a group of block-level and inline elements with styles

    JavaScript, Third Edition


    Chapter summary cont3

    Chapter Summary (cont.)

    • A class selector:

      • Defines different groups of styles for the same element

    • Visibility property:

      • Used to show and hide each menu

    • Sliding menus:

      • Menus that appear to slide open and closed

    • a browser sniffer:

      • JavaScript program that checks which type of browser is running

    JavaScript, Third Edition


  • Login