一、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 数据类型介绍
- 值类型(又可以叫做基本数据类型)
- 数字
- 字符
- 布尔值(true、 false)
- undefined
- null
- 引用类型(又叫做对象类型)
总的来说,只要不是上面的五种,就属于引用类型
1. Array
<a name="aq3MI"></a>
### 2.5.2 JS文件中
**![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文件中写。
<a name="hmUxL"></a>
## 2.6 script标签的书写位置
<a name="LX9dS"></a>
### 2.6.1 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>
...
...
...
<h1>今天是js的第一天</h1>
<!-- 上面是HTML 下面是JS -->
<script>
// JS代码书写在这里
// document.write('<h1>今天是JS的第一天</h1>')
</script>
<script src="01.js"></script>
</body>
</html>
为什么要放在这里?
因为浏览器在执行代码的时候是从上往下执行,而JS又是可以操作元素的。必然要先有元素再执行JS才是合理的。
2.6.2 head标签的末尾
有时我们会见到放在head标签末尾的JS,这是因为它里面的代码被推迟了执行时间。
<script>
window.onload = function() {
alert("所有资源加载完毕了")
}
</script>
window.onload 这是一个后面要讲的”事件” 它会在当前页面所需的所有资源加载完毕之后执行。
补充: 一个script标签 如果设置了src 就不要再在里面写代码了
2.7 变量
每一门真正的语言,都会提供”变量”。
所谓的变量,就是定义一个东西, 保存一个数据。
之后每一次使用变量都是在使用这个数据。
为什么叫变量,当然是因为它可变。
2.7.1 定义变量
语法1: var 变量
语法2: var 变量 = 初始值
var num1;
var num = 3;
如果一个变量只是定义(定义也叫声明)了,没有给初始值,此时它的值是undefined。
2.7.2 变量的命名规范
- 整体由数字、字母、下划线、美元符号组成
- 不可以由数字开头
- 不能使用关键字、保留字
- 严格区分大小写
- 推荐使用驼峰命名法
2.8 数据类型详解
2.8.1 字符串
定义:单引号 ‘ 或者 双引号 “ 推荐使用 单引号
var str = "这就是一段字符串";
str1 = '我是一个新字符串';
注意: 单引号开头,就必须单引号结尾。双引号开头就必须双引号结尾。
转义字符
JS的字符串中,有转义字符这么一个概念。为了解决部分符号具备双重含义的特点。
var str ="'你好啊!'. Tom说:\"今天天气不错啊\""
2.8.2 数字
定义数字就是直接用键盘敲,默认是十进制。
拓展: 定义其它进制的数字
定义二进制: 0b101
定义八进制:055
定义十六进制: 0xfff
特殊数字:
NaN 表示 “不是一个数”
Infinity 表示 “无穷大”
-Infinity 表示 “无穷小”
2.8.3 布尔值、undefined、null
布尔值: true、 false
undefined: undefined
null:null
2.9 数据类型判定
typeof 关键字 这个关键字的作用:判定数据类型
判定字符串
var str = '明月松间照';
console.log(typeof str)
结果
判定数字
var num = 123
console.log(typeof num)
结果
判定布尔值
var bool = true
console.log(typeof bool)
结果
判定undefined
var und = undefined
console.log(typeof und)
结果
判定null(这是一个bug,记住这一点,ES是不会修复它的)
var nulls = null
console.log(typeof nulls)
2.10 数据类型转换
2.10.1 数字转字符串
- String()
- toString()
- 拼接空字符串
toFixed()
// 定义一个数字
var num = 1.234;
// String() 是字符串的一个函数 它可以将非字符串转为字符串
var str = String(num)
console.log(str)
// toString()
var str1 = num.toString()
console.log(str1)
// 拼接空字符串
var str2 = num + ''
console.log(str2)
// toFixed()
var str3 = num.toFixed(2)
console.log(str3)
2.10.2 字符串转数字
parseInt
- parseFloat
- Number()
- +
// 定义一个字符串数字
var str = '1.234a'
// parseInt() 将字符串尽可能的转为数字整数
var num = parseInt(str)
console.log(num)
// parseFloat() 将字符串尽可能的转为数字小数
var num1 = parseFloat(str)
console.log(num1)
// parseInt和parseFloat都是能转几个就转几个 实在一个都没有返回NaN
// Number()
var num2 = Number(str)
console.log(num2)
// +
var num3 = +str
console.log(num3)
// Number() 只要不能完全转为数字 就是NaN
// + 我们可认为是Number的简写