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://wikibooks.cn/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://wikibooks.cn/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://wikibooks.cn/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>