Python全棧之學(xué)習(xí)JS(1)
1. js的數(shù)據(jù)類型
1.1 js引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js的引入方式</title> </head> <body> <!-- js的第一種引入方式 --> <!-- <script> alert("js的第一種引入方式") </script> --> <!-- js的第二種引入方式 --> <!-- <script src="myjs.js"></script> --> <!-- js的第三種引入方式 --> <!-- onclick單擊事件 --> <div onclick="alert(11)" >點(diǎn)我1</div> <!-- js的第四種引入方式 --> <a href="javascript:alert('你點(diǎn)我了么?')">點(diǎn)我2</a> </body> </html>
小提示:
js三大對(duì)象 1. 本地對(duì)象:js語(yǔ)法 2. bom對(duì)象:瀏覽器相關(guān)的成員(針對(duì)于瀏覽器的控制)brower object model 3. dom文檔對(duì)象:關(guān)于html文件節(jié)點(diǎn)相關(guān)的數(shù)據(jù)、相關(guān)的值(針對(duì)于html的控制) document object model js是單線程的異步程序 定時(shí)器是單線程的異步程序(例子)
1.2 注釋變量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注釋/變量</title> </head> <body> <script> // ###1 注釋分為兩類: (1) 單行注釋 (2) 多行注釋 // 我是單行注釋 /* 我是多行注釋 */ // ###2 變量 /* var的用作是劃分當(dāng)前變量的作用域 不寫var,默認(rèn)聲明全局的變量 */ var a = 1; var a=1,b=2,c=3 console.log(a); console.log(b,c) // ###3 變量的命名 var $ = "特殊的變量名"; var $abc = 111; console.log($); console.log($abc); </script> </body> </html>
1.3 數(shù)據(jù)類型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>數(shù)據(jù)類型</title> </head> <body> <script> /* 數(shù)據(jù)類型: 分為兩大類 (基本數(shù)據(jù)類型 + 引用數(shù)據(jù)類型) 基本數(shù)據(jù)類型: Boolean , Number , String , undefined , null 引用數(shù)據(jù)類型: Object(Array , function , Date ... ) */ // ###1. Boolean 布爾類型 var a1 = true; var a1 = false; console.log( a1 , typeof(a1) ) // ###2. Number 數(shù)字類型 var num = 0b101; var num = 0o127; var num = 0xff; var num = 1000; var num = 3.13; var num = 3.13e2; // Infinity 無(wú)窮大 var num = 3.13e999999999999999999999999999999999999; // -Infinity 負(fù)無(wú)窮大 var num = -3.13e999999999999999999999999999999999999; console.log(num , typeof(num) ) // NaN => not a number 不是一個(gè)數(shù)字 /* 1.NaN和任何數(shù)字計(jì)算都是NaN 2.與NaN做比較,除了NaN!=NaN為真,剩下都是false */ var num = 10 - "abc"; var num = NaN + 1 var num = NaN == NaN var num = NaN != NaN; // true var num = NaN > 100; // false var num = isNaN(NaN); // true console.log(num , typeof(num)) // ###3.String 字符串類型 // 單引號(hào)'' var string = 'I love js'; // 雙引號(hào)"" var string = "i love python very much"; // 在轉(zhuǎn)義字符前面加\,防止轉(zhuǎn)義原型化輸出 var string = "我愛你,\\n 中國(guó)" console.log(string) // 反引號(hào)`` 1.支持跨行 2.解析變量 // 1.支持跨行 var string = ` <ul> <li>111</li> </ul> ` // 2.解析變量 ${變量名} var name = "趙沈陽(yáng)"; var string = `${name}`; console.log(string , typeof(string)) // ###4.Object 對(duì)象類型 // 1.定義一個(gè)空對(duì)象 var obj = new Object() var obj = {} console.log(obj,typeof(obj)) // 2.js對(duì)象(字典格式) var obj = {"a":1,"b":2} console.log(obj , typeof(obj)) // 3.js對(duì)象,可以在類外添加成員 obj.name = "張三"; console.log(obj , typeof(obj)); // 4.js對(duì)象(數(shù)組格式) var arr = new Array(); var arr = []; arr[0] = 10; arr[1] = 11; arr[2] = 12; var arr = [10,11,12,13]; console.log(arr , typeof(obj)); // ###5 function 函數(shù)類型(歸屬于object) function func(){ console.log("我是函數(shù)"); } func() console.log(func,typeof(func)) // ###6 undefined 未定義類型 var a; console.log(a , typeof(a)) // 注意: null 可以理解成關(guān)鍵字 (等價(jià)于python中None) var a = null console.log(a , typeof(a)) </script> </body> </html>
2. js類型轉(zhuǎn)換_運(yùn)算符
2.1 強(qiáng)制轉(zhuǎn)換_Number
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>強(qiáng)制轉(zhuǎn)換 - Number</title> </head> <body> <script> // 1. parseInt 強(qiáng)制轉(zhuǎn)換成整型 /* 要求: 必須數(shù)字開頭; */ var num = 1.934567; //1 var num = "abc"; //NaN var num = "123"; //123 var num = "123abc"; //123 var num = "abc123"; //NaN var num = "1.34abc" //1 var num = [] //NaN var num = false //NaN var res = parseInt(num); console.log(res ,typeof(res)) // 2.parseFloat 強(qiáng)制轉(zhuǎn)換成浮點(diǎn)型 /* 要求: 必須數(shù)字開頭; */ var num = 100; //1 var num = "abc"; //NaN var num = "123"; //123 var num = "123abc"; //123 var num = "abc123"; //NaN var num = "1.34abc"; //1.34 var num = {}; //NaN var num = true; var res = parseFloat(num); console.log(res ,typeof(res)) // 3.Number類型強(qiáng)轉(zhuǎn) /* 要求:必須是存純數(shù)字或者布爾類型*/ var a = false var a = "123.456"; //123 var res = Number(a) console.log(res ,typeof(res)) </script> </body> </html>
2.2 強(qiáng)制轉(zhuǎn)換_String
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>強(qiáng)制轉(zhuǎn)換 - String</title> </head> <body> <script> /* 字符串的強(qiáng)轉(zhuǎn)是在原有類型的兩邊套上引號(hào),表達(dá)字符串類型; */ var a = 100; var a = 4.89; var a = "abc"; var a = []; var a = undefined; var a = null; var a = NaN; var res = String(a); console.log(res , typeof(res)) </script> </body> </html>
2.3 強(qiáng)制轉(zhuǎn)換_Boolean
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>強(qiáng)制轉(zhuǎn)換 - Boolean</title> </head> <body> <script> /* //布爾類型為假的七中情況: 0 0.0 '' NaN undefined null false */ var a = false; var a = null; var a = 0; var a = 0.0; var a = ''; var a = NaN; var a = undefined; // 注意點(diǎn) 空數(shù)組 空對(duì)象都是true var a = []; // true var a = {}; // true var res = Boolean(a); console.log(res , typeof(res)); </script> </body> </html>
2.4 自動(dòng)類型轉(zhuǎn)換_Number_Boolean_String三者之間轉(zhuǎn)換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自動(dòng)類型轉(zhuǎn)換 Number Boolean String 三者之間的轉(zhuǎn)換</title> </head> <body> <script> // 1.Number+Boolean var res = 10 + true; var res = 3.4 + true; var res = 10 + 3.1; console.log(res ,typeof(res)) // 2.Number+Boolean+String (對(duì)于字符串來說 +號(hào)意味著拼接) var res = true + "100"; var res = 100 + "101" + 100; console.log(res,typeof(res)) // 3.除了+號(hào),剩下的都可以做運(yùn)算(必須是數(shù)值) var res = 100 - "101"; var res = 100 - "99abc"; console.log(res,typeof(res)) </script> </body> </html>
2.5 js運(yùn)算符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js中的運(yùn)算符</title></head><body> <script> // (1) ++ -- 遞增,遞減 // num++ 先賦值在自增 var num = 100; var res = num++; console.log(res , typeof(res)); var res = num++; console.log(res , typeof(res)); // num++ 先自增在賦值 var num = 100; var res = ++num; var res = ++num; console.log(res , typeof(res)); // (2) === !== (全等于,不全等于)比較兩樣?xùn)|西1.比較值的大小 2.比較值的類型 var res = "1" == 1; console.log(res , typeof(res)); var res = "1" === 1; var res = "1" !== 1; console.log(res , typeof(res)); // (3) && => and , || => or , ! => not var num = 8 if(num > 5 && num <10){ console.log("ok1~"); } if(num>10 || num < 3){ console.log("ok2~"); } var num = 0 if(!num){ console.log("ok3~"); } // (4) 三元(目)運(yùn)算符 [ js: 表達(dá)式?真值:假值 ] [ python :res = 正確 if 條件表達(dá)式 else 錯(cuò)誤 ] var age = 18; var res = age >= 18 ? "成年人":"兒童"; console.log(res) </script></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js中的運(yùn)算符</title> </head> <body> <script> // (1) ++ -- 遞增,遞減 // num++ 先賦值在自增 var num = 100; var res = num++; console.log(res , typeof(res)); var res = num++; console.log(res , typeof(res)); // num++ 先自增在賦值 var num = 100; var res = ++num; var res = ++num; console.log(res , typeof(res)); // (2) === !== (全等于,不全等于)比較兩樣?xùn)|西1.比較值的大小 2.比較值的類型 var res = "1" == 1; console.log(res , typeof(res)); var res = "1" === 1; var res = "1" !== 1; console.log(res , typeof(res)); // (3) && => and , || => or , ! => not var num = 8 if(num > 5 && num <10){ console.log("ok1~"); } if(num>10 || num < 3){ console.log("ok2~"); } var num = 0 if(!num){ console.log("ok3~"); } // (4) 三元(目)運(yùn)算符 [ js: 表達(dá)式?真值:假值 ] [ python :res = 正確 if 條件表達(dá)式 else 錯(cuò)誤 ] var age = 18; var res = age >= 18 ? "成年人":"兒童"; console.log(res) </script> </body> </html>
3. js流程控制
3.1 分支結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流程控制 -> 分支結(jié)構(gòu) </title> </head> <body> <script> var mashengni = "美女"; //1.單項(xiàng)分支 // if(mashengni == "美女"){ // alert("給他買好吃的~"); // } //2.雙項(xiàng)分支 // if(mashengni == "野獸"){ // alert("給他一榔頭~"); // }else{ // alert("跳起來給他一榔頭~"); // } //3.多項(xiàng)分支 // 不推薦判斷條件連續(xù)比較,有可能失效; var salary = 1000; if(10000 < salary && salary < 12000){ console.log("正常薪資范圍~"); }else if(12000 <= salary && salary < 15000){ console.log("超過一般水平~"); }else if(15000 <= salary && salary <18000){ console.log("大神級(jí)畢業(yè)生~"); }else if(salary >= 18000){ console.log("王牌畢業(yè)生~"); }else{ console.log("回爐重生~") } //4.巢狀分支 var youqian = true; var youfang = true; if(youqian){ if(youfang){ console.log("老子要嫁給你~!"); } } </script> </body> </html>
3.2 分支結(jié)構(gòu)_switch_case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支結(jié)構(gòu) : switch case </title> </head> <body> <script> var date = new Date(); console.log(date); // 獲取星期 getDay var week = date.getDay(); console.log(week) week = "1" // 注意點(diǎn): switch case中的判斷(全等于): (1) 值的比較(2)類型的比較 全部符合才能滿足條件; switch (week){ case 1: console.log('星期一'); break; case 2: console.log('星期二'); break; case 3: console.log('星期三'); break; case 4: console.log('星期四'); break; case 5: console.log('星期五'); break; case 6: console.log('星期六'); break; default: console.log("星期日!"); break; } </script> </body> </html>
3.3 循環(huán)結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支結(jié)構(gòu) : 循環(huán)結(jié)構(gòu) </title> </head> <body> <script> // ### 1.for循環(huán) /* 語(yǔ)法特征: 1號(hào) 2號(hào) 3號(hào) for(初始值;判斷條件;自增自減的值){ code1 code2.. } 先執(zhí)行1,2滿足后執(zhí)行代碼體 然后執(zhí)行3,2滿足后在執(zhí)行代碼體 以此類推... 直到不滿足條件終止循環(huán); */ // 打印 1~100 for(var i = 1;i<=100;i++){ console.log(i); } // 打印1~100 遇到50,自動(dòng)跳過; for(var i = 1;i<=100;i++){ if(i == 50){ continue; } console.log(i); } // ### 2.while 循環(huán) //遇到5,終止循環(huán) i = 0 while(i<10){ if( i == 5){ break; } console.log(i); i++; } console.log("<===============第一組===================>") // ### 3.for( var i in Iterable ) 獲取的是數(shù)組中的索引號(hào); var arr = ["孟浩然","趙子龍","康乃馨","張飛","汪精衛(wèi)"]; for(var i in arr ){ console.log(i); console.log(arr[i]); } console.log("<===============第二組===================>") // 獲取的是js對(duì)象中的鍵 var dic = {"a":"王同培","b":"馬村你","c":"張宇"}; for(var i in dic){ console.log(i) console.log(dic[i]) ; } console.log("<===============第三組===================>") // ### 4.for( var i of Iterable ) 獲取的是數(shù)組中的值; [等價(jià)于python中 for i in Iterable:] for(var i of arr){ console.log(i); } console.log("<===============第四組===================>") // 注意點(diǎn): for(var i of dic) 不能遍歷js對(duì)象[字典] error /* var dic = {"a":"王同培","b":"馬村你","c":"張宇"}; for(var i of dic){ console.log(i) } */ // 字符串的遍歷: for(var i of "abcdefg"){ console.log(i) } </script> </body> </html>
4. js函數(shù)
4.1 函數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函數(shù)</title> </head> <body> <script> func1() // ###1 函數(shù) // 方式一 普通函數(shù) (存在預(yù)加載機(jī)制,提前把函數(shù)加載到內(nèi)存中,然后代碼整體在執(zhí)行) func1() function func1(){ console.log(111); } // 方式二 匿名函數(shù)(匿名函數(shù)沒有預(yù)加載價(jià)值,必須先定義在調(diào)用) // func2() error var func2 = function(){ console.log('我是func2~'); } func2(); // 方式三 不推薦 (了解) // var func3 = new Function("alert('我是func3~');alert('woshi3333');"); // console.log(func3,typeof(func3)); // func3(); // var func4 = new Function("x","y","alert(x+y)"); // func4(5,6); // 方式四 閉包函數(shù) function func5(){ var a = 100; function func6(){ console.log(a,"<===>"); return "我是閉包函數(shù)"; } return func6; } func = func5(); res = func(); console.log(res); // 方式五 箭頭函數(shù) function mysum(x,y){ return x+y; } res = mysum(5,6) console.log(res,"<=======11122233=======>"); var mysum = (x,y) => {return x+y;} var res = mysum(5,6); console.log(res,"========3334444========="); // ###2 函數(shù)參數(shù) (普通位置參數(shù),默認(rèn)參數(shù)) // js中的形參實(shí)參不匹配不會(huì)報(bào)錯(cuò) function func7(a,b,c=3){ console.log(a,b,c); } func7(10,11); func7(10,11,12); func7(10,11,12,13); console.log("<==============================>") // arguments 自動(dòng)收集所有的實(shí)參 // 計(jì)算任意個(gè)數(shù)值的累加和; function func8() { // console.log(a,b) // console.log(arguments) var total = 0; for(var i of arguments){ total += i; console.log(i); } return total; } res = func8(1,100,2,3,4,5,56,6); console.log(res); </script> </body> </html>
4.2 函數(shù)的調(diào)用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函數(shù)的調(diào)用</title> </head> <body> <script> function func(){ console.log("函數(shù)正在執(zhí)行 ... "); } // 1.正常調(diào)用 func(); // 2.函數(shù)的立即執(zhí)行 (function func2(){ console.log("函數(shù)正在執(zhí)行2 ... ") })(); // 3.匿名函數(shù)的立即執(zhí)行 (function(){ console.log("匿名函數(shù)正在執(zhí)行3 ... ") })(); // 4.其他立即執(zhí)行的方法; !function(){ console.log("我在執(zhí)行4 ... "); }(); ~function(){ console.log("我在執(zhí)行5 ... "); }(); </script> </body> </html>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Python如何計(jì)算語(yǔ)句執(zhí)行時(shí)間
這篇文章主要介紹了Python如何計(jì)算語(yǔ)句執(zhí)行時(shí)間,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11用pycharm開發(fā)django項(xiàng)目示例代碼
這篇文章主要介紹了用pycharm開發(fā)django項(xiàng)目示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Python批量處理工作簿和工作表的實(shí)現(xiàn)示例
本文主要介紹了使用Python批量處理工作簿和工作表,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Python對(duì)象轉(zhuǎn)JSON字符串的方法
這篇文章主要介紹了Python對(duì)象轉(zhuǎn)JSON字符串的方法,涉及Python基于json模塊實(shí)現(xiàn)json轉(zhuǎn)換的實(shí)現(xiàn)技巧,非常簡(jiǎn)便易懂,需要的朋友可以參考下2016-04-04關(guān)于Python3爬蟲利器Appium的安裝步驟
在本篇文章里小編給大家整理的是一篇關(guān)于Python3爬蟲利器Appium的安裝步驟,需要的朋友們可以跟著參考下。2020-07-07解決使用PyCharm時(shí)無(wú)法啟動(dòng)控制臺(tái)的問題
今天小編就為大家分享一篇解決使用PyCharm時(shí)無(wú)法啟動(dòng)控制臺(tái)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-01-01YOLOv5改進(jìn)系列之增加小目標(biāo)檢測(cè)層
yolov5出來已經(jīng)很長(zhǎng)時(shí)間了,所以有關(guān)yolov5的一些詳細(xì)介紹在這里就不一一介紹了,下面這篇文章主要給大家介紹了關(guān)于YOLOv5改進(jìn)系列之增加小目標(biāo)檢測(cè)層的相關(guān)資料,需要的朋友可以參考下2022-09-09python 應(yīng)用之Pycharm 新建模板默認(rèn)添加編碼格式-作者-時(shí)間等信息【推薦】
這篇文章主要介紹了Pycharm 新建模板默認(rèn)添加編碼格式-作者-時(shí)間等信息 ,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06