标签:
JS高级javascript
是客户端浏览器里边的语言技术
1995年 网景公司 livescript ----> javascript
?
1. 引入方式
<script type="text/javascript">具体代码</script>
apple.js
<script type="text/javascript" src="apple.js"></script>
2. 区分大小写
该语言严格区分大小写 name Name
3. 注释方式
// 注释单行
/*
注释多行
*/
4. 结束处分号可选
var name="tom";
var age = 23;
?
5. 变量命名规则
????名字组成:字母、数字、下划线、$
????开始的第一个字符不能是数字的。
????var $ = "china"; //可以的,jquery框架
????var 9 = "hello";????//不可以
6. i++ 和 ++i的区别
????
?
7. 连接符号+
????
8. 逻辑运算符使用细节
????
9. switch表达式用法
????
?
10. break和continue使用
????
????
?
11. 函数
????定义:有一定功能代码的封装体
12. 函数参数使用
????内部属性arguments,以数组形式获得具体参数信息
????????????arguments.length获得参数的个数
????
13. arguments属性本质是一个对象,里边有数组层分
????
?
14. 函数参数个数
????
?
15. 函数返回值
????return
????
?
16. 全局变量和局部变量
????
?
????全局变量使用其实就是使用window对象的属性
????window.province 调用window对象的属性信息
????window.cat() 调用window对象的成员方法
?
总结:
?
?
17. 函数的声明
????function f1(){}
????var f1 = function(){}
????
?
18. 函数调用(两种方式)
????funciton f1(){}
????f1();
????
19. arguments.callee
????属性在函数内部代表当前本身函数的引用
????
?
20. caller
????返回调用当前函数的函数。
????
?
?
?
?
?
every() 全部符合条件返回真
filter() 把符合条件的项目组成一个新数组
forEach() 遍历数组
map() ????对数组每一项运行指定函数,返回每次函数调用的结果组成的数组
some() 部分符合条件返回真
?
slice(开始位置,结尾位置)
substring(开始位置,结束位置)
substr(开始位置,长度)
总结:
?
?
?
?
?
?
校验以下真实日期:
var dd = new Date(2005,1,31);
?
练习:
获得10-20之间的随机数字
?
?
?
document object model 文档对象模型
?
?
dom把html中需要元素标签等内容都划分为节点(元素、属性、文本)
<html>
????<head></head>
????<body>
????????<div id="apple">
????????????<span name="orange">今天是周一</span>
</div>
????</body>
</html>
document.getElementById();
?
?



?
针对行级样式起作用
?
appendChild()
insertBefore()
以上方法不只可以执行节点追加动作,还可以执行节点位置移动操作
?
总结:
?
事件:通过鼠标、键盘对页面所做的操作就是事件。
????????我们可以对事件做一些处理,处理过程称为"事件驱动"。
????????事件驱动通常用"函数"做相应。
分类:onclick onmouseover onmouseout ondblclick
????????onload onkeydown onkeyup onfocus onblur
????????onkeypress
?
1. 写html和js原则:
????结构和行为相分离。
????
onclick是input框的属性
DOM0级事件设置方式:
?
设置事件
addEventListener(事件类型,处理,捕捉冒泡);
?

?
????addEventListener()????????????//自己测试IE9和IE10是否有此方法
????removeEventListener()
????以上两个方法是主流浏览器支持的方法
?
????在IE里边有自己的事件绑定方法
?
?
function(evt){}是主浏览器获得事件对象的固定用法
window.event IE浏览器的事件对象是window对象下的一个属性
?
?
获得事件制作作用的目标对象
?
?
?
间隔指定的事件,程序被重新执行一遍
?
?
总结:
????事件
????设置<input onclick="代码">
????????<input onclick="fn">
????????it.onclick = fn / 匿名函数
????????it[‘onclick‘] = fn / 匿名函数
????????
????????addEventListener()
????????removeEventListener()
?
????????attachEvent()
????????detachEvent()
????????
????????event事件对象
?
????BOM浏览器对象
????????javascript BOM DOM
????????window.location.href 页面重定向使用
?
????????open()????????????window.opener
????????setInterval()
作业:
?
?
?
元素节点.removeEventListener(类型,fn,捕捉true冒泡false)
?
?
15. 事件调用传递参数

?
作业:
?
?
父节点parentNode
????文本节点、元素节点都有父节点
????属性节点是否有父节点
?
?
作用域链可以保证程序在执行的时候按照一定的顺序访问变量。
作用域:外边的变量可以被内部函数使用

作用域链:



