Study Guide: JavaScript->DHTML
DHTML

DHTML (Dynamic HTML) is a combination of JavaScript, CSS and HTML.

alert messages

<script type="text/javascript">
    alert('Hello World!');
</script>

This will give a simple alert message.

<script type="text/javascript">
    prompt('What is your name?');
</script>

This will give a simple prompt message.

<script type="text/javascript">
confirm('Are you sure?');
</script>

This will give a simple confirmation message.

Javascript Button and Alert Message Example:

Sometimes it is best to dig straight in with the coding. Here is an example of a small piece of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
  <title>"THE BUTTON" - Javascript</title>
    <script type="text/javascript">
      x = 'You have not pressed "THE BUTTON"'
      function bomb {
        alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');
        alert('10');
        alert('9');
        alert('8');
        alert('7');
        alert('6');
        alert('5');
        alert('4');
        alert('3');
        alert('2');
        alert('1');
        alert('!BOOM!');
        alert('Have a nice day. :-)');
        x = 'You pressed "THE BUTTON" and I told you not to!';
      }
    </script>
    <style type="text/css">
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>
  <body>
    <div>
      <input type="button" value="THE BUTTON - Don't Click It" onclick="bomb"><br />
      <input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="alert(x)">
    </div>
    <p>
      This script is dual-licensed under both, <a href="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://www.defaultlogic.com/books?s=JavaScript">Study Guides</a>
    </p>
  </body>
</html>

What has this code done? Well when it loads it tells what value the variable 'x' should have. The next code snippet is a function that has been named "bomb". The body of this function fires some alert messages and changes the value of 'x'.

The next part is mainly HTML with a little javascript attached to the INPUT tags. "onclick" property tells its parent what has to be done when clicked. The bomb function is assigned to the first button, the second button just shows an alert message with the value of x.

Javascript if - else Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>The Welcome Message - Javascript</title>
    <script type="text/javascript">
      function wlcmmsg {
        name = prompt('What is your name?', '');
        correct = confirm('Are you sure your name is ' + name + ' ?');
        if (correct == true) {
          alert('Welcome ' + name);
        } else {
          wlcmmsg;
        }
      }
    </script>
    <style type="text/css">
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>
  <body onload="wlcmmsg" onunload="alert('Goodbye ' + name)">
    <p>
      This script is dual-licensed under both, <a href="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://textbook.www.defaultlogic.com/learn?s=Programming:Javascript">Study Guides</a>
    </p>
  </body>
</html>

Two Scripts

We are going back to the first example. But adding more to the script by also adding a different welcome message. This time a person is made to enter a name. They are also asked if they want to visit the site. Some CSS has also been added to the button.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>"THE BUTTON" - Javascript</title>
    <script type="text/javascript">
      // global variable x
      x = 'You have not pressed "THE BUTTON"';

      function bomb {
        alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');
        alert('3');
        alert('2');
        alert('1');
        alert('!BOOM!');
        alert('Have a nice day. :-)');
        x = 'You pressed "THE BUTTON" and I told you not too!';
      }
    </script>
    <style type="text/css">
      body {
        background-color:#00aac5;
        color:#000
      }
    </style>
  </head>
  <body onload="welcome">
    <script type="text/javascript">
      function welcome {
        var name = prompt('What is your name?', '');
        if (name == "" || name == "null") { 
          alert('You have not entered a name');
          welcome;
          return false;
        }
        var visit = confirm('Do you want to visit this website?')
        if (visit == true) {
          alert('Welcome ' + name);
        } else {
          window.location=history.go(-1);
        }
      }
    </script>
    <div>
      <input type="button" value="THE BUTTON - Don't Click It" onclick="bomb" STYLE="color: #ffdd00; background-color: #ff0000"><br>
      <input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="alert(x)">
    </div>
    <p>
      This script is dual-licensed under both, <a href="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://textbook.www.defaultlogic.com/learn?s=Programming:Javascript">Study Guides</a>,
    </p>
  </body>
</html>

Simple Calculator

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Calculator</title> 
    <script type="text/javascript"> 
    function multi { 
      var a = document.Calculator.no1.value;
      var b = document.Calculator.no2.value;
      var p = (a*b);
      document.Calculator.product.value = p;
    }

    function divi {
      var d = document.Calculator.dividend.value;
      var e = document.Calculator.divisor.value;
      var q = (d/e);
      document.Calculator.quotient.value = q;
    }

    function circarea { 
      var r = document.Calculator.radius.value;
      pi = 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756
48233786783165;
      var a = pi*(r*r);
      document.Calculator.area.value = a;
      var c = 2*pi*r;
      document.Calculator.circumference.value = c;
    }
    </script>
    <style type="text/css">
      body {
        background-color:#00aac5;
        color:#000
      }

      label {
        float:left;
        width:7em
      }
    </style>
  </head> 
  <body> 
    <h1>Calculator</h1> 
    <form name="Calculator" action="">
      <fieldset>
        <legend>Multiply</legend>
        <input type="text" name="no1"> × <input type="text" name="no2"> 
        <input type="button" value="=" onclick="multi">
        <input type="text" name="product">
      </fieldset>
      <fieldset>
        <legend>Divide</legend>
        <input type="text" name="dividend"> ÷ <input type="text" name="divisor"> 
        <input type="button" value="=" onclick="divi">
        <input type="text" name="quotient">
      </fieldset>
      <fieldset>
        <legend>Area and Circumfrence of Circle</legend>
        <p>(Uses pi to 240 d.p)</p>
        <div>
          <label for="radius">Type in radius</label> <input type="text" name="radius" id="radius" value=""> 
        </div>
        <div>
          <input type="button" value="=" onclick="circarea">
        </div>
        <div>
          <label for="area">Area</label> <input type="text" name="area" id="area" value="">
        </div>
        <div>
          <label for="circumference">Circumference</label> <input type="text" name="circumference" id="circumference" value="">
        </div>
      </fieldset>
    </form> 
    <p>Licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GNU GPL</a>.</p>
  </body> 
</html>

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

JavaScript/DHTML
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.

Visit defaultLogic's partner sites below:
PopFlock.com : Music Genres | Musicians | Musical Instruments | Music Industry
NCR Works : Retail Banking | Restaurant Industry | Retail Industry | Hospitality Industry

  Contact Us