一、JS的组成

1.1 组成

BOM(浏览器对象模型)、DOM(文档对象模型)、ECMAScript(核心语法)

二、ECMAScript

2.1 简介

JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

2.2 ECMAScript

JS是JavaScript的简称,ECMAScript是JS的核心语法,简称ES。ES又分成不同的版本。我们现在将要学习的是ES3.1。
现在的版本:
2009年出现了ES5
2015年出现了ES6
之后每一年出一个新版本

2.3 计算机的作用

计算机的作用就是处理数据。
所以,一门计算机语言,它一定要对数据进行规定。
所以,ES对数据进行了分类。

2.4 数据类型介绍

  1. 值类型(又可以叫做基本数据类型)
    1. 数字
    2. 字符
    3. 布尔值(true、 false)
    4. undefined
    5. null
  2. 引用类型(又叫做对象类型)
    总的来说,只要不是上面的五种,就属于引用类型
    1. Array
    1. Object
    2. Function
    3. RegExp
    4. ……

      2.5 JS的书写位置

      2.5.1 HTML的script标签

      ```html <!DOCTYPE html>

  1. <a name="aq3MI"></a>
  2. ### 2.5.2 JS文件中
  3. **![image.png](https://cdn.nlark.com/yuque/0/2020/png/2347288/1608790210626-a2a9e05a-426e-4da1-ba88-442e65162741.png#align=left&display=inline&height=139&margin=%5Bobject%20Object%5D&name=image.png&originHeight=139&originWidth=345&size=2974&status=done&style=none&width=345)**<br />一个是JS文件中,一个是HTML文件中的script标签里。<br />如果是JS文件的话,那么我们需要通过script标签的src属性,把它引入。<br />`<script`` ``src``=``"01.js"``></script>`<br />区别就在于:最终HTML文件的体积。体积影响了传输速度。所以,记住,以后我们写代码都往JS文件中写。
  4. <a name="hmUxL"></a>
  5. ## 2.6 script标签的书写位置
  6. <a name="LX9dS"></a>
  7. ### 2.6.1 body标签的末尾
  8. ```html
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <title>Document</title>
  15. </head>
  16. <body>
  17. ...
  18. ...
  19. ...
  20. <h1>今天是js的第一天</h1>
  21. <!-- 上面是HTML 下面是JS -->
  22. <script>
  23. // JS代码书写在这里
  24. // document.write('<h1>今天是JS的第一天</h1>')
  25. </script>
  26. <script src="01.js"></script>
  27. </body>
  28. </html>

为什么要放在这里?
因为浏览器在执行代码的时候是从上往下执行,而JS又是可以操作元素的。必然要先有元素再执行JS才是合理的。

2.6.2 head标签的末尾

有时我们会见到放在head标签末尾的JS,这是因为它里面的代码被推迟了执行时间。

  1. <script>
  2. window.onload = function() {
  3. alert("所有资源加载完毕了")
  4. }
  5. </script>

window.onload 这是一个后面要讲的”事件” 它会在当前页面所需的所有资源加载完毕之后执行。

补充: 一个script标签 如果设置了src 就不要再在里面写代码了

2.7 变量

image.png
每一门真正的语言,都会提供”变量”。
所谓的变量,就是定义一个东西, 保存一个数据。
之后每一次使用变量都是在使用这个数据。
为什么叫变量,当然是因为它可变。

2.7.1 定义变量

语法1: var 变量
语法2: var 变量 = 初始值

  1. var num1;
  2. var num = 3;

如果一个变量只是定义(定义也叫声明)了,没有给初始值,此时它的值是undefined。

2.7.2 变量的命名规范

  1. 整体由数字、字母、下划线、美元符号组成
  2. 不可以由数字开头
  3. 不能使用关键字、保留字
  4. 严格区分大小写
  5. 推荐使用驼峰命名法

关键字、保留字见下图
image.png

2.8 数据类型详解

2.8.1 字符串

定义:单引号 ‘ 或者 双引号 “ 推荐使用 单引号

  1. var str = "这就是一段字符串";
  2. str1 = '我是一个新字符串';

注意: 单引号开头,就必须单引号结尾。双引号开头就必须双引号结尾。
image.png
转义字符
JS的字符串中,有转义字符这么一个概念。为了解决部分符号具备双重含义的特点。

  1. var str ="'你好啊!'. Tom说:\"今天天气不错啊\""

\就是用于转义的符号
转义字符有:\b \n \t

2.8.2 数字

定义数字就是直接用键盘敲,默认是十进制。

image.png
拓展: 定义其它进制的数字
定义二进制: 0b101
定义八进制:055
定义十六进制: 0xfff
特殊数字:
NaN 表示 “不是一个数”
Infinity 表示 “无穷大”
-Infinity 表示 “无穷小”

2.8.3 布尔值、undefined、null

布尔值: true、 false
undefined: undefined
null:null
image.png

2.9 数据类型判定

typeof 关键字 这个关键字的作用:判定数据类型
判定字符串

  1. var str = '明月松间照';
  2. console.log(typeof str)

结果
image.png
判定数字

  1. var num = 123
  2. console.log(typeof num)

结果
image.png
判定布尔值

  1. var bool = true
  2. console.log(typeof bool)

结果
image.png
判定undefined

  1. var und = undefined
  2. console.log(typeof und)

结果
image.png
判定null(这是一个bug,记住这一点,ES是不会修复它的)

  1. var nulls = null
  2. console.log(typeof nulls)

结果
image.png

2.10 数据类型转换

2.10.1 数字转字符串

  1. String()
  2. toString()
  3. 拼接空字符串
  4. toFixed()

    1. // 定义一个数字
    2. var num = 1.234;
    3. // String() 是字符串的一个函数 它可以将非字符串转为字符串
    4. var str = String(num)
    5. console.log(str)
    6. // toString()
    7. var str1 = num.toString()
    8. console.log(str1)
    9. // 拼接空字符串
    10. var str2 = num + ''
    11. console.log(str2)
    12. // toFixed()
    13. var str3 = num.toFixed(2)
    14. console.log(str3)

    结果:
    image.png

    2.10.2 字符串转数字

  5. parseInt

  6. parseFloat
  7. Number()
  8. +
  1. // 定义一个字符串数字
  2. var str = '1.234a'
  3. // parseInt() 将字符串尽可能的转为数字整数
  4. var num = parseInt(str)
  5. console.log(num)
  6. // parseFloat() 将字符串尽可能的转为数字小数
  7. var num1 = parseFloat(str)
  8. console.log(num1)
  9. // parseInt和parseFloat都是能转几个就转几个 实在一个都没有返回NaN
  10. // Number()
  11. var num2 = Number(str)
  12. console.log(num2)
  13. // +
  14. var num3 = +str
  15. console.log(num3)
  16. // Number() 只要不能完全转为数字 就是NaN
  17. // + 我们可认为是Number的简写

结果
image.png