Python全棧之學(xué)習(xí)JS(1)
更新時(shí)間：2022年01月23日 16:23:11 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
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 = "我愛(ài)你,\\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ù)字開(kāi)頭; */
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ù)字開(kāi)頭; */
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ì)于字符串來(lái)說(shuō) +號(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("跳起來(lái)給他一榔頭~");
// }
//3.多項(xiàng)分支
// 不推薦判斷條件連續(xù)比較,有可能失效;
var salary = 1000;
if(10000 < salary && salary < 12000){
console.log("正常薪資范圍~");
}else if(12000 <= salary && salary < 15000){
console.log("超過(guò)一般水平~");
}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)跳過(guò);
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ù)沒(méi)有預(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é)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
python使用參數(shù)對(duì)嵌套字典進(jìn)行取值的方法
這篇文章主要介紹了python使用參數(shù)對(duì)嵌套字典進(jìn)行取值，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Pandas數(shù)據(jù)分組統(tǒng)計(jì)的實(shí)現(xiàn)示例
對(duì)數(shù)據(jù)進(jìn)行分組統(tǒng)計(jì),主要適用DataFrame對(duì)象的groupby()函數(shù),本文就來(lái)詳細(xì)的介紹下Pandas數(shù)據(jù)分組統(tǒng)計(jì)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解下2023-11-11
Python requests及aiohttp速度對(duì)比代碼實(shí)例
這篇文章主要介紹了Python requests及aiohttp速度對(duì)比代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
今天小編就為大家分享一篇關(guān)于Python中正則表達(dá)式的用法總結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
這篇文章主要介紹了python實(shí)現(xiàn)CTC以及案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
python基于Selenium的web自動(dòng)化框架
這篇文章主要介紹了python基于Selenium的web自動(dòng)化框架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Python實(shí)現(xiàn)監(jiān)視程序的內(nèi)存使用情況
我們使用Python和它的數(shù)據(jù)處理庫(kù)套件進(jìn)行大量數(shù)據(jù)處理時(shí)候,可能使用了大量的計(jì)算資源,那么如何監(jiān)視程序的內(nèi)存使用情況就顯得尤為重要,下面我們就來(lái)了解一下具體實(shí)現(xiàn)方法吧2023-12-12
TensorFlow Saver:保存和讀取模型參數(shù).ckpt實(shí)例
今天小編就為大家分享一篇TensorFlow Saver:保存和讀取模型參數(shù).ckpt實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-02-02
Python中數(shù)字(Number)數(shù)據(jù)類型常用操作
本文主要介紹了Python中數(shù)字(Number)數(shù)據(jù)類型常用操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Python求平面內(nèi)點(diǎn)到直線距離的實(shí)現(xiàn)
今天小編就為大家分享一篇Python求平面內(nèi)點(diǎn)到直線距離的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-01-01