為方便閱讀，該內容需具備一定的HTML+CSS基礎。
為什么學習JavaScript
- 一、為什么
JavaScript非常值得我們學習？- 所有主流瀏覽器都支持
JavaScript。 - 目前，全世界大部分網頁都使用
JavaScript。 - 它可以讓網頁呈現各種動態效果。
- 做為一個
Web開發師，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。
- 所有主流瀏覽器都支持
- 二、易學性
- 學習環境無外不在，只要有文本編輯器，就能編寫
JavaScript程序。 - 我們可以用簡單命令，完成一些基本操作。
- 學習環境無外不在，只要有文本編輯器，就能編寫
- 三、從哪開始學習呢？
- 學習
JavaScript的起點就是處理網頁，所以我們先學習基礎語法和如何使用DOM進行簡單操作。
- 學習
如何插入JS
- 使用
<script>標簽在HTML網頁中插入JavaScript代碼。注意，<script>標簽要成對出現，并把JavaScript代碼寫在<script></script>之間。 -
<script type="text/javascript">表示在<script></script>之間的是文本類型(text),javascript是為了告訴瀏覽器里面的文本是屬于JavaScript語言。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>插入js代碼</title>
<script type="text/javascript">
document.write("開啟JS之旅!");
</script>
</head>
<body>
</body>
</html>
引用JS外部文件
- 我們可以把
HTML文件和JS代碼分開,并單獨創建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js，然后將JS代碼直接寫在JS文件中。
52898b400001d04005500266.jpg.png
注意:在JS文件中，不需要
<script>標簽,直接編寫JavaScript代碼就可以了。
- JS文件不能直接運行，需嵌入到
HTML文件中執行，我們需在HTML中添加如下代碼，就可將JS文件嵌入HTML文件中。<script src="script.js"></script>
52898b6900018aeb05540284.jpg.png
JS在頁面中的位置
- 可以將
JavaScript代碼放在html文件中任何位置，但是我們一般放在網頁的head或者body部分。 - 放在
<head>部分- 最常用的方式是在頁面中
head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，然后才解析頁面的其余部分。
- 最常用的方式是在頁面中
- 放在
<body>部分-
JavaScript代碼在網頁讀取到該語句的時候就會執行。
-
-
注意:
javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先后順序的，所以前面的script就先被執行。- 比如：進行頁面顯示初始化的
js必須放在head里面，因為初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那么對位置沒什么要求的。
- 比如：進行頁面顯示初始化的
認識語句和符號
<script type="text/javascript">
alert("hello!");
</script>
- 例子中的
alert("hello!");就是一個JavaScript語句。 - 一行的結束就被認定為語句的結束，通常在結尾加上一個分號
;來表示語句的結束。 -
注意:
-
;分號要在英文狀態下輸入，同樣，JS中的代碼和符號都要在英文狀態下輸入。 - 雖然分號
;也可以不寫，但我們要養成編程的好習慣，記得在語句末尾寫上分號。
-
注釋
- 單行注釋，在注釋內容前加符號
//。 - 多行注釋以
/*開始，以*/結束。
什么是變量
- 從編程角度講，變量是用于存儲某種/某些數值的存儲器。
- 定義變量使用關鍵字
var,語法如下：var 變量名
- 變量名可以任意取名，但要遵循命名規則:
- 1.變量必須使用字母、下劃線
_或者美元符$開始。 - 2.然后可以使用任意多個英文字母、數字、下劃線
_或者美元符$組成。 - 3.不能使用
JavaScript關鍵詞與JavaScript保留字。
- 1.變量必須使用字母、下劃線
- 變量要先聲明再賦值
- 變量可以重復賦值
-
注意:
- 在
JS中區分大小寫. - 變量雖然也可以不聲明，直接使用，但不規范，需要先聲明，后使用。
- 在
判斷語句（if...else）
-
if...else語句是在指定的條件成立時執行代碼，在條件不成立時執行else后的代碼。
if(條件){
條件成立時執行的代碼
} else {
條件不成立時執行的代碼
}
什么是函數
- 函數是完成某個特定功能的一組語句。
function 函數名()
{
函數代碼;
}
- 說明:
-
function定義函數的關鍵字。 -
函數名你為函數取的名字。 -
函數代碼替換為完成特定功能的代碼。
-
function add2(){
var sum = 3 + 2;
alert(sum);
}
- 函數調用:
- 函數定義好后，是不能自動執行的，所以需調用它,只需直接在需要的位置寫函數就 ok 了,
5419430400012de808370459.jpg
輸出內容document.write
-
document.write()可用于直接向HTML輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
- 第一種:輸出內容用
""括起，直接輸出""號內的內容
<script type="text/javascript">
document.write("I love JavaScript！"); //內容用""括起來，""里的內容直接輸出。
</script>
* 第二種:通過變量，輸出內容 ```js <script type="text/javascript">
var mystr="hello world!";
document.write(mystr); //直接寫變量名，輸出變量存儲的內容。
</script>
* 第三種:輸出多項內容，內容之間用`+`號連接。 ```js <script type="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接
</script>
* 第四種:輸出`HTML`標簽，并起作用，標簽使用`""`括起來。 ```js <script type="text/javascript">
var mystr="hello";
document.write(mystr+"
");//輸出hello后，輸出一個換行符
document.write("JavaScript");
</script>
- JS中如何輸出空格
在寫JS代碼的時候，大家可以會發現這樣現象:
document.write(" 1 2 3 ");
結果: 1 2 3
> 無論在輸出的內容中什么位置有多少個空格，顯示的結果好像只有一個空格。
>
> 這是因為瀏覽器顯示機制，對手動敲入的空格，將連續多個空格顯示成1個空格。
>
>* **解決方法:**
>* 1. 使用輸出html標簽 來解決
>```js
document.write(" "+"1"+" "+"23");
結果: 1 23
- 使用
CSS樣式來解決
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
結果: 1 2 3
> 在輸出時添加`white-space:pre;`樣式屬性。這個樣式表示**空白會被瀏覽器保留**
###警告（alert 消息對話框）
* 我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用`alert`實現的。
* `alert(字符串或變量); `
* **注意:**
1. 在點擊對話框`確定`按鈕前，不能進行任何其它操作。
2. 消息對話框通常可以用于調試程序。
3. `alert`輸出內容，可以是字符串或變量，與`document.write`相似。
###確認（confirm 消息對話框）
* `confirm`消息對話框通常用于允許用戶做選擇的動作
* `confirm(str);`
* 參數說明:
* `str：`在消息對話框中要顯示的文本
* 返回值: `Boolean值`
* 注: 用戶在點擊對話框按鈕前，不能進行任何其它操作。
```js
<script type="text/javascript">
var mymessage=confirm("你喜歡JavaScript嗎?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能強大，要學習噢!");
}
</script>
52e35bc60001f01a04230353.jpg
提問（prompt 消息對話框）
-
prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。 prompt(str1, str2);- 參數說明：
-
str1:要顯示在消息對話框中的文本，不可修改 -
str2：文本框中的內容，可以修改
-
- 返回值:
- 點擊確定按鈕，文本框中的內容將作為函數返回值
- 點擊取消按鈕，將返回
null
- 注:在用戶點擊對話框的按鈕前，不能進行任何其它操作。
var myname=prompt("請輸入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
52e360780001ede107090353.jpg
打開新窗口（window.open）
-
open()方法可以查找一個已經存在或者新建的瀏覽器窗口。 window.open([URL], [窗口名稱], [參數字符串])
- 參數說明:
- URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。
- 窗口名稱：可選參數，被打開窗口的名稱。
- 該名稱由字母、數字和下劃線字符組成。
_top、_blank、_self具有特殊意義的名稱。`_blank：`在新窗口顯示目標網頁 ` _self：`在當前窗口顯示目標網頁 `_top：`框架網頁中在上部窗口中顯示目標網頁
- 相同
name的窗口只能創建一個，要想創建多個窗口則name不能相同。
name不能包含有空格。- 參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
52e3677900013d6a05020261.jpg
<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
關閉窗口（window.close）
-
close()關閉窗口 window.close(); //關閉本窗口<窗口對象>.close(); //關閉指定的窗口
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中
mywin.close();
</script>
認識DOM
- 文檔對象模型
DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
- 如下一段代碼：
52e4be610001c67307860420.jpg
- 將
HTML代碼分解為DOM節點層次圖:
52e4bd0f0001dd8d04830279.jpg
- HTML文檔可以說由節點構成的集合，三種常見的DOM節點:
- 元素節點：上圖中
<html>、<body>、<p>等都是元素節點，即標簽。- 文本節點:向用戶展示的內容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。- 屬性節點:元素屬性，如
<a>標簽的鏈接屬性。
- 看該代碼:
<a >JavaScript DOM</a>
52e4bdb80001064c04480196.jpg
通過ID獲取元素
- 學過
HTML/CSS樣式，都知道，網頁由標簽將信息組織起來，而標簽的id屬性值是唯一的。那么在網頁中，我們通過id先找到標簽，然后進行操作。 document.getElementById(“id”)
52e4c5950001054207900423.jpg
52e4c6080001734c03800275.jpg
因為代碼從上到下執行，所以為
null如果
script代碼在內容后面，就打印[object HTMLParagraphElement]
注:獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。
innerHTML 屬性
-
innerHTML屬性用于獲取或替換HTML元素的內容。 Object.innerHTML- 注意:
-
Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。 - 注意書寫，
innerHTML區分大小寫。
-
52e4cd080001f01507220418.jpg
52e4cb5c000187ce03740251.jpg
改變 HTML 樣式
-
HTML DOM允許JavaScript改變HTML元素的樣式. Object.style.property=new style;-
注意:
Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
52e4d4240001dd6c04850229.jpg
注意:該表只是一小部分
CSS樣式屬性，其它樣式也可以通過該方法設置和修改。
- 如下代碼：改變
<p>元素的樣式，將顏色改為紅色，字號改為20,背景顏色改為藍：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20px";
mychar.style.backgroundColor ="blue";
</script>
52e4d6ae000177d203770253.jpg
顯示和隱藏（display屬性）
Object.style.display = value-
Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
value取值
52e4dba5000179da04110095.jpg
52e4dcf50001bead09310689.jpg
控制類名（className 屬性）
-
className屬性設置或返回元素的class 屬性。 object.className = classname- 作用:
- 獲取元素的
class屬性 - 為網頁內的某個元素指定一個
css樣式來更改該元素的外觀
- 獲取元素的
52e4e28c0001c97f07980838.jpg
52e4e711000135d903810270.jpg
補充
所有設置恢復原始值的寫法：object.removeAttribute('style')
