1.认识JavaScript

1.1JavaScript是什么

JavaScript简称js

• 世界上最流行的编程语言之一
• 是一个脚本语言，通过解释器运行
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行

1.2JavaScript的历史

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了.
当前 JavaScript 已经成为了一个通用的编程语言。
JavaScript 的创始人 布兰登 * 艾奇 (Brendan Eich)，他就是我们的祖师爷，可能你还不知道他有多牛波一，JavaScript这个语言，他仅仅使用10天的时间就创造出来了。下面奉上祖师爷照片一张。

1.3JavaScript、CSS和HTML的关系

HTML是网页的骨，CSS的网页的肉，而JavaScript就是赋予骨肉灵魂。JavaScript就是让网页由看上去像一张纸，变成一个电视，能够灵活的动。

1.4JavaScript运行过程

• 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
• 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
• 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
• 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

2 JavaScript入门知识

2.1JavaScript书写位置

1.行内式
直接将JavaScript嵌入到HTML语句当中

<input type="button" value="点我一下" onclick="alert('你好 世界')">

2.内嵌式
将JavaScript写入到<script></script> 标签当中

<script>
	alert("haha");
</script>

3.外部式
下在单独的.js 文件当中，在通过引入，引入到html当中，当我们引入.js 文件时，使用的标签中不要再写其他内容了。

<script src="hello.js"></script>

2.2注释

• 单行注释 // [建议使用]
• 多行注释 /* */
• 我们可以使用快捷键CTRL+/来快速注释

// 我是单行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/

2.3输入输出

• 输入：prompt
  输入一个对话框

//输入一个对话框
prompt("输入你的名字");

代码效果：

• 输入：alert
  打开网页有一个弹窗，弹窗上显示的内容是alert中的内容。

alert("你好 世界");

代码效果：

• 输出：console.log
  用来打印日志，这个是给我们程序员看的，打开开发者工具，点击控制台就可以看到这个效果。

console.log("看见了吗？");

代码效果：

3.语法概述

JavaScript 虽然一些设计理念和 Java 相去甚远, 但是在基础语法层面上还是有一些相似之处的.如果有 Java 的基础很容易理解 JavaScript 的一些基本语法.

3.1变量的使用

1.基本用法
创建变量（变量定义/变量声明/变量初始化）

	var name='神里凌华';
    var age=18;

• var 是 JS 中的关键字, 表示这是一个变量。
• 每个语句最后带有一个; 结尾. JS 中可以省略; 但是建议还是加上。
• 初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来。

2.动态类型

• JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

var a = 10; // 数字
var b = "hehe"; // 字符串

• 随着程序运行, 变量的类型可能会发生改变

var a = 10; // 数字
a = "你好"; // 字符串

这是因为JavaScript是弱语言，他的变量类型无法固定，不像Java、C++他在初始化时必须需要数据类型；弱语言有好有坏，好处就是我们不用关系数据类型之间的转化了，咋使用都能通过，不会报错；坏处就是，当我们想要让编译器进行代码检查时，可能无法听过数据类型来判断代码的正确错误。

3.2基本数据类型

JavaScript中内置如下几种数据类型：

• number: 数字. 不区分整数和小数.
• boolean: true 真, false 假.
• string: 字符串类型.
• undefined: 只有唯一的值 undefined. 表示未定义的值.
• null: 只有唯一的值 null. 表示空值.

3.2.1特殊的数字值

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN: 表示当前的结果不是一个数字.（使用函数isNaN判断，若返回值是true时，不是数字；若返回值是false时，是数字。）

3.2.2null与undefined的区别

null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义. (相当于连盒子都没有)

4.条件语句

4.1if语句

if语句中的条件都必须是布尔表达式。

// 形式1
if (条件) {
	语句
}
// 形式2
if (条件) {
	语句1
} else {
	语句2
}
// 形式3
if (条件1) {
	语句1
} else if (条件2) {
	语句2
} else if .... {
	语句...
} else {
	语句N
}

4.2三元表达式

三元表达式相当于if else的缩写形式

条件 ? 表达式1 : 表达式2

4.3switch语句

switch语句适用于多种选项的情况

switch (表达式) {
	case 值1:
		语句1;
		break;
	case 值2:
		语句2:
		break;
	default:
		语句N;
}

5.循环语句

5.1while循环

while(条件) {
	循环体
}

执行过程:

• 先执行条件语句
• 条件为 true, 执行循环体代码.
• 条件为 false, 直接结束循环

5.2do-while循环

do-while和while的最大区别在于，do-while一定会执行一次循环体。

do{
	循环体;
}(条件)

执行过程

• 先执行循环体
• 条件判断true，继续执行循环体
• 条件判断false，结束循环

5.2for循环

for (表达式1; 表达式2; 表达式3) {
	循环体
}

• 表达式1: 用于初始化循环变量.
• 表达式2: 循环条件
• 表达式3: 更新循环变量.

执行过程：

• 先执行表达式1, 初始化循环变量
• 再执行表达式2, 判定循环条件
• 如果条件为 false, 结束循环
• 如果条件为 true, 则执行循环体代码
• 执行表达式3 更新循环变量

代码示例：
打印1-10

for(var i=0;i<10;i++) {
    console.log(i);
}

6.数组

6.1创建数组

• 使用 new 关键字创建

var arr = new Array();

• 使用字面量方式创建 [常用]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

6.2获取数组元素

数组的下标是从零开始的

var arr = ['神里凌华', '枫原万叶', '雷电将军'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
arr[2] = '摩拉克斯';
console.log(arr);

代码效果：
观察结果可以看出，当数组越界时，打印的数据是undefined。

6.3新增数组元素

1. 通过修改 length 新增
   相当于在末尾新增元素. 新增的元素默认值为 undefined

var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

2. 通过下标新增
如果下标超出范围赋值元素, 则会给指定位置插入新元素

var arr = [];
arr[2] = 10;
console.log(arr)

3.使用 push 进行追加元素

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (arr[i] % 2 != 0) {
		newArr.push(arr[i]);
	}
}
console.log(newArr);

6.4删除数组元素

使用 splice 方法删除元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]