讲义教程案例javascript

客户端编

尚学堂内 外w3c的标准，所有浏览器都支持。Jsscript只是微软的产品，ie支持较好 applet(javaapplet，涂鸦activexplug-inflash技术的发jsdkplug-yahoo搜索伴CNNIC火狐的插件(火狐最重要的功能JavaScript简JavaScript是一种可以与HTML标记语言混合使用的语言，其编写的程序可以直对于很多初学者而言，往往会将JavaScript语言与JAVA编程语言混为一谈。实JavaScript是一种基于对象和驱动并具有相对安全性的客户端语言(历史已经改变)。同时也是一种广泛用于客户端Web开发的语言，常用来给HTML网页添加动态功能，比如响应用户的。它最初由网景公司的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的商标。[1]Ecma国际以JavaScript为基础制定了ECMAScriptJavaScript完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。ECMAScript是一种由欧洲计算机制造商（ECMA）通过ECMA-262标准化的程ECMA-262标准的扩展。详解： JavaScript/jscriptECMAScriptjavaScriptNetscape.Live jscript用于internetexplorerjscriptjavascript差异过大，web器编写两种。于是诞生了ECMAScript,是一种国际标准化的javascript版RelationshiptoECMAECMA-262,Edition1isbasedonJavaScriptECMA-262wasnotcompletewhenJavaScript1.2wasJavaScript1.3isfullycompatiblewithECMA-262,EditionJavaScript1.4isfullycompatiblewithECMA-262,EditionJavaScript1.5isfullycompatiblewithECMA-262,EditionJavascriptjava的区别联同的。在Netscape发展LiveScript的同时，另一家名为[升阳]（Sun）的公司也正在发展Java语言，为了辅助Java的网页程式方面的设计，所以这两家公司进行合作，共同发展LiveScript语言，并且将LiveScript语言改名为Javacript，这就是Javacript的由来。JavaScript刚开始时仅应用在Netscape浏览器，不过随着使用JavaScript制作网页的人愈来愈多，微软的IE浏览器也提供了新功能，现在可以在IE浏览器上看到JavaScript的效果了。对基于对象，不能说是面向对象。比如：javasrit不支持直接继承，而要通过一个原型对象来间接实现。多态就更不支持了。它们使用一些封装好的对象，调用对象的方法，设置对象的属性，但是它们无法让程序员派生新对象类型，他们只能使用现有对象的方法和属性，所以当你判断一面向技术是否是面向对象的时候，通常可以使用后两个特性加以判断，“面向对象”和“基于对象”都实现了“封装”的概念，但“面向对象”实现了“继承”和“多态”，而“基于对象”可以不实现这些。解释和编解编译、解变量弱变量类型js的弱类型是变量强变量类如何在网页中使用语functionalert("js}<inputtype=buttonvalue=测试 此外，在实际应用中考虑到语言书写的代码可能会比较长，可以将语言单独写在扩展明为.js的文件中，然后在<script>标记中设置src属性的值为文////不能再js文件中写：<script>html标记*@authorfunction}<scriptsrc="2.js"<inputtype=buttonvalue=测试 <script>标记的使用要<script>jsfunction}<inputtype=buttonvalue=alert("script标记可以置于页面任意部分！甚至可以直接执行js变量的及赋JavaScript是一种弱类型的语言变量的(变量使用之前必须加var，编程规范可以通过var关键字来一个变典型方式var vara,b=2, vardate=newvararray=new不能使 方法内部，没有加var关键字的变方法内部，使用var的变Javascript:void(0Javascript:void(0);Javascript<title>尚学堂JavaScript初级vara=1; functiontest1(){varb c= //执行完方法test1后就被解释成全局变量}function //先执行test1，再执行test2才能看到c的值}<inputtype=buttonvalue=测试onclick=test1<ahref="javascript:void(0onclick="test2>ceshia><!--表示执行完test2()后，什么都<inputtype=buttonvalue=测试 伪协 value=测 伪协可以省略！变量名规2.变量名长度过255个字符4.不用使用语言中保留的关键字及保留符号作为变量名。例如：var、*5.变量名区分大小写。(javascript是区分大小写的语言数据类undefined未定义(了变量但从未赋值null空(boolean(Number，nfinit<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>JavaScript初级vara;varb=}functiontestBoolean(){vara=true;varb=false;alert("a的数据类型是}}functiontestString(){vara="aaa";varb='bbbb';varc=newvare='"eeeee"'; varf="U're //varf='U'reright!';//}}functiontestNumber(){vara=123;varb=12.345;varc=NaN;vard=1/0;alert("c是NaNjs中唯一一个跟自己不相等的值！我们可以利用这个特点判断某个值是不是NaN！");}}}functiontestObject(){vard=newDate();}<inputtype=buttonvalue=测试null和 onclick="testNullUndefined();"onclick="testString();"/>onclick="testObject();"function vart1=vart2=varvart5=vart6=vararr=newvardate=newalert(typeofalert(typeofalert(typeofalert(typeofalert(typeofalert(typeofalert(typeofalert(typeof(-} functionfunction }function alert(typeof}functionalert(typeof}functionalert(Boolean(new}}数据类型的转1、Number(mix)mix转换为数值类型。其规则为：如果是布尔值，truefalse10null0.undefinedNaN。如果字符串中包含有效的浮点格式，将其转换为浮点数值（0）0NaNssd2342df’null，返回”null”以下值会被转换为false：false、””、0、NaN、null、undefined，其余任何值都会被转true。开发工具和Aptana是一个基于EclipseJavaScript编辑器和调试器。去年 的发布，Aptana也推出了功能完备的集成开发功能，在Adobe公司的RIA产品AIR推出不久之后，Aptana就支持了AIR的开发环境。对于我们开发人员来说，JavaScript代码经常需要我们开发和调试。Aptana给我们提供Aptanahtml,js,css,xml文件。装firebug组件：htt /。点击安装按钮，根据提示安装，完成后Aptana : Alt+/Ctrl,alt+上下箭头：向上/下当前Ctrl+w相等操作符StringnumberBoolean三种相比，类型相同比较值.两种类型不同的时候以下规则。如果一个操作值是对象，另一个不是，则调用对象的valueOftoString()方法，得到nullundefined如果==两边是同类型，就做值比较，如果都是对象比较的是地NumberObjectObject转化成这三者，再进行比较；nullundefined，只有x，yfalse。 0类型不同，StringNumber00==00 false=='false' //类型不同，BooleanNumber0=='false'，然后'false'Number，为0==NaN,falsefalse false== //undefinednulltrue，false==null //undefinednulltruefalse，falsenull== //undefinednull，truefalse，所以true NaN t\r\n0类型不同，StringNumberString00==0,0 '0 地址，所以 地址，所以 functionfunction}function}function6false}==function//如果 }functionvart=vart1=}xnull，yundefinedxundefined，ynullxNumber，yStringyNumberxString，yNumberxNumberxBooleanxNumberyBooleanyNumber20xStringNumber，yObjectyxObject，yStringNumberxvalueOf()toString()方法，nullundefined<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>尚学堂JavaScript初级functionvara=varb="888"+a;varc=99+a;vard=33;vare=varf= varg varh=null;varh2 //null自动转化数字varh3="aa"+h; //null自动转化为字符串alert("h自动转化为boolean}}functiontest2(){vara;varbalert("null和undefined}}<inputtype=buttonvalue=测试onclick="test();"/><inputtype=buttonvalue=测试onclick="test2();"/>表达式与运算 <!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>尚学堂JavaScript初级functionvara=33;varb="33";}}}<inputtype=buttonvalue=测试onclick="test();"/>vara=1var varb=truevar “我爱”+“”+“”产生的结果是一个新的字符串“我爱执行此表达式时，先判断条件即:1true，则整个三2的值，否则整个运算结果为表达式3的值。&&||运算分支语if…else语句完成了程序流程中的分支功能，如果其中的条件成立，则程序执行相应if…elseif(条件}swith可以根据一个变量的不同取值而采取不同的处理方法，在程序设计Switchswitchcase }switchif时推荐使用switch循环语forfor初始化部分；条件部分；更新部分语句块}Whilewhile(条件}通过Console的记录方法，我们可以不再使用烦人的alert或者 .write方法来进行Firebug提供了五种日志的类型console.debug:记录一行信息，带超，可以到语句调用的地方；数js数组更加类似javaJs<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>尚学堂JavaScript初级functionvara=newArray();vara2=[];//更常用a[0]=123;a[1]=newvara3=[123,"45",newa3.length2;//改变数组长度，清掉后面的元素！a3.length0;//直接清空数组}functionvara= a.shift();a.shift();//}<inputtype=buttonvalue=测试onclick="test();"/><inputtype=buttonvalue=测试onclick="test2();"/>函数及深function函数名称（参数表{}returnreturnreturnreturn语句的时候，要得到函数的返回值，只要利用函数名对一个变量赋值<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>尚学堂JavaScript初级functionvara=test2;//把test2指向的函数对象 赋值给了a //执行的仍然是test2函数}vartest2=function(){ 以发现test2是一个全局变量，他只想了 }function}function //执行b}<inputtype=buttonvalue=测试onclick="test();"/><inputtype=buttonvalue=测试 onclick="test3();"对象机抽 继 多 封具备：类，接口，抽象类四个 支持念支 支持。四个级别封 只有类，一个概

支持

不支 支持较差。两个级别封装对象构造的几种方thisObjectThisPrototype用；而对已每一个函数（类）的实例都会从prototype属性指向的对象上继承属性，换句new关键字和构造函数创建的对象的原型，就是构造函数的prototype指向的3prototype，getPrototypeOf和toobj(name,age)=this.age=}.prototype.sayName=}varp1=new("Jack",varp2=new("Zhang",30); Object.getPrototypeOf(p1)===Object.getPrototypeOf(p2)to===to===prototype属性对prototype属性对//定义父 ，构造函数内有两个属性name和age，原型对象内定义了sayName方 (name,age){=name;this.age=age;}.prototype.sayName=function(){}//定义子类Man，让其模拟继承父类functionMan(name,age){.call(this,name,age);//子类中调用父类的构造函数this.gender= }Mtotype=new //继承是通过创建父类的原型对象，并将子类的prototypeMtotype.constructor= Mtotype.sayGender=function(){varm1=newMan("Jack",32); m1.sayGender();//malevarm2=newMan("Zhang",30); m2.sayGender();//malealert(m1);alert(m1instanceof alert(Ototype.isPrototypeOf(m1));.prototype.isPrototypeOf(m1));JS中类的典型定义方 c=}this.study=alert("goodgoodstudy!daydayup!--}=name;this.age=age;继承的实Js中继承的实现:prototype""-functionvarp1=new } =name;this.age=age;this.study=alert("goodgoodstudy!daydayup!--}}function}Btotype=new ("小张",18);//Boynew出来的Stotype.trim=function(){ //Stringtrim方法，String对象都会有这个方法！ functionvarb=new }<inputtype=buttonvalue=测试 <inputtype=buttonvalue=测试prototype继承方式 JSON就是指 javascript原生对JSONJSON析与生成。JSONAJAXXML交换数据的更佳方案。<title>JavaScript初级functionvara=varb= }<inputtype=buttonvalue=测试onclick="test();"/>闭 functionvarn=999;functionf2(){}return}varresult=f1();result();//999result();//1000在这段代码中，result是闭包f2。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。varname="TheWindow";varobject={name:"MyObject",getNameFunc:function(){returnfunction(){;}varname="TheWindow";varobject={name:"MyObject",getNameFunc:function(){varthat=this;returnfunction(){return}内部函eval(Stringstr)来执行javascripteval参数字符串是和eval<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"functiontestEval()vara="alert(' varb="varc=0;";eval(b);//varvara1='alert("好varb="varalert("好eval("varvarvar}functiontestParse(){vard="3.555";vare1="abd";vard1=parseFloat(d);vard2=parseInt(d);vare2=parseInt(e1); if(isNaN(e2))alert("I'ma}if(e2!=e2)if(e2!=e2)}if(isFinite(e2))alert("我是一个正常的}}functiontestEscapevarstr="中国varstr1=varstr2=unescape(str1);}机<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"functiontestClick(){}functionalert("double}function}functiontestFocus(){}functiontestChange(){}functiontestMouseMove(){}functiontestLoad(){}functiontestUnload(){}<ahref="#"onclick="testClick();">测试 <inputtype="textname="t3"value="onFocus"<inputtype="text"name="t1"value="测试 <inputtype="textname="t2"value="onChange"javascript列解IE、IE3、IE4、IE3、Marquee动至MarqueeIE4、IE5、IE5、IE5、当某个对象被拖动时触发此[活动IE、当使用onBeforeUpdate触发取消了数据传送时，代onAfterUpdateEvent对 如果第一个操作数经Boolean()转换后为true，则返回第二个操作值，否则返回第一个值（不是Boolean()转换后的值） 如果第一个操作值经Boolean()转换后为false，则返回第二个操作值，否则返回第一个操作值（Boolean()转换后的值）event代表的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等event对象只在发生的过程中才有效event的某些属性只对特定的有意义。比如，fromElement和toElement属性只onmouseover和onmouseout有意义functionvarevt=varsrc=//varcode=evt.keyCode||evt.charCode;}<inputtype=buttonvalue=onclick=test(eventEvent对象常用属性(参考，不必)：altKey,button,cancelBubble,X,Y,ctrley,fromEl ent,keyCode,offsetX,offstY,alt键的状态。altTRUEFALSE这个属性仅用于onmousedown,onmouseup,和onmousemove。对其他，不管鼠标状态如何，都返回0（onclickevent.cancelBubble[=TRUE不被上层原素的控制FALSE允许被上层元素的控制。这是默认值。层元素（body）上的onclick所的showSrc()函数。<SCRIPTfunctioncheckCancel()if}functionshowSrc()if(window.event.srcElement.tagName=="IMG")}<BODY<IMGonclick="checkCancel()"X返回鼠标在窗口客户区域中的X坐标。YY坐标。ctrl键的状态。ctrlTRUEFALSE检测onmouseover和onmouseout发生时，鼠标所离开的元素。参考：18.toElement（请参考htt 检测键盘相对应的内码。这个属性用于onkeydown,onkeyup,和onkeypress。0pertyName[=sPropertysProperty是一个字符串，指定或返回触发的元素在中变化了的属性的名称。你可以通过使用onpropertychange，得到propertyName的值。下面的例子通过使用onpropertychange弹出一个框显示propertyName的值function{btnProp.value="Thisisthenew}function{}<P>TheeventobjectpropertypropertyNameisusedheretoreturnwhichpropertyhasbeen<INPUTTYPE=buttonID=btnProponclick="changeProp()"VALUE="ClicktochangetheVALUEpropertyofthisbutton"<INPUTTYPE=buttonID=btnStylePropVALUE="ClicktochangetheCSSbackgroundColorpropertyofthisbutton"onpropertychange='alert(pertyName+"propertyhaschangedvalue")'>设置或检查从中返回的值event.returnValue[=true中的值被返false源对象上的默认操作被取消shiftshiftTRUEFALSE返回触发的元素。只读。例子见本文开头。返回触发onfilterchange的滤镜。只读。检测onmouseover和onmouseout发生时鼠标所进入的元素。参考：7.fromElementfunctiontestMouse(oObject){if(oObject.contains(event.toElement)){alert("mousearrived");}}:<BUTTONID=oButtononmouseover="testMouse(this)">MouseOver返回名。20.csspositionxcsspositionBODY如果触发后，鼠标移出窗口外，则返回的值为-21.csspositionycsspositionBODY如果触发后，鼠标移出窗口外，则返回的值为-框alert,""-functionvarnameprompt("您没有登录，请输入用户名：");alert("yourname:"+name);}functionvarisLoginconfirm("您确认登录吗？");if(isLogin){}else//}}常见内置对varcurr=new<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"functiontestDate()vardate2=new //本地时间， 时.write(date2.toGMTString());//}Math内置的Math对象可以用来处理各种数<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"functiontestMath()varvarint1Math.round(random1*100);//产生0-100之间的任意一个整数});"StringString对象提供的函数来处理字符串。String对字符串的处理主要提substring(m,n)mn位置结束，如果参n省略，则意味着取到字符串末尾。length:<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"functiontestString()varstr= varstr=new到n位置结束，如果参数n //返回给定字符串中从m取n个字符，如果参数n省略，则意味着取到字符串末尾}<body浏览器对象(BOM)的层次结windowwindowwindowwindowURL地址Specifiesadelayforcallingafunctionor anCallsafunctionorevaluatesanexpressioneverytimethespecifiedintervalClearsatimeoutthatwassetwiththesetTimeoutClearsadelaythatwassetwiththesetInterval<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"vara;varfunctiona= alert("3 }function}vari=1;b=}functiontestClearTimeout(){}}<inputtype=buttonvalue=setTimeout<inputtype=buttonvalue=setTimeout<input<inputtype=buttonvalue=setInterval<inputtype=buttonvalue=setIntervalHistoryhistory含有以前过的网页的URL地址<title>history对象);");"functionfunctionmethod()varif(c.indexOf("msie")>0){}elseif(c.indexOf("firefox")>0)}else}}location<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptfunctiontestLocation()}functiontestLocation1()}<ahref="javascript:void(0onclick="testLocation()">测<ahref="javascript:void(0onclick="testLocation1()">测试DOMDOM模型的全称是： ObjectModel,即：文档对象模型，它定义了操作文WEB页面的HTML文档 DOMAJAXDOM模型的相关技术，才算真正掌握了ajax开发精髓。HTML对象DOM模型中，整个文档就是由层次不同的多个节点组成，可以说结点代 o元素结点的直接结使 间接节 子结childNodes集合属性，类型是数组对象，表示该排列，因此可以通过索引来依次各个子结点。 父节DOM模型中，除了根结点，每个结点都仅有一个父节点parentNode属性来 nodeValue:null属性节点返回undefined文本结点返回文本值<divid=div1<divid=div2name="div22"<divid=div3<divid=div4div2=div2.nextSibling;}div3=functionfunctionvarct varchilds=//nodeType12}}functiontest02(){varqq= varatts=}}(),functionfunctiontestAttr()varf }innerHTMLHTML片段直接填充页面或HTML片段，大大提高了开发的灵活性。<div<divid="div3">将得到的文本} functionfunctionfunctionvardd dd.innerHTMLb>奥运会马上要开了！<b><h1>}使 vardivElement 使用receChild方法取代子结DOMDHTMLJavascript操作stylestylecss,stylecss属性—stylecss属性，在stylestyleclassNamecss<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<title>javascript操作<style.red{}.blue{font-style:italic;}}functiontestCSS1()vart .ge }functiontestCSS()vart .ge}<divclass="red"id="div1);"表单操 //得到页面中的第i个表单 //得到页面中相应name的表id Form属 描 nameForm方 描 相当于单击resetForm disablednametype(textpasswordtextarea<!DOCTYPE<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"<ScriptfunctiongetRadioValue()varradioGroup //不能想当然用这个。必须遍历才能取到被选varselected=selected=