初識JavaScript
JS的組成
- ECMAScript：主要規(guī)定了js的組成漠魏、引入方式、命名規(guī)范遣钳、輸出方式荐类、變量、數(shù)據(jù)類型蹂随、基本語法十嘿、操作語句
- DOM： document object model 文檔對象模型（可以識別文檔，操作HTML）
- BOM： browser object model 瀏覽器對象模型 （就是瀏覽器）
頁面的加載順序
先加載css岳锁，再加載html绩衷，最后加載js，這是一個規(guī)范（習(xí)慣）激率。
js代碼一般在body的后面
JS的引入方式
- 行內(nèi)式咳燕，和html寫在一行
- 內(nèi)嵌式，內(nèi)嵌在html結(jié)構(gòu)當中
- 外鏈式柱搜，引用一個js文件
// 行內(nèi)式
<input type="button" value="按鈕" onclick="alert(1)">
// 內(nèi)嵌式
<script>
alert(2);
</script>
// 外鏈式
<script src="./demo.js"></script>
JS的注釋
- 單行注釋是雙斜杠
// 單行注釋 - 多行注釋是雙斜杠加兩個*號
/* 很多行代碼 */
JS的輸出方式
- 彈框輸出
alert(1); - 在控制臺打印
console.log(123); - 在頁面中輸出
document.write("I LOVE CODING");
獲取DOM元素與操作DOM
DOM指的是HTML節(jié)點
- 通過id獲取元素
document.getElementById("box"); - 修改html標簽中的內(nèi)容
- innerText: 只可以識別文本迟郎，不識別標簽
document.getElementById("box").innerText = "<h2>硬件一班</h2>" - innerHTML: 可以識別標簽
document.getElementById("box").innerHTML = "<h2>硬件一班</h2>"
變量
變量： 可變的量，用來存儲值的
變量的作用： 存儲值和代表值
聲明一個變量 使用var聪蘸，意思是 起一個名字
// var 變量名 = 變量值宪肖； 我起了一個名字代表了一個值
// = 就代表賦值
var a = 1; // 這個 1 是數(shù)字
console.log(a);
變量命名規(guī)范
在js中嚴格區(qū)分大小寫
document documenT string sTring變量遵循駝峰命名法
- 首字母小寫，其余每個有意義的單詞的首字母大寫健爬，盡量不要用拼音
示例：oDiv studentInfo- 由數(shù)字控乾、 字母、 下劃線娜遵、$ 組成蜕衡，不能使用數(shù)字開頭。
示例： div1设拟、 _stu慨仿、 pro久脯、 student_info、 abc123
- 不能用關(guān)鍵字和保留字
關(guān)鍵字：在js中有特殊意義 比如 var function
保留字： 未來可能作為關(guān)鍵字
基本數(shù)據(jù)類型
包含： 數(shù)字number镰吆、字符串string帘撰、布爾值boolean、null万皿、undefined
var a = 12.3; // 數(shù)字
var b = "123硬件一班_1234"; // 字符串 在引號里面的都是字符串
var n = null; // 空摧找，空值 現(xiàn)在沒有給值，以后可能會給
var u = undefined; // 未定義牢硅，壓根就沒有值
var bol = true; // 布爾值 是
var u;
console.log(u); // undefined 我們只聲明蹬耘，沒賦值
null 和 undefined
null 是我們沒有給這個變量規(guī)定數(shù)據(jù)類型，所以暫時沒值
我們在電腦中設(shè)置了一個文件减余，但是不知道他是什么類型(文本综苔、視頻、音頻等)的文件位岔，那么就是null
我們壓根和沒定義這個文件休里，那么他是 undefined
數(shù)字、字符串赃承、布爾值簡單運算
// 數(shù)字與數(shù)字之間有 加減乘除
var x = 10;
var y = 20;
console.log( x*y + 1 - 10 );
// 字符串使用加號進行拼接
var str1 = "硬件一班123";
var str2 = "超級強";
console.log(str1 + str2);
// 布爾值有邏輯運算 與 或 非
var t = true;
var f = false;
console.log( t && f); // false
console.log( t || f); // true
console.log( !t ); // false
console.log( !f ); // true
邏輯運算符
布爾值： true false
運算：
- 與（類似于交集） 符號是： &&
- 或（類似于并集） 符號是： ||
- 非（取反） 符號是： !
// 與： 全部是 true 結(jié)果是true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
// 或： 有一個是true 結(jié)果是true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
// !true === false
// !false === true
console.log(!true); // false
console.log(!false); // true
var t = true;
var f = false;
// ! 取反的操作是優(yōu)先操作的妙黍，其他的從左向右運算
console.log( t && f || f && !t ); // false
console.log( !f || t && t ); // true
基本數(shù)據(jù)類型檢測 typeof
var a = 10; // 數(shù)字
var b = "hello"; // 字符串
var c = false; // 布爾值
var d = null; // null
var e; // 如果只聲明，不賦值瞧剖， 那么就是undefined（未定義）
// typeof方法 用來做數(shù)據(jù)類型檢測
// typeof 后面跟上變量名拭嫁， 那么就得到這個變量的類型
// 得到的結(jié)果是一個字符串
console.log(typeof 10); // number
console.log(typeof "hello"); // string
console.log(typeof false); // boolean
console.log(typeof null); // object【在js中是對象的意思,先了解】
console.log(typeof undefined); // undefined
// typeof "number" 得到的是 "string"
console.log(typeof typeof b);
引用數(shù)據(jù)類型
基本數(shù)據(jù)類型，存儲的就是一個值
引用數(shù)據(jù)類型抓于，存儲的是一個地址空間
引用數(shù)據(jù)類型分為：
1.對象數(shù)據(jù)類型 對象做粤、數(shù)組、正則..
2.函數(shù)數(shù)據(jù)類型 函數(shù)
// 引用數(shù)據(jù)類型捉撮， 又稱復(fù)雜數(shù)據(jù)類型
var arr = [1, 1, 2, "aaa", false]; // 數(shù)組怕品，[值, 值, 值]，沒值為[]
var obj = { name: "硬件一班", age: 10 }; // 對象 {屬性名: 屬性值}
var reg = /\d+/; // 正則【了解】
var fn = function (){} // 函數(shù)
引用數(shù)據(jù)類型檢測
基本數(shù)據(jù)類型 使用typeof 檢測很方便
引用數(shù)據(jù)類型 檢測有局限性巾遭，不能檢測對象下的細分項
// 接上
console.log(typeof arr); // object
console.log(typeof obj); // object
console.log(typeof reg); // object
console.log(typeof fn); // function
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(reg)); // [object RegExp]
console.log(Object.prototype.toString.call(fn)); // [object Function]
基本操作與運算【練習(xí)】
// 數(shù)字 number： 正數(shù)肉康、負數(shù)、0灼舍、小數(shù)吼和、 NaN（意思是非數(shù)字）
// 加減乘除，如果和NaN一起運算骑素，得到的結(jié)果就是NaN
// 他是其他數(shù)據(jù)類型強制轉(zhuǎn)換成數(shù)字炫乓，沒有成功，得到的結(jié)果
// NaN: not a number 不是一個有效數(shù)字,但它也是數(shù)字類型
console.log(2 * 5 + 3); // 13
console.log(10 + NaN); // NaN
console.log(typeof NaN); // number
console.log(Object.prototype.toString.call(NaN)); // [object Number]
// 把字符串強制轉(zhuǎn)換成數(shù)字
console.log(Number("123")); // 123
console.log(typeof Number("123"));
console.log(Number("abc")); // NaN
console.log(typeof Number("abc"));
// 字符串
// 加法：和字符串一起執(zhí)行加法操作，即使有其他數(shù)據(jù)類型末捣，都會變成字符串拼接
// 減法：當數(shù)字和純數(shù)字字符串一起做減法操作侠姑，則全部轉(zhuǎn)化為數(shù)字，然后再減
console.log("--------------");
console.log("abc" + 1234); // "abc1234"
console.log(1 + "10" + true); // "110true"
console.log(1 + 10 + "a"); // "11a"
console.log("100" - 20); // 80
// "100a" 轉(zhuǎn)化為有效數(shù)字會失敗箩做，變成NaN, NaN - 20 還是NaN
console.log("100a" - 20); // NaN
console.log(100 - "20" + "1"); // "801"
/*
數(shù)字100減字符串20會做 數(shù)學(xué)運算结借，得到數(shù)字80，加上字符串1卒茬，
會字符串拼接,得到字符串801，加上NaN咖熟，還是字符串拼接圃酵，得 字符串801NaN
*/
console.log(100 - "20" + "1" + NaN); // "801NaN"
/*
數(shù)字80 減 字符串20，變成數(shù)學(xué)減法馍管，得到數(shù)字79郭赐，
加NaN依然是數(shù)學(xué)運算，結(jié)果是NaN
加減乘除确沸，如果和NaN一起數(shù)學(xué)運算捌锭，得到的結(jié)果是NaN
*/
console.log(100 - "20" - "1" + NaN); // NaN
// 布爾值
// 當布爾值做數(shù)學(xué)運算的時候，會轉(zhuǎn)化為數(shù)字
// true 轉(zhuǎn)化為1罗捎， false 轉(zhuǎn)化為 0
console.log("-----------------");
console.log(1 + true); // 2
console.log(1 + false); // 1
console.log(false * 2 - true); // -1
console.log(true * 3 + "abc"); // "3abc"
// 取反: 符號是! 當執(zhí)行取反操作的時候观谦，直接判定布爾值，使用方法Boolean()
// 0 NaN "" null undefined 布爾值是false桨菜，其他均為true
// 0 NaN "" null undefined 布爾值是false豁状，其他均為true
// 0 NaN "" null undefined 布爾值是false，其他均為true
console.log("--------------");
console.log(!"abc");
console.log(!!"abc");
console.log(!!"0");
console.log(!!0);
console.log(!!NaN);
console.log(!!"");
console.log(!!null);
console.log(!!undefined);
布爾運算【練習(xí)】
與或運算倒得， 各種數(shù)據(jù)類型都通用
1. 執(zhí)行“或”操作 ||
- 如果左邊的布爾值為true泻红， 那么留下左邊的值
- 如果左邊的布爾值為false， 那么留下右邊的值
- 兩邊有一個true霞掺，結(jié)果布爾值就算true谊路，左邊true，留左邊菩彬，否則留右邊
2. 執(zhí)行“與”操作 &&
- 如果左邊的布爾值為 true缠劝， 那么留下右邊的值
- 如果左邊的布爾值為 false， 那么留下左邊的值
- 兩邊同時true骗灶，結(jié)果布爾值算true剩彬，左邊true，留右邊矿卑，否則留左邊
console.log( true || false ); // true
console.log( true && false ); // false
// 0 NaN "" null undefined 布爾值是false喉恋，其他均為true
console.log( "abc" || true ); // "abc"
console.log( "abc" || false ); // "abc"
console.log( "abc" && true ); // true
console.log( "abc" && false ); // false
console.log( 100 && "abc" ); //"abc"
console.log( 100 || 20 ); // 100
console.log( 0 || 20 ); // 20
console.log( 0 && "abc" ); // 0
console.log( NaN && 20); // NaN
console.log( false || 100); // 100
等號比較【練習(xí)】
JS中有隱性數(shù)據(jù)類型轉(zhuǎn)換，這個轉(zhuǎn)換使得js的語法顯得不是很嚴謹（弱類型語言）
java dart 強類型語言
一個等號"="是賦值操作， "==" 是先做轉(zhuǎn)換再比較轻黑， "==="必須類型與值完全一致才相等
console.log("1" === 1); // false
console.log("1" == 1); // true
// 字符串 ——> 數(shù)字 使用 Number()
// 其他類型 ——> 布爾值 使用 Boolean()
// 一邊是字符串糊肤，一邊是數(shù)字，則全部轉(zhuǎn)化為數(shù)字再比較
console.log("-------------------");
console.log( "100" == 100 ); // true
console.log( "110" == 100 + 10 ); // true
console.log( "abc100" == 100 ); // NaN == 100 false
console.log( "-1" == -1 ); // true
console.log( "" == 0 ); // true
console.log( "10" == 10.0 ); // true
// 一邊是字符串氓鄙，一邊是布爾值
// 字符串變數(shù)字馆揉， 布爾值變數(shù)字，然后再比較
// true 轉(zhuǎn)數(shù)字是1抖拦， false 轉(zhuǎn)數(shù)字是0
console.log("-------------------");
console.log( "123" == true ); // 123 == 1 false
console.log( "1" == true ); // 1 == 1 true
console.log( "" == false ); // 0 == 0 true
// 如果遇到取反操作升酣，則直接判斷布爾值
// false有5個： 0 NaN "" null undefined
console.log("-------------------");
console.log( !"a" == false ); // true
console.log( !"" == true ); // true
console.log( !NaN == false ); // false
console.log( !"abc" == !100 ); // false == false true
console.log( !1 == true ); // false
