前端开发之javaScript
1,什么是JavaScript？
他是一门编程语言，脚本语言。是运行在浏览器上的编程语言。
2，学习的内容？
1，语法
2，BOM -->用JS代码操作浏览器
3，DOM -->用JS代码操作HTML文档
3，运行的方式？
1，导入式：
1，在HTML文件中写一个script标签，在script标签中直接写JS代码
<script>
// 在这里写你的JS代码
</script>
2，将JS代码写在一个单独的JS文件中，然后通过script标签的src属性导入该文件。
<script src="myscript.js"></script>
2，可以直接在浏览器的console窗口直接运行JS代码
4，JavaScript基础：
1，语法规则：
注释：1.单行注释 //
2.多行注释 /* 要注释的内容 */
一段代码写完要用；结束
2, 变量：
1，变量名：与Python的变量名规则相同，不能使用关键字当变量名
2，创建变量：
1，var 变量名 （常用的声明方法）
2， let 变量名 （一般使用在for循环里，该变量只作用在该循环里）
3， const 变量名 （用来声明常量）
3，数据类型：
1，字符串类型
字符串的基本属性和方法与Python中的字符串方法基本相同
var a = "Hello" 带双引号 var b = "world”; var c = a + b; 字符串的拼接也用+号 console.log(c);
基本属性与方法：
方法 说明 .length 返回长度 .trim() 移除空白 .trimLeft() 移除左边的空白 .trimRight() 移除右边的空白 .charAt(n) 返回第n个字符 .concat(value, ...) 拼接 .indexOf(substring, start) 子序列位置 .substring(from, to) 根据索引获取子序列 .slice(start, end) 切片 .toLowerCase() 小写 .toUpperCase() 大写 .split(delimiter, limit) 分割
slice和substring的区别：
string.slice(start, stop)和string.substring(start, stop)： 两者的相同点： 如果start等于end，返回空字符串 如果stop参数省略，则取到字符串末 如果某个参数超过string的长度，这个参数会被替换为string的长度 substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换 silce()的特点： 如果 start > stop 不会交换两者 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
2，数值类型：
在JavaScript中不分整型与浮点型，都叫数值类型
var a = 12.34; var b = 20; var c = 123e5; // 12300000 小数点往后移5位 var d = 123e-5; // 0.00123 小数点往前移5位
还有一种特殊的数值NaN，它表示该值不是数子
parseInt("123") // 返回123 parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 parseFloat("123.456") // 返回123.456
3，布尔类型：
区别Python，turn与false都是小写
(空字符串)、0、null、undefined、NaN都是false，其他都是turn
null与undefined的区别：
null表示一个值为空，一般使用在手动清除一个变量的值时使用
undefined表示一个变量还未为其赋值，只声明了变量，该变量的默认值为undefined。
4，对象（object）：
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型
数组：
数组是用一个变量来存储多个元素，类似于Python中的列表
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
常用的属性和方法：
方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
可以使用for循环遍历数组中的元素：
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { for循环的固定语法格式 console.log(i); 打印i }
类型查询方法：使用typeof方法
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
2，流程控制：
1，if-else：与Python的if~else用法相同
var a = 10; if (a > 5){ 如果 console.log("yes"); }else { 反之 console.log("no"); }
2，if-else if-else：双条件判断
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
也可以使用switch简写：
var day = new Date().getDay(); switch (day) { case 0: 当条件满足于此时，运行下面的代码 console.log("Sunday"); break; 一个条件结束时用break结尾 case 1: console.log("Monday"); break; default: console.log("...") }
注意：switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for循环句：
for (var i=0;i<10;i++) { console.log(i); }
white条件循环：
var i = 0; while (i < 10) { console.log(i); i++; }
三元运算：
var a = 1; var b = 2; var c = a > b ? a : b ？前面的为判断条件，引号：前一个为条件成功传入的值，后面为不成功传入的值
二，函数：
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
function sum(a, b){
return a + b;
}
sum(1, 2); // 调用函数
// 匿名函数方式
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 立即执行函数
(function(a, b){
return a + b;
})(1, 2);
补充：
ES6中允许使用“箭头”（=>）定义函数。
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2;
}
函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length)
}
add(1,2)
输出：
3 2
注意：
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。
函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
几个例子：
1.
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
2.
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
3.闭包
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
词法分析（尝试理解）
JavaScript中在调用函数的那一瞬间，会先进行词法分析。
词法分析的过程：
当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：
1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子：
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
}
foo(); // 问：执行foo()之后的结果是？
第二题：
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo(); // 执行后的结果是？
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
最终，AO上的属性只有一个age，并且值为一个函数声明
执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object
