原?javaScript學(xué)習(xí)筆記（一）js基礎(chǔ)
一橄维、簡介
1尺铣、概述：
JavaScript是目前web開發(fā)中不可缺少的腳本語言，js不需要編譯即可運行争舞，運行在客戶端凛忿，需要通過瀏覽器來解析執(zhí)行JavaScript代碼。
誕生于1995年竞川，當(dāng)時的主要目的是驗證表單的數(shù)據(jù)是否合法店溢。
JavaScript本來應(yīng)該叫Livescript，但是在發(fā)布前夕委乌，想搭上當(dāng)時超熱的java順風(fēng)車床牧，臨時把名字改為了JavaScript。（也就是說js跟java沒有關(guān)系遭贸，當(dāng)時只是想借助java的名氣）戈咳。
js組成部分：
（1）核心（ECMAScript）：這一部分主要是js的基本語法。
（2）BOM：Brower Object Model（瀏覽器對象模型），主要是獲取瀏覽器信息或操作瀏覽器的著蛙，例如：瀏覽器的前進與后退删铃、瀏覽器彈出提示框、瀏覽器地址欄輸入網(wǎng)址跳轉(zhuǎn)等操作等踏堡。
（3）DOM：Document Object Model（文檔對象模型）猎唁，此處的文檔暫且理解為html，html加載到瀏覽器的內(nèi)存中顷蟆，可以使用js的DOM技術(shù)對內(nèi)存中的html節(jié)點進行修改胖秒，用戶從瀏覽器看到的是js動態(tài)修改后的頁面。（增刪改查）
2慕的、特點：
交互性（它可以做的就是信息的動態(tài)交互）
安全性（不允許直接訪問本地硬盤）
跨平臺性（只要是可以解析js的瀏覽器都可以執(zhí)行阎肝，和平臺無關(guān)
4、作用
avaScript 被用來改進設(shè)計肮街、驗證表單风题、檢測瀏覽器、創(chuàng)建cookies嫉父，等等沛硅。JavaScript 是因特網(wǎng)上最流行的腳本語言，并且可在所有主要的瀏覽器中運行绕辖，比如：?Internet Explorer摇肌、 Maxthon、Mozilla仪际、Firefox围小、Netscape、Chrome和 Opera等树碱。
在目前學(xué)習(xí)階段只要記住最常用的二個：（1）運態(tài)修改html及css代碼 （2）驗證表單
5肯适、書寫位置
5.1、內(nèi)嵌式：
理論上js可以書寫在頁面的任意位置成榜。
<script>
alert("內(nèi)嵌式")
</script>
5.2框舔、外鏈式：
首先新建一個文件類型為.js的文件，然后在該文件中寫js語句赎婚，通過script標簽對引入到html頁面中刘绣。
<script src="js文件路徑地址">這里不能寫js語句</script>
5.3、行內(nèi)式：
直接書寫在標簽身上挣输，是一個簡寫的事件纬凤，所以又稱之為事件屬性。???? onclick單擊事件
<input type="button" value="點我呀!" onclick="alert('點我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 萬.');">點我呀!</button>
6歧焦、注釋：
單行注釋： // 注釋語句 快捷鍵ctrl+/
多行注釋： /* 注釋語句 */? ? 快捷鍵ctrl+shift+/?
注意：多行注釋相互不能嵌套使用移斩，只能在多行注釋里面使用單行注釋肚医！
7绢馍、數(shù)據(jù)類型：
Js中的數(shù)據(jù)類型：
數(shù)值型：number（凡是數(shù)字都是數(shù)值型向瓷，不區(qū)分整數(shù)和小數(shù)）
字符串：string（凡是引號包裹起來的內(nèi)容全部都是字符串）
布爾：boolean（true、false）
對象類型：object（特殊取值null）
未定義型：undefined
對比java中的數(shù)據(jù)類型：
整數(shù)：byte short int long
小數(shù)：float double
字符：char
布爾：boolean
字符串：String
8舰涌、變量：
8.1猖任、定義：就是存放數(shù)據(jù)的、內(nèi)療可以存儲任意數(shù)據(jù)
8.2瓷耙、聲明變量：
var 變量名稱 = 存儲的數(shù)據(jù);? (variable 變量)
8.3朱躺、變量命名規(guī)范：
1. 只能由字母、數(shù)字搁痛、_（下劃線）长搀、$（美元符號）組成。
2. 不能以數(shù)字開頭鸡典。
3. 命名中不能出現(xiàn)-（js會理解成減號進行減法的操作）源请，不能和關(guān)鍵字沖突。
js是弱類型語言彻况，不重視類型的定義谁尸，但js會根據(jù)為變量賦值的情況自定判斷該變量是何種類型：
數(shù)值型：var i = 1; var d = 2.35;
字符串：var str = "用心學(xué)習(xí)";
布爾型：var b = true;
對比Java:java是強類型的語言，注重類型的定義纽甘，Java定義類型如下：
整型：int i = 1;
浮點型：double d = 2.35;
字符串：String str = “用心學(xué)習(xí)”;
布爾型：boolean b = true;
總結(jié)：js中變量的定義良蛮。只要加一個var就行。java則使用什么類型的變量就要定義什么類型的悍赢。
9决瞳、檢測數(shù)據(jù)類型：
typeof(value); 或者typeof value;? ? 返回這個變量的類型.
說明 : 同一個變量, 可以進行不同類型的數(shù)據(jù)賦值.
<script type="text/javascript">
? ? var a;
? ? alert(typeof a);? // undefined
? ? a = 998;
? ? alert(typeof a); // number
? ? a = "用心學(xué)習(xí)";
? ? alert(typeof a); // string
? ? a = true;
? ? alert(typeof a); // boolean
</script>
10、算術(shù)運算符
+ - * / % ++ --
注意：
1. 由于js中的小數(shù)和整數(shù)都是number類型左权，不存在類似整數(shù)除以整數(shù)還是整數(shù)的結(jié)論瞒斩。
2. 字符串和其他的數(shù)據(jù)使用+號運算，會連接成一個新的字符串涮总。
3. 字符串使用除了+以外的運算符：如果字符串本身是一個數(shù)字胸囱，那么會自動轉(zhuǎn)成number進行運算
，否則就會返回一個NaN的結(jié)果瀑梗，表示這不是一個數(shù)字烹笔。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 不是一個數(shù)字
? ? var s = "12";
? ? s += 10;
? ? alert(s);? ? ? // 1210
</script>
11、關(guān)系（比較）運算符
> >= < <=? !=
== 等于（只比較內(nèi)容） === 恒等于（比較內(nèi)容的同時還要比較數(shù)據(jù)類型）
注意：關(guān)系運算符返回的結(jié)果只有兩個：true / false
<script>
? ? // 請問1 : 3 > 5, 結(jié)果為 ?
? ? alert(3 > 5);? // false
? ? // 請問2 : “22” == 22? 結(jié)果為 ?
? ? alert("22" == 22); // true? (僅僅判斷數(shù)值)
? ? // 請問3 : “22” === 22? 結(jié)果為 ?
? ? alert("22" === 22);? // false? (恒等于, 數(shù)值和類型都要相等)
</script>
12抛丽、邏輯運算符
&& 與 true&&false ====>false
|| 或 true||false ====>true
谤职！ 非 !true ====>false
false（理解）：false,? 0,? null,? undefined
true（理解）：true, 非0,? 非null,? 非undefined
針對 && 順口溜: 找第一個出現(xiàn)的假值. (一假即假)
針對 || 順口溜: 找第一個出現(xiàn)的真值. (一真即真)
演示一：
<script>
? ? // 短路與 (一假即假)
? ? // 口訣 : 找第一個為假的值.
? ? // 請問1 :? 8 < 7 && 3 < 4, 結(jié)果為 ?
? ? alert(8 < 7 && 3 < 4);? // false
? ? // 請問2 :? -2 && 6 + 6 && null 結(jié)果為 ?
? ? alert(-2 && 6 + 6 && null); // null
? ? // 請問3 :? 1 + 1 && 0 && 5? 結(jié)果為 ?
? ? alert(1 + 1 && 0 && 5); // 0
</script>
演示二:
<script>
? ? // 短路或 : 一真即真.
? ? // 口訣 : 找第一個為真的值.
? ? // 請問1 :? 0 || 23 結(jié)果為 ?
? ? alert(0 || 23); // 23
? ? // 請問2 :? 0 || false || true? 結(jié)果為 ?
? ? alert(0 || false || true); // true
? ? // 請問3 :? null || 10 < 8 || 10 + 10結(jié)果為 ?
? ? alert(null || 10 < 8 || 10 + 10);? // 20
? ? // 請問4 :? null || 10 < 8 || false結(jié)果為 ?
? ? alert(null || 10 < 8 || false); // false
</script>
13、三元運算符：
條件亿鲜？表達式1：表達式2
如果條件為true允蜈，返回表達式1的結(jié)果
如果條件為false冤吨，返回表達式2的結(jié)果
演示：
<script>
? ? // 請問1 :? 3 ? “aaa” : “bbb” 結(jié)果為 ?
? ? alert(3 ? "aaa" : "bbb");? ? ? // aaa
? ? // 請問2 :? 0 ? “ccc” : “ddd”? 結(jié)果為 ?
? ? alert(0 ? "ccc" : "ddd");? ? ? // ddd
</script>
14、if條件語句
這個和Java中if語句一樣饶套。
演示：
<script>
? ? ? var score = 59;
? ? ? if (score >= 90) {
? ? ? ? ? alert("優(yōu)秀");
? ? ? } else if (score >= 80) {
? ? ? ? ? alert("良好");
? ? ? } else if (score >= 60) {
? ? ? ? ? alert("及格");
? ? ? } else {
? ? ? ? ? alert("不及格");
? ? ? }
? </script>
15漩蟆、switch分支結(jié)構(gòu)
這個和java中switch結(jié)構(gòu)一樣。只是Java中表達式為：常量 整型（去long）妓蛮、字符怠李、字符串
演示：
<script>
? ? ? var score = 59;
? ? ? // 需求 : 將需要一個整型數(shù)值, 不想要小數(shù)點.
? ? ? // window 對象的 parseInt 方法.
? ? ? score = window.parseInt(score / 10 + "");
? ? ? // alert(score);
? ? ? switch (score) {
? ? ? ? ? case 10:
? ? ? ? ? case 9:
? ? ? ? ? ? ? alert("優(yōu)秀!");
? ? ? ? ? ? ? break;
? ? ? ? ? case 8:
? ? ? ? ? ? ? alert("良好!");
? ? ? ? ? ? ? break;
? ? ? ? ? case 7:
? ? ? ? ? case 6:
? ? ? ? ? ? ? alert("及格!");
? ? ? ? ? ? ? break;
? ? ? ? ? default:
? ? ? ? ? ? ? alert("不及格!");
? ? ? ? ? ? ? break;
? ? ? }
? </script>
16、循環(huán)結(jié)構(gòu)?while蛤克、do-while. for;
while(循環(huán)條件){循環(huán)體;}
do{循環(huán)體;}while(循環(huán)條件);
for(循環(huán)變量賦初值捺癞；循環(huán)條件；循環(huán)變量增值){循環(huán)語句;}
console.log（...）; 以日志的形式在控制臺輸出結(jié)果构挤！
演示：
<script>
? ? // 需求 : 統(tǒng)計 1~100 之間能夠被3和7整除的數(shù)字個數(shù)
? ? var count = 0;
? ? // 1. 遍歷 1~100 之間的所有整型數(shù)值
? ? for (var i = 1; i <= 100; i++) {
? ? ? ? // 2. 判斷
? ? ? ? if (i % 3 == 0 && i % 7 == 0) {
? ? ? ? ? ? // alert(i);
? ? ? ? ? ? console.log(i);
? ? ? ? ? ? // 3. 累加個數(shù)
? ? ? ? ? ? count++;
? ? ? ? }
? ? }
? ? // 4. 查看結(jié)果
? ? // alert(count);
? ? console.log(count);? ?//4
console.log顯示如下：
17髓介、循環(huán)嵌套
演示案例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、自定義函數(shù)
函數(shù)是命名的獨立的語句段筋现，這個語句段可以被當(dāng)作一個整體來引用和執(zhí)行：
格式：
function 函數(shù)名(形式參數(shù)){函數(shù)體}
調(diào)用函數(shù)：函數(shù)名(實際參數(shù));
18.1唐础、函數(shù)只有被調(diào)用后才會執(zhí)行
18.2、如果函數(shù)需要返回值夫否、直接使用return?返回彻犁、不會像java一樣要考慮返回值的類型
<script type="text/javascript">
? ? // 定義一個函數(shù) : function
? ? function demo2() {
? ? ? ? return 666;
? ? }
? ? // 調(diào)用函數(shù) :
? ? alert(demo2());
</script>
18.3、如果函數(shù)需要傳遞參數(shù)凰慈、不需要指定參數(shù)的類型汞幢、直接使用變量即可
<script type="text/javascript">
? ? // 定義一個函數(shù) : function
? ? function demo3(a, b) {
? ? ? ? return a + b;
? ? }
? ? // 調(diào)用函數(shù) :
? ? alert(demo3(10, 20));//顯示30
</script>
18.4、js中出現(xiàn)二個重名的函數(shù)名微谓、后者會把前面的覆蓋掉
對比java森篷、java有重載（同名不同參）、重寫（同名同參同返回值類型豺型、方法體不一樣）
演示：
<script type="text/javascript">
? ? // 定義一個函數(shù) : function
? ? function demo4(a, b) {
? ? ? ? alert("調(diào)用1...");
? ? }
? function demo4() {
? ? ? alert("調(diào)用2...");
? }
? ? demo4(10, 20);
? ? demo4();
</script>
會顯示二次下面的圖片：
19仲智、匿名函數(shù)
匿名函數(shù)是沒有名字的函數(shù)
function(形式參數(shù)){函數(shù)體}
調(diào)用方式：將匿名函數(shù)賦值給一個變量，通過變量名調(diào)用函數(shù)
定義函數(shù)并賦值給變量：var fn = function(形式參數(shù)){函數(shù)體}
調(diào)用函數(shù)：fn(實際參數(shù));
演示：
<script type="text/javascript">
? ? // 匿名函數(shù) : 沒有名稱的函數(shù)
? ? var func = function(i, u) {
? ? ? ? alert(i + " love " + u);
? ? }
? ? // 調(diào)用函數(shù) :
? func("柳巖", "小白");//顯示柳巖love小白
</script>
20姻氨、案例-輪播圖
說明1 : script 標簽需要放在 body 標簽之后.
說明2 : window.setInterval(“字符串函數(shù)名稱()”, 時間毫秒數(shù));
說明3 : window.setInterval(函數(shù)名稱, 時間毫秒數(shù));
說明4 : window.setInterval(匿名函數(shù), 時間毫秒數(shù));??????????? 推薦使用
<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>
實現(xiàn)一：
<script>
? ? // 需求 : 動態(tài)獲取頁面中的 img 標簽, 然后修改 img 標簽的 src 屬性.
? ? // 1. 獲取 img 標簽
? ? var img = document.getElementById("img");
? ? // alert(img);
? ? // 定義一個變量
? ? var count = 1;
? ? // 1.2 定義一個函數(shù)
? ? function changeImageSrc() {
? ? ? ? count++;
? ? ? ? img.src = "../img/0"+count+".jpg";
? ? ? ? // 判斷
? ? ? ? if (count == 8) {
? ? ? ? ? ? count = 0;
? ? ? ? }
? ? }
? ? // 2. 循環(huán)切換圖片
? ? // window.setInterval(函數(shù), 時間毫秒); 在指定的時間毫秒間隔, 不斷調(diào)用第一個參數(shù)傳入的函數(shù).
? ? // 調(diào)用方式一 :
? ? // window.setInterval("changeImageSrc()", 1000);
? ? // 調(diào)用方式二 :
? ? window.setInterval(changeImageSrc, 1000);
</script>
實現(xiàn)二：
<script>
? ? // 需求 : 動態(tài)獲取頁面中的 img 標簽, 然后修改 img 標簽的 src 屬性.
? ? // 1. 獲取 img 標簽
? ? var img = document.getElementById("img");
? ? // alert(img);
? ? // 定義一個變量
? ? var count = 1;
? ? // 2. 循環(huán)切換圖片
? ? // window.setInterval(匿名函數(shù), 時間毫秒); 在指定的時間毫秒間隔, 不斷調(diào)用第一個參數(shù)傳入的匿名函數(shù).
? ? window.setInterval(function() {
? ? ? ? count++;
? ? ? ? img.src = "../img/0"+count+".jpg";
? ? ? ? // 判斷
? ? ? ? if (count == 8) {
? ? ? ? ? ? count = 0;
? ? ? ? }
? ? }, 1000);
</script>
21钓辆、js事件
21.1、事件概述：
事件三要素：
1. 事件源：被監(jiān)聽的html元素（就是這個事件加給誰）肴焊，就是某個（某些）html標簽
2. 事件類型：某類動作前联，例如點擊事件，移入移除事件娶眷，敲擊鍵盤事件等
3. 執(zhí)行指令：事件觸發(fā)后需要執(zhí)行的代碼似嗤，一般使用函數(shù)進行封裝
語法格式：事件源.事件類型=執(zhí)行指令
21.2、常用的事件：
案例：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>事件</title>
? ? <script>
? ? ? ? // 窗口 : window 對象提供了一個事件類型? onload 頁面加載完成事件.
? ? ? ? // 事件源 : window? ? 事件類型 : 頁面加載完成事件 (onload)? 執(zhí)行指令: 就是賦值的 function 函數(shù).
? ? ? ? window.onload = function () {
? ? ? ? ? ? // 獲取頁面的 btn 按鈕
? ? ? ? ? ? var btn = document.getElementById("btn");
? ? ? ? ? ? // alert(btn);
? ? ? ? ? ? // 給 btn 按鈕綁定一個事件 (單擊事件 onclick)
? ? ? ? ? ? // 事件源 : btn按鈕? ? 事件類型 : 單擊事件 (onclick)? 執(zhí)行指令: 就是賦值的 function 函數(shù).
? ? ? ? ? ? btn.onclick = function () {
? ? ? ? ? ? ? ? alert("恭喜你, 中了 500 萬!");
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
? ? <button id="btn">按鈕</button>
</body>
</html>
