JavaScript

web前端开发：

①HTML：网页结构

②CSS：网页样式（美化、修饰、设计）

③JavaScript：网页行为（作出反应）

---

JavaScript是什么：

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。作为web开发页面的脚本语言而出名，也被用到了很多非浏览器环境中

脚本语言：脚本语言是什么 - 信智微客

JavaScript的组成：

ECMAScript（核心）：描述了该语言的语法和基本对象

文档对象模型（DOM）：描述处理网页内容的方法和接口

浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口

JavaScript运行模式：

浏览器有两个引擎（渲染引擎/JS引擎）
JavaScript通过JS引擎执行，执行过程分为预解析和执行两个部分

预解析声明提前：将变量声明提前，而不提前赋值；函数声明提前，函数表达式提前调用则报错（表达式尚未被赋值）

预解析优先级：

①先调用再声明的情况下：变量和函数同名时函数优先

②先声明再调用的情况下：声明变量时只使用var定义而不赋值，函数的优先级更高，输出同名fn时打印函数结构（函数覆盖变量）
声明变量时赋值，变量的优先级更高，输出同名fn时打印变量值

预解析分段：多段的<script>标签分段解析，各段中同名变量不会冲突，函数和变量不能跨作用域预解析

---

JavaScript变量：

命名规则：

①由字母、数字、下划线、$组成，不以数字开头

②不能使用JavaScript关键字和保留字

③区分大小写

声明变量：

// 两种方式：定义同时赋值/先定义再赋值
var age = 18

var age
age = 18

JavaScript数据类型

简单数据类型：string（字符串类型）、number（数字类型）、boolean（布尔类型）、undefined（未定义类 型）、null（空）

复杂数据类型：array（数组）、object（对象）

// 查看数据类型
var num = 10;
// 下面两种格式都可以
console.log( typeof num );
console.log( typeof(num) );

①number：八进制、十进制、十六进制

②string：

// ①字符串用""或''括起来
var str = 'Hello World';

// ②字符串长度属性length
console.log(str.length);

// ③字符串拼接（＋两端有一边为字符串即可）
console.log('male:' + true);

③boolean：计算机内部存储：true为1，false为0

④undefined：

// ①直接赋值为undefined
var num = undefined;

// ②声明了变量但是未赋值
var num1;
console.log(num1);

// ③在赋值前输出变量类型
//会将变量的声明提前到输出的前面
var num2;
console.log(num2);
num2 = 10;

⑤null：表示一个空，需要手动定义

undefined和null的区别：

JavaScript中null和undefined的区别 - 请叫我二狗哥 - 博客园

JavaScript运算符

算术运算符（一元运算符、二元运算符）

逻辑运算符

关系运算符

赋值运算符

---

JavaScript语句

顺序结构

分支结构

①if语句：

// 单分支语句:
if (/* 条件表达式 */) {
// 执行语句
}

// 双分支语句:
if (/* 条件表达式 */){
// 成立执行语句
} else {
// 否则执行语句
}

// 多分支语句:
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}

简写方式：三元运算符 

// 表达式1 ? 表达式2 : 表达式3
// 对if……else语句的一种简化写法

var num1 = 10;
var num2 = 5;
num1 > num2 ?  console.log(num1 + '是最大数') : console.log(num2 + '是最大数');

// if语句等价写法：
if (num1 > num2){
console.log(num1 + '是最大数')
} else {
console.log(num2 + '是最大数')
}

 ②switch语句：

switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
break;
}

循环结构

①while

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
//循环体
}

②do...while

// 先执行一遍do中内容，若满足条件则循环
do {
// 循环体;
} while (循环条件);

③for

// for循环的表达式之间用;号分隔
// 表达式1进行初始化定义，表达式2进行条件判断，若满足则执行循环体，一次循环后执行表达式3
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}

break：立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue：立即跳出当前循环，继续下一次循环（跳到i++的地方）

---

JavaScript函数：

函数作用域：

JavaScript的函数作用域是指，在函数体"{}"内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用，但是在函数体外是无法获取的

即：变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的

⬇

局部变量：函数内定义的变量仅在函数内能调用

全局变量：声明在函数外部的变量，在代码中任何地方都能访问到，拥有全局作用域

声明在函数外部的变量，在代码中任何地方都能访问到的变量拥有全局作用域

隐式全局变量：未定义直接赋值的变量

预解析规则：

---

*JavaScript对象

类似于python中的类

构造方法：

// 直接定义对象
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};

// new object函数创建对象
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,everyBody');

// 工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('张三', 22, 'actor');

// 自定义构造函数
// 1. 构造函数用于创建一类对象，首字母要大写。
// 2. 构造函数要和new一起使用才有意义。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor');