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新增数组元素
- 通过修改 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]
