js基础

最新推荐文章于 2020-03-10 14:56:35 发布

a free man

最新推荐文章于 2020-03-10 14:56:35 发布

阅读量556

点赞数 5

文章标签： js

本文链接：https://blog.csdn.net/young_dream0_0/article/details/103174576

版权

流程语句_双分支
判断闰年还是平年；
闰年条件：
1、可以被400整除
2、可以被4整除，但是不可以被100整除

var year = 2014;
if(year % 400 == 0 || year % 4 == 0 && year % 100 != 0){
alert("这是一个闰年");
}else{
alert("这是一个平年");
}

流程语句_多分支
考试成绩
var result = ;
if(result > 85){
   alert("优秀");
   //嵌套if结构
   if(result >= 95 && result < 100){
       alert("奖励1000块");
   }else if(result >= 90 && result < 95){
       alert("奖励800块");
   }esle{
       alert("奖励300块");
   }
}else if(result >= 75 && result < 85){
   alert("良好");
}else if(result >= 60 && result < 75){
   alert("及格");
}else{
   alert("不及格");
}

流程语句_switch
多分支语句：
【格式】
switch(表达式){
   case 常量1：
       语句1；
       break;
   case 常量2：
       语句2；
       break;
   case 常量3：
       语句3；
       break;
   default:
       如果上述语句都不成立，执行这里；
       break;
}

三位运算符
var num1 = 20;
var num2 = 10;
var max = num1 > num2 ? num1 : num2;
alert(max);

循环_while
while循环
【格式】
while(表达式){
循环语句；
}
【注】
1、先判断表达式，表达式成立执行循环语句。
2、循环条件中使用的变量（循环变量）需要经过初始化。
3、循环体中，应有结束循环的条件，否则会造成死循环。
4、循环体中，可以写若干合法的js代码，包括if，也可以再套个循环。

var i = 1;//用于累加的数
var sum = 0;//记录累加的和
while(i <= 100){
sum += i;
i++;
}
alert(sum);//5050

打印100以内7的倍数
var i = 1;
while(i <= 100){
   if(i % 7 == 0){
       document.write(i+"<br />");
   }
   i++;
}

打印100以内的奇数
var i = 1;
while(i <= 100){
   if(i % 2 != 0){
       document.write(i+"<br />");
   }
   i++;
}

打印100以内所有偶数的和
var i = 1;
var sum = 0;
while(i <= 100){
   if(i % 2 == 0){
       sum += i;
   }
   i++;
}
alert(sum);

打印********
var i = 0;
while(i < 40){
   if(i % 10 == 0){
       document.write("<br />");
   }
   document.write(*);
   i++;
}

循环_dowhile
【格式】
do{
循环语句；
}while(表达式);
【注】
1、最后的分号不要忘记。
2、循环条件中使用的变量需要经过初始化。
3、循环体中，应有结束循环的条件，否则会造成死循环。

var i = 1;
var sum = 0;
do{
sum += i;
i++;
}while(i <= 100);
alert(sum);//5050

while循环和do_while循环的区别
1、while循环是先判断表达式，然后再去执行循环语句。
2、dowhile循环先去执行一次循环语句，然后再去判断一次表达式。

循环_for循环
for循环
【格式】
for(表达式1；表达式2；表达式3){
循环语句；
}
【执行顺序】
1、先求解表达式1（只求一次）
2、求解表达式2，若其值为真（非0），则执行for语句中的循环语句，然后再去求解表达式3；在求解表达式2，若为假，则结束。

var sum = 0;
for(var i = 1;i <= 100;i++){
sum += i;
}
alert(sum);

循环嵌套
for(var i = 0;i < 5;i++){
   for(var j = 0;j <= i;j++){
       document.write("*");
   }
   document.write("<br />");
}

for(var i = 0;i < 5;i++){
//每一行的空格，行数-当前打印的星的个数
   for(var k = 0;k < 5 - i - 1;k++){
       document.write("&ensp;&ensp");
   }
   for(var j = 0;j <= i;j++){
       document.write("*");
   }
   document.write("<br />");
}

循环_break和continue
break语句
1、在swith语句中使流程跳出switch。
2、在循环语句中使流程跳出当前的循环。

for(var i = 0;i < 100;i++){
   if((i + 1) % 5 == 0){
       break;
   }
   document.write((i + 1)) + "<br />";
}

continue语句
【注】只能在循环语句中使用，使本次循环结束，即跳转过循环体中下面尚未执行的语句，接着进行下次是否执行循环的判断
for(var i = 0;i < 100;i++){
   if((i + 1) % 5 == 0){
       continue;
   }
   document.write((i + 1)) + "<br />";
}

函数_函数的概念
编程js中函数的概念：
函数当它被调用时执行的可重复使用的代码块。
函数定义
【注】无参函数的声明：
【格式】
function 函数名（）{
函数体；
}
【注】函数体内，外面怎么写js代码，这里也如何去写js代码。
【功能】函数可以封装任意多条语句，而且可以在任何地方，任何时候调用执行。

