JavaScript day1

Follow_浩弟

已于 2023-08-14 17:56:22 修改

阅读量37

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-08-13 22:33:16 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132266459

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS的使用方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>css</style> -->
</head>

<body>

    <!-- html -->
    <!-- aaaa -->

    <!-- 1.内联JS -->
    <a href="javascript:alert('点我干啥?');">点击一下</a>
    <!-- 给当前的div注册一个单机事件 -->
    <div title="123" onclick="alert('讨厌🤭')">你点完他就不要点我了</div>
    <div title="123" onclick="console.log(123)">你点完他就不要点我了</div>



    <!-- 2.创建一个script 标签 用来包裹js代码 -->
    <script>
        // alert警告框
        alert('校服费4000元引争议 学校回应热');

        // aaaa
    </script>
    <!-- 所以引入或者编写JS建议放在最下面 -->
    <!-- 3.使用js script标签 的 src 引入外部JS -->
    <script src="./01-JS的使用方式.js"></script>
</body>

</html>

window对象的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>css</style> -->
</head>

<body>

    <!-- html -->
    <!-- aaaa -->

    <!-- 1.内联JS -->
    <a href="javascript:alert('点我干啥?');">点击一下</a>
    <!-- 给当前的div注册一个单机事件 -->
    <div title="123" onclick="alert('讨厌🤭')">你点完他就不要点我了</div>
    <div title="123" onclick="console.log(123)">你点完他就不要点我了</div>



    <!-- 2.创建一个script 标签 用来包裹js代码 -->
    <script>
        // alert警告框
        alert('校服费4000元引争议 学校回应热');

        // aaaa
    </script>
    <!-- 所以引入或者编写JS建议放在最下面 -->
    <!-- 3.使用js script标签 的 src 引入外部JS -->
    <script src="./01-JS的使用方式.js"></script>
</body>

</html>

window对象的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            
        } */
    </style>
</head>

<body>

    <div onclick="window.document.write('<h2>我是点击div被生成的文字</h2>')">点我生成文字</div>
    <!--  -->
    <script>
        // 
        // window对象下面有一个属性叫做console

        // window.console

        // console这个属性下面有几个方法

        //  会在控制台输出 日志信息 
        window.console.log('hello  JavaScript!');
        window.console.log('1234567890');


        // 显示一个对象的所有属性和方法
        window.console.dir(window);


        // 将括号里面的内容输出到 html文档里面 可以识别HTML标签
        window.document.write("我是JS生成的文字");
        window.document.write("<h1>我是JS生成的文字</h1>");
        // write 替换body里面的所有内容


        // window可以进行省略
        // 警告框
        // alert('123');
        // alert("123");
        // 双引号：
        // 双引号里面可以放单引号，但不能放双引号。
        // 单引号:
        // 单引号里面可以放放引号，但不能放双引号。
         alert("'123'");
    </script>
</body>

</html>

标识符

所谓标识符，就是指变量、函数、属性，或者函数参数的名字。

不能以数字开头。
严格区分大小写。
不能使用JavaScript中的关键字命名。
要尽量要做到“见其名知其意”。

变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 是一种 存储数据的方式
        // 是一个容器，用来存储数据，他把数据存放到内存当中，
        // 如果需要使用，就用引用地址去找

        // 需要使用关键字  var
        var userName;
        // 当创建变量时会自动在内存中生成一个址

        // 这样就声明了一个变量
        // 用赋值运算符来给变量数据
        // = 会将等号右边的值 赋给 = 左边的变量
        userName = "天降大任于斯人也";

        // 控制台输出
        // 在访问时会自己去找址，从而拿到值
        console.log(userName);


        // 简化
        var userInfo = "先帝创业为伴，而半路华光预算";
        console.log(userInfo);

        // 同时创建多个变量
        var name, age, gender;

        name = "胡歌";
        age = 18;
        gender = "男";
        
        console.log(name);
        console.log(gender);
        console.log(age);


        // 扩展
        console.log(100 + 9);
        console.log(100 - 9);
        console.log(100 * 9);
        console.log(100 / 9);
        console.log(100 % 9);
        console.log(20 % 5);
        console.log(10 % 3);
        console.log(2 * 2 * 2);
        console.log(2 ** 10);
    </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>
        // 未声明，直接打印
        // console.log(num);       // num is not defined 报错，未进行定义

        // 声明未赋值，进行打印
        // var num;
        // console.log(num);           // undefined  未定义

        // var num;
        // num=1;
        // console.log(num);           // 1


        // 先打印，后声明，变量声明提升
        console.log(num);              // undefined  未定义
        var num;

        // 先打印，后进行初始化，声明部分被提升，赋值不提升
        // var num1;
        // console.log(num1);
        // num1= 10;
        console.log(num1);              // undefined 未定义
        var num1 = 10;
    </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>
        // 数据类型：为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
        // 1.基本数据类型  数值类型number  字符串类型sting  布尔类型boolean  未定义undefined  空null

        // 1.number 所有的数字
        var num = 10;
        console.log(num);
        // 二进制数
        var num2 = 0b10100010;  // 0*2^0 + 1*2^1 + 0*2^2 + 0*2^3 + 0*2^4 + 1*2^5 + 0*2^6 + 1*2^7 = 162
        console.log(num2);
        // 八进制
        var num3 = 011;         // 1*8^0 + 1*8^1 = 9
        console.log(num3);
        // 十六进制
        var num4 = 0x11;        // 1*16*^0 + 1*16^1 = 17
        console.log(num4);

        //2. string  带""都是字符串
        var str = "张三";
        console.log(str);
        var str2 = "10";
        console.log(str2);
        // 转译字符
        var str3 = "时隔三年\ntheshy重登世界赛舞台";
        console.log(str3);

        // 3. boolean true false
        var bool = true;
        console.log(bool);
        var bool2 = "true";
        console.log(bool2);

        // 4.undefined 只有undefined
        // 一般指出乎意料的情况，任何一个只声明而没有赋值的变量都会被隐式的(自动的)赋值为 undefined。
        var und = undefined;
        console.log(und);

        // 5. null 只有null
        // 需要赋值为nul
        var kong = null;
        console.log(kong);

    </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>
        // 引用数据类型 Object

        // 声明对象
        var person = {
            // 属性  属性值
            name:"张三",
            age:18,
            sex:true,
        }

        console.log(person);
    </script>
