Javascript学习笔记

精通HTML语言，擅长css+div布局，css3+html5,响应式布局，能快速手写兼容各类常用浏览器的前端代码。精通Photoshop、Dreamweaver、Flash等美工制作软件。对各类常用Javascript效果,query框架有一定的研究，熟悉java和JSP编程，SQL语言，数据库面试题1.Class=”box”与.Box{}这两者有区别，大小写必须一致3.剃刀文件是一个.js文件4.Js只写在行为层，html只写在结构层，不要串写。5.选项卡，水平菜单6.什么是函数：一个程序块，执行一项单一任务或一系列任务。好处是具有重用性，降低程序复杂度。7.什么是闭包：有权限访问另一个函数作用域的变量的函数。创建闭包的常见方式就是在一个函数a内部创建另一个函数b，即内部函数。当内部函数在定义它的作用域的外部被引用时，就创建了该内部函数的一个闭包。称外部函数的调用环境为封闭闭包的环境。如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会被释放（最后的值会保存），闭包仍然需要使用它们。闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。8.(1)vars=confirm();(2)vars;s=confirm();(1)方法声明变量立即赋值更好2.书写CSS样式步骤：a.先做reset样式（将浏览器内置的样式复位，即覆盖）b.按照结构层盒子的嵌套，并列关系写好盒子关系c.按照效果图分析效果给每个盒子添加相应的属性和值9.页面一：alert(s);//报错，找不到页面二：vars;alert(s);//undefined页面三：alert(window.XMLHttpRequest);//不报错，弹出内容10.面向对象：无需关心内部如何，只要知道如何使用它封装、抽象（把主要的内容抽出，创建对象，再进行封装）、继承（子级继承父级的属性和方法）用面向对象做选项卡11.属性和变量的区别，函数和方法的区别属性和方法是属于某对象，是私有的；变量是自由自在的。变量能变成属性，属性不能变成变量。全局变量和函数相当于window的属性：vara==window.afunctionaa()==window.aa=function()面向对象叫“方法”，面向过程叫“函数”，函数是有返回值的方法用对象调用的叫方法（this），直接调用函数名的叫函数事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件处理程序的名字以on开头，因此click事件的事件处理程序就是onclick。分类：读取事件页面载入事件onload，对象window用户事件1.onmouseoveronmouseoutonmousemoveonmouseuponmousedownonclickonkeydownonkeyuponcontextmenu（环境菜单）对象document2.onsubmit对象formonsubmit在form上加，不能在submit按钮上加3.keycodeclientXclientYbutton（指示哪一个鼠标键被按下[0无、1左、2右、4中]）offsetXoffsetYpageXpageY对象eventclientXclientY以可视区域来定坐标4.clientWidth可视区域的宽度clientHeight对象documentElement(html)offset可读不可写offsetWidth物体自身宽度，包含边框，填充，不包边界offsetLeft左偏移量，包含左边界scrollscrollTop滚动离开顶端的距离scrollWidthonfocusonbluronreadystatechangesetTimeoutsetInterval对象window设置定时器前可以先关定时器，解决许多问题cookie对象document火狐，查看页面信息functioneventHandler(e){//获取事件对象e=e||window.event;//IE和Chrome下是window.eventFF下是e//获取事件源vartarget=e.target||e.srcElement;//IE和Chrome下是srcElementFF下是target}用CSS3做简单的动画效果但兼容性低，Javascript做复杂的动画效果，JQuery也可做动画效果且兼容性高。8个div语义化不强表格加载速度慢列表ullispana;dldtdd最好解决样式冲突。Javascript最佳实践交互就是网页的元素针对用户的特定行为，产生指定的变化。响应事件。1.是什么？JS是用来实现交互的。它是纯文本的，用任何的纯文本编辑器都能编辑它；同时它是网页的一部分，随着一个html页面被请求，JS脚本也随之下载到了用户的计算机本地，在用户计算机本地渲染运行。它是可读的。2.不是什么？（1）Javascript不是Java。Javascript是轻量级运行在浏览器中的语言，而Java是跨平台的开发多种应用的语言。Jsp网站、安卓都是Java开发的。（2）Javascript和php,asp,jsp完全不同。Javascript是运行在用户计算机中的，是前台的脚本；php,asp,jsp是运行在服务器上的。Javascript的功能单一，仅仅是用来开发页面效果的；php等语言可以与数据库交互，开发网站程序的。（3）有Javascript的网页是静态网页，不是动态网页。动态，静态是指是否与数据库产生交互。只有php,asp,jsp这些网页，才是动态网页。3.学习重点引用类型高级程序设计121页ObjectArrayDateRegExpFunction对象小铅笔第六章内置对象(DOM)ObjectArrayDateStringEventNumberMathBooleanFunctionGlobalRegExpMath对象是一个固有的对象，无需创建它，直接把Math作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。浏览器对象(BOM)documentwindow作用域局部、全局作用：控制读写操作域：空间范围只有script内（或js文件内）和函数内叫域对读写操作可控范围的一个描述浏览器对js程序的解析机制：碰到域就会发生的操作（1）JS预解析先把函数和变量以及参数（varfunction）提取出来，放入库中alert(a);//undefinedalert(fn1);//functionfn1(){alert(1);}vara=1;functionfn1(){alert(1);}//a=未定义fn1=functionfn1(){alert(1);}（2）逐行读代码表达式会修改预解析的值正则表达式往往配合searchmatchreplace方法使用；小写和大写字母相反；Search只能查位置match可以返回字符、数组；[asd]pc=apcspcdpcECMAScript通过RegExp类型来支持正则表达式：varexpression=/pattern/flags;//Perlpattern--正则表达式flags--g（全局模式）i（不区分大小写模式）m（多行模式）Ecmascript规范要执行什么事情，就要找负责这个事情的对象：DOM文档对象模型DocumentObjectModel（统一）在页面中可见，负责一切和文档相关的事BOM浏览器对象模型（不统一）负责一切和浏览器窗口相关的事Console负责一切和控制台有关的事面试：window的对象：document,event,frame,history,location,navigator,screendocument的对象：anchor,applet,area,embed,form及其属性,image,link1.JS对象JavaScript中的所有事物都是对象：字符串、数值、数组、函数...允许自定义对象提供多个内建对象：ObjectArrayDateRegExpStringeventNumberMath等对象只是带有属性和方法的特殊数据类型。自定义属性：oP.name=””;oP[i].index=i;2.创建对象的几种方法164页（1）工厂模式functioncreatePerson(name,age,job){//形参varo=newObject();o.name=name;//属性，形参o.age=age;o.job=job;o.sayName=function(){alert(this.name);};returno;}varperson1=createPerson(Nicholas,29,SoftwareEngineer);//对象varperson2=createPerson(Greg,27,Doctor);工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。（2）构造函数模式this发生在当前事件上的对象functionPerson(name,age,job){this.name=name;this.age=age;this.job=job;this.sayName=function(){“我的名字叫：”+this.name;};}varperson1=newPerson(Nicholas,29,SoftwareEngineer);varperson2=newPerson(Greg,27,Doctor);此方法没有显式地创建对象；直接将属性和方法赋给了this对象；没有return语句。调用构造函数：必须使用new操作符。构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。（3）原型模式prototype170页functionPerson(){}//构造函数成了空函数Person.prototype.name=Nicholas;Person.prototype.age=29;Person.prototype.job=SoftwareEngineer;Person.prototype.sayName=function(){alert(this.name);};varperson1=newPerson();person1.sayName();//Nicholasvarperson2=newPerson();person2.sayName();//Nicholasalert(person1.sayName==person2.sayName);//true同时使用hasOwnProperty()方法和in操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中。简化原型模式：functionPerson(){}Person.prototype={name:Nicholas,age:29,job:SoftwareEngineer,sayName:function(){alert(this.name);}};原型模式的不足：它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值；它最大问题是由其共享的本性所导致，原型中所有属性是被很多实例共享的，这种共享对于函数非常合适，然而，对于包含引用类型值的属性来说，问题就比较突出了。（4）组合使用构造函数模式和原型模式（推荐）176页（5）动态原型模式（6）寄生构造函数模式（7）稳妥构造函数模式（安全）常见的三种节点：元素节点(p)，属性节点(id)，文本节点(text)（查找时的先后顺序）pid=”p1”class=””text/p4.如何学？增删改查（读写）对htmlcssinnerHTMLcreateTextNodeappendChildparentNodeinsertBeforechildNodesnodeValue行为层的样式优先级最高。Js控制css用s