JS总结

一、JS概况

1.js文件可以放在页面任何一个位置。
2.js包括：ecmascript， bom， dom
3.

<script>
alert("holle world")
   </script>

弹出警告框
4.（1）页面插入js
（2）

<script src=""></script>

外部引入
5.在js中不区分换行，空格，缩进符。
6.语句：
一条语句后要加分号；
每一条语句都是一条指令；
7.js严格区分大小写。
8.js中字符都是英文半角。
9.常见输出语句：
（1）警告框
alert();数字可以直接使用，其他需加引号。
(2) 在文档中输出

document.write();

(3)在控制台输出

console.log();黑色日志
console.warn();黄色警告
console.error();输出红色错误
console.info();黑色信息

(4)弹出输入框
prompt(“请出入：”);
（5）确认框
confirm();
10.注释
单行注释 //
多行（文档）注释/* */
注释规则
1.行注释可以嵌套行注释
2.行注释中可以嵌套文档注释
3.文档注释中可以嵌套行注释

二、变量

1.变量的赋值 变量的初始化
多个变量中用逗号隔开
先定义 再赋值

var a;
a=100;
console.log(a);

2.定义变量的同时即初始化

var a=100;
console.log(a);

3.同时定义多个变量

var a,b,c;
a=100;
b='hello';
c='world';
console.log(a,b,c);

var a=100,b=200,c=3;
console.log(a,b,c);

4.变量允许重复赋值，以最后一次为准
5.定义变量，在内存中开辟空间
6.变量的内存是独立的空间，互不影响
7.变量的赋值，传递的是值

8.(1)变量未定义，直接输出 error
(2)变量未定义也可以赋值，（不推荐使用，污染变量的作用域）
(3)变量提升 预编译状态优先把var提前执行（不推荐）

num=10;
var num;
console.log(num);//10
//等价于
var num；
num=10；

三、数据类型

1.js的数据类型：
1）基本（原始）数据类型：
string 字符串类型 ’ ’ " " “123” “ture”
number 数值类型 所有数字
boolean 布尔类型 true（真）false（假）
null 空
undefined 未定义
2）引用类型:
内置5种：
Object Array Date Function RegExp
2.数据类型的检测：
typeof
运算结果自身是一个字符串类型
定义字符串类型

var a="hello";
console .log(typeof a);
var b=10;
console .log(typeof b);
var c=ture;
console .log(typeof c);
var d=null;//空
console .log(typeof d);//类型object
var add;//变量只声明未赋值
console .log(typeof add);

3.js是一种弱类型语言，js中的变量再顶义时候没有类型
变量的类型取决于变量中保存的内容
不能重复定义

四、表达式

random（）随机生成10以内的数。
流程控制语句
1，程序结构
1.1 顺序结构
程序的默认结构
1.2 分支（选择）结构

if
语法：
if(条件){
代码块;
}

执行规则：
若条件成立（true），则执行代码块

if...else
语法：
if(条件){
代码块;
}
else（条件）{
代码块2；
}

执行规则：
若条件成立（true），则执行代码块，否则执行代码块2；

if...else if...else...
语法：
if(条件1){
代码块1;
}
else if（条件2）{
代码块2；
}
else（条件3）{
代码块3；
}

执行规则：
若条件1成立（true），则执行代码块1，
若条件2成立（true），则执行代码块2，
否则执行代码块3
注意：分支语句只会执行一个分支

switch结构
语法：
switch(条件){
case 值:
代码块；
break;//结束
case 值:
代码块；
break;
case :
代码块；
break;
......
case值 :
代码块；
break;
case 值 :
代码块；
default;
break;
}

执行规则：
使用条件分别和case后面的制作比较，若相等则执行case对应的语句
若不成立，则执行default中的代码
只会执行一个分支
注意：该结构只能用于值得比较，不能用于范围比较
分支结构的嵌套：

1) if（条件1）{
if（条件2）{}
}
2) if（条件1）{
if（条件2）{}
}else{
if（条件3）{}
}

在条件1的情况下，执行条件2；
1.3 循环结构
1）for循环
语法：
for(循环变量的初始化；循环判断；循环迭代){
循环体；
}
执行规则：
第一步：循环变量的初始化 var i=0
第二步：循环条件的判断 i<=5
若判断结果为真。则执行循环体
若判断条件为假，则结束循环
第三步：循环迭代 i++
第四步：返回第二步

