day1 初识JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/airenxingyuan/article/details/129484928

本文是一位初学者在跟随尚硅谷教程学习JavaScript后，在优快云上记录的每日学习内容，涵盖了从HTML中插入JS、基本语法、变量与字面量、数据类型（如字符串、数字、布尔值、空值和未定义）以及类型转换等方面的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟着尚硅谷老师们的视频，我开始了JavaScript的学习，在优快云上记录下我的每日收获。希望自己不要偷懒！！
HelloWorld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   JS代码需要编写到script标签中 -->
    <script type="text/javascript">
        //控制浏览器弹出一个警告框
        //alert("这是一个警告框");
        /*
        让计算机在页面中输出一个内容
        document.write()可以向body中输出一个内容
        document.write("看我出不出来");
         */

        /*
        想控制台输出一个内容
        console.log("你猜我在哪出来呢？？");
         */

        alert("这是一个警告框");
        document.write("看我出不出来");
        console.log("你猜我在哪出来呢？？");

    </script>
</head>
<body>

</body>
</html>

JS编写的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    可以将js代码编写到外部js文件中，然后通过script标签引入
    写到外部文件中可以在不同的页面中引用，也可以利用带浏览器的缓存机制
    推荐使用的方法
-->
<!--
    script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了也会被浏览器忽略
    如果需要则可以再创建一个script标签用于编写内部代码
-->
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
        alert("我是内部的js代码");
    </script>
<!--
    说明可以将js代码写到script标签中
<script type="text/javascript">-->
<!--    alert("我是script标签中的代码！！");-->
<!--  </script>-->
</head>
<body>
    <!--
       可以将js代码编写到标签的onclick属性中
       当我们点击按钮，js代码才能执行

       虽然可以写在标签的属性中，但是他们属于结构与行为的耦合，不方便维护，不推荐使用
    -->
    <button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
    <!--可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码    -->
    <a href="javascript:alert('让你点你就点！！');">你也点一下</a>
    <a href="javascript:;">你也点我一下</a>
</body>
</html>

01.基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        多行注释
        js注释
        多行注释，注释的内容不会被执行，但是可以在源代码中查看
        要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试
         */
        //单行注释
        alert("hello");//警告框输出
        document.write("hello");//写到body中
        console.log("hello");//控制台输出

        /*
        1.js中严格区分大小写
        2.js中每一条语句以分号结尾
            如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
            甚至有的时候会加错分号，所以分号必须写
        3.js中会忽略多个空格和换行，所以可以利用空格和换行对代码进行格式化
         */

        alert("hello");

    </script>
</head>
<body>

</body>
</html>

02.字面量与变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    /*
    字面量,都是不可变的值
      比如：1 2 3 4 5
      字面量都是可以直接使用的，但是一般都不会直接使用字面量

    变量，变量可以用来保存字面量，可以任意改变
      而且变量更加方便使用，所以在开发中都是通过变量去保存一个字面量
      而很少使用字面量
      还可以通过变量来对字面量进行描述
     */

    //声明变量
    //在js中使用var关键字来声明一个变量
    var a;

    //为变量赋值
    a = 123;
    a = 456;
    a = 123456454645;

    //声明和赋值同时进行
    var a = 456789;

    console.log(a);

    //alert(1231232123123);

  </script>
</head>
<body>

</body>
</html>

03.标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*
    标识符
     -在js中所有的可以自主命名的都是标识符
     -例如：变量名、函数名、属性名都是标识符
     -命名一个标识符时需要遵守如下的规则：
          1.标识符中可以含有字母、数字、_、$
          2.标识符不能以数字开头
          3.标识符不能是ES中的关键字或保留字
          4.命名规范：标志符一般采用驼峰命名法
              - 首字母小写，每个单词的开头字母大写，其余字母小写
              helloWorld xxxYyyZzz
     -JS底层保存标识符时实际上是采用的Unicode编码
          所以理论上讲，所有的utf-8中含有的内容都可以作为标识符(说明中文也能用，但是一般不用)
     */

    var abd = 123;

    console.log(abd);

  </script>
</head>
<body>

</body>
</html>

04.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

      /*
      数字类型值的是字面量类型
        在JS中一共有六种数据类型
            String 字符串
            Number 数值
            Boolean 布尔值
            Null 空值
            Undefined 未定义
            Object 对象
        其中String、Number、Boolean、Null、Undefined属于基本数据类型
          而Object属于引用数据类型
       */

      /*
      String字符串
        - 在JS中字符串需要使用引号引起来
        - 使用单引号或双引号都可以，但是不要混着用
        - 引号不能嵌套，双引号中不能放双引号，单引号不能放单引号
       */

      var str = "hello";
      var str1 = 'helloooo';
      str = "我说：‘今天天气真不错！’"

      /*
      在字符串中我们可以使用\作为转义字符
        当表示一些特殊符号时可以使用\进行转义

        \"表示"
        \'表示'
        \n表示换行
        \t表示制表符
        \\表示\
       */

      str = "我说：\"今天\t天气真不错\"";

      str = "\\";

      //console.log(str);

      //输出字面量 字符串str
      alert("str");
      //输出变量str
      alert(str);

    </script>
</head>
<body>

</body>
</html>

