一、簡介
1、概述：
JavaScript是目前web開發中不可缺少的腳本語言，js不需要編譯即可運行，運行在客戶端，需要通過瀏覽器來解析執行JavaScript代碼。
誕生於1995年，當時的主要目的是驗證表單的數據是否合法。
JavaScript本來應該叫Livescript，但是在發佈前夕，想搭上當時超熱的java順風車，臨時把名字改爲了JavaScript。（也就是說js跟java沒有關係，當時只是想借助java的名氣）。
js組成部分：
（1）核心（ECMAScript）：這一部分主要是js的基本語法。
（2）BOM：Brower Object Model（瀏覽器對象模型），主要是獲取瀏覽器信息或操作瀏覽器的，例如：瀏覽器的前進與後退、瀏覽器彈出提示框、瀏覽器地址欄輸入網址跳轉等操作等。
（3）DOM：Document Object Model（文檔對象模型），此處的文檔暫且理解爲html，html加載到瀏覽器的內存中，可以使用js的DOM技術對內存中的html節點進行修改，用戶從瀏覽器看到的是js動態修改後的頁面。（增刪改查）
2、特點：
- 交互性（它可以做的就是信息的動態交互）
- 安全性（不允許直接訪問本地硬盤）
- 跨平臺性（只要是可以解析js的瀏覽器都可以執行，和平臺無關）
3、和Java區別：
javascript ：Netscape公司的產品，最初叫Livescript。是一門直譯式腳步語言，弱類型語言
Java ： Sun公司的產品，現在是Oracle公司的產品。需要先編譯成字節碼文件再執行，強類型語言
4、作用
avaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建cookies，等等。JavaScript 是因特網上最流行的腳本語言，並且可在所有主要的瀏覽器中運行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
在目前學習階段只要記住最常用的二個：（1）運態修改html及css代碼 （2）驗證表單
5、書寫位置
5.1、內嵌式：
理論上js可以書寫在頁面的任意位置。
<script>
alert("內嵌式")
</script>
5.2、外鏈式：
首先新建一個文件類型爲.js的文件，然後在該文件中寫js語句，通過script標籤對引入到html頁面中。
<script src="js文件路徑地址">這裏不能寫js語句</script>5.3、行內式：
直接書寫在標籤身上，是一個簡寫的事件，所以又稱之爲事件屬性。 onclick單擊事件
<input type="button" value="點我呀!" onclick="alert('點我幹啥!^6^');">
<button onclick="alert('恭喜你,中 500 萬.');">點我呀!</button>6、註釋：
單行註釋： // 註釋語句 快捷鍵ctrl+/
多行註釋： /* 註釋語句 */ 快捷鍵ctrl+shift+/
注意：多行註釋相互不能嵌套使用，只能在多行註釋裏面使用單行註釋！7、數據類型：
Js中的數據類型：
數值型：number（凡是數字都是數值型，不區分整數和小數）
字符串：string（凡是引號包裹起來的內容全部都是字符串）
布爾：boolean（true、false）
對象類型：object（特殊取值null）
未定義型：undefined對比java中的數據類型：
整數：byte short int long
小數：float double
字符：char
布爾：boolean
字符串：String8、變量：
8.1、定義：就是存放數據的、內療可以存儲任意數據
8.2、聲明變量：
var 變量名稱 = 存儲的數據; (variable 變量)8.3、變量命名規範：
1. 只能由字母、數字、_（下劃線）、$（美元符號）組成。
2. 不能以數字開頭。
3. 命名中不能出現-（js會理解成減號進行減法的操作），不能和關鍵字衝突。js是弱類型語言，不重視類型的定義，但js會根據爲變量賦值的情況自定判斷該變量是何種類型：
數值型：var i = 1; var d = 2.35;
字符串：var str = "用心學習";
布爾型：var b = true;對比Java:java是強類型的語言，注重類型的定義，Java定義類型如下：
整型：int i = 1;
浮點型：double d = 2.35;
字符串：String str = “用心學習”;
布爾型：boolean b = true;總結：js中變量的定義。只要加一個var就行。java則使用什麼類型的變量就要定義什麼類型的。
9、檢測數據類型：
typeof(value); 或者typeof value; 返回這個變量的類型.
說明 : 同一個變量, 可以進行不同類型的數據賦值.<script type="text/javascript">
var a;
alert(typeof a); // undefined
a = 998;
alert(typeof a); // number
a = "用心學習";
alert(typeof a); // string
a = true;
alert(typeof a); // boolean
</script>10、算術運算符
+ - * / % ++ --注意：
1. 由於js中的小數和整數都是number類型，不存在類似整數除以整數還是整數的結論。
2. 字符串和其他的數據使用+號運算，會連接成一個新的字符串。
3. 字符串使用除了+以外的運算符：如果字符串本身是一個數字，那麼會自動轉成number進行運算
，否則就會返回一個NaN的結果，表示這不是一個數字。NaN：not a number<script>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一個數字
var s = "12";
s += 10;
alert(s); // 1210
</script>11、關係（比較）運算符
> >= < <= !=
== 等於（只比較內容） === 恆等於（比較內容的同時還要比較數據類型）
注意：關係運算符返回的結果只有兩個：true / false<script>
// 請問1 : 3 > 5, 結果爲 ?
alert(3 > 5); // false
// 請問2 : “22” == 22 結果爲 ?
alert("22" == 22); // true (僅僅判斷數值)
// 請問3 : “22” === 22 結果爲 ?
alert("22" === 22); // false (恆等於, 數值和類型都要相等)
</script>12、邏輯運算符
&& 與 true&&false ====>false
|| 或 true||false ====>true
！ 非 !true ====>false
false（理解）：false, 0, null, undefined
true（理解）：true, 非0, 非null, 非undefined
針對 && 順口溜: 找第一個出現的假值. (一假即假)
針對 || 順口溜: 找第一個出現的真值. (一真即真)演示一：
<script>
// 短路與 (一假即假)
// 口訣 : 找第一個爲假的值.
// 請問1 : 8 < 7 && 3 < 4, 結果爲 ?
alert(8 < 7 && 3 < 4); // false
// 請問2 : -2 && 6 + 6 && null 結果爲 ?
alert(-2 && 6 + 6 && null); // null
// 請問3 : 1 + 1 && 0 && 5 結果爲 ?
alert(1 + 1 && 0 && 5); // 0
</script>演示二:
<script>
// 短路或 : 一真即真.
// 口訣 : 找第一個爲真的值.
// 請問1 : 0 || 23 結果爲 ?
alert(0 || 23); // 23
// 請問2 : 0 || false || true 結果爲 ?
alert(0 || false || true); // true
// 請問3 : null || 10 < 8 || 10 + 10結果爲 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 請問4 : null || 10 < 8 || false結果爲 ?
alert(null || 10 < 8 || false); // false
</script>13、三元運算符：
條件？表達式1：表達式2
如果條件爲true，返回表達式1的結果
如果條件爲false，返回表達式2的結果演示：
<script>
// 請問1 : 3 ? “aaa” : “bbb” 結果爲 ?
alert(3 ? "aaa" : "bbb"); // aaa
// 請問2 : 0 ? “ccc” : “ddd” 結果爲 ?
alert(0 ? "ccc" : "ddd"); // ddd
</script>14、if條件語句
這個和Java中if語句一樣。
演示：
<script>
var score = 59;
if (score >= 90) {
alert("優秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>15、switch分支結構
這個和java中switch結構一樣。只是Java中表達式爲：常量 整型（去long）、字符、字符串
演示：
<script>
var score = 59;
// 需求 : 將需要一個整型數值, 不想要小數點.
// window 對象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("優秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>16、循環結構 while、do-while. for;
while(循環條件){循環體;}
do{循環體;}while(循環條件);
for(循環變量賦初值；循環條件；循環變量增值){循環語句;}
console.log（...）; 以日誌的形式在控制檯輸出結果！演示：
<script>
// 需求 : 統計 1~100 之間能夠被3和7整除的數字個數
var count = 0;
// 1. 遍歷 1~100 之間的所有整型數值
for (var i = 1; i <= 100; i++) {
// 2. 判斷
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3. 累加個數
count++;
}
}
// 4. 查看結果
// alert(count);
console.log(count);
console.log顯示如下：
21 42 63 84 4
17、循環嵌套
演示案例9*9乘法表
<style>
table {
/* 將 table 表格的線變成了細線 */
border-collapse: collapse;
/*color: red;*/
border-color: red;
}
</style>
<script>
// 需求 : 九九乘法口訣表
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
document.write("<caption>九九乘法口訣表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
18、自定義函數
函數是命名的獨立的語句段，這個語句段可以被當作一個整體來引用和執行：
格式：
function 函數名(形式參數){函數體}
調用函數：函數名(實際參數);18.1、函數只有被調用後纔會執行
18.2、如果函數需要返回值、直接使用return 返回、不會像java一樣要考慮返回值的類型
<script type="text/javascript">
// 定義一個函數 : function
function demo2() {
return 666;
}
// 調用函數 :
alert(demo2());
</script>18.3、如果函數需要傳遞參數、不需要指定參數的類型、直接使用變量即可
<script type="text/javascript">
// 定義一個函數 : function
function demo3(a, b) {
return a + b;
}
// 調用函數 :
alert(demo3(10, 20));//顯示30
</script>18.4、js中出現二個重名的函數名、後者會把前面的覆蓋掉
對比java、java有重載（同名不同參）、重寫（同名同參同返回值類型、方法體不一樣）
演示：
<script type="text/javascript">
// 定義一個函數 : function
function demo4(a, b) {
alert("調用1...");
}
function demo4() {
alert("調用2...");
}
demo4(10, 20);
demo4();
</script>網頁會顯示 調用2...
19、匿名函數
匿名函數是沒有名字的函數
function(形式參數){函數體}
調用方式：將匿名函數賦值給一個變量，通過變量名調用函數
定義函數並賦值給變量：var fn = function(形式參數){函數體}
調用函數：fn(實際參數);演示：
<script type="text/javascript">
// 匿名函數 : 沒有名稱的函數
var func = function(i, u) {
alert(i + " love " + u);
}
// 調用函數 :
func("柳巖", "小白");//顯示柳巖love小白
</script>20、案例-輪播圖
說明1 : script 標籤需要放在 body 標籤之後.
說明2 : window.setInterval(“字符串函數名稱()”, 時間毫秒數);
說明3 : window.setInterval(函數名稱, 時間毫秒數);
說明4 : window.setInterval(匿名函數, 時間毫秒數); 推薦使用<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="圖片">
</div>
</body>實現一：
<script>
// 需求 : 動態獲取頁面中的 img 標籤, 然後修改 img 標籤的 src 屬性.
// 1. 獲取 img 標籤
var img = document.getElementById("img");
// alert(img);
// 定義一個變量
var count = 1;
// 1.2 定義一個函數
function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判斷
if (count == 8) {
count = 0;
}
}
// 2. 循環切換圖片
// window.setInterval(函數, 時間毫秒); 在指定的時間毫秒間隔, 不斷調用第一個參數傳入的函數.
// 調用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 調用方式二 :
window.setInterval(changeImageSrc, 1000);
</script>實現二：
<script>
// 需求 : 動態獲取頁面中的 img 標籤, 然後修改 img 標籤的 src 屬性.
// 1. 獲取 img 標籤
var img = document.getElementById("img");
// alert(img);
// 定義一個變量
var count = 1;
// 2. 循環切換圖片
// window.setInterval(匿名函數, 時間毫秒); 在指定的時間毫秒間隔, 不斷調用第一個參數傳入的匿名函數.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判斷
if (count == 8) {
count = 0;
}
}, 1000);
</script>21、js事件
21.1、事件概述：
事件三要素：
1. 事件源：被監聽的html元素（就是這個事件加給誰），就是某個（某些）html標籤
2. 事件類型：某類動作，例如點擊事件，移入移除事件，敲擊鍵盤事件等
3. 執行指令：事件觸發後需要執行的代碼，一般使用函數進行封裝
語法格式：事件源.事件類型=執行指令案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 對象提供了一個事件類型 onload 頁面加載完成事件.
// 事件源 : window 事件類型 : 頁面加載完成事件 (onload) 執行指令: 就是賦值的 function 函數.
window.onload = function () {
// 獲取頁面的 btn 按鈕
var btn = document.getElementById("btn");
// alert(btn);
// 給 btn 按鈕綁定一個事件 (單擊事件 onclick)
// 事件源 : btn按鈕 事件類型 : 單擊事件 (onclick) 執行指令: 就是賦值的 function 函數.
btn.onclick = function () {
alert("恭喜你, 中了 500 萬!");
}
}
</script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
</html>到此基礎結束。