for(var i = 0;i < 10;i++){
document.write("Hello World!<br />");
}

执行程序
程序被CPU所执行。
//函数的声明就相当于写说明书
function print(){
   for(var i = 0;i < 10;i++){
       document.write("Hello World!<br />");
   }
}
//函数调用的时候
print();

函数_有参函数
//输入n个hello world！
【注】到底输出几个是不确定的？
我们可以把函数中不确定的值当做形参（形式上的参数）进行声明。

有参函数的封装过程：
function print(n){
   for(var i = 0;i < n ;i++){
       document.write("Hello World!<br />");
   }
}
//函数调用实参给形参进行赋值 10实参 n形参
print(10);

//封装一个函数，计算两个数的和
function add(num1,num2){
alert(num1 + num2);
}
add(3,4);

函数_arguments
计算所传入参数的和。具体传入多少参数不确定。
【注】arguments
【注】在每一个函数内，都有一个内置的数组，是一个变量，叫做arguments。
arguments可以存储当前函数传入的所有参数，而且，是用过传参的顺序，进行排列的。
【注】arguments.length输入传入参数的个数
【注】访问arguments里面的数据，需要通过对应的下标进行访问。
【注】下标可以配合我们循环去使用
funciton sum(){
   //alert(arguments);//[object Arguments]
   //alert(arguments[0]);
   for(var i = 0;i < arguments.length;i++){
       sum += arguments[i];
   }
   alert(sum);//12
}
sum(3,4,5);

函数_返回值
function add(num1,num2){
alert(num1 + num2);
}
【注】希望能够在函数外部获取到，函数调用的结果。
add(3,4);

函数_作用域
作用域：就是起作用的范围，或者说是有效范围。每一个函数的声明都会形成一个作用域。
var a = 10;
function sum(){
a = 5;
}
alert(a);//10
sum();
alert(a);//5

var a = 10;
function sum(){
a = 5;
alert(a);//5
}
alert(a);//10
sum();
alert(a);//10

全局作用域
全局作用域声明的变量全局变量
局部作用域函数
局部作用域声明的变量局部变量，局部变量的生命周期和生效的范围，都是声明该变量的函数区域。当函数调用完成以后，就直接销毁。
如果全局作用域和局部作用域变量重名，我们采取就近原则，当前访问这个变量离那个作用域近，就是哪个作用域。

函数_练习
1、判断一个年份是不是闰年
分析：
   参数：年份
   返回值：是否是闰年
function leapYear(year){
   if(year % 400 ==0 || year % 4 == 0 && year % 100 != 0){
       return true;
   }else{
       return false;
   }
}
alert(leapYear());

判断一个数是否是素数
素数：只能被1和它本身整除的数。

参数：一个数
返回值：是否是素数布尔值
function prime(num){
   var isYes = false;//是否是素数
   for(var i = 2;i < num ;i++){
       if(num % i == 0){
           isYes = true;有一次成功
           break;
       }
   }
   return !isYes;
}
alert(prime());

函数_递归
递归概念：
函数可以自己调用自己，称为递归调用。
【注】我们可以写出递归，但是我们并不知道他是如何得出结果。

函数的递归调用
方法：
   1、首先去找临界值，既无需计算，获得的值。
   2、找这一次和上一次的关系
   3、假设当前函数已经可以使用了，调用自身计算上的一次的运行结果，再写出这次的运行结果。

【特点】
1、必须有参数
2、必须有return

1加到n的和。 sum（100）= sum（99） + 100；
   sum（n）= sum（n-1）+ n；
【注】递归会在短时间内，使内存剧增。
function sum(n){
   if(n == 1){
       return 1;
   }
   return sum（n-1）+ n;
}
alert(sum(100));

通过递归，打印n个hello world
function print(n){
   if(n == 0){
       return;
   }
   document.write("Hello World!<br />");
   return print(n-1);
}
print();

一月兔二月兔三月兔成熟兔

   1   0   0   0
   0   1   0   0
   0   0   1   0
   1   0   0   1
   1   1   0   1
   1   1   1   1
   2   1   1   2
   3   2   1   3
   4   3   2   4
   6   4   3   6

function rabbit(month){
   if(month < 4){
       return 1;
   }
   return rabbit(month - 3) + rabbit(month - 1);
}
rabbit(month);

函数_事件驱动函数
windoe.onload = function(){ //写在这里的代码，在页面加载完成以后执行
var oBtn = document.getElementById("btn");

   oBtn.onclick = function(){
       alert("单机");
   }
}

数组_数组的定义
数据类型
   基本数据类型
   数字
   字符串
   布尔值
   特殊数据类型   null   undefined

复合数据类型
数组

var arr = new Array(1,true,"hello");
alert(arr);

数组_数组属性和遍历
数组的长度
arr.length访问数组元素的个数
【注】length属性，不是只读的，可以设置的。

var arr = ["red","bule","green"]
arr.length = 2;
alert(arr);

