小编今天带大家了解Python全栈中JS的知识有哪些，文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容，希望能够帮助更多想解决这个问题的朋友找到问题的答案，下面跟着小编一起深入学习“Python全栈中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)" >点我1</div> <!-- js的第四种引入方式 --> <a href="javascript:alert('你点我了么?')">点我2</a> </body> </html>小提示：
js三大对象 1. 本地对象：js语法 2. bom对象：浏览器相关的成员（针对于浏览器的控制）brower object model 3. dom文档对象：关于html文件节点相关的数据、相关的值（针对于html的控制） document object model js是单线程的异步程序 定时器是单线程的异步程序（例子）
<!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的用作是划分当前变量的作用域 不写var,默认声明全局的变量 */ 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>
<!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> /* 数据类型: 分为两大类 (基本数据类型 + 引用数据类型) 基本数据类型: Boolean , Number , String , undefined , null 引用数据类型: Object(Array , function , Date ... ) */ // ###1. Boolean 布尔类型 var a1 = true; var a1 = false; console.log( a1 , typeof(a1) ) // ###2. Number 数字类型 var num = 0b101; var num = 0o127; var num = 0xff; var num = 1000; var num = 3.13; var num = 3.13e2; // Infinity 无穷大 var num = 3.13e999999999999999999999999999999999999; // -Infinity 负无穷大 var num = -3.13e999999999999999999999999999999999999; console.log(num , typeof(num) ) // NaN => not a number 不是一个数字 /* 1.NaN和任何数字计算都是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 字符串类型 // 单引号'' var string = 'I love js'; // 双引号"" var string = "i love python very much"; // 在转义字符前面加\,防止转义原型化输出 var string = "我爱你,\\n 中国" console.log(string) // 反引号`` 1.支持跨行 2.解析变量 // 1.支持跨行 var string = ` <ul> <li>111</li> </ul> ` // 2.解析变量 ${变量名} var name = "赵沈阳"; var string = `${name}`; console.log(string , typeof(string)) // ###4.Object 对象类型 // 1.定义一个空对象 var obj = new Object() var obj = {} console.log(obj,typeof(obj)) // 2.js对象(字典格式) var obj = {"a":1,"b":2} console.log(obj , typeof(obj)) // 3.js对象,可以在类外添加成员 obj.name = "张三"; console.log(obj , typeof(obj)); // 4.js对象(数组格式) 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 函数类型(归属于object) function func(){ console.log("我是函数"); } func() console.log(func,typeof(func)) // ###6 undefined 未定义类型 var a; console.log(a , typeof(a)) // 注意: null 可以理解成关键字 (等价于python中None) var a = null console.log(a , typeof(a)) </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>强制转换 - Number</title> </head> <body> <script> // 1. parseInt 强制转换成整型 /* 要求: 必须数字开头; */ 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 强制转换成浮点型 /* 要求: 必须数字开头; */ 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类型强转 /* 要求:必须是存纯数字或者布尔类型*/ var a = false var a = "123.456"; //123 var res = Number(a) console.log(res ,typeof(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>强制转换 - String</title> </head> <body> <script> /* 字符串的强转是在原有类型的两边套上引号,表达字符串类型; */ 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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>强制转换 - 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; // 注意点 空数组 空对象都是true var a = []; // true var a = {}; // true var res = Boolean(a); console.log(res , typeof(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>自动类型转换 Number Boolean String 三者之间的转换</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 (对于字符串来说 +号意味着拼接) var res = true + "100"; var res = 100 + "101" + 100; console.log(res,typeof(res)) // 3.除了+号,剩下的都可以做运算(必须是数值) var res = 100 - "101"; var res = 100 - "99abc"; console.log(res,typeof(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中的运算符</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) === !== (全等于,不全等于)比较两样东西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) 三元(目)运算符 [ js: 表达式?真值:假值 ] [ python :res = 正确 if 条件表达式 else 错误 ] 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中的运算符</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) === !== (全等于,不全等于)比较两样东西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) 三元(目)运算符 [ js: 表达式?真值:假值 ] [ python :res = 正确 if 条件表达式 else 错误 ] 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>流程控制 -> 分支结构 </title> </head> <body> <script> var mashengni = "美女"; //1.单项分支 // if(mashengni == "美女"){ // alert("给他买好吃的~"); // } //2.双项分支 // if(mashengni == "野兽"){ // alert("给他一榔头~"); // }else{ // alert("跳起来给他一榔头~"); // } //3.多项分支 // 不推荐判断条件连续比较,有可能失效; 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("大神级毕业生~"); }else if(salary >= 18000){ console.log("王牌毕业生~"); }else{ console.log("回炉重生~") } //4.巢状分支 var youqian = true; var youfang = true; if(youqian){ if(youfang){ console.log("老子要嫁给你~!"); } } </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>分支结构 : switch case </title> </head> <body> <script> var date = new Date(); console.log(date); // 获取星期 getDay var week = date.getDay(); console.log(week) week = "1" // 注意点: 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><!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.for循环 /* 语法特征: 1号 2号 3号 for(初始值;判断条件;自增自减的值){ code1 code2.. } 先执行1,2满足后执行代码体 然后执行3,2满足后在执行代码体 以此类推... 直到不满足条件终止循环; */ // 打印 1~100 for(var i = 1;i<=100;i++){ console.log(i); } // 打印1~100 遇到50,自动跳过; for(var i = 1;i<=100;i++){ if(i == 50){ continue; } console.log(i); } // ### 2.while 循环 //遇到5,终止循环 i = 0 while(i<10){ if( i == 5){ break; } console.log(i); i++; } console.log("<===============第一组===================>") // ### 3.for( var i in Iterable ) 获取的是数组中的索引号; var arr = ["孟浩然","赵子龙","康乃馨","张飞","汪精卫"]; for(var i in arr ){ console.log(i); console.log(arr[i]); } console.log("<===============第二组===================>") // 获取的是js对象中的键 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 ) 获取的是数组中的值; [等价于python中 for i in Iterable:] for(var i of arr){ console.log(i); } console.log("<===============第四组===================>") // 注意点: for(var i of dic) 不能遍历js对象[字典] 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><!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> func1() // ###1 函数 // 方式一 普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体在执行) func1() function func1(){ console.log(111); } // 方式二 匿名函数(匿名函数没有预加载价值,必须先定义在调用) // 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); // 方式四 闭包函数 function func5(){ var a = 100; function func6(){ console.log(a,"<===>"); return "我是闭包函数"; } return func6; } func = func5(); res = func(); console.log(res); // 方式五 箭头函数 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 函数参数 (普通位置参数,默认参数) // js中的形参实参不匹配不会报错 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 自动收集所有的实参 // 计算任意个数值的累加和; 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><!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> function func(){ console.log("函数正在执行 ... "); } // 1.正常调用 func(); // 2.函数的立即执行 (function func2(){ console.log("函数正在执行2 ... ") })(); // 3.匿名函数的立即执行 (function(){ console.log("匿名函数正在执行3 ... ") })(); // 4.其他立即执行的方法; !function(){ console.log("我在执行4 ... "); }(); ~function(){ console.log("我在执行5 ... "); }(); </script> </body> </html>Python主要应用于：1、Web开发；2、数据科学研究；3、网络爬虫；4、嵌入式应用开发；5、游戏开发；6、桌面应用开发。
感谢大家的阅读，以上就是“Python全栈中JS的知识有哪些”的全部内容了，学会的朋友赶紧操作起来吧。相信亿速云小编一定会给大家带来更优质的文章。谢谢大家对亿速云网站的支持！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
