< JavaScript
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.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://en.wikibooks.org/wiki/JavaScript">Wikibooks</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.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://textbook.wikipedia.org/wiki/Programming:Javascript">Wikibooks</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.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a> and <a href="GNU General Public License">GPL</a>. See <a href="http://textbook.wikipedia.org/wiki/Programming:Javascript">Wikibooks</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 is issued from
Wikibooks.
The text is licensed under Creative
Commons - Attribution - Sharealike.
Additional terms may apply for the media files.