数组遍历：数组和循环结合使用。JS中数组和循环是绝配。
for循环
以下为通过循环给数组的每个元素赋值，赋成下标的平方
var arr = [];
for(var i = 0;i < 10;i++){
arr[i] = i * i;
}
alert(arr);

以下为通过循环给数组的每个元素赋值，随机数。
随机数
Math.random() 可以随机0～1之间任意的数

var arr = [];
for(var i = 0;i < 10;i++){
arr[i] = Math.random();
}
alert(arr);

var arr = ["red","blue","green"];
for(var i = 0;i < arr.length;i++){
document.write(arr[i] + "<br />");
}

for...in进行遍历，快速遍历将数组中每一个元素从头到尾进行遍历
【格式】
for(var 变量 in 数组){

}
【注】for in效率要比for循环的效率高

for(var i in arr){
//i 每一次遍历的下标
document.write(arr[i] + "<br />");
}

数组_栈方法和队列方法
栈结构：从一个口进，从同一个口出。
【特点】先进后出。

push()
【格式】数组.push（元素...）
功能：给数组末尾添加元素
参数：我们要添加的元素，参数个数随意。
返回值：添加元素以后，数组的长度。

pop()
【格式】数组.pop();
功能：移除数组末尾的最后一个元素。
返回值：移除的元素

var arr = ["钢铁侠","蚁人","绿巨人"];
var res = arr.push("蜘蛛侠","快银");
alert(arr);
alert(res);

var arr = ["钢铁侠","蚁人","绿巨人"];
var res = arr.pop();
alert(arr);
alert(res);

队列
队列结构：从一头进，从另外一头出。
特点：先进先出。

push()

shift()
【格式】数组.shift()
功能：从数组的头部取下一个元素
返回值：取下的元素

unshift()
【格式】数组.unshift(参数...)
功能：从数组的头部插入元素
参数：我们插入数组的元素，参数的个数随意
返回值：插入元素以后，数组的长度。

var arr = ["钢铁侠","蚁人","绿巨人"];
var res = arr.shift();
alert(arr);
alert(res);

var arr = ["钢铁侠","蚁人","绿巨人"];
var res = arr.unshift("超人","黑寡妇");
alert(arr);
alert(res);

数组_方法详解
concat()
【格式】数组1.concat(数组2);
功能：酱两个数组，合并成一个新数组，原数组并不会被改变
返回值：我们合并好的新数组
参数：我们要合并的数组

var arr1 = ["钢铁侠","绿巨人"];
var arr2 = ["美国队长","鹰眼"];
var arr = arr1.concat(arr2);
alert(arr);
alert(arr1);
alert(arr2);

slice()
【格式】数组.slice(start,end);
功能：基于当前数组获取指定区域并创建一个新数组。原数组不改变。
参数：start开始获取区域下标，end结束获取区域的下标,不包括end下标位置的元素。
返回值：指定区域元素生成的新数组。

var arr = ["钢铁侠","绿巨人","超人","黑寡妇"];
var newArr = arr.slice(1,3);
alert(newArr);//绿巨人，超人
alert(arr);

splice 可以完成删除，插入，替换操作
【格式】数组.splice（start,length,元素...）
参数：参数1 开始截取的开始下标
参数2 截取的长度
参数3
在截取的开始下标位置，我们要插入的元素，插入的元素的个数随意。
【注】会对元素组进行修改
返回值：截取掉的元素，组成的数组

var arr = ["red","blue","green"];
//删除功能
var res = arr.splice(1,1);
alert(res);//blue
alert(arr);//red,green

//插入功能
var res = arr.splice(1,0,"yellow");//red,yellow,blue,green
alert(arr);
alert(res);

//替换功能先删除，然后插入
var res = arr.splice(1,1,"yellow");//red,yellow,green
alert(res);
alert(arr);

join()
【格式】数组.join(拼接符)
功能：使用拼接符将数组中元素拼接成字符串。
参数：拼接符
返回值：拼接好的字符串

var arr = [10,20,30];
var str = arr.join("+");//10+20+30
alert(str);

数组_二位数组
通过循环按行顺序为一个5×5的二位数组a赋值1到25的自然数，然后输出该数组的左下半角。试编程。
1， 2， 3， 4， 5
6， 7， 8， 9， 10
11， 12， 13， 14， 15
16， 17， 18， 19， 20
21， 22， 23， 24， 25

【注】所谓二维数组，在数组中元素还为数组。

//var arr = [[],[],[],[],[]]

var count = 0;//从1到25累加中间变量
var arr = [];
for(var i = 0;i < 5;i++){
   var newArr = [];
   //每一个newArr都有五个数
   for(var j = 0;j < 5;j++){
       newArr.push(++count);
   }
   arr.push(newArr);
}
alert(arr);

for(var i = 0;i < arr.length;i++){
   //每一行中打印的元素，和当前的行数相等。
   for(var j = 0;j <= i;j++){
       document.write(arr[i][j] + "&ensp;");
   }
   document.write("<br />")
}

