JavaScript -- 总结 1 （小白）

柿子来了

于 2024-07-31 09:00:00 发布

阅读量209

点赞数 6

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140731999

版权

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>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>

</head>

<body>
    <script>
        // HTML：结构层，提供网页的结构，提供网页中的内容
		// CSS: 表示层，用来美化网页
		// JavaScript：行为层，可以用来控制网页内容，给网页增加动态的效果，用于跟用户的交互

        // 行内代码  需要特定条件才可以书写
    <div onclick="console.log('1234')"></div>

        // 内部代码   script标签  尽量写在 body的最下面
            console.log("今天天气真不错");
    </script>
    
    <!-- 外部代码  通过script标签来引入外部的js文件  将路径写在src属性里面  -->
    <script src="./js使用方法.js">
        // console.log("今天天气真不错！");
    </script>
</body>

</html>

window对象方法

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // window 对象
        // alert  警告弹窗  只有确定按钮
        window.alert("你在干啥？？？");
        // alert("你在玩？？");

        // confirm 确认弹窗   有确认和取消按钮
        window.confirm("你确认要玩吗？");
        // confirm("你确认要删除吗？");

        // prompt 输入弹窗   有确认和取消按钮和输入框
        window.prompt("请输入你的名字！");
        // prompt("请输入你的名字！");

        // window可以省略
    </script>
</body>

</html>

window对象属性

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script>
        // window 对象
        // console.log 在控制台中打印输出  日志信息
        window.console.log("打印输出 日志信息");
        // console.log();

        // 错误信息
        console.error("错误信息提示");

        //警告信息
        console.warn("警告信息");

        // 普通信息
        console.info("普通信息");

        // 调试信息
        console.debug("调试信息");

        // console.dir(); 打印对象里面的所有属性和方法
        window.console.dir(window);
        // console.dir(window);

        // document.write 将内容输出到页面中
        window.document.write("<div class='text' style='color:red;'>打印输出 日志信息 </div>");
        // document.write("打印输出 日志信息");
    </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>
        // 变量的声明  声明变量
        var studentName;

        // 变量的赋值
        studentName = "张三";

        // 变量的初始化
        var studentAge = 18;

        console.log(studentName);

        // 同时声明多个变量
        var studentId, studentSex;
        studentId = 100;
        studentSex = "男";

        // 同时声明多个变量并初始化
        var studentId = 100,
            studentSex = "男";
    </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>
        // undefined  ?   
        console.log(num);

        var num = 18;


        // var num;

        // console.log(num);

        // num = 18

        // 浏览器的特殊机制  变量的声明提升  避免代码报错
    </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>
        // 布尔数据类型  Boolean   true  正确 1     false  错误 0
        var boo1 = true;
        var boo2 = false;
        console.log(boo1);
        console.log(boo2);

        // 数字数据类型   Number  包含所有数字 正数  负数 整数  小数
        var num1 = 123;
        var num2 = 123.456;
        var num3 = -123.456;
        var num4 = 123e5;
        console.log(num1);
        console.log(num2);
        console.log(num3);
        console.log(num4);

        // 字符串类型  String  包含所有字符串  双引号 和 单引号 没有区别
        var str1 = "你'和'好";
        var str2 = "我";
        var str3 = '"有一个帽子"';
        var str4 = '好';
        console.log(str1);
        console.log(str2);
        console.log(str3);
        console.log(str4);


        // 未定义数据类型  Undefined  没有定义值
        var und;
        console.log(und);

        // 空数据类型  Null  没有值
        var nul = null;
        console.log(nul);
    </script>
</body>

</html>

数据类型检测

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var num = 18;
        var str = "男";
        var boo = false;
        var und;
        var nul = null;

        // console.log(typeof num); //number
        // console.log(typeof str); //string
        // console.log(typeof boo); //boolean
        // console.log(typeof und); //undefined
        // console.log(typeof nul); //object  只有null是object类型 其他基本数据类型都是自己的名字

        var num = prompt('请输入一个数字');

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

</html>

数据类型转换

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 其他类型转换为布尔
        console.log(Boolean(1)); //true
        console.log(Boolean(0)); //false
        console.log(Boolean(3)); //true
        console.log(Boolean(-4)); //true
        // 数字类型转换Boolean  只有0会被转换为false  其他所有非0数字都会被转换为true
        console.log(Boolean("哈哈")); //true

        // 字符串类型转换boolean,只有空字符串会被转换为false，其他所有非空都会被转换为true
        console.log(Boolean("")); //false


        console.log(Boolean(null)); //false  null表示空  所以会被转换为false
        console.log(Boolean(undefined)); //false  undefined表示未定义 空  所以会被转换为false


        // 其他类型转换为数字  Number
        console.log(Number(true)); //1
        console.log(Number(false)); //1
        console.log(Number("张三")); // NaN  Not a Number
        console.log(Number("3")); // 3
        // 字符串通过number转换后，如果字符串中包含非数字字符，那么结果为NaN
        console.log(Number(undefined)); //NaN  Not a Number
        console.log(Number(null)); //null  空  0

        // 其他类型转换为数字  parseInt
        console.log(parseInt("3张三")); //3
        console.log(parseInt("张3三")); //NaN
        console.log(parseInt(true)); //NaN
        console.log(parseInt(null)); //NaN
        console.log(parseInt("3.555")); //3
        console.log(parseInt("3e2")); //3
        console.log(parseFloat("3.强555")); //3

        var num = prompt("请输入一个数字");
        console.log(Number(num) + 1);

        // 其他类型转换为字符串  String
        console.log(String(true)); //true
        console.log(String(123)); //123
        console.log(String(undefined)); //undefined


        // 其他类型转换为字符串  toString
        var num = 1.1;
        console.log(num.toString(2));
    </script>
</body>

</html>

隐式类型转换

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var str1 = "123";
        var str2 = "456";

        console.log(str1 - str2); //-333

        // isNaN  用于检查其参数是否是非数字值
        console.log(isNaN(123)); //false
        console.log(isNaN('aa123')); //false
    </script>
</body>

</html>