JavaScript/DHTML
DHTML - an abbreviation for Dynamic HTML - is a term denoting the combination of HTML, JavaScript, and CSS. It does not introduce or define any new technology.
This page offers some examples of integrating HTML, JavaScript, and CSS.
alert messages
[edit | edit source]<script>alert('Hello World!');</script>This will give a simple alert message.
<script>letx=prompt('What is your name?');</script>This will give a simple prompt message.
<script>confirm('Are you sure?');</script>This will give a simple confirmation message.
Button and alert
[edit | edit source]Sometimes it is best to dig straight in with the coding. Here is an example of a small piece of code:
<!DOCTYPE html><html><head><title>"THE BUTTON" - Javascript</title><script>// 'msg' is defined outside of all functions; hence, it exists// within the global scope.letmsg='You have not pressed "THE BUTTON"'functionbomb(){"use strict";alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');alert('3');alert('2');alert('1');alert('!BOOM!');alert('Have a nice day. :-)');msg='You pressed "THE BUTTON" and I told you not to!';}functionmessage(){"use strict";alert(msg);}</script><style>body{background-color:#00aac5;color:#000}</style></head><body><div><inputtype="button"value="THE BUTTON - Don't Click It"onclick="bomb()"><p/><inputtype="button"value="Click Here And See If You Have Clicked ''THE BUTTON''"onclick="message()"></div><p> This script is dual-licensed under both, <ahref="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a></p></body></html>What does this code do? When it loads, it tells what value the variable msg should have. The following code snippet is a function that has been named "bomb". The body of this function fires some alert messages and changes the value of msg.
The next part is mainly HTML, with a bit of JavaScript attached to the INPUT tags. The "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 msg.
if - else
[edit | edit source]<!DOCTYPE html><html><head><title>Welcome Message</title><script>functionwelcomeMessage(){"use strict";name=prompt("What is your name?","");constcorrect=confirm("Are you sure your name is "+name+" ?");if(correct===true){alert("Welcome "+name);}else{welcomeMessage();}}</script><style>body{background-color:#00aac5;color:#000}</style></head><bodyonload="welcomeMessage()"><p> This script is dual-licensed under both, <ahref="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a></p></body></html>Two scripts
[edit | edit source]Now, back to the first example. We have modified the script, adding a different welcome message. This version requests the user 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><html><head><title>"THE BUTTON" - Javascript</title><script>// 'msg' is defined outside of all functions; hence, it exists// within the global scope.letmsg='You have not pressed "THE BUTTON"'functionbomb(){"use strict";alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');alert('3');alert('2');alert('1');alert('!BOOM!');alert('Have a nice day. :-)');msg='You pressed "THE BUTTON" and I told you not to!';}functionmessage(){"use strict";alert(msg);}</script><style>body{background-color:#00aac5;color:#000}</style></head><bodyonload="welcome()"><script>functionwelcome(){"use strict";constname=prompt('What is your name?','');if(name==""||name=="null"){alert('You have not entered a name');welcome();returnfalse;}constvisit=confirm('Do you want to visit this website?')if(visit==true){alert('Welcome '+name);}else{window.location=history.go(-1);}}</script><div><inputtype="button"value="THE BUTTON - Don't Click It"onclick="bomb()"STYLE="color: #ffdd00; background-color: #ff0000"><p/><inputtype="button"value="Click Here And See If You Have Clicked ''THE BUTTON''"onclick="message()"></div><p> This script is dual-licensed under both, <ahref="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</a></p></body></html>Simple calculator
[edit | edit source]<!DOCTYPE html><html><head><title>Calculator</title><script>functionmulti(){"use strict";consta=document.Calculator.no1.value;constb=document.Calculator.no2.value;constp=(a*b);document.Calculator.product.value=p;}functiondivi(){"use strict";constd=document.Calculator.dividend.value;conste=document.Calculator.divisor.value;constq=(d/e);document.Calculator.quotient.value=q;}functioncircarea(){"use strict";constr=document.Calculator.radius.value;consta=Math.PI*(r*r);document.Calculator.area.value=a;constc=2*Math.PI*r;document.Calculator.circumference.value=c;}</script><style>body{background-color:#00aac5;color:#000}label{float:left;width:7em}</style></head><body><h1>Calculator</h1><formname="Calculator"action=""><fieldset><legend>Multiply</legend><inputtype="text"name="no1"> × <inputtype="text"name="no2"><inputtype="button"value="="onclick="multi()"><inputtype="text"name="product"></fieldset><fieldset><legend>Divide</legend><inputtype="text"name="dividend"> ÷ <inputtype="text"name="divisor"><inputtype="button"value="="onclick="divi()"><inputtype="text"name="quotient"></fieldset><fieldset><legend>Area and Circumfrence of Circle</legend><div><labelfor="radius">Type in radius</label><inputtype="text"name="radius"id="radius"value=""></div><div><inputtype="button"value="="onclick="circarea()"></div><div><labelfor="area">Area</label><inputtype="text"name="area"id="area"value=""></div><div><labelfor="circumference">Circumference</label><inputtype="text"name="circumference"id="circumference"value=""></div></fieldset></form><p>Licensed under the <ahref="http://www.gnu.org/licenses/gpl.html">GNU GPL</a>.</p></body></html>