1
6， 7
11， 12， 13
16， 17， 18， 19
21， 22， 23， 24， 25

数组_系统排序
系统提供排序方法

reverse() 逆向排序
【格式】数组.reverse();

var arr = [10,20,30,40];
arr.reverse();
alert(arr);//40,30,20,10

sort()
【格式】数组.sort()
功能：将数组中的元素升序排序。
【注】sort默认是按照字符串进行排序。

【要求】一般情况下，我们需要自己去编写排序算法，系统提供给我们的排序函数，用的比较少。

var arr = [5,4,2,3,1];
arr.sort();
alert(arr);//1,2,3,4,5

var arr = [10,1,5,15];
arr.sort();
alert(arr);//1,10,15,5

数组_冒泡排序
【原理】
前后两个数两两进行比较，如果符合交换条件，交换位置。直到所有数据排序完成，结束比较。
【注】下述的排序算法叫做是冒泡排序。

var arr = [9,8,7,6,5,4];

第一轮
   9,8,7,6,5,4
   8,9,7,6,5,4
   8,7,9,6,5,4
   8,7,6,9,5,4
   8,7,6,5,9,4
   8,7,6,5,4,9
【注】每一轮取出一个最大的数，放在正确的位置。

第二轮
   8,7,6,5,4
   7,8,6,5,4
   7,6,8,5,4
   7,6,5,8,4
   7,6,5,4,8
第三轮
   7,6,5,4
   6,7,5,4
   6,5,7,4
   6,5,4,7
第四轮
   6,5,4
   5,6,4
   5,4,6
第五轮
   5,4
   4,5

for(var i = 0;i < arr.length;i++){//比较的轮次
   //每一轮比较的次数
   for(var j = 0;j < arr.length - i - 1;j++){
       //判断前后两个数是否符合交换条件
       if(arr[j] > arr[j + 1]){
           var tmp = arr[j + 1];
           arr[j + 1] = arr[j];
           arr[j] = tmp;
       }
   }
}
alert(arr);

数组_选择排序
【注】选择排序法
【原理】通过比较首先选出最小的数放在第一个位置，然后在其余的数中选择次小数放在第二个位置，以此类推，知道所有的数成为有序序列。

【注】打擂台法。

9,8,7,6,5,4

var arr = [9,8,7,6,5,4]

for(var i = 0;i < arr.length - 1;i++){
   for(var j = i + 1;j < arr.length;j++){
       if(arr[i] > arr[j]){
           var tmp = arr[i];
           arr[i] = arr[j];
           arr[j] = tmp;
       }
   }
}
alert(arr);

数组_引用详解
数组复合数据类型/引用数据类型
【注】所有的复合数据类型都不直接存储在我们的函数中，存储在堆段。
【注】函数运行的空间是预先分配好的。一旦被分配好内存空间，就不能进行改变了。
【注】在堆段，我们可以想要使用内存，就随时分配多少内存。
【注】所有的复合数据类型，存储的都是门牌号，也就是地址。所以这类型的数据，我们叫做引用数据类型。

//冒泡排序
function bubble(arr){
   for(var i = 0;i < arr.length;i++){//比较的轮次
   //每一轮比较的次数
       for(var j = 0;j < arr.length - i - 1;j++){
       //判断前后两个数是否符合交换条件
           if(arr[j] > arr[j + 1]){
               var tmp = arr[j + 1];
               arr[j + 1] = arr[j];
               arr[j] = tmp;
           }
       }
   }
}

bubble(arr);

//选择排序
function choose(arr){
   for(var i = 0;i < arr.length - 1;i++){
       for(var j = i + 1;j < arr.length;j++){
           if(arr[i] > arr[j]){
               var tmp = arr[i];
               arr[i] = arr[j];
               arr[j] = tmp;
           }
       }
   }
}

字符串_概念
字符串的概念：
【注】在JS中将所有单引号或者双引号括起来的都叫字符串

字符串创建的方式：

1、通过new运算符创建
var str = new String("hello");
alert(str);

2、new可以省略
var str = String(true);
alert(typeof str);

3、通过常量创建字符串
var str = "hello";
alert(str);

字符串的属性
length 返回的是当前字符串中字符的个数

var str = "hello";
alert(str.length);

访问字符串的字符
charAt()
【格式】字符串.charAt(下标)
【返回值】对应下标的字符
【注】我们可以直接通过字符下标去访问该字符

alert(str.charAt(1));//e
alert(str[1]);//e

【注】ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，

【注】+号可以作为字符串拼接符存在

var str = "hello";
str[1] = "x";
alert(str);//hello

var str = "hello" + "world";
alert(str);//helloworld

字符串_方法
charCodeAt
【格式】字符串.charCodeAt(下标)
返回值：返回字符串中对应下标字符串的ASCII码值

var str = "hello";
alert(str.charCodeAt(1));//101

