JavaScript-day01

2201_75449897

已于 2024-07-20 11:26:08 修改

阅读量273

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-07-19 18:38:15 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75449897/article/details/140555668

版权

文章目录

1.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>
    <!-- 行内代码  需要特定条件才可以书写 -->
    <div onclick="console.log('123')"></div>
   

    <!-- 内部代码   script标签  尽量写在 body的最下面-->
    <script>
        console.log("张三");
    </script>


    <!-- 外部代码  通过script标签来引入外部的js文件  将路径写在src属性里面  -->
    <script src="./01-js使用方法.js">
        // console.log("张三11111");
    </script>
</body>

</html>

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

3.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.dir(); 打印对象里面的所有属性和方法
        window.console.dir(window);
        // console.dir(window);

        // document.write 将内容输出到页面中
        window.document.write("<div class='box' style='color:red;'>你干嘛</div>");
        // document.write("哎呦");
    </script>
</body>

</html>

4.变量的创建

<!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 = 1000;
        studentSex = "男";

        // 同时声明多个变量并初始化
        var studentId = 1000,
            studentSex = "男";
    </script>
</body>

</html>

5.变量的声明提升

<script>
        
        // var num;

        // console.log(num);

        // num = 18




        var num = 18;
        console.log(num);

        // 浏览器的特殊机制  变量的声明提升  避免代码报错
    </script>

06-数据类型

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