</body>
</html>

typeof检测数据类型

<!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>
        // 数据类型 1.基本数据类型
                        // 1.1 number
                        // 1.2 string
                        // 1.3 boolean
                        // 1.4 undefined
                        // 1.5 null
                    // 2.引用数据类型 object

        var num = 10;
        console.log(typeof num);    // number

        var str = "10";
        console.log(typeof str);    // number

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

        var und = undefined;
        console.log(und);
        console.log(typeof und);    // undefined

        var kong = null;
        console.log(typeof kong);   // object 历史遗留问题，空对象指针

        var person = {
            name:'zs',
            age:18
        }
        console.log(typeof person); // object

        // typeof 返回值  number string boolean undefined object
    </script>
</body>
</html>

其他数据类型转换成Boolean(布尔数据类型)

<!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>
        // 1.将其他类型转换为 Boolean 类型
        var num = 0;
        console.log(Boolean(num));  // false

        var str = "";
        console.log(Boolean(str));  // false

        var und = undefined;
        console.log(Boolean(und));  // false

        var kong = null;
        console.log(Boolean(kong)); // false
        
        var notNum = NaN;       // not a number
        console.log(notNum);
        console.log(typeof notNum);     // number
        console.log(Boolean(notNum));   // false

        var num1 = 1;
        console.log(Boolean(num1)); // true

        var str2 = "abc";
        console.log(Boolean(str2)); // true

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

其他数据类型转换成Number(数值数据类型)

<!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>
        // 2.其他类型转换为 Number 类型

        // Number() 方法
        var str = "";
        console.log(Number(str));       // 0

        var bool1 = true;
        console.log(Number(bool1));     // 1

        var bool2 = false;
        console.log(Number(bool2));     // 0

        var und = undefined;
        console.log(Number(und));       // NaN

        var kong = null;
        console.log(Number(kong));      // 0

        var str2 = "10";
        console.log(Number(str2));      // 10

        var str3 = "123.456";
        console.log(Number(str3));      // 123.456

        var str4 = "123abc";
        console.log(Number(str4));      // NaN

        var str5 = "abc123";
        console.log(Number(str5));      // NaN

        console.log("*************************************************");

        // parseInt() 方法，将小数取整, 本质是用来取整的
        console.log(parseInt(str));     // NaN

        console.log(parseInt(bool1));   // NaN

        console.log(parseInt(bool2));   // NaN

        console.log(parseInt(und));     // NaN

        console.log(parseInt(kong));    // NaN

        console.log(parseInt(str2));    // 10

        console.log(parseInt(str3));    // 123

        console.log(parseInt(str4));    // 123

        console.log(parseInt(str5));    // NaN
        console.log("---------------------------------------------------");

        // parseFloat() 方法，保留小数
        console.log(parseFloat(str));     // NaN

        console.log(parseFloat(bool1));   // NaN

        console.log(parseFloat(bool2));   // NaN

        console.log(parseFloat(und));     // NaN

        console.log(parseFloat(kong));    // NaN

        console.log(parseFloat(str2));    // 10

        console.log(parseFloat(str3));    // 123.456

        console.log(parseFloat(str4));    // 123

        console.log(parseFloat(str5));    // NaN

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

其他数据类型转换成String(字符串数据类型)

<!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>
        // 3.将其他类型转换为 String 类型

        // String() 方法
        var num = 10;
        console.log(String(num));   // "10"

        var bool = true;
        console.log(String(bool));  // "true"

        // toString() 方法
        console.log(num.toString());    // "10"
        console.log(num.toString(2));   // "1010"
        console.log(num.toString(8));   // "12"
        console.log(num.toString(16));  // "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>Document</title>
</head>

<body>
    <script>

        // 隐式类型转换
        // 代码在运行的过程当中 浏览器的JS引擎会帮我们把 数据类型自动转换
        // + - * / %
        console.log(2 + 2);
        // 字符串与任何数据类型相加 都是拼接的意思
        console.log(2 + "2");
        console.log(null + "2");
        console.log(undefined + "2");
        // +不具备隐式类型转换


        // - * / % 都具备隐式类型转换
        console.log(2 - "2");
        console.log(2 * "2");
        console.log(2 / "2");
        console.log(2 / "2");
        console.log(2 % "2c"); // NaN
        console.log('10' / '2');

        // number
        console.log(typeof NaN);
    </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>Document</title>
</head>

<body>
    <script>

        // 隐式类型转换
        // 代码在运行的过程当中 浏览器的JS引擎会帮我们把 数据类型自动转换
        // + - * / %
        console.log(2 + 2);
        // 字符串与任何数据类型相加 都是拼接的意思
        console.log(2 + "2");
        console.log(null + "2");
        console.log(undefined + "2");
        // +不具备隐式类型转换


        // - * / % 都具备隐式类型转换
        console.log(2 - "2");
        console.log(2 * "2");
        console.log(2 / "2");
        console.log(2 / "2");
        console.log(2 % "2c"); // NaN
        console.log('10' / '2');

        // number
        console.log(typeof NaN);
    </script>
</body>

</html>