JavaScript/DHTML
外觀
DHTML(動態網頁)是 JavaScript、CSS 和 HTML 的集合。
alert
消息
[編輯]<script language="javascript">
alert('Hello World!');
</script>
將有一個簡單的警告消息對話框。
<script language="javascript">
res = prompt('請問您叫什麼名字?');
</script>
將有一個簡單的提示輸入對話框,res
變量會獲得在輸入框中輸入的文字,此時res
為String
類型。
<script language="javascript">
res = confirm('確認?');
</script>
將有一個簡單的確認消息對話框,res
變量會獲得確認框的結果,此時res
為Boolean
類型,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["*"])