JS基础（day01 保姆级攻略）

大家好，今天给大家分享一下我最近学习的一些有关JavaScript的知识。如果你觉得这些知识也很有用，那就请点个赞并收藏本文吧，让更多的朋友也能受益于这些知识。谢谢大家的支持！

一、JavaScript 介绍

1. 网页的组成：结构html，样式css，行为js

• html：超文本标记语言

• css：层叠样式表

• javascript：网页的脚本语言，用来描述网页的逻辑交互行为

• 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

2. javascript的组成：ECMAScript，DOM，BOM

• ECMAScript：语法，规范，标准，定义了javascript的语法规范,描述了语言的基本语法和数据类型。

• 用来约束代码用什么样的格式书写，写什么，如何执行

• DOM（Document Object Model）：文档对象模型，document，表示网页。

• 提供了网页的相关操作，标准化组织是W3C。

• 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。

• 如：增加元素，删除元素，改变元素位置等

• BOM（Browser Object Model）：浏览器对象模型，window，表示浏览器。

• 提供了浏览器的相关操作，沿用了ECMAScript的标准，在此之上添加各个浏览器自身的特色功能

• 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。

• 如：弹出框、浏览器跳转、获取分辨率等

1. js的发展史

• • 网景：livescript，与SUN合作，改名javascript
  • IE：JScript
  • xxxScript的标准和规定，提给了，ECMA（国际非营利组织，专门制定各种规则），由ECMA指定出网页脚本语言的语法规范，并将该规范称为：ECMAScript1.0
    课外阅读：JavaScript的起源、发展和组成

二、JavaScript 的书写位置

1. 行内：标签内，通过行为属性执行相关js代码

• • 可点击的元素
  • 必须通过行为触发
  • 不推荐使用，结构和行为的耦合过高
  • 不利用多个标签之间的行为复用

1. 内部：html文件内，使用script标签标记js代码

<script>
  alert("hello 行内");
script>

• 自动执行
• 不太推荐使用，html和行为的耦合过高
• 可以做到多个标签之间的行为复用
• 但是不利于多个html文件之间的行为复用

1. 外部：独立的js文件内，通过script标签的src属性引入，建议使用

<script src="./index.js">script>
alert("hello 外部");

• 自动执行

• 推荐使用，完全做到html和行为的解耦

• 方便html文件之间的行为复用

• 方便独立管理

• 建议：一般在开发过程中，先写内部，在内部实现功能之后，封装成外部。

• 为了方便演示，课程中以内部js为主。

• 注意：

• 错误写法，内部和外部的js不能共用一个script标签

  • script标签原则上可以放在页面的任何位置，但是一般放在head标签内，或，body标签的末尾

• 建议放在body标签的末尾

• 一个文件可以有多个script，默认情况下，代码自上而下依次执行

三、JS 中的注释

1. 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
2. 写好一个注释，有利于我们以后阅读代码
3. JavaScript 支持两种形式注释语法：

• 单行注释：// 注释内容
• 多行注释：/* 注释内容 */

四、打印语句

• 打印：将计算机中的电子信息，显示出来，呈现给人类

• 在js编程语言中，可以使用打印语句，将程序的计算结果，呈现出来

• alert(要打印的信息)

• • 一次只能打印一个数据
  • 打印到弹出框
  • 阻塞程序执行
  • 会将数据转成字符后打印

• document.write(要打印的信息)

• • 可以同时打印多个数据，逗号隔开
  • 打印到页面
  • 会将数据转成字符后打印
  • 可以解析html标签
  • 影响页面结构

• console.log(要打印的信息) 推荐使用

• • 可以同时打印多个数据，逗号隔开
  • 打印到浏览器的console（控制台）
  • 既不会阻塞程序，也不会影响页面，还不改变数据类型
  • 静默打印

五、JavaScript 变量

1. 变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）用来在计算中临时存储数据，方便数据的多次使用和修改

• • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
  • 也就是说，我们向内存中存储了一个数据，要给这个数据起一个名字，方便以后再次找到他

1. 声明变量

• • 声明关键字：var
  • 语法：var 变量名

1. 赋值变量

• • 赋值运算符：=
  • 规则：将等号右侧的数据或变量，存储到左侧的变量中
  • 语法：变量名 = 值

1. 简写：

• • 声明并赋值：var a = 10;
  • 声明多个变量：var a,b,c,d;
  • 声明多个变量并逐一赋值：var a=10,b,c=30,d=20;

1. 变量的命名规则

• • 必须使用字母 或 下划线 或 **$**开头，可以包含数字
  • 严格区分大小写
  • 不允许使用关键字或保留字
  • 尽量语义化，词必达意
  • 建议：使用组合单词表示复杂的含义
• • • 可以使用数据类型的首字母做前缀
• • 建议：使用组合单词后，再使用驼峰式命名
• • • 大：从第一个单词的首字母开始大写
• • • • 构造函数命名使用大驼峰
• • • 小：从第二个单词的首字母开始大写
• • • • 一般变量使用小驼峰
• • 小技巧：可以通过给单词加前缀，避免触发关键字和保留字

五、JavaScript 数据类型

• 数据类型指内存中存储的数据分类，为了方便数据的管理，将数据分成了不同的类型

• • 通常分为两大类 基本数据类型 和 复杂数据类型（引用数据类型）

1. 字符型：string：所有使用引号（’ " `）包裹的数据都是字符，是一种原始数据
2. 数值型：number：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, NaN，Infinity
3. 布尔型：boolean：true，false
4. undefined：undefined：没有值，变量声明了，但未赋值。在内存中有这个数据的位置

• • 半夜去住酒店：前台，404号，带着钥匙上楼，到四楼，有404，打开门，屋里什么都没有，空房间，undefined

1. null：null，空，空值，空地址

• • 半夜去住酒店：前台，404号，带着钥匙上楼，到四楼，有403，有405，没有404，null

1. 对象型：object：数据的打包，是一种复杂数据。无序集合是object对象，有序集合是array对象

• • object对象的基本语法：一般由键值对组成，一个对象可以存在多个键值对，键和值一一对应，成对出现，标志为{}
  • array对象的基本语法：一般由多个数据组成，标志为[]

1. 函数型：function：一段代码的打包，是一种复杂数据。打包之后，需要被动执行
2. 数据类型的检测

• • typeof 要检测的数据
  • typeof(要检测的数据)

六、JavaScript 运算符

1. 算术运算符：一般用来操作数值型数据：+, -, *, /, %，**（幂运算）

• • 字符的拼接：当+号两边只要有一边出现字符时，运算规则都是字符串的拼接，得到结果必然是字符
  • -, *, /, %，**：不管两边是什么类型的数据，都会作为数值型数据计算

1. 关系运算符（比较），一般用来运算基本类型：>, >=, <, <=, ==, !=, ===, !==

• • >, >=, <, <=, ==, !=
• • • 两边只要能有一边是数值，就会按照数值的比较规则进行比较
    • 字符的比较规则：逐位按照ASCII码比较，得到结果就停止比较
• • ===, !==
• • • 严格比较，不仅比较数据，还比较类型

1. 逻辑运算符，一般用来运算布尔值：||, &&, !

• • ||：两边只要有一个为true，结果就是true
  • &&：两边只要有一个为false，结果就是false
  • !：取反
  • 逻辑运算符两边，会被转成布尔值之后，再进行逻辑运算

1. 赋值运算符：=, +=, -=, *=, /=, %=

• • 赋值：将右侧的数据（表达式，变量）放在左侧的变量中
  • 其他规则：参考算术运算符

1. 自增自减：++, --

• • 自增：在自身的基础上+1，再赋值回去
• • • 后自增：x++
• • • • 先使用，再运算
• • • 前自增：++x
• • • • 先运算，再使用
• • 自减：在自身的基础上-1，再赋值回去