String.fromCharCode(ASCII码值)；
参数：ASCII码值，个数任意
返回值：ASCII码值对应字符组成的字符串

var str = String.fromCharCode(97,98,99);
alert(str);abc

concat()
【格式】字符串1.concat(字符串2)
返回值：拼接成的字符串,生成新字符串。

【注】一般情况下很少用，使用字符串拼接符 + 。

var str1 = "hello";
var str2 = "world";
var str = str1.concat(str2);
alert(str);//helloworld

字符串_查找方法
indexOf()
【格式】字符串.indexOf(子串，开始查找的位置)；
返回值：如果在字符串中查找到了子串第一次出现的位置，返回子串出现的位置，否则没有查找到返回-1。

var str = "abcabcabc";
alert(str.indexOf("abc"));//0

alert(str.indexOf("abc",1));//3

lastIndexOf()
【格式】字符串.lastIndexOf(子串)；
返回值：子串在字符串中最后一次出现的位置，如果没有，返回-1。

var str = "abcabcabc";
alert(str.lastindexOf("abc"));//6

search(子串/正则) 参数可以是正则表达式

【注】正则表达式可以添加修饰符，i代表忽略大小写，g代表全局匹配。

var str = "Abcabcabc";
alert(str.search("abc"));//3

alert(str.search(/abc/i));//0

字符串_分割
replace()
【格式】字符串.replace(匹配的字符串/正则表达式，替换成的新字符串)
返回值：替换完成以后生成的新字符串。

想替换所有符合条件字符串，就必须使用正则表达式完成。

var str = "how are are you";
alert(str.replace("are","old are"));//how old are are you

alert(str.replace(/are/g,"old are"));//how old are old are you

substring()
【格式】字符串.substring(start,end);
作用：字符串提取，在指定范围内，提取字符串，生成新字符串。
返回值：生成的新字符串。【注】不包含结束位置的。

var str = "helloworld";
alert(str.substring(2,4));//ll

字符串分割
split
【格式】字符串.split(分割符，生成的数组的长度)；
返回值：通过分割符，分割成的装有子串的数组。
【注】1、分割符，整体。
2、会分割出空字符串
3、如果分割符是空字符串“”，那么我们字符串会分割成单个字符
4、字符串=>数组split 数组=>字符串join

var str = "This is a box";
var arr = str.split(" ");
alert(arr);//This,is,a,box

var arr = str.split(" ",2);
alert(arr);//This,is

var str = "HELLO world";
alert(str.toLowerCase());//全小写
alert(str.toUpperCase());//全大写

ecma5_严格模式
ECMA5标准 ECMAJavascript

【注】从字面意思理解，即这种严格模式下，浏览器会对JS的要求更加的苛刻。
"use strict";
写在哪个作用域下，这个作用域下所有的代码都遵从严格模式。
【注】不要轻易在全局范围开头增加"use strict";建议在作用域内使用。

function m1(){
max = 10;//如果在给变量赋值的时候，没有使用var声明该变量，那么当前全局变量进行处理。
}

m1();
alert(max);

function m1(){
"use strict";
max = 10;
}

m1();
alert(max);//报错

ecma5_新增数组方法

indexOf() 数组
【格式】数组.indexOf(元素，index);
【注】使用的方式和字符串的方式一致。

var arr = [10,20,30,40,50,30];

alert(arr.indexOf(30));//2;
alert(arr.indexOf(30,3));//5;

forEach()
【格式】数组.forEach(function(item,index,array){

   item 当前遍历到的元素
   index 当前遍历到的下标
   array 当前数组
})
功能：遍历数组

var arr = [10,20,30];
arr.forEach(function(item,index,array){
alert(item + "," + index + "," + array);

})

map 映射遍历->操作->返回

var arr = [20,30,40,50];
var newArr = arr.map(function(item,index,array){
return item + 2;
})
alert(newArr);//22,32,42,52

reduce 归并

var arr = [10,20,30,40,50];
var res = arr.reduce(function(pre,next,index,array){
   pre   上一次遍历return后面的值
   next   当前遍历到的元素
   alert(pre + "," + next)；
   return pre + next;
})
alert(res);

filter 过滤
var res = [10,20,30,40,50].filter(function(item,index,array){
return item > 30;//找出所有大于30的元素
})
alert(res);

some 某些
判断return后面的条件是否成立，如果成立返回true，否则返回false

【注】如果匹配成功，则返回true，后面不再进行遍历

var arr = [10,20,30,40,50];
arr.some(function(item,index,array){
return item == 30;//判断数组中是否存在30
//判断return后面的表达式，在当前数组是否成立。如果成立true，否则false
})
alert(res);

every 跟some一样，但是要求每一项都符合，才返回true，有一项不符合就返回false
【注】如果判断有元素不符合条件，返回false，直接终止循环。
var arr = [10,20,30,40,50];
var res = arr.every(function(item,index,array){
return item > 5;
})
alert(res);

math对象
Math对象用于执行数学任务

