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
<script>
alert('Hello World!');
</script>
This will give a simple alert message.
<script>
let x = 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
editSometimes 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.
let msg = 'You have not pressed "THE BUTTON"'
function bomb() {
"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!';
}
function message() {
"use strict";
alert(msg);
}
</script>
<style>
body {
background-color:#00aac5;
color:#000
}
</style>
</head>
<body>
<div>
<input type="button" value="THE BUTTON - Don't Click It" onclick="bomb()">
<p />
<input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="message()">
</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 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<!DOCTYPE html>
<html>
<head>
<title>Welcome Message</title>
<script>
function welcomeMessage() {
"use strict";
name = prompt("What is your name?", "");
const correct = 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>
<body onload="welcomeMessage()">
<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>
Two scripts
editNow, 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.
let msg = 'You have not pressed "THE BUTTON"'
function bomb() {
"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!';
}
function message() {
"use strict";
alert(msg);
}
</script>
<style>
body {
background-color:#00aac5;
color:#000
}
</style>
</head>
<body onload="welcome()">
<script>
function welcome() {
"use strict";
const name = prompt('What is your name?', '');
if (name == "" || name == "null") {
alert('You have not entered a name');
welcome();
return false;
}
const 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">
<p />
<input type="button" value="Click Here And See If You Have Clicked ''THE BUTTON''" onclick="message()">
</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>
Simple calculator
edit<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script>
function multi() {
"use strict";
const a = document.Calculator.no1.value;
const b = document.Calculator.no2.value;
const p = (a*b);
document.Calculator.product.value = p;
}
function divi() {
"use strict";
const d = document.Calculator.dividend.value;
const e = document.Calculator.divisor.value;
const q = (d/e);
document.Calculator.quotient.value = q;
}
function circarea() {
"use strict";
const r = document.Calculator.radius.value;
const a = Math.PI * (r * r);
document.Calculator.area.value = a;
const c = 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>
<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>
<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>