javascript--网页的灵魂——系统介绍整体

一、总体介绍

javascript 语言，介绍上都以Python进行类比，和这个面对对象的语言有很多相似的地方。
在chorm的控制台（console）进行调试，在浏览器内通过crt + shift+j打开调试台。

1.1变量

1.1.1变量的申明

JavaScript程序按行进行执行，行结束以**‘；’**为标识。类似于C语言，在变量使用的时候，需要对变量进行声明，声明的时候可以不指定变量的类型，在赋值的时候，按照赋值的类型决定变量的类型。声明使用 var，下面的写法则是声明加初始化，一般采用这种写法。
var a = 3;

1.1.2变量名的命名规则：

• 对大小写敏感
• 首字母可以为字母、_、$，其他的则是字母数字下划线$等。
• 变量名一般采用驼峰命名法进行书写（注意和python 的不同，python的变量习惯用_进行连接单词，全部采用小写，只有在命名类的时候，才采用驼峰命名法）
  eg:var userName = 15;

1.1.3 变量的类型

序号	类型	名字
1	number	数字类型
2	string	字符（串）类型
3	boolean	布尔类型
4	underfiine& null	未定义类型&空类型
5	object	对象类型

• 变量的类型是动态的，根据保存的值不同而不同
  var x //此时x的变量类型为undefined类型

• 特殊的，有一个Arrray数组类型，始于对象类型，等价于python中的List数据类型。

• Undefined类型表示数据类型未知或者存在类型错误。如果变量的值为undefined，并不代表变量没有类型！
  var name;
  console.log(name); //此时变量name的类型就是undefined类型

• null类型表示数据类型存在，但是并没有给变量(对象)赋值。一般null类型用于对象类型的初始化。如果变量(对象)的值为null，并不代表变量(对象)没有类型
  var name;
  name = null；
  console.log(name); //此时name就不再是变量，而是一个对象。类型就是null类型。

• 总结：undefined类型和null类型在页面中表现的效果是相同的，但是undefined用于变量类型，而null用于对象类型。两者必须不能混用！！！！

• object对象类型
  类似于python的字典
  对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
  var person={firstname:“Bill”, lastname:“Gates”, id:5566};

  上面例子中的对象person有三个属性：firstname、lastname 以及 id。

  ps:空格和折行无关紧要。声明可横跨多行：
  var person={
  firstname : “Bill”,
  lastname : “Gates”,
  id : 5566
  };

• 对象属性有两种寻址方式（获取对象属性所对应的值的方式）：
  name=person.lastname;
  name=person[“lastname”];

1.2 运算符

1.2.1基本运算符

（1）typeof 获取当前变量类型运算符（特殊）
（2）= 赋值运算符
（3）== 简要比较运算符（忽略变量类型）
（4）=== 标准比较运算符（计算变量类型）

• typeof 后面不用括号
  var num=1;
  console.log(typeof num);

• = 赋值运算符
  赋值运算符用来给变量赋值。
  var age = 14;

• == 简要比较
  var number1 = 10;
  var string1 = “10”;
  console.log(number1==string1);//true

• =标准比较
  var number1 = 10;
  var string1 = “10”;
  console.log(number1=string1);//false

（1）单行注释：//
（2）多行注释：/* … /
（3）文档注释：/* … */

1.2.2其他运算符

• (1)算数运算符：
  加法运算符：x+y
  减法运算符：x - y
  乘法运算符：x * y
  除法运算符：x / y
  余数运算符：x % y
  自增运算符：++x 或者 x++
  自减运算符：–x 或者 x–

• (2)赋值运算符：
  x+=y //相当于x= x+y
  x-=y //相当于x= x-y
  x*=y //相当于x= x*y
  x/=y //相当于x= x/y
  x%=y //相当于x= x%y
  x>>=y //按位右移符号，相当于x= x>>y
  x<<=y //按位左移符号，相当于x= x<>>=y //相当于x= x>>>y
  x&=y //位运算符之与运算，相当于x= x&y
  x|=y //位运算符之或运算，相当于x= x|y
  x^=y //位运算符之异或运算，相当于x= x^y

