javascriptstudy.docx
- 文档编号:26545476
- 上传时间:2023-06-20
- 格式:DOCX
- 页数:59
- 大小:195.15KB
javascriptstudy.docx
《javascriptstudy.docx》由会员分享,可在线阅读,更多相关《javascriptstudy.docx(59页珍藏版)》请在冰豆网上搜索。
javascriptstudy
Javascript
目录
第1章JavaScript介绍3
1.1javaScript概念3
1.2ECMAScript3
1.2.1ECMAScript的概念3
1.2.2ECMAScript的语法3
第2章方法4
2.1javaScript定义方法5
2.1.1匿名方法5
2.1.2方法重载5
2.1.3定义系统对象上的方法6
2.2闭包7
2.3方法回调函数7
第3章事件8
3.1Onload事件8
第4章类和对象9
4.1Javascript模拟类9
4.2类的静态属性和方法10
4.3对象概念:
10
4.4对象直接量10
4.5JavaScript对象分类11
4.5.1本地对象的定义11
4.5.2宿主对象的定义11
4.5.3内置对象的定义11
4.6对象创建12
4.6.1工厂方式12
4.6.2原型方式13
4.6.3混合方式15
4.7对象的废除16
4.8魔法方法16
4.9继承17
4.9.1Prototyep原型链实现继承17
4.9.2非原型链继承17
4.9.3非原型链继承一子多父18
4.9.4对象冒充19
4.9.5call()方法19
4.9.6apply()方法20
第5章宿主对象21
5.1location对象21
5.1.1hash属性22
5.1.2host属性22
5.1.3hostname属性22
5.1.4href属性22
5.1.5pathname属性22
5.1.6port属性22
5.1.7protocol属性22
5.1.8assign方法22
5.1.9reload方法:
23
5.1.10replace方法:
23
5.2Date日期对象23
5.2.1创建一个日期对象23
5.2.2Date对象中获取信息24
5.3Document对象25
5.3.1documentready方法25
5.3.2document.getElementById26
5.4Request对象28
5.5属性28
1.2.3Prototype属性28
5.5.1JavaScript问题收集31
1.3上面两种格式有什么区别?
32
1.4目前认为以上的两种方法的功能是一样的。
32
1.5猜想:
32
1.6纠正:
32
第6章DOM39
6.1DOM的概念39
6.2这段代码可以用DOM绘制成一个节点层次图40
6.3parentNode跟parentElement区别40
第7章Js内置对象41
第8章js事件处理41
8.1.1Event42
第9章js中的get和set42
9.1__defineGetter__和__defineSetter__42
第10章navigator对象43
第11章遗忘区43
11.1setInterval方法43
第12章待定43
12.1待定43
12.1.1待定44
第1章JavaScript介绍
1.1javaScript概念
简单的来说javaScript是一种混合技术,一个完整的JavaScript是由三部分组成的即:
ECMAScript,DOM,BOM如下图所示:
图1-1
1.2ECMAScript
1.2.1ECMAScript的概念
ECMAScript是JavaScript的核心描述的该语言的语法和基本对象。
对上面这句话我的理解是ECMAScript是一准规范,而不是一种语言。
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准。
ECMAScript 规范定义了一种脚本语言实现应该包含的内容;但是,因为它是可扩充的,所以其实现所提供的功能与这个最小集相比可能变化很大。
ECMAScript 是一种开放的、国际上广为接受的脚本语言规范。
它本身并不是一种脚本语言。
正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现。
1.2.2ECMAScript的语法
区分大小写:
与Java一样,变量,函数名,运算符以及其他的一切东西都是区分大小写的,也就是说,变量test不同于变量Test。
变量是弱类型的:
与Java和C不同,ECMAScipt中的变量无特定的类型,定义变量时只用var运算符,可以将它初始化为任意的值。
这样可以随时改变变量所存数据的类型(尽管应该避免这样做)。
每行结尾的分号可有可无:
Java,C和Perl都要求每行代码以分号(;)结束才符合语法。
ECMAScript就把这行代码的结尾看作该语句的结尾(与VisualBasic和VBScript相似),前提是这样没有破坏代码的语义。
最好的代码编写习惯是总加入分号,因为没有分号,有些浏览器就不能正确运行,不过根据EXMAScript标准,下面两行代码的语法都是正确的:
vartest1=“red”
vartest2=“blue”;
注释与JAVA,C和PHP语言的注释相同
ECMAScript借用了这些注释语法,有两种类型的注释——单行注释和多行注释。
单行注释以双斜线(//)开头。
多行注释心单斜线和星号(/*)开头,以星号加单斜线结尾(*/)。
括号表明代码块:
从Java中借鉴的另一个概念是代码块。
代码块表示一系列应该按顺序执行的语句,这些语句被封装在左括号({)和右括号(})之间。
例如:
if(test1==”red”){
test1=”blue”;
alert(test1);
}
第2章方法
javaScript中的Function类(在javascript里函数本来就是一个对象的概念)
ECMAScript函数实际上是功能完整的对象。
Function类可以表示开发者定义的任何函数。
用Function类直接创建函数的语法如下:
Varfunction_name=new
Function(arguments1,arguments2,…..argumentsN,function_body);
在这种形左中,每个argument都是一个参数,最后一个参数是函数主体(要执行的代码)。
这些参数必须是字符串。
参数是字符串类型,不是数传入的值是字符串类型。
2.1javaScript定义方法
2.1.1匿名方法
window.onload=function(){
aaa();
}
这个方法是匿名的(因为没有其他地方会调用,所以没必要给一个名字)
如果要以常规的写法,就是定义一个函数比如bbb();
functionbbb()
{aaa();}
window.onload=bbb();
2.1.2方法重载
javaScript方法没有重载的功能
alert("thefirststepstart");
functiontest(){
alert("thetestone");
}
functiontest(one,two){
alert("thetesttwo");
}
test(1,1,3,4,5,6,7);
alert("theend");
从上面的输出结果来看,javascript没有函数重载的功能,在参数不同的情况下还能运行正常,而且选择最后一个函数输出
用arguments对象来模拟方法的重载
alert("thefirststepstart");
functiontest(one,two,three,four,five,six,seven){
if(arguments.length==1)
alert("oneargument"+one);
if(arguments.length==2)
alert("twoargument"+one+""+two);
if(arguments.length==3)
alert("threeargument"+one+""+two+""+three);
if(arguments.length==4)
alert("fourargument"+one+""+two+""+three+""+four);
if(arguments.length==5)
alert("fiveargument"+one+""+two+""+three+""+four+""+five);
if(arguments.length==6)
alert("sixargument"+one+""+two+""+three+""+four+""+five+""+six);
if(arguments.length==7)
alert("sevenargument"+one+""+two+""+three+""+four+""+five+""+six+""+seven);
}
test(1,2,3,4,5,6,7);
test
(1);
alert("theend");
当上面的七个参数没有参数值时要求输出它们的内容,信息如下:
2.1.3定义系统对象上的方法
下面的例子定义了我们String对象上的strim方法
String.prototype.trim=function(){
returnthis.replace(/^\s+|\s+$/g,'');
}
functionvalidate(){
varloginForm=document.getElementById("loginForm");
if(loginForm.email.value==null||loginForm.email.value.trim()==''){
alert("请输入你的用户名!
");
loginForm.email.focus();
returnfalse;
}
if(loginForm.password.value==null||loginForm.password.value.trim()==''){
alert("请输入你的密码!
");
loginForm.password.focus();
returnfalse;
}
returntrue;
}
2.2闭包
什么是闭包
“官方”的解释是:
所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
functiona(){
vari=0;
functionb(){
alert(++i);
}
returnb;
}
varc=a();
c();
c();
简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。
这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。
2.3方法回调函数
例一
functionoriginal(){
for(vari=0;i<=original.arguments.length-1;i++){
if(original.arguments[i]instanceofFunction){
org_fun=original.arguments[i];
org_fun();
}
}
}
original(1,2,3,4,6,5,function(){alert("test")});
例二:
//
functionA(p,callback){
//带都少个参数都可以
alert(p);
callback();
}
function__Callback_0(){
//这里可能做一系列的变化
alert("callback!
");
}
A("
1.",__Callback_0);
//直接将函数做为参数传递
A("
2.",functionc(){alert("gogo!
!
!
!
!
!
!
!
!
");});
//直接将函数做为参数传递
A("
3.",functionc(){
vari=25;
varc=123;
varx="男";
document.write("名称:
"+c+",性别:
"+x+",年龄:
"+i);
});
第3章事件
Qustion:
事件是没有被继承的方法?
3.1Onload事件
window.onload=function(){
varv1=document.getElementById("test").value=789;
alert(v1);
}
Image上的事件
functionimageLoaded(){
alert("test");
}
第4章类和对象
4.1Javascript模拟类
问题1:
javascript在模拟类的时候有没有象java类中的get/set方法?
Javascript模拟类的代码如下:
varMyClass=function(attr){
this.attr=attr;
this.myFun=function(){
alert("Hi,"+this.attr+",Thisisafunction!
");
}
}
varc=newMyClass('Kevin');
c.myFun();
varm_width={
valueOf:
function(){returnMath.abs(10-5)},
toString:
function(){returnMath.abs(10-6)}
}
alert(m_width);
alert(m_width+1);
4.2类的静态属性和方法
functionSZM(){
}
SZM.a="test123";
SZM.fun1=function(){
alert("thisisthestaticfunction");
}
alert(SZM.a);
SZM.fun1();
注意数组也是个对象:
SZM=[1,2,3,4];
SZM.b=456;
alert(SZM.b);
alert(SZM);
4.3对象概念:
ECMA-262将对象(object)定义为"属性的无序集合,每个属性存放一个原始值、对象或函数"这意味着对象是无特定顺序的值的数组
(unordered collection of properties each of which contains a primitive value, object, or function)
这句话已经说的很清楚,我们的对象是一个属性无序的数组。
4.4对象直接量
Javascript当中的对象直接量,可以像我们的面向象一样有get和set方法,不过这种格式只在我们的firefox有效。
functionszm_f(){return"f"};
varobj={
value:
1,
szm_f:
szm_f()
};
obj.szm_f1=function(x){alert("asdfs");return1;};
alert(obj.szm_f1("asd"));
4.5JavaScript对象分类
本地对象(native object),内置对象(built-in object),宿主对象(host object)
4.5.1本地对象的定义
ECMA-262把本地对象(nativeobject)定义为“独立于宿主环境的ECMAScript实现提供的对象”。
“本地对象”包含:
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
4.5.2宿主对象的定义
所有非本地对象都是宿主对象(hostobject),即由ECMAScript实现的宿主环境提供的对象。
所有的BOM和DOM对象都是宿主对象。
因为其对于不同的“宿主”环境所展示的内容不同。
其实说白了就是,ECMAScript官方未定义的对象都属于宿主对象,因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。
4.5.3内置对象的定义
ECMA-262把内置对象定义为"由ECMAScript实现提供的、独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现"
(any object supplied by an ECMAScript implementation, independent of the host environment, which is present at the start of the execution of an ECMAScript program.)。
这意味着开发者不必明确实例化内置对象,它已经被实例化了。
但ECMAScript只定义了两个内置对象:
Math对象 和Global对象
案例:
var _global=new Global();
错误消息显示Global不是对象,但上文却说Global是一个内置对象,这不就自相矛盾了吗?
不矛盾。
这里需要理解的主要概念是,在ECMAScript中,不存在独立的函数,所有的函数都必须是某个对象的方法。
ECMAScript中常用的函数例如isNaN()、isFinite()等,看起来都像独立的函数。
实际上,它们都是Global对象的方法。
而且Global对象的方法还不止这些。
4.6对象创建
对象创建方式:
工厂方式、 原型方式、混合方式
4.6.1工厂方式
对象的属性可在对象创建后动态定义
例1
var oCar=new Object();
oCar.color="red";
oCar.doors=4;
oCar.mpg=23;
oCar.showColor=function(){alert(this.color);};
在这段代码中,创建对象car。
然后给它设置几个属性:
它的颜色是红色,有四个门,每加仑油23英里。
最后一个属性是指向函数的指针,意味着该属性其实是个方法。
执行这段代码后,就可以使用对象car了。
可是要创建多个car实例就麻烦了。
要解决此问题,开发者可以创建并返回特定类型的对象的工厂函数。
例如,函数CreateCar()可用于封装前面列出的创建car对象的操作
例2
function createCar(){
var oTempCar=new Object();
oTempCar.color="red";
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor=function(){alert(this.color)};
return oTempCar;
}
Var oCar1=createCar();
Var oCar2=createCar();
这里,前面的所有代码都包含在createCar()函数中,此外还有一行额外的代码,返回Car对象作为函数值。
调用此函数时,将创建新对象,并赋予它所有必要的属性,复制出一个前面说明的car对象。
使用该方法,可以容易地创建car对象的两个版本,他们的属性完全一样。
当然,还可以修改creatCar()函数,给它传递各个属性的默认值,而不是赋予属性默认值:
function createCar(sColor,iDoors,iMpg){
Var oTempCar=new Object();
oTempCar.color= sColor;
oTempCar.doors= iDoors;
oTempCar.mpg= iMpg;
oTempCar.showColor=function(){alert(this.color)};
return oTempCar;
}
Var oCar1=createCar("red",4,23);
Var oCar2=createCar("blue",2,26);
oCar1.showColor(); // 输出"red"
oCar2.showColor(); // 输出"blue"
给createCar()函数加上参数,即可为要创建的car对象的color、doors和mpg属性赋值。
使这两个对象具有相同的属性,却有不同的属性值。
但这里有个问题:
每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本。
事实上,每个对象用的都是同一段代码。
这样的定义方法还有一个如下的变形:
function Car(sColor,iDoors,iMpg){
this.color= sColor;
this.doors= iDoors;
this.mpg= iMpg;
this.showColor=function(){alert(this.color)};
}
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",2,26);
oCar1.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javascriptstudy
![提示](https://static.bdocx.com/images/bang_tan.gif)