Home | Course Index | << Prev. | Next >> | PDF Version of this Page |
Course API Comparison
|
Introduction see: JavaScript.
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: |