Math常用的属性 Math.PI 约等于3.14159

Math对象常用的函数

alert(Math.round(3.5));//四舍五入

alert(Math.random());//随机0～1之间的随机数

Math.max()返回较大数
Math.min()返回较小的数

alert(Math.max(10,20,30));//30;

alert(Math.abs(-10));//返回绝对值

Math.ceil()向上取整
Math.floor()向下取整

alert(Math.ceil(3.1));//4
alert(Math.floor(3.9));//3

Math.pow(x,y);
求 x的y次方。 x是底数 y是指数

alert(Math.pow(2,5));

alert(Math.sqrt(4));//开平方 2

【注】本身计算机有BUG，计算小数的时候，会出错。
银行的计数单位是分，没有小数点。

Math对象勾股函数
参数：都应该是弧度。Math.PI = 180弧度
1弧度 = Math.PI / 180;

Math.sin()/cos()/tan() //正弦/余弦/正切
alert(Math.sin(30 * Math.PI / 180));

对象_认识对象
对象也是数据类型

分析：数据存储的历程
变量（单个数据）=>数组（批量数据）=>对象（数据，函数）

对象的创建
对象中存储的数据，我们叫做对象的属性
对象中存储的函数，我们叫做对象的方法

1、使用new运算符创建对象
var person = new Object();
给该对象添加数据/属性
person.name = "xxx";
person.age = 18;
给该对象添加函数/方法
person.showName = function(){
alert(person.name);
}

如果，我们想要访问上述对象的属性和函数
alert(person.name);
调用对象的方法
person.showName();

2、new运算符可以省略

3、使用常量/字面量去创建对象
var person = {};
person.name = "xxx";
person.age = 18;
person.showName = function(){
alert(person.name);
}

person.showName();

delete 删除对象的属性

日期对象_认识日期对象
在JS中日期也是一个数据类型/复合数据类型，是对象

对象的属性
对象的方法

日期对象 Date

日期对象的创建方式

参数：如果我们不传参，默认获取的就是当前系统的时间。

【注】我们所有的时间都是根据格林尼治时间，中国北京处于东八区。

var d = new Date();
alert(d);

生成日期对象的参数
参数类型可以是：
Date（“2015/08/22”）
Date（“2015-08-22”）
Date（2016,04,13,14,34）；

var d = new Date("2015/08/22");
alert(d);

1秒 = 1000毫秒
参数可以毫秒数，计算从1970年开始+毫秒数，计算出这个时间。

以1970年1月1日0时0分0秒为参照物。1970年是Unix的诞生日

var d = new Date(1000);
alert(d);

日期对象_方法
日期对象格式化方法：通过某种格式输出。
【格式】日期对象.方法();

var d = Date();
alert(d.toDateString());

set系列的函数是设置值
get系列的函数是获取值

var d = new Date();
alert(d.getDate());

获取一周中的某一天，从0开始的，星期0代表的是周日。只能获取不能设置
getDay()
获取月份的时候，从0开始。
set/getMonth()

参照物都是1970年

d.set/getTime() 设置/获取当前日期距离1970年的毫秒数

var d = new Date();
alert(d.getTime());

Date.parse("2015年-08-24")
参数：是一个日期格式的字符串。
功能：返回这个日期，距离1970年的毫秒数

var time = Date.parse("2015年-08-24");
var d = new Date(time);
alert(d);

日期对象_练习
1、显示当前的时间

function showDate(){
   var d = new Date();//获取当前时间
   var year = d.getFullYear();
   var month = d.getMonth() + 1;//月从0开始
   var day = d.getDate();

   var week = d.getDay();//星期0代表周日
   if(week == 0){
       week = "日";
   }
   var hour = d.getHours();
   var min = d.getMinutes();
   var sec = d.getSeconds();

return year + "年" + month + "月" + date + "日星期" + week + " " + hour + ":" + min + ":" + sec;
}
alert(showDate());

2、setDate()和getDate()，封装一个函数，可以根据输入的数值n(天数)显示n天后的时间

function numOfDate(n){//n天后
   var d = new Date();//获取当前时刻
   var date = d.getDate();//取出天数
   d.setDate(date + n);//加上n天
   return d;
}
alert(numOfDate(2));

日期对象_定时器和innerhtml
setInterval()
【格式】
setInterval(函数/匿名函数，毫秒数);

setInterval(function(){
//我们想要去做的代码；

},毫秒数);
功能：每隔所传参数的毫秒数，就调用一次所传参数的函数。
【返回值】当前页面上对于这个定时器的唯一标识，定时器的ID。

clearInterval()取消定时器
参数：定时器的ID

var i = 0;
function show(){
   document.write(i++ + "<br />");
   if(i == 5){
       clearInterval(timer);
   }
}

window.onload = function(){
   var = oBtn = document.getElementById("btn");
   oBtn.onclick = function(){
       setInterval(show,1000);//函数传参
   }
}