第一个条件是可以省略的
var i=0；

break：结束本次循环
continue：结束本次循环，继续下个循环
循环嵌套：外层循环执行一次，内层循环执行完

2）while循环
语法：
while（条件）{
循环体
}
执行规则：
若条件成立，则执行循环体

在不知道循环什么时候结束时，用while循环
知道时，用for
do…while循环
语法：
do{
循环体；
}while（条件）；
执行规则：
先执行 循环体一次，若条件成立，则继续执行循环体

五、运算符

运算符：那个运算的符号
根据操作数不同，一元运算符、二元运算符、三元运算符
根据功能不同：

1）算术运算符
+ - * / %(取余符号) ++(自增) --（自减）
结论：
1、自增自减运算符前置后置运算结果无影响

    	var a=3;
var b=a++;//a=4 b=3    运算符后置 先赋值后运算
var b=++a;//a=4 b=4    运算符前置 先运算后赋值
var a=10;
var b=20;
var c=a+b;
console.log(c);
console.log(a%b);
var a2="我"；
var b2="你"；
console.log(a2/b2)//NaN not a number

2）逻辑运算符
&&： 并且 逻辑与
若两边操作数均为真，则结果为真；其余都为假
|| ：或者 逻辑或
若两边操作数有一个为真，则结果即为真；若两边均为加，则为假；
！ ：非 取反
将真变成假，将假变成真

运算结果一般情况下是布尔类型（true,false）

真：true(除了数字0，其他数字均为真；
除了空字符串，其他字符串均为真)
假:false（在程序判断中 0 “” undefinde null也为真）

1，若逻辑运算符的操作数不是布尔类型，则运算结果也不一定是布尔类型
2，运输规则扩充：
1）&&
若第一个操作数为真，则整体运算结果即第二操作数
若第一个操作数为假，则结果为第一个操作数

var num=3;
a=1&&num++;
console.log(a)//3
console.log(num)//4

2）||
若第一个操作数为真，则结果为第一个操作数
若第一个操作数为假，则结果为第二个操作数

3）赋值运算符
= += -= *= /= %=

4）比较运算符(关系)

>  <   ==  >=  <=   ===  !=
运算结果一般情况下是布尔类型（true,false）
var a=3;
var b=5;
var a1="3"
var c=a==b;
c1=a>b;
c2=a==a2
console.log(c);//true
console.log(c1);//false
console.log(c2);true
"=="只比较数值

5）条件运算符
表达式1?表达式2: 表达式
运算规则：
若表达式1结果为true，则运算结果为表达式2
若表达式1结果为false，则运算结果为表达式3

运算符优先级
（）> 一元运算符 > 算术运算符 > 关系运算符 >逻辑运算符 >赋值运算符

6）“+”运算符
若+运算符两边有一个操作数为字符串类型，则进行拼接操作；
拼接的结果为字符串类型；

六、面向对象

在ES5中this指作用域对象 指调用者
面向对象编程：OOP
对象 class Es5 没有class 怪异的，非正统
函数来模拟对象 ----->面向对象编程

基于Object来完成

Array Date Function RegExp --->object

父类：超类，基类
子类：派生类
对象：
属性：变量
方法：函数
proto 对象（隐式原型对象）
prototype 对象（现式原型对象）
所有对象都能调用的方法：

call（obj，parms0，parms1......parms）
apply（obj,[值]）

两个方法功能一致，具有改变this指向能力
参数说明：
obj 对象 更改后this指向的对象
声明对象：
1、{} 代表空对象
new object（）； 创建新对象
2、function 对象名（属性）工厂模式
优点：能够批量创建对象
缺点：会为每一个都添加方法，造成内存浪费
3、构造函数创建对象
党构造函数被new关键字调用时，系统会自动创建一个object对象，为该对象绑定属性和方法
并且调用结束时，将该对象返回

function 对象名（属性）{
this.属性=属性；
this.方法名=function（）；
}
var s=new 对象名（首字母大写）（属性值）

函数对象有如下属性：
arguments
prototype 原型 对象
原型：每定义一个函数，prototype，对象
prototype 原型中的方法和属性都是公有的
4、混合模式：
将属性的声明在构造函数中完成
讲方法的声明放入原型中

