Home Course Index << Prev. Next >> PDF Version of this Page

Course API Comparison
Chapter C8: A JavaScript Application


Copyright © by V. Miszalok, last update: 01-06-2009

Introduction see: JavaScript.

APIcompareJavaScript.htm

Copy the following 40 lines of code into the empty text file APIcompareJavaScript.htm:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type"        content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type"  content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Compare JavaScript Browser Applictaion</title>
<script type="text/javascript">
  var w;
  function button1Click()
  { document.getElementById( "label" ).value = "JavaScript Browser Application. Resize!"; }
  function button2Click()
  { document.getElementById( "label" ).value = ""; }
  function resize()
  { if (document.body.clientWidth) w = document.body.clientWidth;  //IE
    else if (window.innerWidth)    w = window.innerWidth;          //Firefox
    document.getElementById( "button1" ).style.width    =
    document.getElementById( "button2" ).style.width    = Math.round( w*0.12 );
    document.getElementById( "label"   ).style.width    = Math.round( w*0.65 );
    document.getElementById( "button1" ).style.fontSize =
    document.getElementById( "button2" ).style.fontSize =
    document.getElementById( "label"   ).style.fontSize = String( Math.round( w*0.03 ) ) + 'px';
  }
</script>
</head>
<body>
  <script type="text/javascript">
          document.body.onload  = resize; //IE
          document.body.onresize= resize; //IE
          window       .onresize= resize; //Firefox
          window       .onload  = resize; //Firefox
  </script>
  <table border="1" width="100%" >
    <tr>
      <td align="center"><input id="button1" type="button" value="Talk!" onclick="button1Click();"></td>
      <td align="center"><input id="label"   type="text"   style="text-align:center"              ></td>
      <td align="center"><input id="button2" type="button" value="Clear" onclick="button2Click();"></td>
    </tr>
  </table>
</body>
</html>

Here is the result:


top of page: