JavaScript系列一：入門知識點整理
阿新 • • 發佈：2019-02-12
一、準備工作：
1、為什麼學習JavaScript所有的主流瀏覽器都只是Javascript
大部分網頁都使用Javascript
它可以讓網頁呈現各種動態效果
易學
2、如何插入JS
<script>標籤要成對出現，並把JavaScript程式碼寫在<script></script>之間。
<script type="text/javascript">表示在<script></script>之間的是文字型別(text),javascript是為了告訴瀏覽器裡面的文字是屬於JavaScript語言。
可以把HTML檔案和JS程式碼分開,並單獨建立一個JavaScript檔案(簡稱JS檔案),其檔案字尾通常為.js
在JS檔案中，不需要<script>標籤,直接編寫JavaScript程式碼就可以了。
<script src="script.js"></script>
4、JS在頁面中的位置javascript作為一種指令碼語言可以放在html頁面中任何位置，我們一般放在網頁的head或者body部分。但是瀏覽器解釋html時是按先後順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head裡面，因為初始化都要求提前進行（如給頁面body設定css等）；而如果是通過事件呼叫執行的function那麼對位置沒什麼要求的。
每一句JavaScript程式碼格式: 語句;
6、註釋方法單行註釋，在註釋內容前加符號 “//”。
多行註釋以"/*"開始，以"*/"結束。
7、變數定義變數使用關鍵字var,語法如下：
var 變數名
變數名可以任意取名，但要遵循命名規則:
1.變數名必須使用字母或者下劃線(_)開始。
2.變數名必須使用英文字母、數字、下劃線(_)組成。
3.變數名不能使用JavaScript關鍵詞與JavaScript保留字。
8、判斷語句（if...else）
語法:
if(條件)
{ 條件成立時執行的程式碼 }
else
{ 條件不成立時執行的程式碼 }
9、函式
function 函式名()
{
函式程式碼;
}
說明:
1. function定義函式的關鍵字。
2. "函式名"你為函式取的名字。
3. "函式程式碼"替換為完成特定功能的程式碼。
函式呼叫:
函式定義好後，是不能自動執行的，所以需呼叫它,只需直接在需要的位置寫函式就ok了
二、常用互動方法
1、輸出內容（document.write)
document.write() 可用於直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
第一種:輸出內容用“”括起，直接輸出""號內的內容。
第二種:通過變數，輸出內容
第三種:輸出多項內容，內容之間用+號連線。
第四種:輸出HTML標籤，並起作用，標籤使用“”括起來。
2、警告（alert訊息對話方塊）
彈出一個小視窗，上面寫著一段提示資訊文字(alert彈出訊息對話方塊(包含一個確定按鈕))：alert(字串或變數);
注意:
1. 在點選對話方塊"確定"按鈕前，不能進行任何其它操作。
2. 訊息對話方塊通常可以用於除錯程式。
3. alert輸出內容，可以是字串或變數，與document.write 相似。
3、確認（confirm訊息對話方塊）
彈出對話方塊(包括一個確定按鈕和一個取消按鈕)。confirm(str);
引數說明:
str：在訊息對話方塊中要顯示的文字
返回值: Boolean值
返回值:
當用戶點選"確定"按鈕時，返回true
當用戶點選"取消"按鈕時，返回false
注: 通過返回值可以判斷使用者點選了什麼按鈕
注: 訊息對話方塊是排它的，即使用者在點選對話方塊按鈕前，不能進行任何其它操作。
彈出訊息對話方塊（包含一個確定按鈕、取消按鈕與一個文字輸入框）prompt(str1, str2);
引數說明：
str1: 要顯示在訊息對話方塊中的文字，不可修改
str2：文字框中的內容，可以修改
返回值:
1. 點選確定按鈕，文字框中的內容將作為函式返回值
2. 點選取消按鈕，將返回null
注:在使用者點選對話方塊的按鈕前，不能進行任何其它操作。
5、開啟新視窗（window.open）
open() 方法用於開啟一個新的視窗:window.open(<URL>, <視窗名稱>, <引數字串>)
引數說明:
URL：開啟視窗的網址或路徑。
視窗名稱：被開啟視窗的名稱。
可以是"_top"、"_blank"、"_selft"等。
引數字串：設定視窗引數，各引數用逗號隔開。(top,left,width,height,menubar,toolbar,scrollbars,status)
注意：
1.引數之間逗號及等號前後有空格，該字串無效，只有刪除空格才能正常執行。
2.執行結果考慮瀏覽器相容問題。
6、關閉視窗（window.close）
window.close(); //關閉指定視窗
<視窗物件>.close();
三、DOM操作
1、認識DOM
文件物件模型DOM（Document Object Model）定義訪問和處理HTML文件的標準方法。DOM 將HTML文件呈現為帶有元素、屬性和文字的樹結構（節點樹）。
1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
2. 文字節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文字。
3. 屬性節點:元素屬性，如<a>標籤的連結屬性href="http://www.imooc.com"。
2、通過ID獲取元素document.getElementById(“id”)
注:獲取的元素是一個物件，如想對元素進行操作，我們要通過它的屬性或方法。
3、innerHTML屬性.innerHTML 屬性用於獲取或替換 HTML 元素的內容。
Object.innerHTML
1.Object是獲取的元素物件，如通過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫
4、改變HTML樣式Object.style.property=new style;
注意:Object是獲取的元素物件，如通過document.getElementById("id")獲取的元素。
基本屬性表(property)；
backgroundColor/height/width/color/font/fontFamily/fontSize
5、顯示和隱藏（Display屬性）Object.style.display = value
注意:Object是獲取的元素物件，如通過document.getElementById("id")獲取的元素。
value取值:
none:此元素不會被顯示（隱藏）
block：此元素將顯示為塊級元素（顯示）
6、控制類名（className屬性）設定或返回元素的class屬性
object.className = classname
1.獲取元素的class 屬性
2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