重装js第一天_js重装-CSDN博客

本文链接：https://blog.csdn.net/qq_42507764/article/details/127910747

第一天笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            /* height: 200px; */
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 内联书写js -->
    <!-- 需要通过 事件 驱动 -->
    <!-- <div οnclick="alert('涛哥不烫头你就别夸他，我有很多关于涛哥烫头的好玩的事情')"></div>

    <a href="javascript:alert('涛哥真帅');">111233</a> -->



    <!-- 内部 书写 js -->
    <!-- 新建一个 script标签，建议将这个标签写在body标签内部的最后 -->
    <!-- 在这个标签内 书写js代码 -->
    <script>
        // js的 常用输出语句
            // alert()   弹出警告框
                // alert('我们的涛哥很帅，如果继续烫头就能继续帅，所以替我转告一下，让涛哥烫头');
                // alert(999666520);


            // document.write()    在文档中写入内容
                // document.write('你们觉得js简单吗？');
                // document.write(1314520)


            // console.log()    在控制台打印日志
                // console.log('hello world！！！');
                // console.log(666);


            // prompt();      弹出 输入框
                prompt('请输入你的银行卡密码');



        // js的注释
            // 单行注释
            /*
                多
                行
                注
                释
            */

    </script>




    <!-- 引入外部的js文件 -->
    <!-- 通过 script 的 src属性 引入 -->
    <!-- 如果 一个script标签已经用来引入了外部的js文件，则在这个标签内部就不能在书写js代码 -->
    <!-- <script src="./test.js"></script> -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        // 变量
            // 变量其实就是一个用来存储 数据的容器
            // 变量在程序运行过程中其值可以改变的量 ---- 可变的量
            // 数据产生会存储在内存中，即给内存空间起别名，是一个数据存储空间的表示
            // 将数据通过变量进行存储，以便程序随时使用，通俗点来说，变量就是用来存储数据的。
            // 所谓变量，就是特定时间用于保存特定值的一个名字而已，并且初始化后可以再次改变的量。
            // ECMAScript 的变量是松散(弱)类型的，所谓松散类型就是可以用来保存任何类型的数据。   


        // 定义变量分为两部分
            // 声明 --- 定义变量，在js中声明变量 必须用 var关键字
            // 赋值 --- 给 已经存在的变量 存储值


        // 变量的命名规则
            // 命名可以使用 数字(0-9) 字母(a-zA-Z) 下划线(_) 美元符($)，但是不能以数字开头
            // 不能使用 关键字 和 保留字
                // 关键字：在js中被赋予了特殊函数的单词
                // 保留字：在js中还没有被赋予特殊含义，但是以后会被赋予特殊含义的单词
                    // 需要记住的几个：new class top delete ....
            // 一定要区分大小写
            // 最好 见名知意
            // 如果 一个变量名由多个单词构成，推荐使用 驼峰式命名 或 下划线式命名
                // 驼峰式：   myClassName
                // 下划线式： my_class_name



        // 在js中 用var声明的变量的 如果在 他声明之前对这个变量进行访问使用，得到的结果是 undefined
            // undefined --- 未定义，变量声明了但是没有赋值的一种状态
        console.log(num1);  // undefined

        // 声明变量并赋值
        var num1 = 11;
        console.log(num1);  // 11
            // 变量的值是可以被改变的
            num1 = 22;
            console.log(num1);  // 22

        // 先声明变量，后赋值
        var num2;
        console.log(num2);  // undefined
        num2 = 100;
        console.log(num2);  // 100

        // 一次声明多个变量，先声明，后赋值    通过逗号分割的方式
        var n1,n2,n3,n4;
        console.log(n1);  // undefined
        console.log(n2);  // undefined
        console.log(n3);  // undefined
        console.log(n4);  // undefined
        n1 = 33;
        n2 = 55;
        n3 = 77;
        n4 = 99
        console.log(n1);  // 33
        console.log(n2);  // 55
        console.log(n3);  // 77
        console.log(n4);  // 77

        // 一次声明多个变量，在声明的过程中赋值    通过逗号分割的方式
        var x1=1,x2=2,x3=3;
        console.log(x1);  // 1
        console.log(x2);  // 2
        console.log(x3);  // 3
        
        // 一次声明多个值相同的变量
        var r1 = r2 = r3 = 1111;
        console.log(r1);  // 1111
        console.log(r2);  // 1111
        console.log(r3);  // 1111
            // var e3 = 1000;
            // var e2 = e3;
            // var e1 = e2;
            // console.log(e1);  // 1000
            // console.log(e2);  // 1000
            // console.log(e3);  // 1000


        // 在js中 一个等号 = ，执行时 是先执行等号右侧的内容，然后将结果 赋值给 左侧的变量



        // 在js中声明变量 可以不使用个 var关键字
        // 这种情况下，如果在变量声明之前对变量进行访问使用，会报错
            // console.log(myname);  // Error: myname is not defined
            myname = '大帅哥';
            console.log(myname);  // '大帅哥'

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        // js的数据类型
            // 基本数据类型(简单数据类型、原始数据类型)
                // number       数值型(数字) ---  123 21 520 1314 ......
                var num1 = 21;
                console.log(num1);  // 21
                console.log(typeof(num1));  // 'number'
                console.log(typeof num1);  // 'number'


                // string       字符型(字符串) --- 被单引号或双引号包含 --- '111' "涛哥好帅" ......
                var str1 = '1314';
                console.log(str1);  // '1314'
                console.log(typeof(str1));  // 'string'
                var str2 = 'hello world!!!';
                console.log(str2);  // 'hello world!!!'
                console.log(typeof str2);  // 'string'


                // boolean      布尔型(布尔值) --- 只要两个值， true-真(对)   false-假(错)
                var flag1 = true;
                console.log(flag1);  // true
                console.log(typeof flag1);  // 'boolean'

                var flag2 = false;
                console.log(flag2);  // false
                console.log(typeof(flag2));  // 'boolean'


                // undefined    未定义 --- 变量声明了但是没有赋值的一种不正常的状态
                var und1;
                console.log(und1);  // undefined
                console.log(typeof(und1));  // 'undefined'

                var und2 = undefined;
                console.log(und2);  // undefined
                console.log(typeof und2);  // 'undefined'


                // null     空 --- 什么都没有
                var nu = null;
                console.log(nu);  // null
                console.log(typeof nu);  // 'object'


            // 引用数据类型(复杂数据类型、对象数据乐行)
                // 后期学习，前期不涉及



        // 如何检测 数据类型 --- 如何查看一个变量的数据类型
            // typeof(数据)     方法
            // typeof 数据      运算符

            // 注：用来检测数据类型的这两个操作，得到的结果也是 string类型的值
                // console.log(typeof(typeof(num1)));  // 'string'



                
        // 所有输入框的内容被获取到后 数据的类型 都是 string
        // 弹出的输入框 有两个按钮
            // 确定 --- 得到输入框的内容，是一个字符串，如果没有输入内容则是一个空字符串''
            // 取消 --- 得到的结果就是 null
        var tel = prompt('请输入你的手机号码');
        console.log(tel);
    </script>
