JavaScript/DHTML
DHTML - 是Dynamic HTML的縮寫，指的是 HTML、JavaScript 和 CSS 的組合。它並沒有引入或定義任何新的技術。
本頁面提供了一些將 HTML、JavaScript 和 CSS 整合在一起的示例。
<script>
alert('Hello World!');
</script>
這將顯示一個簡單的警示訊息。
<script>
let x = prompt('What is your name?');
</script>
這將顯示一個簡單的提示訊息。
<script>
confirm('Are you sure?');
</script>
這將顯示一個簡單的確認訊息。
有時候直接開始編碼是最好的選擇。下面是一個小程式碼段的例子
<!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="https://wikibook.tw/wiki/JavaScript">Wikibooks</a>
</p>
</body>
</html>
這段程式碼做了什麼？當它載入時，它會指定變數msg應該具有的值。以下程式碼片段是一個名為“bomb”的函式。這個函式的函式體發出了一些 alert 訊息，並改變了msg的值。
下一部分主要是 HTML，並附帶了一些 JavaScript 程式碼，與 INPUT 標籤相關聯。 "onclick" 屬性告訴它的父元素，當被點選時應該執行什麼操作。bomb 函式被分配給第一個按鈕；第二個按鈕只是顯示一個包含msg值的 alert 訊息。
<!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="https://wikibook.tw/wiki/JavaScript">Wikibooks</a>
</p>
</body>
</html>
現在，回到第一個例子。我們修改了指令碼，添加了一個不同的歡迎訊息。這個版本要求使用者輸入姓名。他們還會被詢問是否想訪問該網站。還添加了一些 CSS 程式碼到按鈕上。
<!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="https://wikibook.tw/wiki/JavaScript">Wikibooks</a>
</p>
</body>
</html>
<!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>