网络编程
位置:首页>> 网络编程>> Python编程>> Python全栈之学习JS(1)

Python全栈之学习JS(1)

作者:熬夜泡枸杞  发布时间:2021-09-30 03:43:23 

标签:Python,全栈,JS

1. js的数据类型

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)" >点我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是单线程的异步程序
定时器是单线程的异步程序(例子)

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的用作是划分当前变量的作用域 不写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>

1.3 数据类型

<!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>

2. js类型转换_运算符

2.1 强制转换_Number

<!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>

2.2 强制转换_String

<!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>

2.3 强制转换_Boolean

<!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>

2.4 自动类型转换_Number_Boolean_String三者之间转换

<!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>

2.5 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>    <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>

3. js流程控制

3.1 分支结构

<!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>

3.2 分支结构_switch_case

<!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>

3.3 循环结构

<!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>

4. js函数

4.1 函数

<!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>

4.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>
       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>

来源:https://blog.csdn.net/weixin_46818279/article/details/122645121

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com