</body>
</html>

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        // 算数运算符
            // +   -   *   /   %
            // 作用是 对数据进行算数运算

        
        // + 加
        var num1 = 21;
        var num2 = 55;

        var num3 = num1 + num2;  // 21 + 55
        console.log(num3);  // 76

        console.log(num3+100);  // 176

            // 加号的坑：
            // 如果使用 字符串类型的数据 和 任何类型的数据相加 的到的结果 都是 字符串拼接
            // 字符串拼接，就是将 多个值一个接一个组成一个 字符串
            var str1 = '520';
            var n = str1 + num1;  // '520' + 21
            console.log(n);   // '52021'

            console.log(""+23+true+520);  // '23true520'
            console.log(23+55+'hello'+33);  // '78hello33'


        // - 减
        var num4 = num3 - 20;  // 76 - 20
        console.log(num4);  // 56
        console.log(num4-22);  // 34

        var str2 = '22';
        console.log(num4-str2);  // 56-'22' === 34
        var s = num4-'abc';  // 56-'abc'
        console.log(s);  // NaN
        console.log(typeof s);  // 'number'


        // * 乘
        console.log(23*3);  // 69
        console.log(23*'3');  // 69
        console.log(23*'3a');  // NaN
        

        // / 除
        console.log(33/3);  // 11
        console.log(33/'3');  // 11
        console.log(33/'3a');  // NaN


        // % 模(取余)
        console.log(55%5);  // 0
        console.log(55%10);  // 5
        console.log(55%2);  // 1
        console.log(55%'2s');  // NaN
        
        

        // NaN --- Not a Number --- 不是数字
            // 虽然说 NaN 表示 不是数字，但是检测的数据类型结果却是 number
            // 其实 NaN 是一个 不是数字的数字
            // 一般情况下是在 错误的算数运算时 会得到 NaN的结果
            // NaN 和 任何值都不等，包括与自身也不等
            // 如何检测一个值是否是 NaN，通过 isNaN(值) 方法
                // 如果得到 true的结果 说明 这个值 是 NaN
                // 如果得到 false的结果 说明 这个值 不是 NaN
            var f1 = isNaN(s);
            console.log(f1);  // true
            var f2 = isNaN(num4);
            console.log(f2);  // false
            

    </script>
</body>
</html>