function 对象名（属性）{
this.属性=属性；
}
对象名.prototype.方法名=function（）{
}

5、json：是一种数据格式
键对值：key:value;
键值对中必须用“”

var obj={
属性：值，
方法：function（）{
}

继承
父类：
子类：
继承具有单向性，一个对象可被多个对象继承
属性的继承：在构造函数中完成特有属性的添加，将公有属性让父类完成追加
Person.apply(this,[继承的属性,继承的属性]);
Person.call(this,继承的属性,继承的属性);
方法的继承：遍历父类对象的原型，将所有方法放入子类对象的原型中

for(var i in Person.prototype){
            // console.log(i);
            Student.prototype[i]=Person.prototype[i];
        }

原型链继承

 Student.prototype=new Person();

七、日期对象

var date=new date // new  创建一个日期对象的实例
var year+date
function sh
 var year=date.getFullYear();//年
        var month=date.getMonth()+1;//月份
        var day=date.getDate();//日
        console.log(year,month,day);
        //获取时分秒
        var hour=date.getHours();
        var minute=date.getMinutes();
        var seconds=date.getSeconds();
        console.log(hour,minute,seconds);
        //星期
        var w=date.getDay();
        console.log(w);

  var time=year+"年"+month+'月'+day+" "+hour+":"+minute+":"+seconds;

setTimeout

八、变量作用域

作用域：变量的作用范围
根据作用域不同：
1）全局变量
·作用范围是整个页面
在函数外声明的变量
声明变量时未使用var
2）局部变量
作用范围是函数内
在函数内声明的变量（包含参数内的）
总结
建议：优先使用局部变量
因为全局变量的生命周期更长（和夜面生命周期一致），占用内存时间较长
局部变量使用完毕可以等待回收，更合理
闭包：有权在函数内访问另一个的函数作用域中的变量，并将该函数返回

九、数组

引用类型的定义分两步：在栈中定义名。堆中存储数据
引用类型赋值的是地址
数组：Array 能够保存多个数据
语法：
1）new Array()
2）new Array(inme,inme,inme);声明同时并赋值；
3）new Array(lenth);声明同时指定长度；
4）var arr=[];
索引： 0 唯一的编号
长度：lenth 数组的长度等于元素中的个数
数组赋值：
数组名[索引]=值；
数组取值：
数组名[索引]；
注意：在js中数组长度不限
数值类型也不限

数组遍历
for…in
fof(var i in arr){
console.log(i,arr[i]);
}
注意：遍历时产生的的索引是字符串类型
instanceof
检测是否为指定对象实例
console.log(arr instanceof Array)
数组方法
1）栈方法·：先进后出
push（a…c）：压栈 在数组末尾添加元素
pop©：出栈 删除数组中最后一个元素
2)对列方法：先进先出
push（）进队
shift（） 出队 删除数组头部元素
3）数组操作方法
concat（arr）合并数组 不修改原数组
unshift（a）在数组头部添加元素
splice（指定位置，个数） 删除数组指定元素
splice（指定位置，个数，添加元素…）
slice（开始位置，结束位置）截取数组 不修改原数组
4）排序方法
sort（） 排序 升序
注意：
默认情况按照字符串排序
其他排序：
需要将排序算法（函数）传入参数内
5）与字符串无关
join（） 数组转换成字符串
reverse（） 反序数组
复制：
concat（）；
slice（开始位置）；
数组对象新增的字符串：
every（fn（iitem，index，arr））判断每个元素是否满足条件
some（fn（itme）） 判断是否有元素满足条件
filter（fn） 筛选满足条件的元素
forEach（fn（iitem，index，arr））：数组遍历
fn： item（元素） index（索引） arr（数组）
indexOf
map （fn） 筛选满足条件的元素 返回为布尔值
reduce（fn（total（初始值为第一个元素），iitem，index，arr））
reduceRight

基本类型：
string number boolean
包装对象：
String Number Boolean

