JavaScript学习笔记

“玩转”Java系列—————————————————————————————1【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】JavaScript学习笔记1JavaScript简介：JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，是一种动态、弱类型、基于原型的语言，内置支持类。它的解释器被称为JavaScript引擎，为浏览器的一部份。同时也是一种广泛用于客户端Web开发的脚本语言。最初由网景公司（Netscape）的布兰登·艾克（BrendanEich）设计，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。JavaScript是Sun公司的注册商标，和Java没有直接关系。2JavaScriptHelloWorld2.1点击按钮弹出文本值2.2HTML代码：buttonClickMe!/button2.3JavaScript代码scripttype=text/javascript//借助window.onload事件，在文档加载之后，进行相关操作window.onload=function(){//获取按钮对应的元素节点对象varbtn=document.getElementsByTagName(button)[0];//绑定单击响应函数btn.onclick=function(){//打印文本值alert(this.firstChild.nodeValue);}}/script2.4由HelloWorld引出的四个问题2.4.1JavaScript基本语法和Java有什么区别？2.4.2为什么要使用window.onload？2.4.3在我单击按钮后如何让程序执行我希望的操作？2.4.4HTML代码中的button标签在JavaScript代码中是怎么表示的？如何获取？3JavaScript基本语法3.1认识script标签“玩转”Java系列—————————————————————————————2【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】3.1.1script标签用于定义客户端脚本，比如JavaScript3.1.2在语法上，script标签可以写在html/html标签内的任何位置3.1.3type属性是必需的，用来规定脚本的MIME类型。对于JavaScript，其MIME类型是text/javascript。3.1.4language属性：不赞成使用3.1.5在文档中直接插入JavaScript代码scripttype=text/javascriptalert(HelloWorld!);/script3.1.6连接外部JavaScript文件3.1.6.1script标签的src属性：规定外部脚本文件的URL。3.1.6.2纯JavaScript代码可以保存到“.js”文件中，在“.js”文件中，写JavaScript代码和在script标签中完全一样3.1.6.3scripttype=text/javascriptsrc=script/jquery-1.7.2.js/script3.1.6.4注意：加载外部CSS样式表使用的是link标签，和加载外部JS文件不同！linkrel=stylesheettype=text/csshref=theme.css/3.2JavaScript数据类型3.2.1字符串：JavaScript中没有“字符型”数据，单个字符也被当成字符串处理3.2.2数字型：JavaScript不区分整型和浮点型，所有数字都是以浮点型来表示的3.2.3布尔型true：true、非零的数字、非空的字符串false：false、数字0、空字符串、undefined、null3.2.4函数：在JavaScript中，函数也是一个对象，可作为一个值赋给变量，函数名就是这个对象的引用。3.2.5Null：代表“空”。Null是数据类型，它只有一个值：null不代表数字型的0，不代表字符串类型的””空字符串不是一个有效的数字、字符串、对象、数组和函数，什么数据类型都不是JavaScript区分大小写，Null、NULL都不等同于nulltypeof(null)返回Object（为了向下兼容）3.2.6undefined：表示：未定义定义了一个变量但未赋值使用了一个未定义的变量使用了一个不存在的对象的属性3.3JavaScript严格区分大小写3.4JavaScript标识符命名规范和Java完全一样3.5变量3.5.1使用var关键字声明3.5.2JavaScript是弱类型语言，声明变量时，不需要指定类型。变量在使用中也可以存储各种类型的数据3.6函数“玩转”Java系列—————————————————————————————3【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】4JavaScript代码写在什么位置4.1HTML标签内4.1.1buttononclick=alert('hello')ClickMe/button4.1.2js和html强耦合,不利于代码的维护。例如：给10个button按钮绑定同样的单击响应函数。如果要修改函数名则必须在10个button标签处都修改，容易造成遗漏或不一致4.2head标签内4.2.1这个位置更符合习惯，但有严重问题：在body节点之前执行的代码无法直接获取body内的节点。原因：此时html文档树还没有加载完成，更准确的说就是——内存中的DOM结构还不完整，不包括未加载的DOM节点，所以相关节点JavaScript程序获取不到4.2.2浏览器加载原理分析4.2.2.1浏览器按照从上到下的顺序下载HTML文档，一边下载，一边加载到内存，不是全部下载后再全部加载到内存。另外，DOM树结构的绘制优先于关联元素的加载，比如图片。4.2.2.2通常来说，浏览器执行JavaScript脚本有两大特性：①载入后马上执行。②执行时会阻塞页面后续内容（包括页面的渲染、其它资源的下载）。4.2.2.3浏览器加载HTML文档时，如果遇到script标签就会停止后面元素的加载，先对JavaScript脚本文件进行解析和执行。4.3body标签后面4.3.1能获取到body内的元素节点4.3.2把代码写在这个位置严重不符合习惯4.4window.onload4.4.1window.onload事件是在当前文档完全加载之后被触发，此时HTML文档树已经加载完成，可以获取到当前文档中的任何节点4.4.2最终的加载执行顺序1st.浏览器加载HTML文档2nd.遇到script标签停止加载后面的HTML元素，开始解析执行JavaScript代码3rd.将封装了相关操作的响应函数绑定到window.onload事件上4th.加载HTML元素，绘制DOM结构5th.HTML文档加载完成，触发window.onload事件“玩转”Java系列—————————————————————————————4【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】6th.开始执行window.onload事件响应函数中的JavaScript代码5事件的监听和响应5.1事件的监听和响应是用户和应用程序进行交互的方式5.2为控件绑定事件响应函数5.2.1从文档对象模型中获取控件对象5.2.2声明一个事件响应函数5.2.3将事件响应函数的引用赋值给控件对象的onclick属性5.3取消控件默认行为5.3.1超链接的跳转功能：returnfalse;5.3.2提交按钮的提交功能：returnfalse;5.4事件冒泡5.4.1概念：用户操作的动作要传递给当前控件，响应函数执行完之后，还要继续传递给它的父元素，并一直向上传递，直到顶层5.4.2产生的原因：监听区域的重合5.4.3取消的方法：returnfalse;5.5焦点5.5.1一个控件被激活时就获得了焦点，也可以反过来说：一个控件获得焦点时被激活5.5.2获得焦点事件：onfocus5.5.3失去焦点事件：onblur6DOM6.1DocumentObjectModel：文档对象模型定义了访问和处理HTML文档的标准方法。是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现如C#、PHP、Java、Ruby、perl、python等6.2DOM树6.2.1上下为父子关系6.2.2左右为兄弟关系“玩转”Java系列—————————————————————————————5【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】6.3节点6.3.1节点的概念来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。相应的，我们可以说HTML文档是由DOM节点构成的集合6.3.2节点的分类6.3.2.1元素节点：构成HTML文档最基本的HTML元素，对应HTML文档中的HTML标签6.3.2.2属性节点：对应元素的属性6.3.2.3文本节点：对应HTML标签内的文本内容7节点的属性7.1.1nodeName:代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName属性将返回内容为#text的字符串7.1.2nodeType：返回一个整数,这个数值代表着给定节点的类型.只读属性.1--元素节点,2--属性节点,3--文本节点7.1.3nodeValue：返回给定节点的当前值(字符串).可读写的属性7.1.3.1元素节点,返回值是null7.1.3.2属性节点:返回值是这个属性的值7.1.3.3文本节点:返回值是这个文本节点的内容8获取元素节点8.1根据id属性值获取：调用document对象的getElementById(元素的id属性)，返回的是当前元素节点的引用8.2根据标签名，获取元素节点8.2.1调用document对象的getElementsByTagName(标签名)，返回的是标签名对应的元素节点的数组8.2.2也可以通过一个元素节点来调用getElementsByTagName(标签名)方法8.3根据name属性值获取一组元素节点8.3.1通过调用document对象的getElementsByName(元素的name属性值)方法，返回的是一个元素的数组8.3.2如果HTML标签本身没有name属性，这时通过getElementsByName()方法获取元素节点IE获取不到严格遵守W3C标准的浏览器可以获取到8.4操作属性8.4.1推荐方法8.4.1.1读：element.attrName“玩转”Java系列—————————————————————————————6【更多Java–Android资料下载，可访问尚硅谷（中国）官网下载区】8.4.1.2写：element.attrName=”newvalue”;8.4.2经典方法8.4.2.1获取属性节点对象：element.getAttributeNode(属性名)返回一个属性节点对象的引用8.4.2.2读取值：attrNode.nodeValue8.4.2.3修改值：attrNode.nodeValue=newvalue9获取元素节点的子节点9.1查看元素节点是否存在子节点:hasChildNodes()。只有元素节点才可能有子节点9.2通过childNodes属性获取全部子节点。IE和W3C的标准有区别：IE忽略空格（空行），W3C标准会把空格也当作子节点9.3通过firstChild属性获取元素节点的第一个子节点。该方法经常被用来获取文本节点如：元