????
???? ?
?
????内部函数获得一个变量
????首先在自己的环境里边找,如果没有则到下个环境获得,没有就继续向下个环境寻找。
????变量在寻找的过程走了一条路线,
变量在外部环境可以给内部环境使用,我们称作是变量的作用域,变量有外到内作用域形成了一个链条,我们称作是作用域链。
?
在函数内部获得具体变量信息通过作用域链查找
活动对象,每个局部环境内部都有自己的活动对象,它包含的信息不光有自己本身环境的信息,还包括外部环境的信息,也包括最外边环境信息。
?
可以保证活动对象沿着一定顺序访问变量和函数。
?
?
?
1. 闭包引入
?
2. 闭包具体使用:
?
总结:
?
闭包
函数嵌套
f1(){
????????f2(){}
????????return f2;
}
闭包特点,可以访问原先作用域的变量信息,变量信息在函数内部的"活动对象"有保留。
?
b) json方式创建对象
?
?
?
把对象的地址/引用传递给变量。会形成多个引用指引同一个对象的情况
?
?
?
?
具体使用:
new 函数() 创建一个对象
?
总结:
?
作业:
????1. 通过 闭包+for循环 实现每个li标签被点击后
弹出对应的内容
li[i] = function(){alert(li[i].firstChild.nodeValue)}
?
通过 闭包+for循环 实现每个li标签被点击后
弹出对应的内容
this
?
OOP三大特性:封装、继承、多态
class Person{
????private $money = "20000"; 私有的访问权限
}
?
为函数定义"私有成员":
?
在javascript面向对象成员修饰有:私有的、公开的
?
class Person{
????static function run(){}
????static $name = "jack";
}
Person::run(); ????类调用静态方法
Person::$name; 类调用静态属性
?
在js里边,静态成员只能是函数自己调用,普通对象不能调用。
通过name获得函数名字:
?
类-----extends-----类 php
在javascript里边,可以直接创建一个对象出来
json 字面量对象
new 函数() 构造函数
????函数本身是一个对象,等于说从一个对象创建另外一个对象。
?
1. 在js里边如何实现继承。
????一个对象可以继承另外一个对象
????dog--------继承---------wolf
????pig---------继承---------yepig
????
????
????
2. 单个原型属性继承:
3. 原型对象继承
????
4. 原型对象继承的是对象,不是构造函数????
????
?
5. 对象访问属性顺序
????//对象寻找自己的属性
//① 在[自己本身对象]里边获得属性
//② 在本身构造函数里边获得
//③ 在构造函数的[原型对象]里边获得
//④ 在构造函数的原型对象的构造函数里边找
????
一个对象获得具体属性,
会不断在构造函数和原型对象里边层层向上查找,整体说形成了一个有下至上的链条,
我们称为"原型链"
在javascript内部,原型链的顶端是Object
因此我们访问的一些方法,虽然函数本身没有定义,但是还可以访问到,具体是Object原型的方法
?
把一个对象的属性复制到我本身自己对象身上。
复制和冒充继承:
????冒充继承占用空间更大
????复制继承更灵活,需要就复制,否则不用复制
?
总结:
7. 原型链Object
?
1. 方法重载
????function setname(){}
????function setname(name){} name数据类型string
????function setname(age){} age数据类型int
????function setname(name,age)
????在重载的地方有多态体现,同名函数,他们的参数个数不一样或参数数据类型不一样
????调用同一个方法,体现的结果不一样,是多态
2. 工厂设计模式也是多态
3. 在js里边调用函数,传递参数的个数不一样,在函数内部做判断。
4. 在js的对象里边体现多态
????
????
?
try{
}catch(error){
}finally{
}
相同的一段程序,不同人执行可能结果不一样,由于传递参数的不同,有的可能会发生错误,这样我们需要通过异常把具体的错误给捕捉到。
异常处理的错误会使得我们的程序是流畅的,不会因为错误停止执行。
?
如果程序有语法解析错误,不会通过异常捕捉
异常会捕捉运行时的错误。
?
1. 异常具体使用:
2. 自定义异常抛出使用
????
?
1. 正则作用:
????匹配指定的字符串
????进行注册表单域信息的验证
????在许多内容里边帮组我们匹配出想要的信息。
?
2. 什么是正则表达式
????文字模式
????手机号码:13245632145
????如何验证:内容是1开始,内容长度是11位,内容必须都是数字的,
头3位在一个指定集合里边(139、135、156、189)
????????????var arr = [‘13476587698‘,‘‘,‘‘];
13476587698
????我们验证手机号码,可以定义一个数组,把全部情况都罗列在里边,但是这样做数组的元素个数非常多,以至于没有可行性。
????现在我们就制作一个简短的文字模式,可以匹配全部的手机号码。
????例如 139|135|136|189数字8
?
?
?
?
?
总结:
?
作业:
???????? ?
?
?
?
?
?
input 被匹配的目标字符串
特殊字符 * + . \ | ^ $ ?
????f) 模式修正符 g i m
?
模式单元和全局匹配下标区别:
?
模式单元重复使用,反向引用
?
?
\d :表示数字[0-9]
\D :表示非数字[^0-9]
\w :表示字母、数字、下划线
\W :非字母、数字、下划线
\s :表示空格
\S :表示非空格
\b :表示单词边界
\B :表示非单词边界
?
{m} : 其前一单元严格出现m次
{m,} : 其前一单元出现至少m次
{m,n} : 其前一单元出现至少m,至多n次
[kdsimds]:表示中括号中的任意一个字符
[a-f]: 表示中括号中中杠的两端字符范围
[^lsjds]:不是中括号中的任意一个字符
[^a-f]: 不是中括号中中杠的两端字符范围
?
验证用户名方法:
?
var obj = document.getElementById(‘email‘);
obj.onclick = function(){this} this----------dom对象
?
主流DOM设置事件方式
obj.addEventListener(类型,function(){this},捕捉冒泡) this--------------dom对象
?
IE设置事件
obj.attachEvent(类型,function(){this}) this-------------------window
?
?
总结:
?
会复制之前的内容:
?
开发步骤
初期代码:
改造后:
?
初期代码:
改造后:
?
?
通过"上下左右"键,让小蛇灵活移动
给body添加键盘事件onkeydown
?


让蛇头碰到食物,蛇头的坐标和食物的坐标一致,就说明蛇头要吃食物。
蛇吃食物:蛇又增加了一个蛇段,重新生成食物。
四个方向不能越界
判断头部坐标与具体蛇段的坐标是否相等。
????遍历每个蛇端的坐标是否等于头部坐标。
????
?
作业:
?
标签:
原文地址:http://www.cnblogs.com/yizhinageyuanfang/p/5518566.html