Python全栈之学习JS(1)

2024-04-02 19:04:59 654人浏览八月长安

Python 官方文档：入门教程 => 点击学习

摘要

目录1. js的数据类型1.1 js引入方式1.2 注释变量1.3 数据类型2. js类型转换_运算符2.1 强制转换_Number2.2 强制转换_String2.3 强制转换_B

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 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>
        
        // ###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 不是一个数字
        
        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>
        
        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~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
        
        // 字符串的遍历:
        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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Python全栈之学习JS(1)

本文链接: https://www.lsjlt.com/news/163470.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Python全栈之学习JS(1)

目录1. js的数据类型1.1 js引入方式1.2 注释变量1.3 数据类型2. js类型转换_运算符2.1 强制转换_Number2.2 强制转换_String2.3 强制转换_B...

99+

2024-04-02
Python全栈之学习CSS(1)

目录1. 表单框类型文件上传：2. 表单属性3. css引入my.css4. 选择器4.1 常用选择器4.2 选择器的优先级4.3 关系选择器4.4 属性选择器4.5 伪类选择器_颜...

99+

2024-04-02
Python全栈之学习MySQL(1)

目录1. mysql约束2. 外键_联合主键_唯一索引3. 存储引擎_表关系总结1. mysql约束 # ### char varchar (补充) char 字符长...

99+

2024-04-02
Python全栈之学习JS(3)

目录1. dom节点1.1 dom节点获取1.2 节点元素层级关系1.3 修改_清空内容1.4 隐藏显示密码效果2. 全选_反选_不选2.1 全选_反选_不选2.2 js控制css的...

99+

2024-04-02
Python全栈之学习JS(2)

目录1. js对象1.1 object对象1.2 json对象2. js字符串函数3. js数组相关方法4. js数学对象相关方法5. BOM对象5.1 定时器5.2 获取年月日时分...

99+

2024-04-02
python全栈学习记录--1（2018

我是金融民工，现在行业更新速度越来越快，和编程结合的越来越紧密，搞程序化，量化，算法交易的越来越多，倍感压力。故想提升自己，跟上节奏。了解了各种语言的特点，咨询了一些朋友后，最终决定学习PYTHON。开始买了本python教程，但看了一大半...

99+

2023-01-31

python
Python全栈之学习HTML

目录1. vscode相关配置2. html认识2.1 html认识2.2 html结构2.3 html语法特征3. 标签种类_列表3.1 常见标签3.2 标签种类3.3 列表3.4...

99+

2024-04-02
Python全栈之学习JQuery

目录1. lable标签补充2. jquery引入和简单使用3. 选择器3.1 基础选择器3.2 组合选择3.3 层级选择器3.4 属性选择器3.5 表单对象属性选择器3.6 表单选...

99+

2024-04-02
Python全栈之学习MySQL(3)

目录1. pymysql的基本操作2. sql注入攻击3. sql增删改查4. mysql的数据恢复5. sql语句优化总结1. pymysql的基本操作 # ### python ...

99+

2024-04-02
Python全栈之学习CSS(2)

目录1. css背景图1.1 背景属性1.2 背景图片引入2. 相对_绝对_固定2.1 相对定位2.2 绝对定位2.3 固定定位3. float浮动3.1 display转换元素3....

99+

2024-04-02
Python全栈之学习MySQL(2)

目录1. mysql_where子句_聚合函数2. mysql_其他子句语法3. mysql_子查询4. exists关键字5. 练习所需表数据6. 小练习（1）表结构:（...

99+

2024-04-02
python学习之路（1）

今天刚入门python，对于有c和java基础的我，学习起来还是比较容易的，我并没有用PyCharm写，而是最基础的IDLE，学习python比java容易的地方就是不要写分号，不要打包，不要定义等等，可能是我还学习的不够深入吧。今天的...

99+

2023-01-31

之路 python
python全栈学习之旅正式开始了！

My frist blog 2018年11月22日，我的第一个博客正式发行。终于开始学习自己喜欢的东西了，之前的学习都是零零碎碎的，只是完成这样一个那样一个小项目，仅仅利用休息的时间去学习IT技术。接下里的日子里，争取每天都会用更多的时...

99+

2023-01-30

之旅开始了正式
Python全栈之学习JQuery的示例分析

这篇“Python全栈之学习JQuery的示例分析”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“Python全栈之学习JQuery的示例分析”，小编整理了以下知识点，请大家跟着小编的步伐一步一...

99+

2023-06-29
Python全栈之学习HTML的示例分析

这篇“Python全栈之学习HTML的示例分析”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“Python全栈之学习HTML的示例分析”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇...

99+

2023-06-29
python学习之控制流1

配置环境：python 3.6 python编辑器：pycharm　　代码如下： #!/usr/bin/env python #-*- coding: utf-8 -*- # 控制流： # 1、布尔值：只有两种值：Ture 和 Fa...

99+

2023-01-31

python
python全栈学习记录--3（2018

一、Linux操作系统1、unix是目前世界上最稳定，安全的系统。是分时操作系统，多个联机终端和采用多道技术。2、开源代表代表公开，所有人可以编辑查看，但不代表免费。3、服务器要的是性能，稳定，效率，不间断运行。故LINUX更能胜任，WIN...

99+

2023-01-31

python
Python全栈学习_day002知识点

今日大纲： 1. while循环 2. 格式化输出 3. 运算符 4. 编码初识 1. while循环 - while 无限循环： while True: # 死循环 print('大悲咒...

99+

2023-01-30

知识点 Python
Python全栈学习_day003知识点

今日大纲： 1. 基础数据类型总览 2. int 3. bool 4. str 5. for循环 1. 基础数据类型总览　 int: 用于计算，计数等 str：'这些内容'，用户少量数据的存储，便于操作 ...

99+

2023-01-30

知识点 Python
Python全栈学习_day001知识点

今日大纲： 1. 变量。 ***** 2. 常量。** 3. 注释。*** 4. 基础数据类型初识（int，str，bool）. ***** 5. 用户输入 input ***** 6. 流程控制语句if。 ***** 1. 变量编码...

99+

2023-01-30

知识点 Python