庸人自學JavaScript（二）
1.JavaScript用法
HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
<script> 標籤
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標籤。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
<script> 和 </script> 之間的代碼行包含了 JavaScript:
<script>
Advertisements
alert("我的第一個 JavaScript");
</script>
你無需理解上面的代碼。只需明白，瀏覽器會解釋並執行位於 <script> 和 </script>之間的 JavaScript 代碼
<body> 中的 JavaScript
在本例中，JavaScript 會在頁面載入時向 HTML 的 <body> 寫文本：
<!DOCTYPE html><html><meta charset="utf-8"><body>..<script>document.write("<h1>今日頭條一個標題</h1>");document.write("<p>今日頭條一個段落</p>");</script>..</body></html>
Advertisements
2.JavaScript 函數和事件
上面例子中的 JavaScript 語句，會在頁面載入時執行。
通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。
如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。
您將在稍後的章節學到更多有關 JavaScript 函數和事件的知識。
在 <head> 或者 <body> 的JavaScript
您可以在 HTML 文檔中放入不限數量的腳本。
腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。
通常的做法是把函數放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會幹擾頁面的內容。
<head> 中的 JavaScript 函數
在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <head> 部分。
該函數會在點擊按鈕時被調用：
<!DOCTYPE html><html><meta charset="UTF-8"><head><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數在'head裡面'";}</script></head><body><h1>我的 Web 頁面</h1><p id="demo">一個段落</p><button type="button" onclick="myFunction()">嘗試一下</button></body></html>
點擊嘗試一下之前效果
點擊嘗試一下之後效果
<body> 中的 JavaScript 函數
在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <body> 部分。
該函數會在點擊按鈕時被調用：
<!DOCTYPE html><html><meta charset="utf-8"><body><h1>我的 Web 頁面</h1><p id="demo">一個段落</p><button type="button" onclick="myFunction()">嘗試一下</button><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";}</script></body></html>效果圖如上在<head>裡面一樣
外部的 JavaScript
也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：
<!DOCTYPE html><html><body><script src="myScript.js"></script></body></html>
3.JavaScript的輸出
JavaScript 沒有任何列印或者輸出的函數。
JavaScript 顯示數據
JavaScript 可以通過不同的方式來輸出數據：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制台。
使用 window.alert()
你可以彈出警告框來顯示數據：
<!DOCTYPE html><html><meta charset="UTF-8"><body><h1>我的第一個頁面</h1><p>我的第一個段落。</p><script>window.alert(5 + 6);</script></body></html>
載入頁面時效果
點擊確定後效果
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素，並 innerHTML 來獲取或插入元素內容：
<!DOCTYPE html><html><body><h1>我的第一個 Web 頁面</h1><p id="demo">我的第一個段落</p><script>document.getElementById("demo").innerHTML = "段落已修改。";</script></body></html>以上 JavaScript 語句（在 <script> 標籤中）可以在 web 瀏覽器中執行：
document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = "段落已修改。" 是用於修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼。
寫到 HTML 文檔
出於測試目的，您可以將JavaScript直接寫在HTML 文檔中：
<!DOCTYPE html><html><body><h1>我的第一個 Web 頁面</h1><p>我的第一個段落。</p><script>document.write(Date());</script></body></html>
請使用 document.write() 僅僅向文檔輸出寫內容。
如果在文檔已完成載入后執行 document.write，整個 HTML 頁面將被覆蓋。
<!DOCTYPE html><html><body><h1>我的第一個 Web 頁面</h1><p>我的第一個段落。</p><button onclick="myFunction()">點我</button><script>function myFunction() {document.write(Date());}</script></body></html>大家有機會可以自己試試上面2種效果
寫到控制台
如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。
<!DOCTYPE html><html><body><h1>我的第一個 Web 頁面</h1><script>a = 5;b = 6;c = a + b;console.log(c);</script></body></html>
console.log()的用處
主要是方便你調式javascript用的, 你可以看到你在頁面中輸出的內容。
相比alert他的優點是：
他能看到結構化的東西，如果是alert，淡出一個對象就是[object object],但是console能看到對象的內容。
console不會打斷你頁面的操作，如果用alert彈出來內容，那麼頁面就死了，但是console輸出內容后你頁面還可以正常操作。
console裡面的內容非常豐富，你可以在控制台輸入 console，然後就可看到：
喜歡就關注我一下吧！
2018.01.04 11：28
頭條新手：不懂世事的庸人