秒表实现
<style>
#div1{
   width:300px;
   height:400px;
   background-color:gray;
   margin:100px auto;
   text-align:center;
}
#count{
   width:200px;
   height:150px;
   line-height:150px;
   margin:auto;
   font-size:40px;
}

</style>
<script>
//可以将查找标签节点的操作进行简化
function $(id){
return document.getElementById(id);
}

//处理单个数字
function showNum(num){
   if(num < 10){
       return "0" + num;
   }else{
       return num;
   }
}
</script>
<body>
   <div id = "div1">
       <div id = "count">
           <span id = "id_H">00</span>:
           <span id = "id_M">00</span>:
           <span id = "id_S">00</span>
       </div>
       <input id = "start" type = "button" value = "开始" />
       <input id = "pause" type = "button" value = "暂停" />
       <input id = "stop" type = "button" value = "停止" />
   </div>
</body>

bom_系统对话框
BOM（Brows Object Model）
BOM 就是浏览器的对象模型。

浏览器可以通过调用系统对话框，向用户显示信息。

系统提供了三个函数，可以完成系统对话框的操作。

【注】window下的函数都可以省略window直接去调用
alert()直接弹出警告框
参数，警告框上显示的内容

confirm()
【功能】弹出一个带有确定和取消按钮的警告框。
【返回值】如果点击确定，返回true
如果点击取消，返回false

prompt()
【功能】弹出一个带输入框的提示框。
【参数】第一个参数：要在提示框上显示的内容。
第二个参数：输入框内默认的值。
【返回值】点击确定：返回值是输入的内容
点击取消：返回值是null

prompt("请输入一个数",0);

bom_open方法
window.open()
open()

1、要加载URL
2、窗口的名称或者窗口的目标
3、一串具有特殊意义的字符串

window.onload = function(){
   var oBtn = document.getElementById("btn");
   oBtn.onclick = function(){
       open("http://www.baidu.com");
       【注】如果只有一个参数，调用open方法会打开新窗口，加载url。

open("http://www.baidu.com","百度");
//【注】第二个参数，是给打开的新窗口起一个名字，然后以后，再去加载url，就在这个已经起好名字的目标窗口加载url。

       open("http://www.baidu.com","百度","width = 400,height = 400,top = 200,left = 200");
       //【注】第三个参数，是设置当前打开窗口的参数
   }
}

opener 打开当前窗口的父窗口的window对象

IE不支持该对象

bom_location属性

location 我们浏览器上的地址栏输入框
【注】它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location 中的属性

url 统一资源定位符（快递包上的一个地址）

location.hash 锚点 #1 实现页内跳转
alert(location.hash)；

host 端口号浏览器的端口号默认8080

IP 通过IP我们可以在全球范围内，找到我这台电脑所使用的网络的地址。
端口号正在使用网络的软件，在当前电脑内唯一的标识。
IP:端口号

hostname 主机名域名/IP
域名其实就是给IP起一个好记的名字

href 整个url

pathname 路径名

port 端口号

protocol 协议

http:网络协议
file:本地文件协议

search 查询字符串
跟在？后面的部分。

url 统一资源定位符

protocol（协议）:host（主机名）:port（端口号）/pathname（路径）？查询字符串（search）#锚点（hash）

bom_location方法
assign() 跳转到指定的url

reload() 重载当前的URL
如果传参，参数为true的时候，强制加载，从服务器源头重新加载

replace() 用新的URL替换当前页面，可以避免产生跳转前的历史记录。

bom_history对象
history是window对象的属性，它保存这个用户上网的记录。

属性
history.length 返回当前history对象中记录数
历史记录的条数

方法
history.back() 返回上一条历史记录，类似于后退
history.forward()前进到下一条历史记录，类似前进
history.go()
参数：0 重载当前页面
正数前进对应数量的记录
负数后退对应数量的记录

bom_search处理
?id=5&search=ok

获取url中search，通过传入对应key，返回key对应的value。

例子：传入id，返回5

var search = "?id=5&search=ok";
getValue(search,"id");

dom_概念
DOM document object model 文档对象模型

html css 页面内容
js 页面行为操作

【注】DOM是打通html、css和JS壁垒的一个工具。

DOM中节点种类一共有三种
【注】在JS中所有节点都是对象。
<div title = "属性节点">测试Div</div>

元素节点 <div></div>
属性节点 title = "属性节点"
文本节点测试Div

dom_byid元素节点属性
document.getElementById(id);
【功能】通过当前元素节点的id，获取对应元素节点。

元素节点属性
   通过这个节点对象，访问它的一系列属性。
   tagName 获取元素节点的标签名。
   innerHTML 获取元素节点标签间的内容。

HTML属性的属性
   id
   title
   style
   className 在获取class，不能直接class，必须使用className。
访问这些属性：
   元素节点.属性名
   元素节点[属性名]

在style样式中
background-color 使用-链接的属性
访问的时候，需要将-去掉，然后将后续单词的首字母大写。

