介绍

组成

ECMAScript：

规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等

Web APIs：

DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

参考JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

书写位置

内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

<body>
	
	<script>
		// 示例，alert用于页面弹出警告对话框
		alert('你好啊！欢迎光临！')
	</script>
</body>

注意：将script写在底部，目的是为了先加载 html 内容，再加载 JavaScript 用于修改内容。

外部JavaScript

代码写在 .js 文件里

语法：通过script标签，引入到html页面中。

1
2
3

<body>
	<script src="test.js"></script>
</body>

注意：script标签内不写代码，不然会被忽略！

内联JavaScript

代码下在标签内部

1
2
3

<body>
	<button onclick="alert('你还真点啊！')">点击我</button>
</body>

注释

单行注释

使用 // 注释单行代码

<body>
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>

多行注释

使用 /* */ 注释多行代码

<body>
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()、console.log()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

<script>
	alert('你好啊！欢迎光临！')//用弹出的方式
	document.write('<h1>我是标题</h1>')//向body内输出内容
	console.log('控制台打印')//向控制台发送日志
</script>

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

1
2
3

<script> 
	prompt('请输入您的姓名:')
</script>

注意：alert()和prompt()会跳过页面渲染先被执行

变量

变量用法

1
2
3

let age = 18 //声明变量由声明关键词、变量名组成

age = 20 //变量赋值

更新变量时，不需要再声明
可以同时声明多个变量，使用，逗号隔开

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

数组

//定义数组
let arr = [num1, num2, num3]
//数组取值
arr[0] //为num1

常量

概念：使用 const 声明的变量称为常量。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

1	const PI = 3.14

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

数据类型

数字型（number）

可以是整数、小数、正数、负数。

1 2	let age = 18 //整数 let money = 250.41 //小数

数字型可以进行算数运算

算数运算符包括：加+、减-、乘*、除/、取模%。

遵循算术运算优先级

注意：NaN为一个计算错误，任何对NaN的操作都会返回NaN

字符串类型（string）

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

字符串拼接：+运算符用于字符串拼接

模糊字符串：在内容拼接中直接使用${ }包住变量

let name = '坂井泉水'
let song = "敞开心扉"
document.write(name + '的' + song + '很好听！')
document.write(`${name}的${song}很好听！`)
/*输出为 坂井泉水的敞开心扉很好听！*/

布尔类型（boolean）

它为真（true）、假（false）两个值。

同时也可以用1、0表示

未定义类型（undefined）

只声明变量，不赋值的情况下，变量默认值为undefined

空类型（null）

null表示一个“无”、“空”或者“未知”的特殊值

与undefined的区别：

undefined表示没有赋值
null表示赋值了，但是内容为空

数据类型检查

可以使用typeof来识别数据类型

作为运算符：typeof x
作为函数：typeof(x)

1	document.write(typeof 'abc') //输出为string

数据类型转换

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

+号两边只要有一个字符串，都会把另一个转成字符串
出了+以外，-、*、/都会转成数字类型

let num = 13 // 数值
let num2 = '2' // 字符串

// 结果为 132
// 原因是将数值 num 转换成了字符串，相当于 '13'
// 然后 + 将两个字符串拼接到了一起
console.log(num + num2)

// 结果为 11
// 原因是将字符串 num2 转换成了数值，相当于 2
// 然后数值 13 减去 数值 2
console.log(num - num2)

显式转换

转为数字型：

Number：
1. 转成数字类型
2. 如果字符串内为非数字，转换失败为NaN，不是一个数字
3. NaN也是number类型，代表非数字
parseInt：
- 只保留整数
parseFloat：
- 可以保留小数

转为字符型：

String(数据)
变量.toString(进制)

let t = '12'
let f = 8

// 显式将字符串 12 转换成数值 12
t = Number(t)

// 检测转换后的类型
// console.log(typeof t);
console.log(t + f) // 结果为 20

// 并不是所有的值都可以被转成数值类型
let str = 'hello'
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）
console.log(Number(str))