Javascript学习笔记及他人建议(前台脚本).docx

JavaScript语法1. 输出1) Alert(“”);（弹出对话框）2) Document.write(“”);输出内容3) Prompt(“”,0);（弹出对话框,注意输入的默认作为字符串）2. 如何在HTML中使用js1) 使用将js语法嵌入到Html中，可以使用多个每一个都是关联的。注：在Html中任何位置都可以嵌入，但是在里将不会向页面输出内容，而在中会被浏览器加载向页面输出相应的内容。2) 链接地址可以加（eg：demo;点击链接时会启动特效）（Form表单）3) （外部文件关联“引用javascript特效”相当于引入css）3. 变量1) 命名规范a) 有一定意义（英文单词）b) 不能以数字开头,不能是系统的关键字c) 严格(所有名称)区分大小写,命名(多单词)首单词全小写、以后单词首字母大写。d) 对象的名字首字母都大写e) Javascript中当做没常量f) 结构定义：没有分号。功能执行语句：加分号（回车就加分号）。注：换行相当于加分号来结束语句。g) 注释：/单行；/*/多行（可用于调试、注释）可以使用下面格式在浏览器不支持Js代码时自动注销js代码。2) 定义：a) 变量在内存中占据内存直到浏览器关闭（即可以随时使用）b) 格式：var 变量名=值 (声明、赋值)c) 变量再传递的情况下可以不声明（eg: var a=3; (var) b=a;）4. 数据类型注：检验函数typeof（变量）；用undefine判断变量有没有声明1) 类型：a) number（int float double）计算时还是按详细类型使用b) string（string char）c) booleamd) object（object array null）注意：分别处理e) function（函数）2) 特点：a) 整数：十进制（10）、八进制（o45）、十六进制（oxff）b) 浮点数是近似数（eg：十个0.1相加实质是0.99999999近似数）c) 字符串：用（“”两者没有区别）引号内所有转义（）都可用，字符串中有变量用“+”连接（eg: “abc”+x+”123” x为变量）3) 类型转换：a) 其他类型强制转换为数值型：parseInt()、parseFloat()b) 其他类型转换为对象型：变量名new String/Boolean/Number()5. 运算符和表达式1）.运算符：a) 算术运算符号：+ - * %（求模） + -b) 赋值运算符：= += -= *= /= %=c) 条件运算符号： = （右移） （无符号右移） 与6. 流程控制1) 顺序结构(从上往下)2) 条件结构分支结构选择结构a) 单路分支If（bool） b) 双路分支If（bool）elsec) 多路分支If（bool）else if（bool）elseSwitch(变量)case 值1：表达式；break;default（单值匹配）d) 嵌套分支If（bool）if（）switch() else for()while()3) 循环结构While()（先判断，在执行）、Do-while()（先执行，再循环）、For()Break跳出循环;continue结束本次循环;7. 函数1) 定义：是一段完成“指定功能”的已经“命名”的代码段，只有“调用”（在声明前后都可）才能用到。2) 格式：声明function 函数名（形参）功能段（一条或多条）调用函数名（实参）注：返回值return；只是函数名时代表整个函数，有括号就是调用。还可以看成变量：var 函数名=function（）函数名不带括号，则代表这个函数。3) 回调函数:一个函数的形参的位置是一个函数(调用形式),在变量不能解决时使用回调4) 应用:全局变量,局部变量。（a=a？a：1；这可以使javascript中默认参数功能）5) Javascript是基于对象（所有的都是对象的使用形式）（global对象和windows中的可以直接使用）8. 对象（相似其他语言中的类）1) 基于对象的操作方式（面向对象封装、继承、多态）2) 将相关的操作使用一个对象完成，看成是一个整体3) 对象类型：字符串对象、数学对象、数组对象、时间对象4) 对象中存的内容（属性变量、方法函数）都是和对象相关的。5) 声明对象(写一个函数，建立一个对象Object，跟这个对象有关的东西(属性、方法)都往里面放)、使用对象（this是对象的自称，）、使用系统对像（找到对象具体化对象操作对象）对象实例.属性（取值、赋值） 对象实例【“属性名”】 对象实例.方法（）Eg：（时间对象）var dt=new Date(); var str=”今天是”； str+=dt.getYear()+”年”；str+=(dt.getMonth()+1+)”+月”； str+=dt.getDate()+”日”； str+=dt.getHours()+”：”； str+=dt.getMInutes()+”：”； str+=dt.getseconds()+”星期”；switch(dt.getDay()case 0: str+=”日”；break；case 1: str+=”一”；break；case 2: str+=”二”；break；case 3: str+=”三”；break；case 4: str+=”四”；break；case 5: str+=”五”；break；case 6: str+=”六”；break；（时间问候语、日历）var dt=new Date(); var str=”今天是”；With(dt) str+=getYear()+”年”；str+=(getMonth()+1+)”+月”； str+=getDate()+”日”； str+=getHours()+”：”； str+=dt.getMInutes()+”：”； str+=getseconds()+”星期”；switch(getDay()case 0: str+=”日”；break；case 1: str+=”一”；break；case 2: str+=”二”；break；case 3: str+=”三”；break；case 4: str+=”四”；break；case 5: str+=”五”；break；case 6: str+=”六”；break；6) With（对象）所有方法如果不加对象，都是括号对象的方法 （见上例）doucument.write(“”)（tr、/td、/table）另：for（变量 in 对象） with（对象） 9. 内置JS对象1) 全局对象在global里2) 不用接触（跟数据有关）：Boolean布尔型、Doctionary字典开型、Enumerator 对象、Error对象、函数、数字、字符串、vbarray对象3) 掌握：字符串（匹配、分割、查找）&正则（定界符）、global、object、日期、数组、数学对象（javascript教材.chm）Eg：保证一个值在一定范围：var i=3 var i=Math.max(-6,Math.min(6,i)（在-6和6之间）4) 静态（固定对象）对象：Number、Math。不用new对象（var number=Math.random()）10. 自定义对象的三种方法1) 土方法（很白痴）function Car() var c=new Car();/属性c.color=yellow;eage=100;c.brand=BMW;/方法c.whistle=function()document.write(get out of my way!);c.start=function()document.write(Im moving!)c.stop=function()document.write(Im tired!)document.write(第一种方法);document.write(c.color+);document.write(eage+);document.write(c.brand+);c.whistle();document.write();c.start();document.write();c.stop();document.write();2) 利用系统自身的Object做“封装型”（推荐使用）function Car()var c=new Object();/属性c.color=yellow;eage=100;c.brand=BMW;/方法c.whistle=function()document.write(get out of my way!);c.start=function()document.write(Im moving!)c.stop=function()document.write(Im tired!)return c;document.write(第二种方法);document.write(c.color+);document.write(eage+);document.write(c.brand+);c.whistle();document.write();c.start();document.write();c.stop();document.write();document.write();3) 使用this以及变量可传（很灵活）function Car(color,mileage,brand)/属性this.color=color;/没有this.就表明不是对象里eage=mileage;this.brand=brand;/方法this.whistle=function()document.write(get out of my way!);this.start=function()document.write(Im moving!)this.stoop=function()document.write(Im tired!)/使用时要new一个对象var c=new Car(black,200,大奔);document.write(第三种方法);document.write(c.color+);document.write(eage+);document.write(c.brand+);c.whistle();document.write();c.start();document.write();c.stoop();document.write();11. 数组的声明与应用1) 数组的作用：只要是批量的数据都需要数组生明2) 如何声明数组a) 快速声明数组：var 数组名“字符串” ,数值,布尔值,等元素 , , , ,（数组里面嵌数组也行）（Json格式：var p=属性：值，属性：值，属性：值， ）b) 声明方式(对象声明)使用array对象 var arr=new Array（“成员”，“成员”，。“成员n”）测长alert（arr.length）;赋值arri=”;取元素alert（arri）其中arr为数组名Arguments默认的，课代表建立数组的所有元素，像地址。3) 遍历数组:首选for循环。4) 数组的处理（内置处理方法）数组排序（建立函数对象）、进栈push、出栈pop、入队shift、出队unshift、随机背景颜色的设置： var colors=“red”,”blue”,”yellow”,”green”,”#FF00FF” document.bgColors=colorsMath.floor(Math.random()*colors.length);设计贪食蛇游戏12. Dom（document object modle）的操作1) Document-文档。进一步指.html/.xml文件（标记语言）（注意：如果使用JS操作HTML/Xml文档，就要先将HTML/Xml文档结构转成JS对象）2) Object-对象。进一步指.html/.xml元素转成的的对象。那就可以操作属性、操作内容、操作样式。3) 获取对象的形式：一种是根据的ID或Class属性来指定操作（Tagname标签、id、name）属性操作：Var object=document.getElementsByTagName(“*”);写上改变的属性。内容操作：innnertext（IE）textContent（FF）解决两大浏览器的兼容问题function ffie(object,value)if(document.all)if(typeof(vaule)=”undefined”)return obj.innerText;else obj.innerText=Vaule;else if(typeof(vaule)=”undefined”)return obj.textContent;else obj.textContent=Vaule;（innertText、innerHtml、outerText、outerHtml用来取元素中间的内容）注释：object.value用来取表单()里的值、文本，包括元素之间的文本（eg: alert(username.value);会弹出“zhangsan”）样式操作：样式对应有多个值时：对象.样式.属性.值（eg：object.style.backgroundColor=”red”;一个一个的操作属性（连字符变成首字母大写）；若不是内联样则object.offset.属性；若是一个对象的多个属性，就可以用到“类”的方法：object.className=”类名”;（类名是新建的属性集的名称）加多个类名aobj.className=”test”; aobj.className=+” demo”;（等同于aobj.className=”test demo”;）清空属性eg：aobj.className=”;另一种是通过数组（选项卡）遍历对象（全选、反选）var pro=“”；for（pro in aojb）document.write（“a.”+pro+“=”+aobjpro+“”）;掌握以下对象属性document.all=objectdocument.embeds=objectdocument.scripts=objectdocument.applets=objectdocument.images=objectdocument.forms=objectdocument.achors=objectdocument.styleSheets=objectdocument.links=object以上对象可以看成数组：eg: document.forms=objectWith(object)Forms1.username.value; Forms“名”.username.value; Forms.items(1).username.value ; Forms.items(“名”).username.value; Forms.“名”.username.value; “名”.username.value; “名”.username.valu;4) Modle-看成一个整体的倒立的树每一个部分（元素、内容、属性、注释）都是一个节点【node，父（parentNote）、子（childNode第一个firstNote、最后一个lastNote）、同胞节点（previousSibling上一个、nextSibling下一个）】只要知道一个节点，按关系找到其他节点。找到节点：节点类型nodeType、节点名nodeName、节点值nodeValue。每个节点都拥有着关于节点的某些信息的属性。这些属性是：nodeName（节点名称）、nodeValue（节点值）、nodeType（节点类型）。nodeName属性含有节点的名称。元素节点的nodeName是标签名称，属性节点的nodeName是属性名称，文本节点的nodeName永远是#text，文档节点的nodeName永远是#document注释：nodeName所包含的Xml元素的标签名称永远是大写的；对于文本节点，nodeValue属性包含文本；对于属性节点，nodeValue属性包含属性值；nodeValue属性对于文档节点和元素节点是不可用得。nodeType属性可以返回节点的类型（元素1、属性2、文本3、注释8、文档9）Alert（对象，节点）；（找名、属性、父、子、同胞）注释：内容输出完毕文档流结束。5) 可以在一个文档中动态的创建节点（document.createElements（”*”）或appendChild（）；或insertBefore（）；）、添加到文档流中、删除节点（removeChild（）；）注：页面文档流（分割文档流document.close（）；）13. 事件处理1) 事件源任何一个Html元素（节点）body、div、button、p、a、h12) 事件（你的操作）：鼠标：click 单击、dblclick 双击、textcontentmenu(在body体上)文本菜单、mouseover放上、mouseout 离开、mousedown 放下、mouseup抬起、wousemove 移动键盘：、keypress 键盘事件、keyup 抬起、keydown 按下文档：、load 加载（页面加载完后执行）、unload 关闭、beforeunload 关闭之前表单：、focus 焦点、blur 失去焦点、submit 提交事件、change 改变其他：、scroll 滚动、select 选择3) 事件处理三种方法加事件（一个事件源上允许有多个事件）第一种（在标签上）：格式：第二种（script内）：对象.on事件=事件处理程序第三种（不常用）：事件处理程序注意不执行或屏蔽，只需使用返回假（return false）14. 事件对象（eventwindows.event的简写）属性：srcElement代表事件源对象（解决浏览器兼容性问题）KeyCode事件发生的键盘码 keypress只能获取数字字母键，keydown或keyup全部获取（游戏：小人行走）鼠标事件：clientX，clientY（客户端窗体内鼠标坐标）sereenX，screenY（屏幕内鼠标的坐标）15. BOM（browser object oudle）浏览器对象一、浏览器本身自己就有一些对象，不用创建就可以使用Window：当前浏览器窗体的对象属性：status opener closed方法：alert（）confirm（）（确定与取消返回真假）setInterval（）动态的效果clearInterval（）setTimeout（）clearTimeout（）open（”url”,”windowname”,”windowfeature”）弹出新（子）窗体【与链接“_blank”弹出窗体不同】与父窗体有联系frames多窗口分帧window下的子对象（成员）：document、frames、location、history、screenwindow.成员eg：document.write（）其实是window.Document.write（）prototype框架对prototype框架的引用的方法 :1) $()函数$()相当于document.getElementById();$(id1|element1,id2|element2,);可以有多个参数2) $()函数根据页面中的css选择器来获取html元素$( cssRule1, cssRule2, cssRule3,);得到的是一个个数组。3) $A()函数能够把接收到的单个参数转换成工array对象，主要用于DOM节点列表转换成普通的array对象，从而有效遍历。$A()函数(参数)4) $F()函数$F();函数Form.Element.getValue();函数获取任何表单的元素值$F(id,element);5) $H()函数6) Try.these()函数检查问题函数Try.these(function1, function2, function3,)按顺序执行函数，直到其中一个成功执行，返回成功执行的函数值7) Porotype中的扩展类String Array Event 8) Porotype中的自定义对象和类对象Element Eunmerable Form.Element 类 HashForm.observerForm.Element.Observer 新手学JavaScript的小建议1.不要使用快速写法技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句： if(someVariableExists) x = false 不过，如果是这样的呢： if(someVariableExists) x = false anotherFunctionCall(); 你可能会认为它和下面的语句相等： if(someVariableExists) x = false; anotherFunctionCall(); 不幸的是，事实并非如此。现实情况是它等价于： if(someVariableExists) x = false; anotherFunctionCall(); 如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。在所有情况下都请写清楚花括号和句尾分号。在只有一行语句的时候能偶尔省略掉，虽然下这么做也是极度不被推荐的： if(2 + 2 = 4) return nicely done; 多考虑下将来吧假设，在将来的开发过程中，你需要为这个 if 语句添加更多的命令呢？到时候你还不是得把括号给加上？2. 在页面底部加载脚本我们要千方百计保证客户端的页面载入速度尽可能的快。而脚本没载入完成，浏览器就没法加载页面的剩余部分。如果你的JS文件只是添加一些额外功能例如，为点击某链接绑定事件那大可以等页面加载基本完成后再做。把JS文件放到页面最后，body的结束标签之前，这样做最好了。更好的写法是百度一下 body html 3. 在循环语句外部声明变量这样不好 for(var i = 0; i someArray.length; i+) var container = document.getElementById(container); container.innerHtml += my number + i; console.log(i); 这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 太傻了！ 这样好多了 var container = document.getElementById(container); for(var i = 0, len = someArray.length; i len; i+) container.innerHtml += my number + i; console.log(i); 4. 快速构建字串 要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法： var arr = item 1, item 2, item 3, .; var list = ul li + arr.join( li li) + li ul; 用点土办法，也别管它背后究竟发生了什么抽象的东西，通常土办法都比那些优雅的办法要快捷得多！”5. 写好注释 可能一开始你会觉得并无必要，但相信我，你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时，结果却发现很难想起当时写某句东西时脑子在想的什么了，是不是很让人沮丧呢？或者，如果有同事要修订你的代码呢？一定，一定要为你代码里的重要部分加上注释。 遍历数组，输出各自名称 for(var i = 0, len = array.length; i len; i+) console.log(arrayi); 6. 试试渐进增强 一定要记得为未启用java script的情况提供替代方案。大家可能会认为，“大部分我的访客都启用了java script的，我才不用担心”。这样的话，你可就大错特错了！你有没有试过看看禁用java script后你那漂亮的滑动器都成啥样了？（你可以下载 Web Developer ToolBar 轻松完成这项任务。）禁用之后你的网站可能就彻底失去了可用性！经验之谈：开发初期总是按照没有java script来设计你的网站，之后再进行渐进地功能增强，小心翼翼地改变你地布局。7. 慎用“setInterval” 、“setTimeout” 和“eval” 看看下面的代码： setInterval( document.getElementById(container).innerHTML += My new number + i, 3000 ); 8. 不要使用with语句 初识之下，“with”语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如： with (being.person.man.bodyparts) arms = true; legs = true; 等价于 being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs= true; 不幸的是，测试表明，若你要为对象插入新成员，with的表现非常糟糕，它的执行速度非常缓慢。替代方案是声明一个变量： var o = being.person.man.bodyparts; o.arms = true; o.legs = true; 9. 使用 ，而不用New Object()在java script有多种方式能新建对象。最传统的方法是 new 语句，如下： var o = new Object(); = Benhuoer; o.lastName = Yang; o.someFunction = function() console.log(); 新建对象更好的写法 var o = name Jeffrey, lastName = Way, someFunction function() console.log(); ; 注意，如果你想新建一个空对象，用 就能行： var o = ; 10. 使用，而不用New Array()新建数组时的同类型运用。行得通的写法 var a = new Array(); a0 = Joe; a1 = Plumber; 更好的写法 var a = Joe,Plumber; “在java script编程中经常遇到的一个错误是，该用数组时却用了对象，该用对象时却用了数组。规则其实很简单：当属性名是小的连续整数时，你应该使用数组。其他情况，使用对象。”11. 一长列变量声明？别写那么多var，用逗号吧 var someItem = some string; var anotherItem = another string; var oneMoreItem = one more string; 更好的写法 var someItem = some string, anotherItem = another string,oneMoreItem = one