• (3)比较运算符：
  比较运算符比较两个值，然后返回一个布尔值，表示是否满足比较条件。javascript提供了8个比较运算符：
  xy //判断是否相等（忽略变量类型）
  x=y //判断是否严格相等（计算变量类型）
  x!=y //判断是否不相等（忽略变量类型）
  x!==y //判断是否严格不相等（计算变量类型）
  x<y //判断是否小于
  x<=y //判断是否小于或者等于
  x>y //判断是否大于
  x>=y //判断是否大于或者等于

• (4)布尔运算符：
  逻辑运算符用于测定变量或值之间的逻辑。常见的布尔运算符有以下三种：
  非运算符（!）
  表达式的值为假的时候，运算结果为真
  与运算符（&&）
  当运算符两端的表达式值均为真时，运算结果为真，否则为假
  或运算符（||）
  当运算符两端的表达式值有一个为真，运算结果为真，都为假时结果才假

• (5)三目运算符：
  三元条件运算符用问号（？）和冒号（：），分隔三个表达式。如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。
  var min = (a<b)?a:b;

二、流程控制语句

2.1 if类

2.1.1 if

语法：if（表达式）{
语句；
}
if (m === 3) {
console.log(“你居然猜到了m变量的值！”);
console.log(“你果然是最帅得，frank大人！”);
}

2.1.2 if else

语法：if（表达式）{
语句1；
}else{
语句2；
}

2.1.3 if else if else

语法：if（表达式1）{
语句1；
}else if（表达式2）{
语句2；
}else if（表达式3）{
语句3；
}else{
语句4；
}

2.2 switch

