解释
事宜工具是由用户产生的（鼠标单击或者按一下键盘）
事宜工具存储 对应 事宜信息
事宜工具存储信息有：
事宜的种别，如：click，keydown等等
点击事宜的位置
点击的哪一个键
等等
用于阻挡事宜流，用于阻挡浏览器默认动作；
2、获取事宜工具 ie6、7、8
通过关键词event获取
nodeObj.onclick = function() {window.event}
主流浏览器
通过方法第一个参数获取
nodeObj.onclick = function(evt) {evt}
思考：形参为什么不写event系统关键词不要用，一样平常用evt
兼容
nodeObj.onclick = function(evt) {var evt = window.event ? window.event : evt;}3、事宜工具的浸染1）判断是否回车表单提交
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {width: 800px; height: 800px; background: red; } #div2 {width: 400px; height: 400px; background: blue;} #div3 {width: 200px; height: 200px; background: green; } </style></head><body> <form action="提交给老范.html" id="form1"> <input type="text" name=""> <input type="submit" value="提交"> </form><script>window.onkeydown = function(evt) { var evt = window.event ? window.event : evt; // console.log(evt); // 当表单按下回车键则提交 if (evt.keyCode == 13) { var form1Obj = document.getElementById('form1'); form1Obj.submit(); }}</script></body></html>
解释：完善表单提交瑕疵，当获取焦点的时候可以按回车键直接提交，但是没有获取焦点就通过js触发提交（but 必须判断只能是回车键才可以提交）
2）阻挡浏览器默认动作 解释
DOM1级事宜 return false；
DOM1级事宜或者DOM2级事宜 evt.preventDefault();
案例
阻挡用户提交表单
3）事宜工具中记录的鼠标位置 解释
evt.screenX 相对付屏幕的左上角为原点
evt.screenY
evt.clientX 相对付浏览器的客户端左上角为原点（不打算滚动条位置）
evt.clientY
evt.pageX 相对付浏览器的客户端左上角为原点（打算滚动条的位置）
evt.pageY
evt.offsetX 以自己的左上角为原点
evt.offsetY
图解
案例
点击增加水果
<script>document.body.style.backgroundImage="url('ft/bj.jpg')"; document.body.style.backgroundSize='1366px 768px'; document.onclick=function(evt){ imgobg = document.createElement('img'); i = parseInt(10Math.random()); imgobg.setAttribute('src','ft/sg/'+i+'.png'); imgobg.style.width="100px"; //随机显示位置 imgobg.style.position = 'absolute'; imgobg.style.top = evt.clientY + 'px'; imgobg.style.left = evt.clientX + 'px'; document.body.appendChild(imgobg); } </script>4）阻挡事宜流
解释：
ie6、7、8：event.cancelBubble=true;
主流浏览器：evt.stopPropagation();
面向工具OOP一、观点在面向工具编程中，类（class）是工具（object）的模板，定义一组工具公有的属性和方法（类是抽象的，工具详细的）
在PHP中，可以通过实例化一个类来获取工具
而在JavaScript中没有“类”，但是可以用过另一种方法定义自定义“类”，然后创建
工具，也可以直接创建工具（工具可以有默认成员，也可往后期动态添加成员）
总结：在js里可以通过多种办法创建工具
二、JavaScript中“类”的种类1、系统类1）Array类
var arr = new Array();
var arr2 = new Array();
属性
工具.length 获取数组的长度
方法
工具.pop() 弹出数组的末了一个元素，并返回弹出的值
工具.push(n); 给数组添加一个元素，并返回新数组的长度
等等
2）Date类
3）Math类
4）String类
2、自定义类 （布局函数）1）观点
明确：类（class）是工具（object）的模板，然后“工具”根据这个模板天生。
解释1：JS措辞中利用布局函数（constructor）作为工具的模板。所谓布局函数，
便是供应一个天生工具的模板，并描述工具的基本构造的函数。
解释2：一个布局函数，可以天生多个工具，每个工具都有相同的构造。
2）定义布局函数
fucntion 函数名（） {
}
履历总结：布局函数一样平常情形下函数名首字母大写
︴思考： 思考如果通过布局函数创建工具
通过new关键词+函数名（）即可创建工具
三、通过布局函数创建工具1、 通过布局函数创建工具 代码
解释：函数名不区分大小写，但是强烈推举大写
︴思考： 布局函数和普通函数有什么差异？
答：没有差异，如果直接调用则是普通函数，如果是new+函数名()则布局函数，用于创建工具
脚下把稳：不要声明布局函数，当普通函数利用（所以为了明确后期布局函数就利用new实例化，普通函数就直接调用则通过函数名首字母来区分是布局函数还是普通函数）
︴练习： 描述一个人的信息
提出问题
如何将php面向工具代码（code）转换为 js面向工具代码（code）
剖析步骤
定义Person布局函数
丰富Person布局函数成员（属性和方法）
创建工具
办理问题
<script> //定义布局函数 function Preson(){ //利用this定义名称属性 this.name='郭美美'; //利用this定义年事属性 this.age = 28; console.log(type); } //2.创建工具 peObj = new Preson(); console.log(peObj); </script>
︴思考：如果给布局函数通报参数
答：仿普通方法传参
︴思考： js中this含义，如何利用？
1）BOM中，代表window工具
证明
2）在事宜中，代表元素/节点工具
证明.
3）在函数/方法里边 代表调用该函数/方法确当前工具
证明.
4）在面向工具封装观点中【★】
通过this来声明类的公有属性
通过var来声明类的私有属性
证明.
四、布局函数成员管理1、成员属性var 变量名 = 值; //添加私有成员
this.变量名 = 值; //添加公有成员
2、成员方法var 方法名 = function() {} //添加私有方法成员
this.方法名 = function() {} //添加公有方法成员
︴练习
定义人布局函数，设置姓名属性和eat方法 并 创建工具输出和调用
︴思考： 如果是上述代码是name是私有属性，表面如何输出
答：明确，表面不能直接输出
办理：通过内部方法调用私有属性
︴思考： 如果给工具添加属性和方法？是否会影响布局函数？
答：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script type="text/javascript">//定义人布局函数，设置姓名属性和eat方法 并 创建工具输出和调用function Person() { //定义姓名属性 this.name = '张三'; this.getName = function() { console.log(name); } //定义eat方法 this.eat = function() { alert('用饭日语'); }}//创建工具var obj = new Person();console.log(obj);//输出obj工具里的name属性console.log(obj.name); //张三//修正obj的name属性obj.name = '赵四';console.log(obj.name);//创建工具2var obj1 = new Person();console.log(obj1.name);</script></body></html>
︴练习1：删除工具属性
语法：delete 工具.属性
︴练习2：遍历工具成员
1）语法
for (变量名 in 工具) {
}
脚下把稳：变量名指的是工具的键
2）利用
五、 获取布局器（constructor）1、解释：通过指定布局函数创建工具，那么我们称该工具的 布局函数名称 为布局器
function Fn() {}
var obj = new Fn(); obj工具布局器是：fn
function Fun2() {}
var obj = new Fun2(); obj工具布局器是：Fun2
2、语法获取工具布局器：工具.constructor
返回工具的类型：typeof 变量名 或者 typeof(变量名)
判断工具是否是指定布局函数的实例：工具 instanceof 布局器
3、练习︴JS高等1判断是否是数组
知识点综合练习
题1
下述代码唯一的差异便是首字母大小写，没有其他差异；都是布局函数 （对的）
题2
function Animal(){ this.weight = 120; this.eat = function(){ alert('动物想用饭'); }}var obj = new Animal();var obj2 = obj;console.log(obj.weight); //120console.log(obj2.weight); //120obj.weight = 88;console.log(obj.weight); //88console.log(obj2.weight); //88
题3
function Animal(){ this.weight = 120; this.eat = function(){ alert('动物想用饭'); }}var obj = new Animal();delete obj.weight;console.log(obj.weight);//undefined六、工具在内存中的分配1、解释
栈：基本类数据和符合类型的变量名称
堆：符合类型数据
代码区：函数
静态成员区：静态成员
2、案例1<script type="text/javascript">function Animal(){this.weight = 120;this.eat = function(){ alert('动物想用饭');}}var dog1=new Animal();var dog2=new Animal();</script>
图解如下：
3、案例扩展1function Animal(){ this.weight = 120; this.eat = function(){ alert('动物想用饭'); }}var obj = new Animal();var obj2 = obj;复合类型都是引用传值（条件将a工具赋给b工具）
图解如下：
七、JSON工具【★★】1、什么是json工具
json是一种轻量级的数据交流格式，json数据也可以称之为json工具，由于它的数据以“键值对”形式组合成一个工具；
2、json工具的定义1）语法
语法：var obj = {属性名:值, 属性名N:值}
通过“{}”创建工具
属性名可以加引号，也可以不加引号
属性值根据类型判断是否加引号
工具的成员由：属性名和值组成，多个成员之间用“,”逗号隔开（注：属性名和值
之间用冒号“：”隔开）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//语法：var obj = {属性名:值, 属性名:值}//练习1：创建空工具var obj = {};console.log(obj);//练习2：给工具添加name成员var obj = {"name": '张三'}console.log(obj);</script></body></html>
2）练习：如何利用json表示1个人的信息：姓名，性别，年事
var obj = {name:"战三", sex: "公", age: 18}
3）练习：如何利用json表示N个人的信息
通过数组存放，数组的每个元素是一个json工具
var arr = [
{name:"战三", sex: "公", age: 18},
{name:"战三", sex: "公", age: 18},
{name:"战三", sex: "公", age: 18},
{name:"战三", sex: "公", age: 18}
];
3、json工具成员的利用，添加方法
4、php中的json操作1）解释
在实际事情，php常常会将从数据库中获取的数据转化为JSON格式，然后交给js处理
2）语法
json_encode（关联数组） 将数组转化为json格式数据
json_decode（json数据，[true | false]）参数二可选参数：false-转化为工具，true-转化为数组
<?php//连接数据库获取数据，一样平常存到数组$arr = array( array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1));//将数据转化为json格式$jsonData = json_encode($arr);var_dump($jsonData);//将json数据转化为数组或者工具，默认是工具$lastData = json_decode($jsonData);var_dump($lastData);$lastData = json_decode($jsonData, true);var_dump($lastData);?><ul> <li>1111</li></ul><script type="text/javascript">// var arr = [{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1}]// console.log(arr);</script>
脚下把稳：将数据转化为json数据参数必须是关联数组
6、练习<?php//连接数据库获取数据，一样平常存到数组$arr = array( array('id' => 1, 'name' => '张安', 'age' => 1), array('id' => 1, 'name' => '大是大非', 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1), array('id' => 1, 'name' => 1, 'age' => 1));$jsonData = json_encode($arr);//var_dump($jsonData); [{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1}] 输出字符串，但是在js中便是数组和工具?><ul></ul><script type="text/javascript">//1.将php中的数据赋给js变量var jsonData = <?php echo $jsonData; ?>;//2.创建html变量用于存放数据var html = '';//3.循环拼接数据for (var i = 0; i < jsonData.length; i++) { //3.1 获取单个工具 var tmpObj = jsonData[i]; html += '<li>ID：'+tmpObj.id+'，名称：'+tmpObj.name+'，年事：'+tmpObj.age+'</li>'}//4.获取ul节点工具var ulObj = document.getElementsByTagName('ul')[0];//4.1將内容放到ul标签中ulObj.innerHTML = html;// var arr = [{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1},{"id":1,"name":1,"age":1}]// console.log(arr);</script>7、思考题
大家想一想：利用json工具和利用布局器得到的工具分别适应于若何的运用处景？
八、函数的各种实行办法1、解释函数
直接函数名加小括号
通过new关键词加布局函数名
通过工具点方法名调用
通过call方法和apply方法调用：这两个方法浸染一样，差异在于传参格式不一样（浸染：用于指定工具调用函数）
解释
默认调用函数是通过window工具
2、语法
函数.call（工具， 参数1，参数2，参数3，参数4）
函数.apply（工具， array(参数1，参数2，参数3)）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//1.定义普通函数fn1function fn1(param1, param2) { //调用该函数确当前工具 console.log(this); console.log('用户名：'+this.name+'，年事：'+this.age); console.log('参数1：'+param1+'，参数2：'+param2);}//2.定义jsonObj工具var jsonObj = {name: '赵四', age: 18};//3.语法： 函数.call（工具） 函数.apply（工具）fn1.call(jsonObj, 1, 2);fn1.apply(jsonObj, [1, 2]);// 上午练习code// function fn() {// alert(1);// console.log(this);// }// console.log(fn);// console.log(window.fn);// fn();// window.fn();</script></body></html>
解释
call和apply都是用户指定工具调用函数（注：默认是window工具）
call和apply的差异 工具后面的实参格式不一样： call方法通报多个参数，多个参
数之间用逗号隔开；apply用数组通报
call和apply第一个参数后面的实参都是 可选参数
九、面向工具︴解释
面向工具的三大殊效：封装，继续，多态
1、封装 在js中只有私有成员和公有成员，但是不能利用php中的public和private润色符来润色。
在js中通过，this来声明公有成员
在js中通过，var来声明私有成员
脚下把稳：私有属性不可以在布局函数表面利用，可以在内部声明函数调用内部私有属性
2、继续（★）1）原型继续prototype先容
在PHP中，一个类可以继续另一个类，子类可以利用父类的属性和方法
在js中，一个布局函数可以继续一个工具，继续后布局函数拥有该工具的成员
继续关键字：prototype
2）原型继续prototype定义
继续可以继续一个成员，也可以继续多个成员
继续单个成员：布局函数.prototype.成员名称 = 值;
继续多个成员：布局函数.prototype = 工具;
︴继续单一成员练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//定义人的布局函数function Person(name,age) { //定义公有属性name this.name = name; this.age = age;}//通过原型继续给 布局函数添加 sex 成员， 语法：函数.prototype.成员属性 = 值Person.prototype.sex = '男';//创建工具var obj = new Person('PHP9', 18);console.log(obj);console.log(obj.sex);</script></body></html>
︴继续多个成员练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//定义人的布局函数function Person(name,age) { //定义公有属性name this.name = name; this.age = age;}//声明工具var jsonObj = {sex: '男', a: 123, b: 456}//通过原型继续给 布局函数添加 多个成员， 语法：函数.prototype = 工具Person.prototype = jsonObj;//创建工具var obj = new Person('PHP9', 18);console.log(obj);console.log(obj.name);console.log(obj.sex);console.log(obj.a);console.log(obj.b);</script></body></html>
3）原型继续的把稳事变
继续工具的成员 与 本身成员名称同等，表示本身成员结果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//定义人的布局函数function Person(name,age) { //定义公有属性name this.name = name; this.age = age; this.sex = '女';}//声明工具var jsonObj = {sex: '男', a: 123, b: 456}//通过原型继续给 布局函数添加 多个成员， 语法：函数.prototype = 工具Person.prototype = jsonObj;//创建工具var obj = new Person('PHP9', 18);console.log(obj);console.log(obj.name);console.log(obj.sex);</script></body></html>
工具和单一成员同时继续，须要先继续工具、再继续单一成员
多个工具 同时继续，末了工具起浸染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//定义人的布局函数function Person(name,age) { //定义公有属性name this.name = name; this.age = age;}//声明工具var jsonObj = {sex: '男', a: 123, b: 456}//通过原型继续给 布局函数添加 多个成员， 语法：函数.prototype = 工具Person.prototype = jsonObj;var jsonObj1 = {sex1: '男', a1: 123, b1: 456}Person.prototype = jsonObj1;var jsonObj2 = {sex2: '男', a2: 123, b2: 456}Person.prototype = jsonObj2;//创建工具var obj = new Person('PHP9', 18);console.log(obj);</script></body></html>3、多态
多态顾名思义多种形态，在js中没有固定的多态的实行语句，但是可以通过另一种办法显示
通过函数体内的arguments工具来实现
通过函数实行的call和apply函数来实现
4、静态成员1）观点
当一个布局函数实例化出多个工具，多个工具调用一个固定不变的成员时，这时候该变量声明静态成员。
2）静态变量的好处
静态成员属于布局函数，可以更快利用
减少内存占用
3）语法
布局函数.静态成员名称 = 值；
4）利用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">//定义人的布局函数function Person(name,age) { //定义公有属性name this.name = name; this.age = age;}//添加静态成员 version Person.version = '1.0';//利用静态成员console.log(Person.version);</script></body></html>十、非常（Exception）1、观点
代码一旦出错，后面的代码就终止实行，这样用户体验不好。我们希望一旦有缺点就抛出非常，非常处理完毕后连续实行。
2、语法try {
}catch(ex) {
}
try 检讨代码
catch 捕捉非常
finally 不过是否存在非常，都会走该代码段
ex 存放缺点信息
脚下把稳：抛出非常只针对实行缺点
3、练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript">try { function F1() { } var obj = new F12();} catch(ex) { console.log(ex);} finally { console.log('不管是否有缺点，都实行一次');}</script></body></html>
