函数
代码的复用：写一遍多次使用》把特定的功能语句打包放在一起
语法：function 名字（0，1，1多个参数）{
执行的语句 }
返回值return，把语句返回给函数
例子：
function add（x，y）{ var z=x+y； return z； } var rs=add（1，2）； console.log（“1+2=”+rs）；
动态参数
function add（）{ var z=0； for（var i=0；i<arguments.length；i++）{ z + = arguments[i]；} return z } var rs=add (1,2,4,5,23); console.log("1+2 4,5,23= "rs); rs=add(3,4); console.log("3+4= "+rs);
作用域：可访问变量的集合（对象、函数）
我们定义了一个变量，这个变量可以被使用的地府，可以使用的范围
var a=10；
全局作用域>全局变量>在函数外定义的变量>在所有地方都能被访问
局部作用域>局部变量>在函数里面的变量>函数里面被访问到
function add(){ y=100;//不设置var y=100的局部变量只设定y=100的时候 系统自动默认全 局变量 console.log("add():y="+y); } add(); console.log("全局y="+y)；
预解析：浏览器在获得JS文件的时候，不是立刻去执行代码，全篇快速扫描一遍
把变量预先解析
变量 把变量的声明提前 例如
console.log("x= "+x);
var x=10;
add();//函数也是变量
function add(){
console.log("add()");}
顺序不同也可以正常显示
但是如果在函数内部的全局变量加载顺序在console.log后面 会报错。所以注意顺序
闭包：变量的 私有化问题
<script type="text/javascript">//简化写法 函数声明和立即执行放在一起。 var plus=(function() { var counter = 0; return function () { counter++; console.log("counter=" + counter); } })( ); plus(); plus(); plus(); console.log(counter);
对象
变量var
函数function：一对语句的集合
对象：一对变量+一堆函数的集合
var boj1={X：0，y:1，z：function（）{console.log（“”“”）；}}}
属性： 名字： 值。
名字：string： 隐式转化为string
x123-> 可以不加引号
如果包含了特殊字符->必须加引号 例如“first name”：“cc”
如果函数构造大体相同还可以创建类
例如var person2=new person（）；
对象：属性的基本操作： 增加 删除 修改属性值 查询获取属性的值 遍历；
查询获取属性的 点. [] 例子
var name = person1.name；->“xiaoming”只能用没有双引号的名称
name=person["name"];
name="xiaoming"
修改
person1["name"]="xiaoming2";
person1.name="xiaoming2";
增加：修改属性的时候，如果对象里面没有这条属性，自动加上
person1.height=170;
删除
delete person1.name
遍历：
for(var 属性名 in person1){
console.log("名"+pN);}
引用、自定义类
//定义了对象
//var person1 = { name:"xiaoming", sex:"male", age:"19", slogen:function(){ console.log("w s x m");}} //xiaohong 对象 人 //用类的形式创建对象 //人的类：class // var person2=new PersonClass（）； //ES5 是 function -》ES6更新成class F需要加（） C不需要加（） //为了区分函数和类 类 function PersonClass(pName,pSex,pAge){ this.name="pName"; this.sex="pSex"; this.age="pAge" this.slogan=function(){ console.log("w s"+this.name);} } //构造函数方式 var person1=new PersonClass("xiaoming","male","18"); var person2=new PersonClass("xiaohong","femle","15");
命名空间：多个人命名自己的创建的变量
var cc={}; cc.Age=100; cc可以是dd可以是ee，自己创建的
系统提供很多类->用的方法
//对象 类 自定义类
//对象和类
//对象var obj1={} //var obj2=new Object();//空的对象 这两个创建的是同样的空对象
对象：值+方法
Object->打包 最底层 类
值 万物都是对象+值+方法：类型转换
数字123 ->对象 类型 Number
字符串“abc” String
布尔值true false Boolean
转换例子： var n1=123；var str1=n1.toString（）；更多的自己查属性词典
//时间相关；Date（）
//计算代码的性能：耗时
var time1=new Date（）；//获取了当前的时间 本地电脑的时间
for（var i=0；<1000000；i++）{
t++；}
var time2=new Date（）；
var n=time2.getTime（）-time1.getTime();
*****Math -》 数学相关 Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
随机数
Math.random()
DOM弹窗（浏览器的弹窗）
同步：阻断
alert（）弹窗直接弹出
confirm（）boolean类型弹窗，确定为ture 取消为false 例子如下
//var bcf=confirm（“confirm弹窗”）；
//console.log("点击："+baf)
//if（bcf）{提交}else
prompt（）
//var strpt=prompt（“prompt 输入：”，“默认是CC”）；
console.log（“填了：”+strpt）；
浏览器的导航栏的信息
//window.location 对象
//属性：url的各个部分
//location.href;
//location.toString()
//刷新页面，打开新的页面 例子：
//var bcf=confirm("confirm弹窗")；
//if（bcf）{location.replace（“http：//www.baidu.com/”）}
//else location.reload();
浏览器的历史记录：前进 后退
history
浏览器的信息：版本 厂家
navigator
//计时器
循环执行：var sil=setInterval（函数名，时间）；意识是每隔多少时间执行一次函数
停掉：clearInterval（sil）；
一次执行：var sil=setTimeout（函数名，时间）；
clearTimeout（sil）；
例子 var num=0；
function add（）{
console.log("num="+ ++num);}
var sil = setInterval(add,1000);
function end(){
console.log("setTimeout clearInterval");
clearInterval(sil);}
setTimeout(end,10000);
Dom - > 文档对象模型
Dom树：
html文件 -》 人 - 》网页的数据
浏览器 -》 数据结构 - 》方便 查找 修改 遍历
样子 - 》 树
DOM树
数据结构：
线性：单链表 循环列表 队列 栈 数组
树形： 二叉树 平衡树 红黑树
网状：有向图 无向图 - 》寻路算法 A*算法
DOM树
document 节点：只有一个
标签节点 元素节点：
文本节点：
标签节点 元素节点： 样子 样式
找到这些节点
3中最常用的方法：
1通过ID来查找
2通过标签名来查找
3通过class来查找
// ID-》唯一性：
var p1 = document.getElementById("p1");
// JS时间线
var ps = document.getElementsByTagName("p1");//返回数组
var p1 = ps[ 0 ];节点
var ps = documentgetElementsByClassName("txt");//返回数组
ps【0】节点
******三个方法的区别：
1 ID -》节点
Tag（标签）Class -》数组
1.1 id-》document.getElementById只能用document来获取
Tag Class-》在标签任意节点上使用
创建节点，添加到DOM树 删除节点
var div1 = document.getElementsByTagName("div1");
//创建一个标签
var p1 = document.createElement("p");创建标签类节点
//创建一个文本节点
var ptxt = document.creatTextNode("p1");创建文本类节点
p.appendChild(p1txt)；需要添加的节点
//添加节点
div1.appenChild（p）；父节点
//删除节点
removeChild（）；
例子删除div2
var div2 = document.getElementById("div2");
div1.removeChild(div2);
同样也可以用父节点元素进行删除操作
div2.parentNode.removeChild（div2）；
对节点的属性 内容
html定义好的属性 用点 . 对象的点 获取 修改
var img1 = document.getElementById("img1");
img1.id 通过获取img1 可以进行加. 进行修改
//class 因为在JS中是关键词 类 所以要用className地台
//img1.className=
//CSS样式的修改 在style后面可以加·在加属性进行修改
例如：img1.style.width=“100px”
//获取属性 修改自己创建的例如ID属性
img1.getAttribute("dat");
getAttribute()
ing1.setAttribute("dat(属性的名字)","1（属性的值）")
常用的操作属性：
getAttribute("") setAttribute("") removeAttribute("")
更改节点中文字或者其他 例如<p id="p1"> p1 </p>中的p1文字 里面可以添加任何东西 也可以加超文本链接等等
var p1 = document.getElementById("p1");
p1.inner（ID=P1标签内的所有内容）HTML（代表格式） = "这是innerHTML"；
如果想单纯添加文字内容用 textContent
什么是事件：
JS-》交互 人可以去操作界面
js -》 事件驱动的方式
用户-》操作html元素-》产生一个事件-》事件 主动的调用 设定 方法 函数
事件源：产生事件的地方
事件的类型：点击 键盘
事件对象：记录好 信息
事件的处理程序：函数
两种方式：
1 html的属性：
属性名：on+时间的名字 onclick
属性值：方法
直接在html设定
通过js的元素对象来设定
点击事件例子：
var num =0;
function add(){
console.log("点击："+ ++num)；}
var div1 = docume.getelemengtById（“div1”）；
div1.onclick=add；
也可以删除 div1.onclick=null;
2 通过调用 系统提供的方法
div1.addEventlistener(事件类型click，函数add，事件的处理方式可以不屑类型是布尔类型)
//事件函数：发生的时候-》操作 function
var div1 = document.getElementById("div1");
div1.addEventlistener("click",add);
事件对象 event:提供了事件的详细信息;
具体发生事件的元素,鼠标的位置,点击的状态,键盘的按键
function add(event){
console.log("事件函数");}
// var e = event || window.event; // IE8采用的方法
console.log（event）；
//想要取消默认打开的超链接页面
event.preventDefault(); 用对象方法时用这个
//return false；用on来绑定事件函数的时候 用这个
}
var a1=document.getElementById("a1");
a1.addEventListener(“click”，add)；
//用绑定方法也可以替代上两行代码。取消默认方法时return false；
a1.onclick=add;
上述js代码相对应的Html代码是 <body> <div id = "div1">div1</div> <input type="text" name="a" id="input1"> <script src="19.js"></script> <a herf="http:www.baidu.com" target="_blank" id="a1"> 百度</a> </body>
事件的传播：
多个标签，相互嵌套的，点击页面的时候，点击事件
是不是被点中的标签才会发生点击时间（在html文件中 div2的父元素是div1）
var div1 = document getElementById("div1");
var div1 = document getElementById("div2");
div1.addEventListener("click",div1click)；
div1.addEventListener("click",div2click)；
function div1Click（）{console.log（“div1 click”）}；
function div1Click（）{console.log（“div2 click”）}；
事件的传播：
在默认的情况下，点击页面的一个标签，处在传播路径上的标签都会监听到对应的事件
传播路径：就是dom树的分层结构图。结构下的都可以获取到
事件流：对应标签接受到事件的顺序
两大阶段：
捕获阶段：从起始点》目标阶段
冒泡阶段：目标位置》起始位置
例如head1.addEventListener（“click”，head1Click，事件的传播，false or true）
false》head1Click 对应的函数会在冒泡阶段执行
ture》 head1Click 对应的函数会在捕获阶段执行
H5文件 <head><style> #div1{ width：200px；height：200px；background：green；} #div2{margin-left：200px； width：100px；height：100px；background：red；}</style></head> <body> <div id="div1">div1<div id="div2">div2</div></div> <script src="20.js"></script> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> </body> JS文件 var div1 = document getElementById("div1"); var div1 = document getElementById("div2"); //捕获阶段 div1.addEventListener("click",div1clicktrue，true)； div1.addEventListener("click",div2clicktrue，true)； function div1Clicktrue（）{console.log（“捕获阶段 div1 click”）}； function div1Clicktrue（）{console.log（“捕获阶段 div2 click”）}； //冒泡阶段 var div1 = document getElementById("div1"); var div1 = document getElementById("div2"); div1.addEventListener("click",div1click，false)； div1.addEventListener("click",div2click，false)； function div1Click（）{console.log（“冒泡阶段 div1 click”）}； function div1Click（）{console.log（“冒泡阶段 div2 click”）}； //冒泡阶段事件代理利用冒泡流程机制 var ul1=document.getElementsByTagName("ul")[0]; ul1.addEventListener("click",ulClick); function ulClick(event){ console.log(event.target);}
