二、原生JS入门（零基础）
1.js基础
1.1 注释
单行注释 //
多行注释/**/
1.2 变量及命名规则
变量的声明，定义、
var a=10
var是关键字 a是变量名 =是赋值号 10 是值 var后边需要有空格
变量的命名规则 变量是由数字、字母、下划线（_）和美元符号（$）的一种或者几种组成，且不能以数字开头,严格区分大小写。不能用保留字和关键字。
1.3 变量的类型
数值（number）
字符串（string）
布尔（boolean）
undefined：区分一个变量是声明未赋值还是 未声明。声明一个变量未赋值，该变量默认取 underfined。
null：声明这个变量用来保存一个具体的对象，但是这个对象 目前还不存在。
对象（object）
1.4 算术、赋值、关系运算符
算术运算符+ - * / %
赋值运算符：当赋值号左右两边变量名一致时。
= += -= *= /= %=
关系运算符：结果为ture/false
< > >= <= == != === !==
1.5 逻辑运算符
&& 与 ||或 !非
运算结果可以是布尔值也可以是其他类型的值
规律
逻辑与
如果第一个操作数为true或者能隐式转换为true，则运算结果为第二个操作数
如果第一个操作数为false或者能隐式转换为false，则运算结果为第一个操作数
例：
console.log(2&&6,2&&-10,0&&10,false&&20,true&&0);
逻辑或
如果第一个操作数为true或者能隐式转换为true，则运算结果为第一个操作数
如果第一个操作数为false或者能隐式转换为false，则运算结果为第二个操作数
例：
console.log(undefined || 10, false || 0, 10 || true, true || 10);
1.6 类型转换
javaScript类型转换
显式/强制转换（转型函数）：Number（） String()（） Boolean（） parseInt（）从第一个为数字的字符串开始到非字符串结束parseFloat（）可以取到小数后边的字符 。
隐式转换：
算数运算符：+有一个类型为字符串，内容进行拼接。- * / 不管为什么类型都 转换为数值。
关系运算符：两个字符串进行比较，不转换，按位比较。单个字母的字符串比较，按各自的ascll码比较。
数值直接 比大小。
只有一个字符串或者没有字符串，其他类型转换成数值。
NaN和任何数值比较都为false。
null>0 false
null<0 false
null=0 false
null>=0 ture
null<=0 ture
null!=0 ture
例如：
console.log( number("") , number(" ") , number(true) , number(false) , number(underfined) , number(null) , )
0 0 1 0 NaN 0
console.log( string(1) , string(0) , string(true) , string(false) , string(underfined) , string(null),)
1 0 true false undefined null
console.log(boolean(1) , boolean(0) , boolean("") , boolean(" ") , boolean(underfined) , boolean(null) , )
true false false true false false
有就是true 没有就是false
1.7 自增，自减
a++：先赋值，再加一；
++a：先加一，再赋值；
例：
var i = 10;
console.log(i++ + i + ++i - i + ++i + i++ + i);
//10 + 11 + 12 - 12 + 13 + 13 + 14
1.8 进制
二进制 0 1 逢2进1
八进制 0-7 逢8进1
十进制 0-9 逢10进1
十六进制 0-9 A-F
八进制 ES5里以0开头 后面跟0-7之间的数字
var num1 = 011;//1*8的0次方 + 1*8的一次方
num1 = 017;//7*8的0次方 + 1*8的一次方
console.log(num1);
1.9 程序结构
1.9.1 顺序结构
代码从上到下依次执行
1.9.2 分支结构
（1）、单分支：
if(条件){
可执行语句 在条件为真（true或者能转换为true）时执行
}
例：
var temp = 18;
if(temp>=26){
document.write("脱衣服");
}
if(temp<20){
document.write("加衣服");
}
（2）、双分支：
if(条件){
条件为真时执行的代码
}else{
条件为假时执行的代码
}
例：
if(temp>=26){
document.write("a");
}else{
document.write("b");
}
（3）、多分支：
if(条件){
}else if(条件){
}else{
}
1.9.3 循环结构和break、continue
循环：重复执行相同的代码，得到相同或者不同的结果，减少冗余
循环结构的几种写法：目前三种，while（）{} ; do while() ; for(;{}
循环的嵌套：一个循环里（{}里）套循环
结束循环的关键字：continue break
continue ：结束当此循环，继续执行后续的循环
break： 直接结束整个循环，就近结束（如果是嵌套，里边break直接结束，然后外面的循环继续执行）
for循环：
表达式1:循环变量的初始化
表达式2:循环条件
表达式3:循环变量的变化
先执行表达式1，再执行表达式2，然后执行花括号里的代码，最后执行表达式3
先执行表达式2，再执行花括号里的代码，最后执行表达式3
for循环的嵌套：
for(var i = 1; i <= 5; i++){
for(var j = 1; j <= 3; j++){
console.log("a");
}
}
死循环：
循环条件恒假
for(var i = 1; i >= 10; i++){
console.log(i);
}
恒真
for(var i = 11; i >= 10; i++){
console.log(i);
}
switch
值是有限的，并且是确定的
switch(变量或者表达式){
case 值1:
statements;//如果变量的值和值1相等，则执行
break;
case 值2:
statements;//如果变量的值和值2相等，则执行
break;
……
case 值n:
statements;
break;
default:
statements;
}
switch后小括号里的变量和case后的值是一个全等比较（===）
switch(week){
//case 穿透
case 1:
case 2:
case 3:
case 4:
case 5:
document.write("好好学习");
break;
case 6:
document.write("好好自习");
break;
case 0:
document.write("好好休息");
}
案例
12、求1+2!+3!+…+20!的值
方法一：
13、篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的弹起高度小于0.1米。
14、有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻重量是0.00001kg，第二个里面放2粒，第三个里面放4，棋盘上放的所有芝麻的重量
2.函数
2.1 函数的概念
函数是由事件驱动或者被调用是可重复执行的代码块（放于代码块里{}）
好处：减少代码冗余，增加灵活性，便于维护，提高可扩展性（维护）。
2.2 函数的创建方式
1；函数声明
function 函数名（）{
//具体语句
}
2；函数表达式
var 函数名= function （）{
//具体语句
}
3；借助内置一个方法（Function），构造函数方式
var 函数名 = new Function（）；
2.3 函数的参数
求两个参数的和，借助参数
形参和实参
形参：当定义一个函数时，在小括号里写的变量
实参：在调用一个函数时，小括号里面写的值或变量
形参和实参是一 一对应的
形参比实参，多余的形参默认会取到undefiend
实参比形参多，多余的实参无效
//打印一个表格
/*function createTable(m,n){
var str = "";
for(var i = 1; i <= m; i++){
str += "";
for(var j = 1; j <= n; j++){
str += "1 ";
}
str+=" ";
}
str += "
";
box.innerHTML = str;
}
createTable(100,50);*/
2.4 js执行及声明提升
js引擎在执行js代码时的两步操作：
1.先扫描环境中所有的声明（变量声明，函数声明），将这些声明提升至对应环境的最顶端
2.具体的代码执行，在对应的地方进行执行
3.通常情况下，所有的局部变量在函数执行完毕后立即销毁
/*console.log(a);//undefined 声明提升
var a = 10;
console.log(a);//10*/
/*foo();
function foo(){ //声明提升 整体提升
console.log("a");
}*/
//console.log(foo);
/*foo(); //报错 foo is not a function ， is undefined
var foo = function(){ //提升 提升的是函数名
console.log("a");
}*/
2.5 argument和return
arguments:在函数内使用，表示传给该函数的所有的实参的集合
在无法确认形参的个数，有需要传递实参时
function foo(){
console.log(arguments)
console.log(arguments[0]);//取到第一个实参
console.log(arguments[3]);//取到第4个实参
console.log(arguments.length);//实参的个数
console.log(arguments[arguments.length-1]);//取最后一个实参
//取到所有的实参，将实参打印出来
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
foo(1,2,3,5,6,7,8);
return ：
1.结束函数执行
2.函数的返回值 函数运行之后的结果
如果一个函数没有return或者return后面没有具体的值，则函数的返回值为undefined
function bar(){
return 10;
}
var a = bar();
console.log(a);
function doAdd(a,b){
var sum = a+b;
return sum;
}
var a = doAdd(1,2);
console.log(a);
alert(a);
案例
1、编写一个函数，计算两个数字的和、差、积、商
要求：使用传参的形式
2、 编写一个函数，计算三个数字的大小，按从小到大顺序输出
2.6 作用域
变量或者函数能够被访问到的范围-----全局作用域、局部作用域
全局作用域：
1、最外层函数外通过var来声明的变量或者声明的函数具有全局作用域
var a = 10;//全局变量
function foo(){//全局函数
console.log(a);
}
foo();
2、在函数内不通过var来定义的变量
function foo(){
var a = 10;
b = 20;//全局变量 通常不推荐这种写法
}
foo();
//console.log(a);
console.log(b);
3、window对象的属性和方法具有全局作用域（当环境中未定义，而直接可以使用的一些变量或者函数）
foo();
//alert("hello")
//console.log(name);
//console.log(window);
局部作用域：
1、在函数内部通过var来声明的变量
function foo(){
var a = 10;//局部变量
console.log(a);
function bar(){ //局部函数
}
}
foo();
2、函数的形参具有局部作用域，局部变量
function foo(x){
console.log(x);
}
foo();
console.log(x)
;
**ES5中，函数是区分全局和局部唯一的代码块
2.7 递归函数
递归函数：在一个函数内部调用自身，称该函数为递归函数
unction foo(){ //foo就是递归函数
foo();
}
foo();
例：
1、
2、利用递归求斐波那契数列
1、1、2、3、5、8、13、21、34、55……
F(0)=0，F(1)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*）
方法一：
function feiBo(n){
if(n==0){
return 0;
}
if(n==1){
return 1;
}
return feiBo(n-1)+feiBo(n-2)
}
var num = feiBo(50);
console.log(num);
//todo 借助循环 取第n项
方法二：
function feiBo(n){
var a1 = 1;
var a2 = 1;
if(n==1){
return a1;
}
if(n==2){
return a2;
}
for(var i = 3; i <= n; i++){
var a = a1+a2;
a1 = a2;
a2 = a;
}
return a;
}
console.log(feiBo(50));
2.8 构造函数
构造函数：一个普通函数，当它和new运算符一起使用时，该函数称为构造函数，通常会将构造函数的首字母大写
function Person(){
}
//可以看成是一个类
var liuxin = new Person();
var wangyue = new Person();
对象类型：
var obj = {};
是一个对象，但是这个对象没有属性和方法
person有两个属性：name和age，有一个方法：sayHello
键值对（名值对）
var person = {
name: "john",
age: 20,
sayHello: function(a){
console.log("hello"+a);
}
}
如果来取到属性值，如果来调用方法 对象名.属性名 对象名.方法名()
如果一个对象没有某个属性或者方法，那么取值时会得到undefined
console.log("我叫"+person.name+"今年"+person.age+"岁啦");
person.sayHello("world");
添加属性 如果对象里已经有某个属性，会覆盖
person.sexy = "male";
person.sexy = "female";
删除：
delete person.sexy;
案例：
1、利用递归求两个数的最大公约数
function getMaxDivision(m,n){
var r = m % n;
m = n;
n = r;
if(r==0){
return m;
}else{
return getMaxDivision(m,n);
}
} console.log(getMaxDivision(56,42));
2、求某个数的阶乘
function jc(n){
//临界条件
if(n==1){
return 1;
}
return n*jc(n-1);
}
var result = jc(5); // 5*jc(4)->5*4*jc(3)->5*4*3*jc(2)->5*4*3*2*jc(1)->5 4 3 2 1
console.log(result)
3、随机的四位数字验证码
function getRandCode(){
var str = "";
for(var i = 0; i < 4; i++){
var num = parseInt(Math.random()*10);
str += num;
}
return str;
}
code.innerHTML = getRandCode();
4、编写任意个数字的求和、差、积、商的函数
function exec(){
var he = arguments[0],
cha = arguments[0];
//var he = cha = ji = shang = arguments[0];
for(var i = 1; i <= arguments.length; i++){
he += arguments[i];
cha -= arguments[i];
}
document.write(he,cha);
}
exec(1,2,3,4,5,6);
5、编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数
比如： 计算0-3之间能组成的奇数个是01、21、03、13、23、31
function getOdd(m,n){
if(m>=10 || n >= 10){
return;
}
if(m>n){
var temp = m;
m = n;
n = temp;
}
for(var i = m,count=0; i <= n; i++){
for(var j = m; j <= n; j++){
if(i!=j&&j%2!=0){
count++;
console.log(""+i+j);
}
}
}
document.write(count);
}
getOdd(0,3);
6、某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文
function mi(a){
var yi=(parseInt(a/1000)+5)%10;
var er=(parseInt(a%1000/100)+5)%10;
var san=(parseInt(a%100/10)+5)%10;
var si=(a%10+5)%10;
var i=yi;
yi=si;
si=i;
var j=er;
er=san;
san=j;
document.write(yi,er,san,si)
}
mi(1567);
7、编写一个函数，输入n为偶数时，调用函数求1/2+1/4+…+1/n,当输入n为奇数时，调用函数求1+1/3+…+1/n
function foo(n){
var sum=0;
if(n%2==0){
for(var i=2;i<=n;i+=2){
sum+=1/i
}
}else{
for(var i=1;i<=n;i+=2){
sum+=1/i;
}
}
document.write(sum)
}
foo(4)
3.数组
3.1数组的概念和创建
数组的概念：有序的值的集合，表现在索引上。通过索引（下标）来取值，索引从0开始，到arr.lenght-1结束。
对象的概念：无序的值的集合，由属性和方法组成，通过属性名和方法名取值。
数组的创建方式:字面量[]、构造函数
字面量：
var arr = [1,2,3];
arguments 伪数组或者类数组对象
取数组中的值，通过索引或者下标
console.log(arr[0]);//数组中第一个元素
console.log(arr.length);//数组中元素的个数
console.log(arr[arr.length-1]);//数组中的最后一个元素
添加一个元素：
arr = [1,2,3,4];
或者：arr[3]=4;
console.log(arr[5]);//undefined 如果一个数组没有那么多元素，但是通过索引取到超出范围的值，这个值为undefined
构造函数：
var arr2 = new Array(1,2,3);//参数表示数组中的元素
var arr3 = new Array(3);//表示数组中元素的个数 arr3.length为3
3.2数组中常用的方法
方法是相对于对象而言
数组也是对象，如下：
var arr = [];
console.log(typeof arr); //object
方法的功能，传递的参数，返回值，对原数组是否有影响
（1）、push() 向数组尾部追加元素（push的参数），返回数组中元素的个数，原数组发生改变
var arr = [1,2,33,44];
var a = arr.push(1,2,3);
console.log(a,arr);
输出：7 (7) [1, 2, 33, 44, 1, 2, 3]
（2）、pop() 从数组的尾部删除一个元素，返回这个删除的元素，原数组发生改变
var arr = [1,2,33,44];
var a = arr.pop();
console.log(a,arr);
输出：44 (3) [1, 2, 33]
（3）、unshift() 向数组的头部追加元素，返回数组中元素的个数，原数组发生改变
var arr = [1,2,33,44];
var a = arr.unshift(1,2);
console.log(a,arr);
输出：6 (6) [1, 2, 1, 2, 33, 44]
（4）、shift() 从数组的头部删除一个元素，返回这个删除的元素，原数组发生改变
var arr = [1,2,33,44];
var a = arr.shift();
console.log(a,arr);
输出：1 (3) [2, 33, 44]
（5）、slice 截取数组 如果0参数，返回原数组，1个参数，从该参数对应的索引开始截取，直至数组结束，返回截取的数组，如果两个参数，从第一个参数对应的索引开始截取，到第二参数对应的索引结束，不包括第二个索引对应的元素，反回截取的数组，原数组不发生改变。最多两个参数
var arr = [11, 22, 33, 55];
var a = arr.slice(1,3);
console.log(a, arr);
输出：(2) [22, 33] (4) [11, 22, 33, 44]
（6）、splice 截取数组 如果0参数，返回空数组，1个参数，从该参数对应的索引开始截取，直至数组结束，返回截取的数组，如果两个参数，从第一个参数对应的索引开始截取，第二个参数表示截取的长度，反回截取的数组，三个及以上的参数，第三个及后续参数会从截取的位置添加到原数组中。原数组发生改变
var arr = [11, 22, 33, 55];
var a = arr.splice(1, 2, 77, 88);
console.log(a, arr);
输出：(2) [22, 33] (4) [11, 77, 88, 55]
（7）、reverse 数组翻转，原数组发生改变
var arr = [1,2,3,4];
arr.reverse();
console.log(arr);
输出：[4,3,2,1]
（8）、sort() 排序按位排序，原数组发生改变
var arr = [5,8,2,6,7];
arr.sort();
console.log(arr);
输出：[2,5,6,7,8]
（9）、join() 将数组转换成字符串,数组元素之间以参数来拼接，原数组不发生改变
var arr = [1,2,3,4];
var str = arr.join("++++++");
console.log(str);
输出：1++++++2++++++3++++++4
（10）、concat() 合并数组，原数组不发生改变
var arr = [1,2,3,4];
var a = arr.concat([5,6]);
console.log(a,arr);
输出：(6) [1, 2, 3, 4, 5, 6] (4) [1, 2, 3, 4]
3.3数组的遍历
概念：从头到尾对数组中的元素访问了一遍
3.4数组排序
1、冒泡排序：数组中的元素两两进行比较，如果第一个数比第二个数大，交换位置，第一轮结束后，最大值排在最后边；进行第二轮的两两比较，第二大的值也能拍出来；以此类推
function bubbleSort(arr){
for(var i = 0; i < arr.length-1; i++){ //轮数比长度少一
for(var j = 0; j < arr.length-1-i;j++){//每轮比较的次数
if(arr[j]>arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
console.log(arr);
2、选择排序：假设第一个值为最小值，设一个变量minIndex指向这个最小值对应的索引，然后让minIndex对应的值和剩余所有的值进行比较，有比minIndex对应的值小的，改变minIndex的指向，最终确定一个最小值，让minIndex对应的这个最小值和第一个值交换位置；假设第二个值为最小值，minIndex指向这个所用，让第二个值和剩余所有值进行比较，就可以找到minIndex对应的第二个小值索引，让第二小的值和第二个值交换位置，以此类推
function selectSort(arr){
for(var i = 0; i < arr.length-1; i++){
//假设第i个值为最小值
var minIndex = i;
for(var j = i+1; j < arr.length; j++){
if(arr[minIndex]>arr[j]){
minIndex = j;
}
}
var temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var arr1 = [6,9,4,11,5,8];
console.log(selectSort(arr1));
案例：
1、定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。
//var arr = [2,4,6,8,10]
var arr = [];
var newArr = [];
var sum = 0;
for(var i = 0; i < 30; i++){
arr[i] = (i+1)*2; //arr[0] = 2 arr[1] = 4
//arr.push((i+1)*2)
sum += arr[i];//求和
if((i+1)%5==0){ //每5个求平均值
newArr.push(sum/5);
sum = 0;
}
}
console.log(newArr);
2、编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型
function has(arr,num){
for(var i = 0; i < arr.length; i++){
if(arr[i]===num){
return true;
}
}
return false;
}
var arr1 = [10,20,30,40];
console.log(has(arr1,200));
3、有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中。
function sort(arr,num){
for(var i = 0; i < arr.length; i++){
if(num<=arr[i]){
arr.splice(i,0,num);
break;
}
}
if(num>arr[arr.length-1]){
arr.push(num);
}
return arr;
}
console.log(sort(arr,10000));
4、密码强度 强 中 弱 大写字母 小写字母 数字
方法一：txt.onchange = function(){
var flag1 = false,
flag2 = false,
flag3 = false;
var val = this.value;
for(var i = 0; i < val.length; i++){
if(str1.indexOf(val[i])!=-1){
flag1 = true;
}
if(str2.indexOf(val[i])!=-1){
flag2 = true;
}
if(str3.indexOf(val[i])!=-1){
flag3 = true;
}
}
//判断
if(flag1&&flag2&&flag3){
alert("强");
}else if(flag1&&flag2 || flag1&&flag3 || flag2&&flag3){
alert("中");
}else{
alert("弱");
}
}
方法二：txt.onchange = function(){
var flag1 = 0,
flag2 = 0,
flag3 = 0;
var val = this.value;
for(var i = 0; i < val.length; i++){
var code = val[i].charCodeAt(0);
//65-90
if(code>=65&&code<=90){
flag1 = 1;
}
//97-122
if(code>=97&&code<=122){
flag2 = 1;
}
//48-57
if(code>=48&&code<=57){
flag3 = 1;
}
}
var sum = flag1 + flag2 + flag3;
if(sum==3){
alert("强");
}else if(sum==2){
alert("中");
}else{
alert("弱");
}
}
3.5 严格模式与普通模式的区别
严格模式：
1、变量声明
2、禁止使用with
3、设立eval作用域
4、函数中的this指向问题
5、删除变量
6、函数参数不能重名
7、八进制字面量表示法
8、arguments不追踪参数变化
3.6 ES5新增的数组方法
1、indexOf 返回某个值在数组中的索引，如果数组中没有这个值，返回-1
通常会用这个方法去判断一个数组中是否含有某个元素
2、forEach：相当于遍历，第一个值是属性值，第二个值是索引
3、filter 根据条件过滤出符合要求的数组元素
var arr = [10,20,30,40];
var a = arr.filter(function(item){
return item > 20;
});
console.log(a);
输出：
0: 30
1: 40
length: 2
4、some 只要有一个符合条件 every每一个都要符合条件 返回值为布尔值
var a = arr.some(function(item){
return item > 20;
});
var b = arr.every(function(item){
return item > 2;
});
console.log(a,b);
输出：true true
5、reduce(对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。
3.7字符串的创建方式和常用方法
字符串的创建方式：字面量，构造函数
字面量：
var str = "abc",str1 = '123';
构造函数：
var str2 = new String("abc");
方法：
1、charAt(n) 返回索引位为n的字符
2、indexOf() 返回索引值或者-1
3、slice(m,n) 如果m>n 取值为空字符串 substring(m,n)如果m>n 交换m,n的值
4、split 用于把一个字符串分割成字符串数组。
5、trim 去除首尾空格
3.8 Math对象常见API
abs(x)：返回绝对值
ceil：对数进行上舍人
floor：对数进行下舍入
sqrt：返回数的平方跟
random：返回0-1之间的随机数
round：把数四舍五入为最接近的整数
案例
敏感字过滤
btn.onclick = function(){
var str = "tmd";
var val = txt.value;
val = val.replace(str,"***");
box.innerHTML += ""+val+"
";
}
随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么
var num=parseInt(Math.random()*10000);
var str=num.toString();
var len=str.length;
document.write("数为："+str+"
"+"位数为："+len+"
"+"
");
for(var i=0;i")
}
编写一个函数，获得一个十六进制的随机颜色的字符串(例如：#20CD4F)
var str="0123456789ABCDEF"
var randstr = "#";
for(var i = 0; i < 6; i++){
var randIndex = Math.floor(Math.random()*str.length);
var randCode = str[randIndex];
randstr+=randCode;
}
document.write(randstr);
四位的混合验证码
方法一：var str = "ABCDEFG0123456789";
var randstr = "";
for(var i = 0; i < 4; i++){
var randIndex = parseInt(Math.random()*str.length);
var randCode = str[randIndex];
randstr+=randCode;
}
console.log(randstr);
方法二：var chars = "";
while(chars.length<4){
var randCode = Math.floor(Math.random()*43)+48;
if(randCode>=48&&randCode<=57 || randCode>=65&&randCode<=90){
chars += String.fromCharCode(randCode);
}
}
console.log(chars);
3.9日期对象创建
日期对象的创建
当前日期
var oDate = new Date();
指定日期
var oDate1 = new Date("2019-10-1 12:00:00");
oDate1 = new Date("2019/5/1 12:12:12");
1970年1月1日 0时0分0秒所有经历毫秒数
var oDate3 = new Date(1000);
1、日期处理
oDate.getDate() 返回一个月中的某一天 (1 ~ 31)
oDate.getDay() 返回一周中的某一天 (0 ~ 6)
oDate.getMonth() 返回月份 (0 ~ 11)
oDate.getFullYear() 以四位数字返回年份
oDate.getHours() 返回当前小时（0-23）
oDate.getMinutes() 返回当前分钟 (0 ~ 59)
oDate.getSeconds() 返回当前秒(0 ~ 59)
oDate.getMilliseconds() 返回当前毫秒(0 ~ 999)
oDate.getTime() 返回1970年1月1日至今的毫秒数
oDate.setDate() 设置月中的某一天 (1 ~ 31)
oDate.setMonth() 设置月份 (0 ~ 11)
例：oDate.setMonth(9); alert(oDate.getMonth())
oDate.setFullYear()设置年份（四位数）
oDate.setHours() 设置小时（0-23）
oDate.setMinutes() 设置分钟 (0 ~ 59)
oDate.setSeconds() 设置秒(0 ~ 59)
oDate.setMillisenconds() 设置毫秒(0 ~ 999)
oDate.setTime() 设置1970年1月1日至今的毫秒数
2、日期操作
（1）、获取年份：
var year = oDate.getFullYear();
（2）、0-11 0表示一月
var month = oDate.getMonth();
（3）、当天日期
var date = oDate.getDate();
（4）、0-6 0表示周日
var week = oDate.getDay();
（5）、当前小时
var hours = oDate.getHours();
（6）、返回1970年1月1日至今的毫秒数
var times = oDate.getTime();
（7）、设置日期，某个方面
oDate.setDate(50);
（8）、设置20天之后的日期
oDate.setDate(oDate.getDate()+20);
（9）、月份
oDate.setMonth(10);
（10）、小时
oDate.setHours(12);
3、封装日期函数
判断某年份是否为闰年
function isLeapYear(year){
if(year%4==0&&year%100!=0 ||year%400==0){
return true;
}
return false;
}
将日期格式化输出 “2015|08|24”
function format(s){
var oDate = new Date();
var year = oDate.getFullYear();
var month = oDate.getMonth()+1;
var date = oDate.getDate();
if(month < 10){
month = "0" + month;
}
if(date < 10){
date = "0" + date;
}
return year+s+month+s+date;
}
获得某个月份的天数
function getDays(year,month){
switch(month){
case 2:
if(isLeapYear(year)){
return 29;
}
return 28;
case 4:
case 6:
case 9:
case 11:
return 30;
default:
return 31;
}
}
判断两个日期相差的多少天多少时多少分多少秒
function getNDay(date1,date2){
var ms = Math.abs(date2-date1);
var ss = ms/1000;
var day = Math.floor(ss/3600/24);
var hour = Math.floor(ss/3600%24);
var minute = Math.floor(ss/60%60);
var second = Math.floor(ss%60);
return "剩余"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
}
var date1 = new Date();
var date2 = new Date("2019-7-19 12:00:00");
document.write(getNDay(date1,date2))
获得N天以后的日期
function getNDate(n){
var oDate = new Date();
oDate.setDate(oDate.getDate()+n);
return oDate;
}
4、清除定时器
定时器：setInterval(fn,time); 每隔一个time(毫秒)时间间隔，就执行一次fn
var timer = setInterval(function(){
console.log("aa");
},1000);
clearInterval(timer);
setTimeout延时器
clearTimeout清除延时器
5、倒计时
var count = 5
var a = setInterval(function(){
count--;
box.innerHTML = count;
if(count==0){
clearInterval(a);
box.innerHTML = "倒计时结束";
}
},1000);
6、三元运算符
操作数1?操作数2:操作数3
操作数1是条件 操作数2是满足条件时输出的 操作数3是不满足条件输出的
和if else相同
if(n < 10){
n = "0" + n;
}else{
return n;
}
return n<10?"0"+n:n;
4.BOM、DOM及相关对象
BOM的概念：浏览器对象模型 提供了独立于页面和浏览器相关的一些操作方法和属性
浏览器代理检测： navigator.userAgent
判断浏览器类型、判断是移动端还是PC
"Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"
4.1判断移动端还是PC端
var agent = navigator.userAgent;
var arr = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; 操作系统和手机型号
arr.forEach(function(item){ //列出数组的每个元素。
if(agent.indexOf(item)!=-1){
location.href = "Mobile.html";
}
})
4.2判断当前浏览器是什么类型的
属性名navigator
Trident IE浏览器 Chrome谷歌浏览器 FireFox 火狐浏览器
console.log(navigator); 打印window属性名
console.log(navigator.userAgent); 判断浏览器浏览器（内核）
使用方法：
var agent = navigator.userAgent;
if (agent.indexOf ("Trident") != -1 ){
alert("IE");
}
4.3location对象
属性：
protocol、获取当前的协议 http：
host或hostName 获取当前主机 放到服务器 8020端口号
pathname、 获取服务器对应的硬盘 获取路径
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
port、 获取端口号
href、 获取页面完整的路径 可读写的属性
hash、 设置或返回从井号 (#) 开始的 URL（锚）。
方法：
assign(url), 跳转，有历史记录，能返回
replace(url) , 无历史记录
reload()本页面重新加载
location.href = “http://www.baidu.com”;//页面跳转到执行的url*/
btn.onclick = function(){
//location. (“location1.html”)//有历史记录，能返回
//location. (“location1.html”);//无历史记录
location. (“location1.html”);//本文档重新加载
//一个页面 学员信息 添加学员信息按钮 添加信息之后 通常需要刷新 才会显示最新添加的数据 调用reload方法，让其自动刷新
window.open(); 开启一个新窗口**
window.close(); 关闭窗口**
1.1prompt 没样式要求的话可以用这个
1.2confirm 确认框
1.3alert(arg1)/prompt
var val = prompt(“请输入年龄”);//返回输入值
console.log(val);
1.4(arg1,arg2)/confirm(arg1)
var flag = confirm(“你确定要离开？”) //返回布尔值
console.log(flag)
4.4 history对象
history对象保存着用户上网的历史记录,从窗口被 打开的那一刻算起
历史记录 back 后退 go 转到 forwaed前进
history文件 写个小案例
scrollTop:可视区域顶部距离页面局部的距离 竖直方向 滚东条（滚动距离）
用逻辑或处理 兼容性的问题。 可读可写
var st = document.documentElement.scrollTop || document.body.scrollTop;
scrollLeft:可视区域水平距离页面局部的距离 水平方向滚动条
var st = document.documentElement.scrollLeft || document.body.scrollLeft;
clientWidth： 可视区域的宽度 var 变量名 = 。。。
例：document.documentElement.clientWidth
clientHeight: 可视区域的高度 var 变量名 = 。。。
例：document.documentElement.clientHeight
BOM 两个方法
window.onscroll事件 滚动条滚动时间 只要滚动条动就出发时间处理函数执行
window.onresize事件 窗户尺寸改变
定时器
var 变量名 = setinterval（ fn，time）；开启定时器
clearInterval（变量名）；清除定时器
定时器时一个异步函数
浏览器单线程的 先运行 主体 在运行定时器；
延时器 setTimeout(fn，time) 隔time这个时间，fn执行一次
4.5DOM的增删改查
p test
div test
div name
1、增加 先创建再增加
元素节点
var oDiv = document.createElement("div");
var oSpan = document.createElement("span");
文本节点
var oTxt = document.createTextNode("文本节点");
oSpan.appendChild(oTxt);把文本放在oSpan里
oDiv.appendChild(oSpan);//把oSpan放到oDiv里面
document.body.appendChild(oDiv);//把oDiv放到body尾部
2、查询 获取DOM对象
6种 4种 通过id className tagName name 2种 选择器
（1）、id 是唯一的 无兼容性
var oDiv = document.getElementById("box");
console.log(box);//通过id名直接取DOM对象的方式没有标准支撑 后续代码 测试的话可以使用id
（2）、tagName 集合 无兼容性
var aDiv = document.getElementsByTagName("div");
console.log(aDiv);
aDiv[0].style.backgroundColor = "red";
（3）、className 集合
var aTest = document.getElementsByClassName("test");
console.log(aTest);//集合 类数组对象 伪数组
aTest[0].innerHTML = "hello";
aTest[1].innerHTML = "world";
（4）、标签的name属性值
var aName = document.getElementsByName("name1");
console.log(aName);
aName[0].style.width = "100px";
（5）、querySelector 只取第一个dom对象
var oDiv = document.querySelector("#box");
var oDiv1 = document.querySelector(".test");
console.log(oDiv);
console.log(oDiv1);
（6）、querySelectorAll
var aTest = document.querySelectorAll(".test");
console.log(aTest);
3、替换
var oBody = document.getElementsByTagName("body")[0];
//var oSpan = document.createElement("span");
//var oSpan = document.getElementsByTagName("span")[0];//挪位置
//var oDiv = document.getElementById("box");
保留加替换
//var cloneNode = oSpan.cloneNode(true);
//document.body.replaceChild(cloneNode,oDiv);
//document.body.replaceChild(oSpan,oDiv);
replaceChild(newNode,oldNode)
4、删除 removeChild
var oDiv = document.getElementById("box");
document.body.removeChild(oDiv);
4.6DOM的属性节点
attributes：获取某个DOM对象的所有的属性节点
var oBox = document.getElementById("box");
console.log(oBox.attributes);
getAttribute()：获取某一个属性节点的值
var oBox = document.getElementById("box");
console.log(oBox.getAttribute("id"));
console.log(oBox.getAttribute("class"));
setAttribute()：给某个DOM对象添加属性节点
var oBox = document.getElementById("box");
oBox.setAttribute("id","box1");修改
oBox.setAttribute("class","test1");修改
oBox.setAttribute("name","application-name");增加
removeAttribute()：删除某一个属性节点
oBox.removeAttribute("name");
oBox.removeAttribute("id");
默认属性和自定义属性：
console.log(oBox.id,oBox.abc);
console.log(oBox.getAttribute("id"),oBox.getAttribute("abc"));
class
console.log(oBox.className);
获取行内样式：
4.7 节点类型
nodeType 元素节点1 属性节点2 文本节点3
var oBox = document.getElementById("box");
console.log(oBox.nodeType,oBox.nodeName,oBox.nodeValue);
var oTxt = document.createTextNode("test");
console.log(oTxt.nodeType,oTxt.nodeName,oTxt.nodeValue);
console.log(oBox.attributes[0].nodeType,oBox.attributes[0].nodeName,oBox.attributes[0].nodeValue);
子节点：
innerTest：纯文本，可读可写
innerHTML：编译标签。可读可写
outHTML：本身及内部
高级选取：
firstChild\firstElementChild 第一个子节点
选取第一个子节点。有顺序要求。兼容谷歌和IE低版本
oFirst=oUl.firstElementChild || oUl.firstChild
lastChild\lastElementChild 最后一个子节点
oLast=oUl.lastElementChild || oUl.lastChild
兄弟节点（有兼容性问题）
nextSibling\nextElementSibling 下一个节点
oNext=oUl. nextElementSibling || oUl.nextSibling
previousSibling\previousElementSibling 上一个节点
oPrevious=oUl. previousElementSibling || oUl. previousSibling
box.insertBefore(newNode, existNode)：在一个已知的节点前面插入一个新的节点
var oDiv = document.getElementsByTagName("div")[0];
var oSpan = document.createElement("span");
var oP = oDiv.children[0];
//oDiv.appendChild(oSpan);
oDiv.insertBefore(oSpan,oP);
文档碎片节点：优化代码，提高速度
var oList = document.getElementById("list");
var oFragment = document.createDocumentFragment();
for(var i = 0; i < 10; i++){
var oLi = document.createElement("li");
oFragment.appendChild(oLi);
}
oList.appendChild(oFragment);
关于取值
offsetWidth/offsetHeight：
oDiv.style.width 样式中width这个属性的属性值
clientWidth width + padding
offsetWidth width + padding + border
offsetLeft/offsetTop:
5.事件Event
5.1事件基础
JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。
当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。
事件处理函数
javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成，on + 事件名称,函数体
5.2鼠标事件
onclick:用户单击鼠标按钮或按下回车键时触发
ondblclick:当用户双击主鼠标按钮时触发
onmousedown:当用户按下鼠标还未弹起时触发
onmouseup：当用户释放鼠标按钮时触发
onmouseover：当鼠标移到某个元素上方时触发
onmouseout：当鼠标移出某个元素上方时触发
onmousemove：当鼠标指针在元素上移动时触发
onmouseenter onmouseleave
5.3HTML事件
onload：当页面或者资源完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。
onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发
onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发
onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发
onblur：当页面或元素失去焦点时在 window 及相关元素上触发
onsubmit：当用户点击提交按钮在元素上触发
onreset：当用户点击重置按钮在元素上触发
onresize：当窗口或框架的大小变化时在 window 或框架上触发
onscroll：当用户滚动带滚动条的元素时触发
5.4事件对象
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。
Event对象获取方式
事件对象：每一个事件触发时，都会产生一个事件对象
在事件处理函数里，有一个隐藏的参数，这个参数是系统自动分配的，它就是一个事件对象，对象里包含和事件相关信息
var evt = e || event;
event.button属性
当前事件触发时哪个鼠标按键被点击
clientX、clientY属性
鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离
screenX、screenY属性
鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离
offsetX、offsetY属性
鼠标相对于事件源的X坐标和Y坐标
pageX、pageY
鼠标相对于文档的X坐标和Y坐标
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
e.target
5.5事件流
三部分 捕获 事件源 冒泡
事件冒泡 ： 事件由内向外进行传播，需要在不同的DOM对象上添加相同事件
事件源： 直接触发事件产生那个DOM对象，跟在哪个事件处理函数无关，
阻止事件冒泡：evt.stopPropagation();
阻止冒泡的兼容性写法
if(evt.stopPropagation){
evt.stopPropagation();
}else{
evt.cancelBubble = true;
}
键盘事件keyup、keydown、keypress
onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发
onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
onkeyup：当用户释放键盘上的键触发
组合键ctrlkey、altkey、shiftkey
altKey属性，bool类型，表示发生事件的时候alt键是否被按下
ctrlKey属性，bool类型，表示发生事件的时候ctrl键是否被按下
shiftKey属性，bool类型，表示发生事件的时候shift键是否被按下
keyCode/which兼容
获取用户按下键盘的哪个键
键盘控制div移动
console.log(evt.keyCode,evt.which); //得到键盘码，可以用来判断用户是否按下了某个键
5.6事件默认行为及阻止方式
浏览器的默认行为
JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等
阻止默认行为的方式
event.preventDefault();//现代浏览器
event.returnValue = false;//IE低版本及部分现代浏览器
return false;//兼容性比较好，最好用到代码最后面
阻止a标签的默认：
阻止submit的默认：
文本框：
oInput.oninput = function(){
//console.log(this.value);
this.value = this.value.substr(0,10);从0开始截取，截取10位数
}
自定义右键菜单 oncontextmenu
- 菜单1