dom_bytagname
document.getElementsByTagName();
node.getElementsByTagName();
【注】从node节点开始，找出所有符合条件的元素节点。
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点。
返回值：一个装有符合条件的元素节点的数组。

dom_byname
document.getElementsByName();

参数：name的值
返回值：装有符合条件的元素节点的数组

【注】name属性一般情况下，只有文本输入框的元素节点才有。

dom_byclassname
document.getElementsByClassName();
功能：获取node节点下，所有符合条件的元素节点。
参数：class
返回值：所有符合条件的元素节点组成的数组。

【注】getElementsByTagName在低版本IE浏览器不支持。
封装函数，封装一个兼容的方法

*通配符任意类型的元素节点

dom_获取当前样式

获取当前有效样式

getComputedStyle(元素节点)[获取样式类型];火狐/谷歌/safari支持

元素节点.currentStyle[获取样式类型]; IE
【注】浏览器兼容

获取当前样式的兼容函数
function getStyle(elem,attr){
return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}

dom_封装函数
【注】css选择器
   #id   通过id获取元素节点
   .class 通过className获取元素节点
   tagName 通过tagName获取元素节点
   name=xxx通过name获取元素节点

window.onload = function(){
//id
alert($("#div1").innerHTML);

   //className
   alert($(".box").length);
   alert($(".box")[1].innerHTML);

//tagName
alert($("div").length);

   //name
   //alert($("name=hello").length);
   //alert($("name=hello")[0].innerHTML);
}

dom_attribute方法
set/getAttribute()
removeAttribute()

【注】都是操作当前元素节点中某个属性的。

上述两种方式的区别
<1>class属性范围区别，点操作是通过className，而set/getAttribute是通过class
<2>set/getAttribute是用户自定义属性支持。
<3>removeAttribute删除属性

dom_元素节点属性
childNodes 获取当前元素节点的所有的子节点，包括两种节点类型
1、元素节点
2、文本节点

DOM节点类型
元素节点文本节点属性节点

【注】节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue。

firstChild 快速找到元素节点子节点的第一个
lastChild 快速找到元素节点子节点的最后一个

dom_删除空白节点
包括回车换行 tab键空格字符

【问题】如何将空白节点取出。
【注】识别出空开节点。

/^\s+$/.test() 使用左侧的正则去进行验证，如果是空白节点，返回true，否则返回false

//删除空白节点
function removeSpaceNode(nodes){
   var result = [];//用来存放不是空白节点的节点的
   for(var i = 0;i < nodes.length;i++){
       //判断是否是空白节点
       if(nodes[i].nodeValue == 3 && /^\s+$/.test(nodes[i].nodeValue)){
           continue;
       }
       result.push(nodes[i]);
   }
}

【注】删除数组元素的时候，必须倒序删除。

dom_元素节点属性和attributes
ownerDocument 属性
【注】ownerDocument
属性返回该节点的文档对象根节点，返回的对象相当于 document。

parenNode、previousSibling、nextSibling属性
parenNode 属性返回该节点的父节点
previousSibling属性返回该节点的前一个同级节点
nextSibling 属性返回该节点的后一个同级节点

属性节点
attributes属性返回该节点的属性节点集合。

dom_创建带文本的元素节点
【注】document.write()添加内容的时候，会将原有的页面上的内容覆盖掉。

createElement()
【格式】document.createElement(标签名);

appendChild()
【格式】parent.appendChild(newNode)
功能：将newNode插入到parent子节点的末尾。

createTextNode()
【格式】document.createTextNode(文本)
功能：创建文本节点。

【注】创建一个带文本的元素节点呢？

function createElementWidthTxt(tagName,txt){
   var node = document.createElement(tagName);
   var oTxt = document.createTextNode(txt);
   node.appendChild(oTxt);
   return node;
}

dom_insertbefore
【格式】父节点.insertbefore(插入的节点，旧节点);
功能：将插入的节点插入到旧节点之前。

<1>创建strong
引用之前的封装函数

var oSpan = document.getElementsByTagname("span")[0];
找到第一个span

<2>进行插入
oSpan.parentNode.insertbefore(node,oSpan);

DOM里insertAfter()这个方法是没有？

dom_元素节点操作方法
replaceChild()
【格式】parent.replaceChild(newNode,oldNode);
功能：用newNode将oldNode给替换掉。

cloneNode()
【格式】node.cloneNode()
功能：克隆节点
返回值：新克隆出来的节点
参数：true默认是false 如果传true，就会复制元素节点中的innerHTML

removeChild()
【格式】node.parentNode.removeChild(node);
功能：删除节点

构造函数和继承
function Person(name,age){
this.name = name;
this.age = age;
}

Person.prototype.sayHello = function(){
alert(this.name);
}

//1、创建一个对象
//2、this指针指向了这个对象
//3、执行构造函数内的代码
//4、将构造函数返回
var p = new Person();

function Student(name,age,id){
   //两种方法皆可
   //Person.apply(this,[name,age])
   Person.call(this,name,age);
   this.id = id;