跳转到内容

JavaScript/DHTML

维基教科书,自由的教学读本

<=目录

DHTML(动态网页)是 JavaScript、CSS 和 HTML 的集合。

alert消息

[编辑]
<script language="javascript">
alert('Hello World!');
</script>

将有一个简单的警告消息对话框。

<script language="javascript">
res = prompt('請問您叫什麼名字?');
</script>

将有一个简单的提示输入对话框,res变量会获得在输入框中输入的文字,此时resString类型。

<script language="javascript">
res = confirm('確認?');
</script>

将有一个简单的确认消息对话框,res变量会获得确认框的结果,此时resBoolean类型,true表示确认,false表示取消。

按钮和警告消息对话框示例

[编辑]

有时候单刀直入给出完整代码是很好的:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>「按鈕」 - JavaScript</TITLE>

<script language="javascript">
x = '你沒有點擊按鈕。';
function bomb(){
alert('噢!世界末日!');
alert('10');
alert('9');
alert('8');
alert('7');
alert('6');
alert('5');
alert('4');
alert('3');
alert('2');
alert('1');
alert('!BOOM!');
alert('祝你早日精通JavaScript :-)');
x = '你點了按鈕!早就叫你別點了!';
}
</script>

<style type="text/css">
body{
background-color:#00AAC5;color:#990000;
}
</style>

</HEAD>
<BODY>

<div>
<input type="button" value="「按鈕」——請勿按我" onclick="bomb()"><br />
<input type="button" value="點擊這裡查看有沒有點擊「按鈕」" onclick="alert(x)">
</div>

這個腳本均在<a href="http://www.wikipedia.org/wiki/GNU_Free_Documentation_License">GFDL</a><a href="http://www.wikipedia.org/wiki/GNU_General_Public_License">GPL</a>下授權。詳見<a href="https://en.wikibooks.org/wiki/JavaScript">Wikibooks</a></BODY>
</HTML>

在这个脚本中,我们用onclick属性来使浏览器在单击按钮时运行引号内的脚本。所有同类属性列表如下:

此外,还可以通过脚本来指定onclick属性。


页面的生命周期

[编辑]

加载外部数据

[编辑]

新版本的浏览器都支持fetch API,可以调用这一API向任意的域名或IP地址发送数据。

以下示例为使用fetchAPI获取两个页面比较的结果,并写入页面的最底部:

data = await fetch("https://zh.wikibooks.org/w/api.php?action=compare&format=json&fromrev=1&torev=3");
text = await data.json()
document.write(text.compare["*"])

<=目录