七、数据类型的转换

1. 转换方式

• • 隐式数据类型转换：没有主动转，在运算过程中自动转换
• • • 运算过程中转换(作为其他数据类型使用)，但并没有影响原数据
    • 场景（什么样的情况下会发生转换）：

1. 1. 1. 1. 运算符两边

• • • • • +：有可能转字符
        • -, *, /,%：有可能转数值
        • >, >=, <, <=, ==, !=：有可能转数值
        • ||, &&, !：有可能转布尔

1. 1. 1. 1. if的小括号内：转布尔
         2. isNaN的小括号内：转数值

• • 显式（强制）数据类型转换：主动转，使用特定的方法主动进行转换
• • • 其他转布尔：
• • • • Boolean( 要转换的数据 )
• • • 其他转字符：
• • • • String( 要转换的数据 )
• • • • • 什么都可以转
• • • • 要转换的数据.toString()
• • • • • undefined和null不能转
        • 数值、布尔、函数，直接使用时需要将数据使用小括号包裹
• • • • 要转换的数据.toFixed(n)
• • • • • 主要用来处理数值
        • 四舍五入保留n位小数
• • • 其他转数值
• • • • Number( 要转换的数据 )
• • • • • 什么都可以转
        • 严格转换
• • • • parseInt( 要转换的数据 )
• • • • • 取整，不能识别小数点
        • 非严格转换
• • • • parseFloat( 要转换的数据 )
• • • • • 可以识别小数点，可以转小数
        • 非严格转换
• • • • Math.round( 要转换的数据 )
• • • • • 严格转换
        • 四舍五入取整

1. 转换规则

• • 其他转布尔：

1. 1. 1. 空字符为false，非空字符为true
      2. 0和NaN为false，其他为true
      3. 对象函数数组都是true
      4. undefined，null都是false

• • 其他转字符

1. 1. 1. 除了对象和数组之外，等同于直接套引号
      2. 数组等同于将中括号换成引号

• • • • 数组内的undefined和null会转成空字符

1. 1. 1. 对象固定转成"[object Object]"

• • 其他转数值
• • • 严格：只要出现非数字字符，直接NaN
    • 非严格：从左向右依次转换，遇到非数字的字符，停止转换，返回已经转了的数字。如果第一位就是非数字，直接NaN
    • 其他：
• • • • true为1，false为0
      • null为0
      • 空数组为0
      • 有且只有一个能严格转成数值型数据的数据的数组，转为当前数值
      • 数组的其他形式，花括号对象，函数，undefined，都是NaN

1. 八、练习

   1. 已知半径50，求圆的面积和周长

        var r = 50;
        var pai = 3.1415;
        var s = pai * r * r;
        console.log("半径为" + r + "的圆，面积为：" + s);
      
        var c = 2 * pai * r;
        console.log("半径为" + r + "的圆，周长为：" + c);
      

   2. 89小时，可以换算成几天几小时

        var hour = 108;
        var h = hour % 24
        var d = (hour - h) / 24;
        console.log(hour + "小时可以换算成" + d + "天" + h + "小时");
      

   3. 已知玫瑰班有小朋友34人，今天大扫除，有12人参与，向日葵班有42人，问向日葵班应该出多少人参与大扫除，才能和玫瑰班参加大扫除的人比例相同

        var xCount = 34;
        var xNow = 12;
        // 计算比例
        var x = xNow / xCount;
      
        var yCount = 42;
        // 根据比例计算另一个班级应出的人数
        var yNow = yCount * x;
        console.log("向日葵班应该出" + yNow + "才能和玫瑰班比例相同");
      

   4. 计算2023年是否是闰年，打印布尔值

   • 条件1：能被4整除且不能被100整除

   • 条件2：能被400整除

       var year = 2023;
       var isOk = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
       console.log(isOk);