第四十一天
<!-- 1 js三種存在位置 --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三種存在位置</title> </head> <!-- 1.行間式:js代碼塊需要出現在事件中 --> <!-- <body id="body" onload="body.style.backgroundColor=‘red‘"> --> <!-- <body id="body" onload="alert(‘hello wolrd‘)"> --> <body id="body"> <!-- 2.內聯式:js代碼塊需要出現在script標簽中 --> <script type="text/javascript"> body.style.backgroundColor=‘orange‘ </script>
<!-- 3.外聯式:js代碼塊出現在外部js文件中,需要通過script標簽src屬性進行鏈接 --> <script type="text/javascript" src="./js/01.js"></script>
<!-- 總結 --> <!-- 三種方式不存在優先級,誰在邏輯下方,誰起作用 -->
</body> </html> 2.解釋性語言決定js位置 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js位置</title> <!-- 位置② --> <!-- 出現在head標簽底部：依賴型JS庫 --> <!-- <script> bd.style.backgroundColor = ‘#0ff‘; </script> -->
<script> var color = "cyan"; </script> </head> <!-- 內聯使用場景:某頁面的特有邏輯,可以書寫該該頁面的script標簽內 --> <!-- 外聯使用場景:適用於團隊開發,js代碼具有復用性 -->
<!-- js為解釋性語言 --> <body id="bd"> <!-- 位置① --> <!-- <script> bd.style.backgroundColor = ‘#0ff‘; </script> -->
<!-- 需求1:操作div,讓其字體顏色變為紅色 => 功能(style.color) => 盡可能下移 --> <!-- 方法:在body下面 script裏打入div.style.color = ‘red‘; --> <!-- 需求2:讓div背景顏色變為提供的顏色 => 依賴(color變量) => 盡可能上移 --> <!-- 方法1：先在body裏onload="div.style.backgroundColor= color" 在打入var color =‘yellow‘改變顏色; --> <!-- 方法2：先在body裏script內打入div.style.backgroundColor = color;然後在在head裏的script內打入 var color = ‘顏色‘ --> <div id="div">123</div> <!-- 需要使用color變量這個資源 --> <script> div.style.backgroundColor = color; </script>
</body> <!-- 位置③ --> <!-- 出現在body標簽底部：功能型JS腳本 --> <!-- <script> bd.style.backgroundColor = ‘#0ff‘; </script> -->
<!-- 完成需求1 --> <script> div.style.color = ‘red‘; </script>
<!-- 外聯出現位置同內聯 --> <!-- 擁有src的外聯script標簽,會自動屏蔽標簽內部的代碼塊 --> <script src="js/02.js"> alert(123) </script>
</html>
3、變量的定義 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>變量的定義</title> </head> <body> 變量的定義 </body> <script> // script標簽內,代表js,采用的是js語法
// 1.簡單規範 // 單行註釋 /* 多行註釋 */
// 語句以分號結尾
// 2.變量的定義: 聲明 + 初始化
// ES5變量的定義
// 註:ES5標準下無塊級作用域,只有方法可以產生實際的局部作用域 // 無塊級作用域的局部變量 var a = 10; // alert(a); // 全局變量 b = 20; // alert(b);
// eg:驗證 // 方法的自調用,就會產生一個局部作用域 (function () { var x = 10; y = 20; })()
// alert(x) 報錯,x只能在局部作用域中使用 // alert(y); 正常使用 // x已經被修改了，不能用了
// 塊級作用域 { var n = 10; // 無視塊級作用域 m = 20; // 全局變量,更無視塊級作用域 } // alert(n) // 可以 // alert(m) // 可以
// ES6變量的定義
// 有塊級作用域的局部變量 let aa = 100; // alert(aa); // 有塊級作用域的常量 const bb = 200; // alert(bb);
{ let xx = 100; const yy = 200; } // alert(xx); // 無法訪問 // alert(yy); // 無法訪問 // 函數產生的局部作用域同該情況
let nn = 100; nn = 200; // alert(nn); // 200
// 命名規範:常量名全大寫 const MM = 1000; // MM = 2000; // 常量值不允許更改 // alert(MM);
// 3.變量名的命名規範 // ① 可以由字母,數字,_,$組成,但是不能以數字開頭(可以包含中文,采用駝峰命名法) // ② 區分大小寫 // ③ 不能與關鍵字保留字重名
</script> </html>
4、三種彈出框 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三種彈出框</title> </head> <body> 三種彈出框 </body> <script> // 彈出框: 一個彈出框只能彈出一條信息 // alert("普通彈出框", "呵呵"); // 呵呵被忽略了
// 確認框 // var res = confirm("你是男的嗎?"); // true | false // alert(res);
// 輸入框 // var res = prompt("請輸入你的小名!"); // 確定為輸入值, 取消為null // alert(res);
</script> </html>
5、四種調試方式 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>四種調試方式</title> </head> <body> 四種調試方式 </body> <script type="text/javascript"> var a = 10; var b = 20;
// 四種查看變量的值的方式
// 彈出框的顯示方式 // alert(a); // alert(b);
// 在網頁檢查中Console的裏面顯示 // console.log(a); // console.log(b); // 在網頁上顯示出來 // document.write(a); // document.write(b);
// 斷點調試 // 在網頁檢查中sources中倆個符號調試 </script> </html>
6、數據類型 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>數據類型</title> </head> <body> 數據類型 </body> <script type="text/javascript"> // 一. 值類型 // 1.number:數字類型 var a = 10; // typeof()查看類型,可以省略() console.log(a, typeof a); // 判斷 console.log(typeof a == ‘number‘);
a = 3.14; console.log(a, typeof a);
a = 314e2 console.log(a, typeof a); // 結果會顯示31400和類型number
// 2.string:字符串類型 var a = ‘字符串‘; console.log(a, typeof a);
a = "字符串"; console.log(a, typeof a);
// ES6會檢測變量的重復定義,報錯 // let x = 10; // let x = ‘10‘;
// 3.boolean:布爾類型 true|false a = true; console.log(a, typeof a);
// 4.undefined:未定義類型 var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c);
// 二.引用類型 // 5.function:函數類型 var m = function () {}; console.log(m, typeof m);
// 6.object:對象類型 var obj = {}; console.log(obj, typeof obj);
obj = new Object(); console.log(obj, typeof obj); // 顯示{} object
// 判斷 // instanceof:對象類型判斷 console.log(obj instanceof Object);
// 三.特殊的Object // Number() String() Boolean() Math // 7.null:空對象 var o = null; console.log(o, typeof o); // 判斷 console.log(o == null);
// 8.Array:數組對象 o = new Array(1, 2, 3, 4, 5); console.log(o, typeof o); console.log(o instanceof Object); // 判斷 console.log(o instanceof Array);
// 9.Date:時間對象 o = new Date(); console.log(o, typeof o);
// 10.RegExp:正則對象 o = new RegExp(); console.log(o, typeof o);
</script> </html>
7、類型轉換 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>類型轉換</title> </head> <body> 類型轉換 </body> <script> // 類型轉換針對 值類型 // number string boolean
// 一.顯性轉化 // 1. num,bool => str var a = 10; var b = true;
// var c = new String(a); // console.log(c, typeof c); // ‘10‘, object
var c = String(a); console.log(c, typeof c); // ‘10‘, string c = String(b); console.log(c, typeof c); // ‘true‘, string
c = a.toString(); console.log(c, typeof c); // ‘10‘, string c = b.toString(); console.log(c, typeof c); // ‘true‘, string
// 2.bool,str => num var aa = true; var bb = ‘10‘;
var cc = Number(aa); console.log(cc, typeof cc); // 1 number cc = Number(bb); console.log(cc, typeof cc); // 10 number
cc = + aa; console.log(cc, typeof cc); // 1 number cc = + bb; console.log(cc, typeof cc); // 10 number
// 針對字符串 cc = parseFloat(‘3.14.15.16abc‘); console.log(cc, typeof cc); // 3.14 cc = parseInt(‘10.35abc‘); // 10 console.log(cc, typeof cc);
// 字符串以非數字開頭,結果為NaN // 1.非數字類型 // 2.不與任何數相等,包含自己 // 3.通過isNaN()進行判斷 var res = parseInt("abc10def"); console.log(res, isNaN(res)) // 結果 NaN true
// 二.隱性轉換(自動轉換) // 5 + null // 5 // "5" + null // "5null" // "5" + 1 // "51" // "5" - 1 // 4 console.log("5" - 1); // "" + ? // "?"
</script> </html>
8、運算符 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>運算符</title> </head> <body> 運算符 </body> <script type="text/javascript"> // 一.算數運算符
var a = 5; var res = a / 2; // 只存在number類型運算 console.log(res); // 2.5
var res = a % 2; console.log(res); // 商為2余1 1
// 自增自減
// 總結: // 1.++/--在前在後,自身值一定改變, a++/++a => a = a + 1 // 2.++/--在前先自運算,再他運算 // 1.++/--在後先他運算,再自運算
// a=5 var res = a++; console.log("res:" + res + ", a:" + a); // 5, 6
// a=6 var res = ++a; console.log("res:" + res + ", a:" + a); // 7, 7
// 二.賦值運算符
// 三.比較運算符 console.log(‘5‘ == 5); // true, 值相等即可 console.log(‘5‘ === 5); // false, 值與類型均要相等
console.log(‘5‘ != 5); // fasle console.log(‘5‘ !== 5); // true
// 四.邏輯運算符 // 運算結果為true|false var a = 10; var b = 20; var c = 30; var res = a < b && c == 30; console.log(res); // 真,真 => 真 // 真,假 => 假 // 假,真 => 假 短路 // 假,假 => 假 短路 // &&運算,有假即假,所有前面為假,後面沒必要被執行,所以被短路
// 短路 var res = a > b && ++c; console.log(res, c); // c=30
// ||運算,有真即真,所有前面為真,後面沒必要被執行,所以被短路 // 真,真 => 真 短路 // 真,假 => 真 短路 // 假,真 => 真 // 假,假 => 假
// !運算,真則假,假則真,負負得正 console.log(!1, !!1);
// 三目運算符(三元運算符) // 結果 = 條件表達式 ? 結果1 : 結果2; // 結果不一樣要與表達式有關系,但表達式為真則結果為結果1,反之為結果2, var tq = prompt("天氣(晴|雨)") var res = tq == ‘晴‘ ? "今天天氣挺好" : "請假回家收衣服"; console.log(res);
</script> </html>
第四十一天