switch（表达式）{
case 结果1：{执行语句1}；
break;
case 结果2：{执行语句2}；
break;
default：{执行语句3};
}
例如：
var chooseSubject=‘Chinese’;
switch (chooseSubject) {
case ‘Chinese’:{console.log(‘你选择了语文’😉};
break;
case ‘math’:{console.log(‘你选择了数学’😉};
break;
default :{console.log(‘你选择了其他’😉};
}

2.3 while类

• while
  语法：while (表达式) {
  语句；
  }
  例：
  var i = 0;
  while(i < 100){
  console.log(“i当前为：”+i);
  i++;
  }

• do while
  语法： do{
  语句；
  } while (表达式) ;

例：
var i = 0;
do{
console.log(“i当前为：”+i);
i++;
} while(i < 100);

2.4 for

语法： for(表达式1；表达式2；表达式3){
循环体;
}

for(var num = 0; num<10; num++){
console.log(num);
}
上述代码的含义是：
a.首先执行表达式1，进行循环变量num的初始化
b.然后判断表达式2结果是否为真，如果为真，执行循环体。否则就跳出循环。
c.当表达式2结果为真，并且循环体执行完毕后，执行表达式3，然后重复步骤b

(1)for循环表达式1可以不写。如果不写表达式1，则需要在循环结构外为循环变量赋初值。
var num = 0;
for(;num<10; num++){
console.log(num);
}
(2)for循环表达式2可以不写。如果不写表达式2，则表示循环条件恒成立。(死循环)
for(var num = 0; ;num++){
console.log(num);
}
(3)for循环表达式3可以不写。如果不写表达式3，则需要在循环结构内部为循环变量增加改变条件
for(var num = 0; num<10;){
console.log(num);
num++;
}

• 快速遍历
  for循环快速遍历是一种快速浏览容器内元素的手段。快速遍历的最大特点是不管有多少个元素，一定都能循环一遍。

  语法： for(var 变量名 in 容器){
  循环体;
  }
  var arr = [1,2,3,4,5];
  for(var num in arr){
  console.log(arr[num]);
  }
  上述代码的含义是：
  创建一个局部变量num，然后从数组arr逐个取出每个元素下标赋值给num，并且打印这个元素的值。

2.5 break 和continue

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
break语句用于跳出代码块或循环，循环终止。
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环，循环不终止。

三、字符串操作

3.1概述

用引号引起来的字符，里面再有引号要单双交替
碰到特殊的符号，采用转义字符进行修饰，如要输入引号，则 ’
多行文字可以用+进行连接

3.1.1字符串长度：length

<script>
	var txt1 = "Hello World!";
	document.write("<p>" + txt1.length + "</p>");//12
	var txt2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	document.write("<p>" + txt2.length + "</p>");//26
</script>

ps:document.write()的作用是：能够在页面当中通过脚本的方式编写html样式的代码。

3.1.2获取某个位置字符： 变量名[序号]

[ ]方法：在字符串后面接中括号，中括号中写数字。能够访问到字符串中的每个字符。

var name = "Frankenstein";	
var firstCharacter = name[0];	
document.write("<p>"+firstCharacter +"</p>");

ps:索引一次只能索引一个字符，如果需要多个则需要用+连接符。
索引从0开始，0表示第一个字符。

3.1.3获取指定位置字符串：charAt()和charCodeAt()

charAt()和charCodeAt()方法均表示获取指定位置的字符。不同的是：
charAt返回的是具体的字符
charCodeAt返回的是字符对应的Unicode编码

var name = “Frankenstein”；
var at = name.charAt(0);
var codeAt = name.charCodeAt(0);

结果显而易见：
F
70

ps：字符编码需要记得的两个。A—65，a—97。其他符号累加即可。
pss：如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。

3.1.4连接两个字符串：concat()

concat()方法能够将两个字符串拼接起来，合成一个新的字符串。

	var speakWord1 = "come on！Please！";
	var speakWord2 = “cute girl！";
	var finalWord = speakWord1.concat(speakWord2);
	console.log(finalWord);

可以认为concat和+作用相同

3.1.5字符串对象

javascript中有字符串类型string类型，我们也知道这种基本类型的变量的创建方式。
但javascript中还提供了另外一种字符串的声明方式，这种方式叫字符串对象。使用 new 关键字将字符串定义为一个对象

语法：var newString = new String(‘Frankenstein’);

var string1 = “frank"; //typeof返回 String
var string2 = new String(“frank"); //typeof返回 Object
ps:不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
pss:字符串和字符串对象是两个完全不同类型的数据，虽然效果相似，但是不能混为一谈！

var x = "John";             
var y = new String("John");
(x === y)							// 结果为 false，因为是字符串，y 是对象  

3.2字符串的属性和方法

(1).length:返回字符串长度
(2).charAt（number）：返回当前指定位置的字符
(3).charCodeAt：
(4).concat:连接字符串

3.2.1 substring:截取字符串

作用是从num1位置开始截取，截止到num2位置结束之间的字符串。

语法：str.substring(num1,num2);

var string = 'The Three FireGuners';
string.substring(4, 9) // 'Three'
string.substring(9, 4) // 'Three'

第一个参数表示子字符串的开始位置，第二个参数表示结束位置。
ps：结束位置理论上应该大于开始位置。
ps：如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置

3.2.2 .substr:截取字符串（起-字符长度）

作用是从num1位置开始截取，num2表示要截取的字符串长度。

语法：str.substr(num1,num2);

var string = 'The Three fireGuners';
string.substr(4, 9) // 'Three fir'
string.substr(9, 4) // ' fir'

3.2.3 .slice:截取字符串（起-止位置）。

作用是从num1位置开始截取，num2表示截取结束的位置。

语法：str.slice(num1,num2);

var string = 'The Three fireGuners';
string.slice(4, 9) // 'Three'
string.slice(9, 4) // ''

ps：slice作用也是截取字符串，但是slice的两个参数不能互换。
ps：如果开始位置小于结束位置，那么返回结果就是一个空字符串

substring、substr、slice三个方法第一个参数都表示字符串截取的开始位置。如果省略第二个参数，那么这三个方法都表示获取字符串本身一直到结束。

3.2.4 .indexOf：返回当前查找字符串的位置，如果没有返回-1

查找一个字符串在另一个字符串的位置

语法：str.indexOf(‘subStr’);

var string = 'xiaoMingTongXue';
string.indexOf('i') ;//1

字符串的查找是从原字符串的开始处进行查找。如果查找失败则返回-1

3.2.5 .lastIndexOf:倒过来查找

语法：str.lastIndexOf(‘subStr’);

var string = 'xiaoMingTongXue';
string.lastIndexOf('i') ;//5

字符串的查找是从原字符串末尾处向前进行查找。如果查找失败则返回-1

indexOf和lastIndexOf还能接受第二个参数。
对于indexOf而言，表示从这个位置开始向后匹配。
而对于lastIndexOf而言，则表示从这个位置开始向前匹配。

3.2.6 .trim:去掉字符串两端的空格

语法：str.trim();

var string = '  China WanSui!  ';
	string.trim() ;//China WanSui!

ps：需要强调的是trim方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串。

3.2.7 .toUpperCase和toLowerCase:大小写转换

3.2.8 .localeCompare:比较两个字符串大小

3.2.9 .match:返回一个指定字符串的数组

match方法的作用是查找原字符串是否匹配某个子字符串，返回结果是匹配的子字符串数组，如果没有找到则返回null。返回的数组内容为：寻找的子字符串，子字符串位置和原字符串。

语法：str.match(substr);

var string = 'hello world hello！';
string.match('hello') ;//['hello', index: 0, input: 'hello world hello！']

3.2.10 .search:返回位置

search方法和match相似，都是查找子字符串在指定字符串中的位置。不同的的返回结果为下标。如果没有找到匹配字串，则返回-1。

语法：str.search(‘subStr’);

var string = 'hello world hello！';
string.search('hello') ;//0

3.2.11 .replace:替换字符串

replace方法能够将【查找到的第一个指定字符串】替换成【目标字符串】。如果查找失败则不发生替换，而是将原字符串复制一份拷贝。

语法：str.replace(oldString,newString);

var string = 'hello world!';
var newString = string.replace('world','frank') ;//hello frank!
var stringCopy = string.replace('worlk','frank');//hello world!

ps：需要强调的是replace方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串

3.2.12 .split:字符串切割，返回数组

split方法能够根据指定的符号将字符串进行分割，分割后的每一个子元素整合成一个数组返回。如果无法分割，那么返回的数组只有一个元素，这个元素就是字符串本身。

语法：str.split(symbol);

var string = 'good bye everyone.';
string.split(' ') ;//["good", "bye", "everyone"]

ps：split方法最后会返回一个数组

四、数组

4.1数组的基本操作

4.1.1 通过.length进行访问数组的长度

length是一个可写属性。
如果设置length长度小于数组本身长度，那么多余元素舍弃。
如果设置length长度大于数组本身长度，那么缺少元素用空位补齐。
如果设置length长度不是合法数值，那么会报错Invalid array length

var ageArr = [18,24,30];
	ageArr.length = 2;
	console.log(ageArr.length);//2
	console.log(ageArr);//[18,24]

4.1.2 数组的遍历

如果想要连续访问数组中的每个元素，可以使用for in快速遍历。

var heroArr = ['GreenJuPeople','BlackGuaFu','MetalXia'];

for(var index in heroArr){
	console.log(heroArr[index]);
}

这里的Index是一个数字，表示数组的下标

4.1.3 数组的删除、调用

采用delet命令删除，删除后，形成空位，不影响数组的长度
var girlFriends = [‘ZhangTianAi’,‘LiuShiShi’,‘SomeOne’];
delete girlFriends[1];
console.log(girlFriends.length);//3

数组的调用
采用数组名加下标的方式进行访问数组的元素

4.2 数组的方法

(1)isArray:判断是否为数组

(2)valueOf:返回数组本身

(3)toString:将数组以字符串的形式返回

语法：arr.toString()

var girlFriends = ['ZhangTianAi','LiuShiShi','SomeOne'];
console.log(girlFriends.toString()); //ZhangTianAi,LiuShiShi,SomeOne

(4)push:向数组末尾追加数据,返回当前数组的长度

var girlFriends = ['张天爱', '李贞贤', '刘诗诗'];
console.log(girlFriends.push('someOne'));//4

(5)pop:删除数组最后一个元素

pop方法用于删除数组的最后一个元素，并返回删除的这个元素。

语法：arr.pop()

var girlFriends = ['张天爱', '李贞贤', '刘诗诗'];
console.log(girlFriends.pop());//刘诗诗

(6)join:将数组转换为字符串，默认按逗号隔开

var girlFriends = [‘张天爱’, ‘李贞贤’, ‘刘诗诗’];
console.log(girlFriends.join());//张天爱李贞贤刘诗诗
console.log(girlFriends.join(’,’));//张天爱，李贞贤，刘诗诗

(7)shift(): 在数组头部删除一个元素

var girlFriends = [‘张天爱’, ‘李贞贤’, ‘刘诗诗’];
console.log(girlFriends.shift());//张天爱
console.log(girlFriends);//[‘李贞贤’, ‘刘诗诗’]

(8)unshift():在数组头部添加一个元素
unshift方法用于在数组的第一个位置添加元素，并返回添加元素后新数组的长度。

语法：arr.unshift(item)

var girlFriends = [‘李贞贤’, ‘刘诗诗’];
console.log(girlFriends.unshift(‘张天爱’));// 3

(9)reverse():数组反转

(10)slice:数组截取

slice方法作用是能够根据指定的【起始点】和【结束点】来对数组进行截取，并生成一个新数组。新数组的内容是从起始点下标开始的元素到结束点下标的元素，但是不包括结束点下标的元素本身。

语法：arr.slice(index1,index2);

var girlFriends = ['张天爱', '李贞贤', '刘诗诗'];
console.log(girlFriends.slice(1,2));//李贞贤

上面代码的作用是，从数组下标1元素(李贞贤)开始截取，到数组下标2元素(刘诗诗)为止。但是不包括刘诗诗。
ps：slice方法的参数可以是负值。-1代表最后一个元素，-2代表倒数第二个元素。
var girlFriends = [‘ZhangTianAi’,‘LiuShiShi’,‘SomeOne’];
console.log(girlFriends.slice(-2,-1));//LiuShiShi

(11)splice:数组截取，并且可以插入新的元素(改变原数组)

splice方法和slice方法很相似，但是splice功能更强大一些。
splice方法的作用是在指定下标处截取一定长度的元素，再插入一些新元素，并将删除的元素构成一个新数组返回。splice方法会改变原本数组。

语法：arr.splice(index,removeCount,addItem1,addItem2,…)

var numbers = [1,2,3,'a','b','c',7,8,9];
var new1 = numbers.splice(3,3,4,5,6);
console.log(new1);//["a", "b", "c"]
console.log(numbers);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

上述代码中numbers.splice(3,3,4,5,6);的含义是，从数组下标为3的元素开始，删除3个元素，然后把4,5,6插入到原数组当中。

ps：对于splice方法来说，有没有新元素不是必要的。

(12)sort：排序

(13)indexOf:索引

indexOf方法能够从前到后检索数组，并返回元素在数组中的第一次出现的下标，如果没有索引到则返回-1。indexOf第二个参数表示从第几个元素开始索引，是可选参数。

语法：arr.indexOf(item,beginIndex)

var numbers = [11,13,15,17,19,11];
console.log(numbers.indexOf(11));//0
console.log(numbers.indexOf(100));//-1

(14)lastIndexOf:反序索引

五、对象（类似于字典）

语法：var obj = { key : value };

上面代码定义了一个对象，它被赋值给变量obj。
key是“键名”
value是“键值”

ps:如果对象内部包含多个键值对，每个键值对之间用逗号分隔。最后一个键值对末尾不用加逗号
var obj = {key1:value1,key2:value2};

5.1 键名(对象的属性)

键名也被称为属性(property)，对象的所有属性都是字符串，所以加不加引号都可以。
因此上面的代码也可以写成下面这样：
var obj = { ‘key’: value };

但是，如果属性不符合标识符的条件(比如第一个字符为数字，或者含有空格或运算符)，则必须加上引号。
var obj = {
‘1p’: “Hello World”,
‘h w’: “Hello World”,
‘p+q’: “Hello World”
};
上面对象的三个属性，都不符合标识名的条件，所以必须加上引号。

5.2 键值

键值是属性所对应的具体的值。javascript的对象的键值可以是任何数据类型。

var frank = {
			name: "Frankenstein Add",
			age: 18,
			sex: "male"
			ability: eat();//eat()表示函数
		    };

ps：如果一个属性的值(ability)为函数，通常把这个属性称为“方法”。它可以像函数那样调用这个属性。
frank.ability();

5.3 对象的创建

a.直接使用大括号创建对象
b.使用new命令生成一个Object对象的实例
c.使用Object.create方法创建对象

var obj1 = {};
var obj2 = new Object();
var obj3 = Object.create(null);

上面三行语句是等价的，都表示创建了一个没有键值对的空对象。

5.4 对象属性的读写

a.读取属性
读取对象的属性,有两种方法:一种是使用点运算符,还有一种是使用方括号运算符。

语法：var obj = { key：value }；
	    console.log(obj.key);
	    console.log(obj['key']);

var frank = { name: 'Frankenstein' };
   console.log(frank.name);//Frankenstein
   console.log(frank['name']);//Frankenstein

ps:需要注意的是，使用方括号读取对象属性的时候需要加引号！

b.写入属性
点运算符用来为对象的属性写入值。

语法：var obj = {}；
	    obj.key = value;
	    console.log(obj.key);

var frank = {};
  frank.name = 'frank';
  console.log(frank['name']);//frank

ps：点运算符和中括号运算符都能够给对象的属性赋值,无论属性是否存在(修改属性值)。

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。
中括号运算符可以用纯数字为属性名。点运算符不能。
中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

5.5 对象属性的操作

Object.keys() 获取对象所有的属性,返回一个属性构成的数组

var greenJuPeople = {	name: '绿巨人',	ability:'发怒变绿' };
console.log(Object.keys(greenJuPeople));//["name", "ability"]

ps：【Object.keys()】是一个整体，调用的时候必须整体使用。

【delete】从对象中删除一个属性

语法：delete obj.property

var obj = { key : 'value' };
   Object.keys(obj); 	// ["key"]
   delete obj.key; 		// true
   obj.key;		 		// undefined
   Object.keys(obj); 	// []

上面代码表示，一旦使用delete命令删除某个属性，再读取该属性就会返回undefined，而且Object.keys方法返回的该对象的所有属性中，也将不再包括该属性。

【in】检查对象是否包含一个属性

语法：'key' in obj

var obj = { key : 'value' };
   console.log( 'key' in obj );//true
   console.log( 'value' in obj);//false

ps:检查的是键名，不是键值。如果包含就返回true，否则返回false。

【for in】遍历对象的所有属性

语法：var obj = { key1:value1, key2:value2, key3:value3 };

for (var pro in obj){
	console.log(obj[pro]);
   }

ps:循环变量pro表示的是对象的属性名，并不表示属性的值！千万注意！！

(6)*对象的引用
如果不同的变量名指向同一个对象，那么它们都称为这个对象的引用。
也就是说这些变量共同指向同一个内存地址，修改其中一个变量所指向的值，都会影响到其他所有变量所指向的值。

var obj = { fire : 'burn' };
var people1_fire = obj;
var people2_fire = obj;

obj.fire = '灭了';
console.log(people1_fire.fire);//灭了
console.log(people2_fire.fire);//灭了

六、函数

6.1 基础语法

语法：
function 函数名(函数参数1,函数参数2,…) {
函数内容语句//函数体
}

	function baoZi(){
		console.log('和面');
		…
		console.log('包子出锅');		}

6.2 函数的申明

【function命令】
语法：function 函数名(参数1,参数2,…){ 函数体 }
function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。这种方式声明的函数可以通过调用函数名来调用函数。

【函数表达式】
语法：var 变量 = function(参数1,参数2,…){ 函数体 };
这种声明函数的方式没有函数名，而是用变量来指代函数。调用函数的时候通过访问变量来调用函数。

【Function构造函数】
语法：var 变量 = new Function();
这种声明函数的方式非常不直观，几乎无人使用。

6.3 函数的调用

直接写出函数名和函数参数即可调用函数
baoZi();

6.4 作用域

类似于python 变量的作用域也分为全局和局部

七、变量和内存的内在机制

7.1 变量提升机制

在进行定义变量的时候，都会讲变量的名字自动提升到最上面，完成代码的声明

console.log(num);
var num = 1;
不会报错，但是会显示undefined

7.2 函数也是一等公民

函数可以向变量一样引用、赋值、传参

7.3 内存管理

原始数据类型(数值、字符串、布尔值)的内容传递方式是值传递(pass by value)
而复合数据类型(数组、对象、其他函数)的内容传递是地址传递(pass by reference)
类似于引用技术

八、Math和Date对象

8.1 Math对象

是JavaScript的内置对象，提供一系列数学常数和数学方法。该对象不是构造函数，所以不能生成实例，所有的属性和方法都必须在Math对象本身上调用。
javascript为Math对象提供了一系列的属性和方法来帮助更好的使用：

(1)Math对象属性：Math对象的属性表示只读的数学常数

Math.E：常数e。 // 2.718281828459045
Math.LN2：2的自然对数。// 0.6931471805599453
Math.LN10：10的自然对数。// 2.302585092994046
Math.LOG2E：以2为底的e的对数。// 1.4426950408889634
Math.LOG10E：以10为底的e的对数。// 0.4342944819032518
Math.PI：常数Pi。// 3.141592653589793
Math.SQRT1_2：0.5的平方根。// 0.7071067811865476
Math.SQRT2：2的平方根。// 1.4142135623730951

8.2 Math对象的方法

【Math.round()方法】：四舍五入
当参数为正数时，正常的四舍五入标准。（小于0.5取0，大于等于0.5取1）
当参数为负数时，向下取整标准。（小于等于-0.5取-0，-大于0.5取-1）

Math.round(0.1) // 0
Math.round(0.5) // 1

Math.round(-1.1) // -1
Math.round(-1.6) // -2

【Math.floor()方法】：返回小于参数值的最大整数。(向下取整)

Math.floor(3.9) // 3
Math.floor(-3.2) // -4

【Math.ceil()方法】：返回大于参数值的最小整数。(向上取整)

Math.ceil(3.2) // 4
Math.ceil(-3.9) // -3

【Math.abs()方法】：返回参数值的绝对值

Math.abs(1) // 1
Math.abs(-1) // 1

【Math.max()方法】：返回最大的参数

Math.max(2, -1, 5) // 5

【Math.min()方法】：返回最小的参数

Math.min(2, -1, 5) // -1

【Math. pow()方法】：返回以第一个参数为底数、第二个参数为幂的指数值

Math.pow(2, 2) // 4
Math.pow(2, 3) // 8

【Math. sqrt()方法】：返回参数值的平方根。如果参数是一个负值，则返回NaN

Math.sqrt(4) // 2
Math.sqrt(-4) // NaN

【Math. log()方法】：返回以e为底的自然对数值。

Math.log(Math.E) // 1
Math.log(10) // 2.302585092994046

【Math. exp()方法】： 返回常数e的参数次方。

Math.exp(1) // 2.718281828459045
Math.exp(3) // 20.085536923187668

【三角函数方法】

Math.sin方法返回参数的正弦
Math.cos方法返回参数的余弦
Math.tan方法返回参数的正切。
Math.asin方法返回参数的反正弦
Math.acos方法返回参数反余弦
Math.atan方法返回参数反正切

Math.sin(0) // 0
Math.cos(0) // 1
Math.tan(0) // 0

【Math. random()方法】：返回0到1之间的一个伪随机数。可能等于0，但是一定小于1。

Math.random() // 0.7151307314634323

查看下列代码，并说明下列两个函数的作用：

function getRandomNumber(min, max) {
	return Math.random() * (max - min) + min;
}//返回一个在min到max之间的数
function getRandomIntNumber(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

8.3 Date

Date对象是JavaScript提供的日期和时间的操作接口。

8.3.1 Date()函数

Date函数可以被Date对象可以直接调用，返回一个当前日期和时间的字符串。

Date();	//"Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)"
Date(2000, 1, 1); //"Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)"

// 无论有没有参数，直接调用Date总是返回当前时间

8.3.2 Date(日期字符串|日期参数)构造函数

Date对象是一个构造函数，对它使用new命令，会返回一个Date对象的实例。

【如果不加参数，生成的就是代表当前时间的对象。】
语法：var date1 = new Date();

var today = new Date();
// "Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)"

【如果添加一个日期字符串作为参数，返回字符串所对应的时间。】

语法：var date2 = new Date(“January 6, 2013”);
// Sun Jan 06 2013 00:00:00 GMT+0800 (中国标准时间)

一些其他合法的日期字符串写法

new Date(datestring)
new Date(“2013-2-15”)
new Date(‘2013/2/15’)
new Date(“2013-FEB-15”)
new Date(“FEB, 15, 2013”)
new Date(“FEB 15, 2013”)
new Date(“Feberuary, 15, 2013”)
new Date(“Feberuary 15, 2013”)
new Date(“15, Feberuary, 2013”)
Sun Jan 06 2013 00:00:00 GMT+0800 (中国标准时间)

【如果添加日期参数，返回字符串所对应的时间。】

语法：var date2 = new Date(year, month, day, hours, minutes, seconds, ms)

使用日期参数时，年月必须写，其他则默认和可以省略，省略为0。

new Date(2013, 2)// Fri Mar 01 2013 00:00:00 GMT+0800 (中国标准时间)
new Date(2013, 0, 15)// Tue Jan 15 2013 00:00:00 GMT+0800 (中国标准时间)
new Date(2013, 0, 22, 7)// Tue Jan 22 2013 07:00:00 GMT+0800 (中国标准时间)
new Date(2013, 0, 1, 8, 15, 47, 18) //Tue Jan 01 2013 08:15:47 GMT+0800 (中国标准时间)

8.3.3 日期运算

之前提到过，javascript内部存储日期类型的时候等于距离1970年1月1日零点的毫秒数。而显示给用户的时候是转换为字符串显示的。因此：

两个日期对象进行减法运算，返回的就是它们间隔的毫秒数。
两个日期对象进行加法运算，返回的就是连接后的两个字符串。

var d1 = new Date(2000, 2, 1);
var d2 = new Date(2000, 3, 1);

console.log(d2-d1);//2678400000
console.log(d2+d1);//Sat Apr 01 2000 00:00:00 GMT+0800 (中国标准时间)Wed Mar 01 2000 00:00:00 GMT+0800 (中国标准时间)

例子：
编写一个商品特价倒计时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝倒计时</title>
    <style>
        .content{
            margin: 0 auto;
        }
        .product{
            width: 300px;
            height: 500px;
            border: 1px solid black;
            margin: 0  auto;
        }
        img{
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="product">
        <img src="../images/晓芳窑定制.png" alt=""/>
        <p>热卖商品</p>
        <p>
            <del>原价：￥999</del>
            <span>现价：￥799</span>

        </p>
        <p>距离结束还有：<span id="lasttime"></span></p>
    </div>
</div>
<script>
    var timeSpan=document.getElementById('lasttime');
    var stopTime=new Date('2020-6-19');
    function getTime(){
        var nowTime= new Date();
        var lastTime=Math.floor (( stopTime-nowTime)/1000);

        var days = Math.floor(lastTime/60/60/24);
        var hours = Math.floor(lastTime/60/60)-days*24;
        var minutes= Math.floor(lastTime/60%60);
        var secs= Math.floor(lastTime%60);
        timeSpan.innerHTML=days+'天'+hours+'小时'+minutes+'分种'+secs+'秒';

    }
    getTime();
    setInterval(function(){
        getTime();
    },1000);
    var doctype=document.doctype;
    console.log(doctype);
    console.log(document.documentElement);
    console.log(document.location);