05.数据类型：Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    /*
    在JS中所有的数值都是Number类型
      包括整数和浮点数（小数）
      JS中可以表示的数字的最大值
        Number.MAX_VALUE
            1.7976931348623157e+308
        如果使用Number表示的数字超过了最大值，则会返回一个Infinity
            表示正无穷
            使用typeof检查Infinity也会返回Number
     */

    //数字123
    var a = 123;
    //字符串123
    var b = "123";

    /*
    可以使用一个运算符typeof来检查一个变量的类型
    语法：typeof 变量
    检查字符串时，会返回String
    检查数值时，会返回number
     */

    console.log(typeof a);
    console.log(typeof b);

    console.log(a);
    console.log(b);

    a = Number.MAX_VALUE * Number.MAX_VALUE;
    console.log(a);
    a = Infinity;
    console.log(typeof a);

    a = "abc" * "abc";
    console.log(a);//返回NaN，是一个特殊的数字，表示Not A Number

    a = NaN;
    console.log(typeof a);//返回number

    a = Number.MIN_VALUE;
    console.log(a);//大于0的最小正值

    //在js中整数的运算基本可以保证精确
    var c = 123 + 456;
    console.log(c);

    //如果使用js进行浮点运算，可能得到一个不精确的结果
    //千万不要使用JS进行对精确度要求比较高的运算
    var c = 0.1 + 0.2;
    console.log(c);

  </script>
</head>
<body>

</body>
</html>

06.数据类型：Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*
        Boolean布尔值
        布尔值只有两个，主要用来做逻辑判断
        true表示真
        false表示假
         */

        var bool = true;
        console.log(typeof bool);

    </script>
</head>
<body>

</body>
</html>

07.数据类型：Null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*
    Null（空值）类型的值只有一个,就是null
    专门用来表示空对象
     */

    var a = null;
    console.log(typeof a);//返回object

    /*
    Undefined（未定义）类型的值只有一个，就undefined
    当声明一个变量时，但是不给变量赋值时，它的值就是undefined
     */
    var b;
    console.log(b);
    console.log(typeof b);

  </script>
</head>
<body>

</body>
</html>

08.强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*
    强制类型转换
      - 指将一个数据类型强制转换成其他的数据类型
      - 类型转换主要指，将其他的数据类型，转换为
          String Number Boolean
     */

    /*
    将其他数据类型转换为String
      方式一：
        - 调用被转换类型的toString（）方法
        - 该方法不会影响到原变量，它将转换的结果返回
     */
    var a = 123;

    //调用a的toString()方法
    //调用xxx的yyy方法，就是xxx.yyy()
    var b = a.toString();

    console.log(b);
    console.log(typeof b);
    console.log(typeof a);
    console.log(a);

    a = null;
    //a = a.toString();注意：null和undefined没有toString方法
    //  如果调用会报错

    console.log(a);

    /*
    方式二：
        - 调用String函数，并将被转换的数据作为参数传递给函数
        - 使用String（）函数做强制转换时，
            对于Number和Boolean实际上就是调用的toString（）方法
            但是对于null和undefined，就不会调用toString（）方法
              它会将null转换为“null”
     */

    a = null;
    a = undefined;
    console.log(typeof a);

    //调用String函数，来将a转换成字符串
    a = String(a);
    //console.log(a);
    console.log(typeof a);

  </script>
</head>
<body>

</body>
</html>

09.转换为Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*
    将其他的数据类型转换为Number
      转换方式一：
          使用Number（）函数
              - 字符串-->数字
              1.如果是纯数字的字符串，则直接将其转换成数字
              2.如果字符串中有非数字的内容，则转换为NaN
              3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
     */

    //var a = "123";
    var a = "123abc";

    a = Number(a);

    a = false;
    a = Number(a);//布尔值转数字，true为1，false为0

    a = null;
    a = Number(a);//null转数字为0

    a = undefined;
    a = Number(a);
    console.log(typeof a);//NaN
    console.log(a);

    /*
    转换方式二：
        - 这种方法专门用来对付字符串
        - parseInt()把一个字符串转换为一个整数
        - parseFloat()把一个字符串转换为一个浮点数
            parseInt()可以将一个字符串中的有效的整数内容取出来
            然后转换为Number
     */
    var b = "123px";
    b = "b123a456px"//NaN,第一个字母即无效
    b = "123.456"//123

    b = parseInt(b);

    b = "123.456"
    /*
    可以获得有效的小数
     */
    b = "123.456.789px"//123.456
    b = parseFloat(b);
    console.log(b);
    console.log(typeof b);

    /*
    对于非String使用parseInt（）或parseFloat（）
    它会先将其转换为String然后再操作
     */
    var c = true;
    c = parseInt(c);
    console.log(c);
    console.log(typeof c);

  </script>
</head>
<body>

</body>
</html>

10.其他进制的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    var a = 123;//十进制数字

    a = 0x123;//十六进制
    a = 0xff;//1111 1111
    console.log(a);

    var b = 0o70;//八进制
    console.log(b);

    b = 0b10;//二进制，有些浏览器不承认
    console.log(b);

    //像“070”这种字符串，有些浏览器会当成八进制解析，有些会当成十进制解析
    b = "070";

    //b = parseInt(b);
    b = parseInt(b,8);//parseInt(参数，进制);
    console.log(typeof b);
    console.log(b);

  </script>
</head>
<body>

</body>
</html>

11.转换为boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*
    将其他的数据类型转换为boolean
        - 使用Boolean（）函数
     */

    var a = 123;//true
    a = 456;//true
    a = 0;//false
    a = Infinity;//true
    a = NaN;//false
    /*
    数字-->布尔
        - 除了0和NaN，其余都是true
     */

    //调用Boolean（）函数来将a转换为布尔值
    a = Boolean(a);

    a = "hello";//true
    a = "";//false

    /*
    字符串转布尔
        - 除了空串，其余都是true
     */

    a = null;//false
    a = undefined//false

    //对象也会转化为true

    a = Boolean(a);

    console.log(typeof a);
    console.log(a);

  </script>
</head>
<body>

</body>
</html>