toFixed(n) 保留小数点后n位。
字符串方法：
charAt(index) 根据索引查找字符
concat() 字符串拼接
indexOf(str) 判断指定字符串在母串中的(第一次出现)位置
找到，返回位置，找不到返回-1
lastIndexOf(str) 最后一次出现的位置 -1
replace(oldc,newc) 替换字符 只替换第一个
slice(start,end) 截取字符串 [start,end)
split(sp) 使用指定字符将字符串分割为数组
substr(start,length) 从指定位置开始，截取length长度
substring()
trim（） 删除首尾空格

    toLowerCase()     将字符串转换为小写
    toUpperCase()     将字符串转换为大写

十、表单

表单：
form 表单
输入类型：type
action：服务器地址
method：方法：GET POST
在http协议中：数据库提交方式 get post
get方式：将提交数据串到请求地址后
post方式：将要提交的数据放入请求体中
onsubmit：表单提交事件
return 表达式：
false：不提交
true或’’：提交

表单校验：校验数据的合法性

十一、DOM

JavaScript：void（0）；
DOM：（document object model ）文档对象模型
通过JS操作HTML 增删改查
节点：node；
节点之间的关系：
父子节点；
兄弟节点
常见的三种节点
元素节点 nodeType 1
属性节点 nodeType 2
文本节点 nodeType 3

…
注意，在DOM3中，属性不再是节点

集合
NodeList length//长度
索引
从0开始
cs[1] cs//集合名 [1]//索引数
oNode
元素节点属性：
childNodes//获取所有的孩子节点（直接后代）
children//直接后代中的元素节点
firstChild//第一个孩子
lastChild//最后一个孩子
parentNode//直接父节点
nextSibling//下一个兄弟
previousSibling//上一个兄弟

document对象
属性：
body
title 标题
URL 地址、链接
forms 表单
links 超链接
imgs 图片
方法：
write（）//想文档中写入内容

gerElementById()
若找到 方指定节点
若找不到 返回null

节点操作：
this 这个 再点击事件中，this指被点击的元素
1、查：属性 和getElementById 只能被document调用
getElementsByTagName 根据类名 可被节点调用
getElementsByCalssName 根据标签名 可被节点调用
getElementsByName 根据name名 可被节点调用
querySeletor（selector） 第一个
querySeletorAll（selector） 所有
参数：selector： css选择器
2、增： createElement（tagName） 创建元素节点对象
appendChild 以子节点的形式追加到到指定节点中
createTextNode 创建文本节点
insertBefore（新建的节点，指定的节点） 在指定的节点前插入
3、替换：replaceChild（新节点，旧节点） 新节点替换旧节点
4、删除：removeChild（）
5、复制：cloneNode（）

DOM中属性的操作
DOM属性操作：
1.属性的取值
1)对象.属性名
注意：针对特殊属性需要变形 例如：class–>className
2)getAttribute(属性名)
注意：属性名和HTML严格保持一致
3)对象[属性名]
注意：针对特殊属性需要变形 例如：class–>className
2.属性的赋值
1)对象.属性名=值;
注意：针对特殊属性需要变形 例如：class–>className
2)setAttribute(属性名,属性值)
注意：属性名和HTML严格保持一致
3) 对象[属性名]=值;
样式的修改：
对象.style. 样式名=值；
样式的取值：
1）对象.style. 样式名
只能获取行内样式
2）window. getComputedStyle(对象，null)
事件：
事件三要素：
1）事件对象 ：事件绑定对象
2）事件名称 ：事件的种类 on-事件名
3）事件处理函数 ：事件触发之后要做什么
事件的写法：
1）HTML事件
将事件属性的形式写入页面标签中
优点：简单易懂
缺点：js代码与HTML耦合度太高，不易分工合作
2）脚本模型（现代事件绑定）
完全在JS中完成事件绑定
3）w3C事件：
添加事件：addEventListener（事件名，fn，flag）
flag： true 捕获 false 冒泡
移除事件：
removeEventListener（事件名，fn，flag）
注意：确保删除的函数是添加的函数

十二、WEB储存

web存储：
locationStorage：用于永久保存数据：
sessionStorage：用于临时存储数据（页面关闭时，数据丢失）
用法：（两个对象用法一致）
setItem（key，value）存储数据
getItem（key） 取数据
removeItem（key） 删除数据
clear（） 清空数据
注意：key和value均为字符串类型
JSON对象
stringify（obj） 将obj转换为字符串
parse（str） 将字符串（对象格式）转换为对象