【JS】我的JavaScript學習之路(2)

3.從JavaScript頁面解析過程看執行順序

代碼(test.html)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ch1_example2</title></head><body bgcolor="WHITE"><p>Paragraph 1</p><script type="text/javascript" language="JavaScript">// Script block 1
            alert("First Script Block");</script><p>Paragraph 2</p><script type="text/javascript" language="JavaScript">// Script block 2
            document.bgColor = "RED";alert("Second Script Block");</script><p>Paragraph 3</p></body>
</html>

執行后是這個樣子滴。

第一步：

第二步：

第三步：

由此看出，頁面解析是自上而下執行的，沒有異步，在提示框彈出時，頁面是暫停的，而沒有去后臺執行。

4.用JavaScript將信息寫在網頁上
接下來我們僅僅使用JavaScript來將“Hello World！”寫入空白頁面

代碼(test2.html)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ch1_example3</title></head><body><p id="ResultP"></p><script type="text/javascript" language="JavaScript">// Script block 1
            document.getElementById('ResultP').innerHTML = 'Hello World';</script></body>
</html>

在此頁中,我們使用<p id="ResultP"></p> 創建了一個id是"ResultP"的段落。為標簽創建ID，可以方便我們在頁面中找到它，也可以使我們在使用CSS時對特殊的標簽進行單獨的設計。

在創建段落之后，我們通過<script></script>引入JavaScript語句：

document.getElementById('ResultP') 可以獲取到這個id是"ResultP"的段落。

然后再通過innerHTML屬性，來更改段落中的文字為“Hello World！”

這樣我們就可以獲得一個形似<p>Hello World!</p>標簽的效果了，我們就可以在頁面上輸出“Hello World！”

轉載于:https://www.cnblogs.com/zerolin/archive/2012/08/14/2639049.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/387479.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/387479.shtml
英文地址，請注明出處：http://en.pswp.cn/news/387479.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！