JavaScript入门经典.doc

IT教程网JavaScript入门经典JavaScript基础：标记的放置位置：可以放在与之间，也可以放在与之间。当然它也可以放在其他地方，但是Web标准禁止这样做。的属性：script脚本的意思，type属性告知浏览器所使用的脚本语言。浏览器自上而下解析页面，Version 1.x表示版本号为1的所有版本的浏览器，version 1.0+表示版本号为1.0或1.0以上版本的浏览器。JavaScript中的数据类型与变量：JavaScript是一种弱类型语言。数据类型：1.数值类型（整数，浮点数），实际上JavaScript将他们都视为浮点类型；2.字符串类型，也叫文本数据，特殊字符的处理（转义序列 或 ABCD,ABCD）,HTML的一行代码中连续几个空格被视为一个空格用 表示一个空格；3.布尔类型。prompt()返回一个字符串。document对象代表Web页面，document.write()可以向Web页面中直接写入字符串和HTML标签。数据转换：对于空串和null，Number返回0，parseInt或parseFloat返回NaN；对于含有非数字字符的串Number直接返回NaN，parseInt或parseFloat返回已经转换的，若第一个就为非数字字符，则直接返回NaN。数组：长度可变，对于var arr=new Array(6)也一样。多维数组：var arr=new Array();arr0=new Array();实际上JavaScript中支持一维数组，多维数组从一位数组中模拟而来。判断、循环与函数：ifelse，switch，for，forin，while，dowhile，break，continue判断条件可以这样if(a=10)true;if(a=0)false;除了0和NaN的任何数值将被转换成true；空串(),null，undefined转换为true。isNan()判断一个数是否为NaN。逻辑运算：JavaScript并不做无用功。JavaScript基于对象的语言：浏览器自身也被设计为一个对象集合的模型，即浏览器对象模型（BOM）。Date对象：getTime()，获得从1970年1月1日00:00:00到Date对象所包含时间的毫秒数。getDate()返回当前日期是月份中的第几天，getDay()返回星期几。注意：处于安全考虑，Web页面上的Javascript程序不能修改用户计算机上的当前时间和日期。Math：静态类，不需要构造函数。向上取整，取整结果比原数据大（-9.9-9）,向下取整，取整结果比原数据小（-9.9-10）,四舍五入则只看小数部分。String对象：lastIndexOf()；其查找方式与indexOf()一样，即从待查找字符串的头开始，顺着往后比较，其第二个参数表示待查找的字符串的第一个字符的起始位置。如：var str=hello paul,how are you paul;则，lastIndexOf(paul,23);/23lastIndexOf(paul,22);/6Number对象：与String对象类似，如：var num=new Number(5);/typeof(num)=objectvar num=new Number(5);num=5;/typeof(num)=numberJavascript中的类：javascript中无需事先定义类属性，javascript将根据需要自动创建它。对于对象属性，也可以随用随加。创建类：function className(参数) this.a=参数； 属性前必须要有this，否则无效。在类中通过固有的prototype属性添加方法和属性：classNtotype.functionName=function() /对与类属性一定要有this或function functionName() /可以用this，以便指向本对象 classNtotype.newFunctionName=functionName;添加后与源数据无关。浏览器程序设计：浏览器本身也是由很多对象组成。通常把浏览器为javascript所提供的对象的集合成为浏览器对象模型（BOM），它依赖用户代理（如：浏览器）。浏览器提供的对象不需要显示创建。浏览器对象模型层次结构：window对象代表浏览器的框架或者浏览器的窗体以及与浏览器相关的一切，如滚动条，导航按钮等。Web页面加载在浏览器框架或窗体中。window对象是一个全局对象，因此，无需写出对象名。history对象保存了用户所访问过的页面信息。访问过的页面列表叫做历史栈，通过它，可以使用浏览器的前进与后退按钮。history对象类似Array对象，有一个length属性，表示历史栈中页面个数。back(),forward(),go()。go(-1),go(1)。location对象包含大量当前页面位置的有用信息：当前页面统一资源定位器（URL，href属性）；提供Web服务的服务器信息（hostname属性）；连接到服务器的端口号（port属性）；所使用的协议信息（protocol属性）；导航到另一页面：1.设置href属性；2replace()方法，不同之处，replace方法将从历史栈中删除当前页面。navigator对象包含运行当前脚本的浏览器和操作系统的大量相关信息。screen对象包含有关客户端计算机显示能力的信息，如，显示器的宽和高（width和height），显示器颜色色彩位数（colorDepth）。document对象用于加载在浏览器中页面本身，代表页面本身。通过它可以访问页面上有HTML标记所定义的各种对象的属性和方法。Document具有很多与HTML文档相关的属性，这些属性都是数组类型。document.images数组：页面上所有对象的集合。document.links数组:页面上所有对象的集合。JavaScript内置对象没有相关事件，BOM对象有相关事件：事件处理器由关键字on加上要处理的事件名组成，如：onload，onclick等。当事件发生时，事件处理器将连接到需要执行的事件处理代码。添加事件方法：1.事件处理器直接在HTM标记中作为属性，如： 或 或，返回的值将被JavaScript决定是否执行它的默认行为，为true则执行，为false则不执行，若函数没有返回值则当作true；某些对象和事件并不使用事件处理器的返回值，有些时候取消对象的默认行为时true。有些事件并不是由用户触发，如：load，unload，2. 事件处理器作为浏览器对象的属性：如： window.document.links0.onload=事件处理函数名;若函数名有返回值true或false则根据情况确定是否执行默认行为。注意：检查对象的属性和方法是否被浏览器支持。使用navigator“嗅探”已经不作推荐，主要缺陷就是某些浏览器宣称自己是ie或其他浏览器的一个特定版本，但实际上并不支持某些对象。浏览器不支持脚本或禁用了脚本支持：中的HTML代码仅在此时使用。HTML表单与用户进行交互：客户端脚本编程：使用页面中的信息。服务器端脚本编程：把信息提交给Web服务器，并将数据保存在数据库。注意：所有可交互的HTML元素都应放在HTML表单（form）中，否则某些浏览器将不显示这些元素。对于要提交到Web服务器的数据，则必须放在表单内。当向Web服务器提交表单时，一次只可以提交一个表单。访问表单的方法：document.表单名 或 document的forms数组属性。每一个表单控件对应一个对象，可以通过Form对象的elements数组属性来访问，但元素除外。Form.length与Form.elements.length是等效的。Form对象的submit()方法与Submit按钮类似，不同之处是submit()方法提交表单时不会触发Form的submit事件。大部分表单元素由创建。如果要将表单中的信息提交到服务器，表单控件的name属性将与表单元素的值一起发送到服务器。每个表单控件都有一个form属性，返回包含当前控件的Form对象。表单元素对象的focus(),blur()方法，对应表单元素的onfocus,onblur事件处理器。调用blur()方法，焦点将移动到包含该表单的页面。注意：只有当鼠标指针却是位于当前表单元素上时才会触发mouseon和mousedown，如：在表单元素外按下鼠标移动到表单元素上在松开时并没有触发事件。Submit和Reset按钮，不需要编写脚本。Text的事件：onchange（当失去焦点与获得焦点时的值不同时触发），文本的只读属性readonly不支持所有浏览器，可以用焦点事件来代替。onkeypress（onkeydown，onkeyup），onselect（文本中的字符串部分或全部被选中时）密码框（password）；隐藏域（hidden）不可见但占据空间，作用：在提交之前保存信息（多个页面之间）。文本域（textarea）：不用直接添加其值不能用value，直接在其中添加。Textarea的wrap属性用于在输入到一行结束时如何处理：wrap=soft或hard或on自动换行，wrap=off不自动换行。soft自动转换标记不提交到服务器，hard则提交。在不能使用value，但其对象可以使用value。单选框（radio）与复选框（checkbox）：关键字checked表示被选中，如：,他们的value值并不是后面的提示。具有相同名字的单选按钮组成一个单选按钮组。下拉列表和列表框均由定义：size=1为下拉列表列表框： 1111一次选择多个multiple属性，select具有一个options数组属性。Select对象的selectedIdex属性，option对象具有index，text，value属性。提交表单时value属性将被提交。增加，移除列表项：增加：在options数组中添加一Option对象，optionslength+1=new Option()；移除：直接optionsnum=null;options会自动重新排序。窗体和框架：框架的好处：代码模块化，在不同页面中保持和维护信息。框架：由框架集页面定义，用（rows，cols属性定义框架的分割情况）定义框架集，定义框架；标记用以包含标记，并定义框架在框架集页面中的组成；用以定义框架，并设置在每个框架中要加载的页面（src属性）。window对象：代表浏览器的窗体或浏览器中的框架。对于一个不包含框架的页面来说，仅存一个window对象；对于包含框架的页面来说，每个框架都有一个相应的window对象，且都是父框架window对象的子对象。window对象的属性：frames数组属性，top（总是引用最顶层窗口）属性，parent属性，opener属性（返回一个打开新窗口的源窗口的引用），closed属性（检查窗口是否没有打开）。弹出新窗口：允许用户进行设置以阻止弹出新窗口。Window对象的open()方法。Open(参数1，参数2，参数3)：参数1，要在新窗口中加载的页面的URL，若为空字符串，则打开一个空白页面；参数2，为新窗口分配的名字，这个名字并不是用以在脚本中引用该窗口，而是在HTML标记中作为target属性的值使用；参数3，指定新窗口的属性。document.open()方法：清除所有已存在的HTML，已得到一个空白页面。document.close()方法：在不使用该方法时，每次使用document.write(),插入的HTML将追加在已存在的HTML后面，使用后，则替换已存在的HTML。字符串操作与正则表达式：String对象：split()，根据某种拆分标志将一个字符串分为由子串组成的数组。注意：A,B,C,以,分割后包含一个空串。replace(),替换子串，不改变原字符串。search()与indexOf()类似，不同的是search()可以与正则表达式结合。match()与search()类似，不同的是match()返回一个字符串数组，并且也是查到一个就结束，主要是与正则表达式结合使用。正则表达式：定义字符串的模式，被封装成RegExp对象。两种方法创建正则表达式对象（注意区分全局RegExp对象）：1.直接创建，如：var str=/b|b/,其中/表示开始于结束标志；2.构造函数，注意转义字符，因此要用b,其第二个参数代表特性字符，如，g，i，m。这两种typeof()均为object。默认情况RegExp对象仅查找与模式匹配的第一个串。其特性如下：正则表达式特殊元字符：1.文本，数字和标点符号元字符：2. 重复字符：3. 位置元字符：目标字符串的开始和结束位置与单词字符之间的边界也被视为单词分界。正则表达式的分组：正则表达式中用圆括号“()”，子模式将作为一个整体进行匹配，而非对子模式中的一部分进行匹配。分组的引用：“1”,1表示第一个分组，如：var re=/(d+),1/g。正则表达式外用“$”,其余与上类似。可选元字符：“|”。计时器：计时器并不会停止对代码的执行，它在后台运行。一次性计时器：只触发一次，window.setTimeout(要执行的js代码,延迟时间毫秒为单位)，次方法返回一个ID。间隔性计时器：window.setInterval()。清除计时器：window.clearTimeout(计时器ID)，window.clearInterval()。trycatch语句，可以嵌套。注意：语法错误时不会被catch捕获的。throw：抛出的是一个对象。finally子句，无论是否有异常发生，都将执行。使用cookie存储信息：出于安全考虑，从一个Web应用程序访问本地计算机上的文件系统是被禁止的。使用cookie技术，将少量信息保存在指定位置。使用cookie的关键：使用document的cookie属性。cookie字符串：创建cookie时，需要创建一个cookie字符串。cookie的过期时间格式必须与toGMTString()所返回的日期格式完全相同。cookie不仅特定于某个域，还特定于某个路径，只有该路径目录下的页面，及其子目录下的页面可以操作这个cookie。cookie的name与value是必须设置的，而expires基本上也是必需的。Cookie的值和名称是一个简单的字符串，除非进行特定的编码，否则不能使用某些字符，如;。可以使用escape进行编码，unescape进行解码。获取cookie的值：document.cookie只能获取name和value，并且获取的时某一路径和域下的所有cookie。getCookieValue()适用于所有使用cookie浏览器。DHTML概述：当在IE浏览器中触发一个事件时，IE浏览器将产生一个全局的event对象。event的属性：type返回一个包含事件名称的字符串，不带on；srcElement（IE）返回接受当前事件的HTML元素；target（非IE）与srcElement类似，返回事件是哪一个元素触发的。其他浏览器的事件：在非IE浏览器中event对象是一个预定义属性，作为参数，并非window.event全局对象。Javascript中事件处理：值传递函数名，事件触发时非IE浏览器会自动的把事件对象传递给相应的事件处理器，因此要作出判断。为HTML定义样式的主要方法：在中定义1.为某种HTML元素定义样式（类型选择器）；2.创建一个样式类（类选择器，点号+类名），使用元素的class属性来引用；3.为某个元素单独定义样式，只用元素的style属性；4.id选择器（以#开头，将HTML元素中ID与该ID选择器相匹配的使用该样式）几种常见的样式属性：1.前景色（color，文本本身的颜色）与背景色（background-color）；为color赋值的方法：颜色名称（red，green等），rgb()表示法（0255与0%100%，如，rgb(255,0,0)与rgb(100%，0%，0%)，二者相对应），十六进制数（如：#ff0000，若写成#f00，浏览器自动转化成#ff0000）。2.背景图片（background-image，url(最好不要引号)）。3.字体，字体类型（font-family，可以设置多个，浏览器将按顺序尝试，最好在最后设置一个通用字体），字体大小（font-size，点pt，像素px），粗细（font-weight），字体风格（font-style，斜体，正常，倾斜等），定义字体属性的快捷方式（font：font-style font-weight font-size font-family，可以不全部设置，但要按顺序）。4.文本下划线设置（text-decoration，超链接默认情况下有下划线）。5.元素是否可见（visibility，并未从文档流中删除，仍然占据位置）（display，none将元素从HTML文档流中移除，block把该元素按块级元素显示，inline按行级模式显示即多个元素在一行连续显示）。6.使用CSS进行定位（position有像素和百分比两种方式，简单的有absolute绝对定位，relative相对定位），相对定位：包含关系相对于父容器，非包含关系相对于元素。DHTML技术：是一种在文档被浏览器加载以后，操纵浏览器所加载的HTML文档的技术。DOM：将HTML文档视为一种结构化的数据，层次结构的树。修改style属性：通过style属性只能访问内联样式属性。注意：在非CSS或style中应去掉连字符，改用驼峰方式。修改class属性：修改className。注意：在向服务器提交表单之后，页面将重新加载。可以onsubmit=f();return false;现代浏览器中的DHTML：DOM：将HTML文档视为一种结构化的数据，层次结构的树。DOM模型仅仅处理浏览器窗口中的内容，即Web页面，也就是HTML文档。DOM为用户提供了通用的对象，方法，属性，事件。XML：主要用来创建用户自定义的标记语言，表示和描述数据。他是纯文本格式的，即完全跨平台的。使用XML创建自定义标记语言，需要创建该语言所遵循的规则，两种方法（XML模式定义语言：XML schema；文档类型定义：DTD）同时还要检查文档结构。XHTML：XML与HTML的结合，将HTML标准按照XML应用的要求重新定义。XHTML避免了浏览器对HTML解析不规范造成的问题，它不仅能被浏览器使用，还能被其他客户端使用，如掌上电脑。DOM：在DOM树中可以添加，删除和替换节点。DOM对象：Node，NodeList，NameNodeMap。document对象属性：要访问文档树需要属性documentElement返回文档顶层元素的引用（html），方法getElementById(),getElementsByTagName()。Element（元素）对象属性：属性tagName返回节点标记名称。Node对象属性：firstChild, lastChild, childNodes, ，previousSibling，nextSibling，nodeName，nodeType，nodeValue，parentNode，ownerDocument（根节点Document，包含其他页面所有元素）注意：有的浏览器把换行与空格标记间的空白也作为文本节点。注意：不能直接document.firstChild，document.documentElement.firstChild，即要访问文档树需要属性documentElement返回文档顶层元素的引用（html）。document对象方法：创建元素节点，文本节点，属性节点：createElement（elementName），createTextNode（text），createAttribute（attributeName）-已废弃。Node对象方法：加入，删除，更改节点。Element对象方法：getAttribute(attributeName),setAttribute(attributeName，value),removeAttribute(attributeName)。DOM事件：mousedown鼠标指针位于某个元素或文本上时，按下鼠标；mouseup鼠标指针位于某个元素或文本上时，释放按下的鼠标（注意：不能按下鼠标移动到该元素上）；mouseover鼠标指针移入某个元素或文本上时；mousemove鼠标指针位于某个元素或文本上时，移动指针；mouseout鼠标指针位于某个元素或文本上时，将指针从该元素移除。工具栏：一个按钮，包含一个或多个工具栏按钮,元素并没有href属性，在显示HTML页面时浏览器将忽略此属性，但在Javascript代码中仍可以使用，即若某一元素不具有某一属性或属性值，也可以使用，只是浏览器在显示时将其忽略。内边距，外边距，边框：JavaScript与XML：XML：（Extensible Markup Language）：可扩展标记语言。它是一种严格规范的语言，以数据位中心的语言，是一种纯文本文档，因此具有很好的兼容性。纯文本格式，就是没有任何文本修饰的，没有任何粗体，下划线，斜体，图形，符号或特殊字符及特殊打印格式的文本,只保存文本，不保存其格式设置。将所有的分节符、分页符、新行字符转换为段落标记。XML文档结构：XML声明?xml?是XML文档的第一条语句,任何一个XML文档必须有且仅有一个根元素（也叫文档元素）实体引用：CDATA：在一个CDATA标记块中所有的元素标记字符，实体引用都将被XML处理器忽略，仅仅将他们视为普通字符数据。使用CDATA易于阅读。注释：在注释文本中不能包含连字号(-)或双连字号(-),可能造成混乱。注释不能放在开始或结束标记中，如：。注释也不能放在XML声明中或声明之前。可以这样：注意：使用默认样式表时，XML注释会被显示出来，称为注释文本。文档类型定义（DTD）：有效的XML文档不仅是结构良好的XML文档，而且还必须遵循文档类型定义DTD。DTD：定义XML文档的结构信息（XML文件的元素和XNL文档结构标记含义）。.dtd文件：定义文档中将要使用的元素：,elementName根元素，content子元素，多个content用,分开。定义属性：在XML文件中用该它来引用DTD文件，SYSTEM 表示DTD文件是一个单独的文件。浏览器之所以能够显示XML文档，使之按某种颜色显示，或者可以进行折叠，展开操作，是因为浏览器为那些没有引用任何样式表的XML文档提供了一个内建的默认样式表。XML中引用样式：，使用CSS样式只显示字符数据。XSL（可扩展样式语言）和XSLT（可扩展样式转换语言）。XSLT：一种基于模板（它可以将XML文档的内容进行重新构造，转换为我们需要的格式）的声明性（定义相应的元素和属性来处理XML中的数据）的样式转换语言。XSLT转换：需要XML源文档和XSLT样式表。转换的结果是生成一棵新的文档树。注意：XSLT是一种功能强大的样式转换语言，本质上，他可以将XML文档转换为任何基于文本的语言或其他格式的文本。XSLT模板规则：模式（选择元素，从源文档树中选择相应的元素），转换模版（转换指令，如何对匹配的节点进行转换）。XSLT样式表：1.XML版本声明；2.声明命名空间前缀xsl:stylesheet或xsl:transform，命名空间前缀应在根元素中进行声明；3.定义模板规则xsl:template，其属性match是一个XPath表达式，其值有/匹配根节点。xsl:apply-templates表示查找另一模板，其属性select表示具体的匹配模板。xsl:value-of，其属性select表示要选择的内容。使用JavaScript操作XML：IE浏览器：通过window的ActiveXObject对象（ActiveX外接式组件）和MSXML库来获取和打开XML文档，创建一个ActiveX对象：var xmlDoc=new ActiveXObject（MSXML库版本信息字符串）。载入XML的方式：同步和异步。xmlDoc.async=false同步，true异步，同步时将暂停页面的执行。xmlDoc.readyState返回加载状态。其他浏览器：采用DOM标准，var xmlDoc=document.implementation.createDocument(,null)创建一个空的DOM对象;同步处理方式与IE类似，异步时采用xmlDoc.onload事件处理器。ActiveX控件（IE）和Plug-In（插件）：FireFox浏览器中嵌入插件：使用非标准元素嵌入插件。插件所处理的基本上都是保存在Web服务器上的数据。在浏览器的地址栏输入about:plugins显示浏览器的所有插件信息。的属性：src属性，浏览器将检测文件类型，然后决定用什么插件进行处理；如果没有src则通过type属性，type属性的值将被作为多用途Internet邮件扩展类型（MIME），MIME用以指定数据的类型；pluginspage属性指向插件创建者的URL。判断浏览器是否安装插件：navigator对象的plugins属性，它是一个数组，包含浏览器所有已安装的插件（IE浏览器也有这个数组不过总是空的），每一个plugin对象都有4个属性：description（描述），filename（文件），name，length，可以1.通过文件名来引用插件对象，如：navigator.pluginsname,如果未安装，返回undefined，这种方法不可靠（插件名不同）2.遍历navigator.plugins数组，检查插件对象的name是否包含指定的名称或关键字。检查浏览器所支持的插件：navigator的mimeTypes属性包含了一个有mineType对象组成的数组，代表了浏览器所支持的所有MIME类型，navigator.mimeTypesplugin对象type值（MIME类型）.enablePlugin判断是否安装了该MIME类型的插件。浏览器不支持：使用，对于支持的浏览器将忽略。IE浏览器中的嵌入式ActiveX控件：IE不支持插件。ActiveX控件与插件的区别：嵌入页面的方式和浏览器安装他们的方式。插件是一种可下载的应用程序，而ActiveX控件必须嵌入到某个容器程序中才能运行，只有特别设计作为容器的程序才能支持ActiveX控件的运行，如：Microsoft AcAccess，IE浏览器。ActiveX控件编译好后将分配一个一个全球唯一标识的字符串。标准元素：添加将ActiveX控件到页面中，属性：classid属性，全球唯一的字符串；codebase属性，是一个URL，当用户为安装插件时，提示用户可以在哪里找到该ActiveX控件，如果具有许可证允许的话，可以把ActiveX控件的.cab文件下载并安装到自己的服务器上；readyState属性，检查ActiveX控件的安装情况，在检查ActiveX控件的readyState之前，必须有一段时间来完成加载，因此最好在window对象的onload或document对象的onreadystatechange事件处理器中。设置ActiveX控件的参数值：使用元素，我们要设置参数的名称和值。浏览器不支持ActiveX控件：1.;2.在之间放一纯文本，当浏览器支持该ActiveX控件时，将忽略该文本。使用ActiveX控件和插件：对于浏览器不识别的标签将直接被忽略，但其之间的部分不会被忽略。元素放在head与body中有区别。Foxfire