第11章 JavaScript程序基础

CompanynameWEB编程基础第11章JavaScript程序基础清华大学出版社主要内容理解JavaScript语言的作用和执行方式掌握在网页中使用客户端脚本的方法掌握JavaScript语言的基本语法认识核心语言对象，使用核心语言对象的方法和属性掌握对页面中的不同种类的事件响应编程能够利用JavaScript语言完成对文档内容的交互了解客户端常见JavaScript特效程序的编程掌握JavaScript程序的一般调试技术11.1JavaScript起步JavaScript可以做什么–作为一个运行于浏览器环境中的语言，JavaScript被设计用来向HTML页面添加交互行为，利用它可以完成以下任务。–可以将文本动态的放入HTML页面。类似于这样的一段JavaScript声明可以将一段可变的文本放入HTML页面：document.write(h1+name+/h1)–可以对事件做出响应。例如页面载入完成或者当用户单击某个HTML元素时，调用指定的JavaScript程序。–可以读写HTML元素。JavaScript程序可以读取及改变当前HTML页面内某个元素的内容，如文本框中的输入内容。–可被用来验证用户输入的数据。在数据被提交到服务器之前，JavaScript可被用来验证这些数据。–可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。–可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。–可利用Ajax技术来完成和服务器的直接通信，无刷新的修改当前HTML页面内容。11.1JavaScript起步一个实例!--程序11-1--htmltitle这是我的第一个JavaScript程序/titlebodyscripttype=text/javascriptdocument.write(欢迎进入JavaScript学习之旅!);/script/body/html11.1JavaScript起步基本语法：scripttype=text/javascript…/script语法说明：–script：脚本标记。它必须以scripttype=text/javascript开头，以script结束，界定程序开始的位置和结束的位置。–script页面中的位置决定了什么时候装载它们，如果希望在其他所有内容之前装载脚本，就要确保脚本在head部分。11.1.3JavaScript放置和运行代码的位置–位于HEAD部分的脚本如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。–位于BODY部分的脚本当你把脚本放置于body部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容。JavaScript程序本身不能独立存在，它是依附于某个HTML页面，在浏览器端运行的。11.1.3JavaScript放置和运行(cont.)位于Head部分的代码实例htmltitle这是我的第一个JavaScript程序/titleheadscripttype=text/javascriptfunctionshow(){alert(欢迎进入JavaScript学习之旅!);}/script/headbodyonload=show()/body/html11.1.3JavaScript放置和运行(cont.)代码的位置(cont.)–直接位于事件处理部分的代码中htmltitle这是我的第一个JavaScript程序/titlebodyonload='alert(欢迎进入JavaScript学习之旅!);'/body/html代码的位置(cont.)–位于网页之外的单独脚本文件优点：复用、共享htmlheadscriptsrc=xxx.js/script/headbody/body/html11.2JavaScript程序作为一种嵌入到html页面内的解释型程序设计语言，JavaScript脚本语言的基本构成是由语句、函数、对象、方法、属性等来实现编程的，在程序结构上同样是有顺序、分支和循环三种基本结构。11.2.1语句和语句块1.语句–JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。–例如：document.write(欢迎进入JavaScript学习之旅!);语句类型–变量声明语句；–输入输出语句；–表达式语句；–程序流向控制语句；–返回语句。11.2.1语句和语句块(cont.)2.语句块–语句块就是用“{”和“}”封闭起来的若干条语句。scripttype=text/javascriptvarcolor=”red”;if(color==”red”){document.write(现在颜色是红色!);alert(现在颜色是红色!);}/script11.2.1语句和语句块(cont.)3.代码–代码就是由若干条语句或语句块构成的执行体。浏览器按照代码编写的逻辑顺序逐行执行，直至碰到结束符号或者返回语句。11.2.3函数1.函数的构成–函数代表了一种特定的功能，一般是由若干条语句构成的。函数的基本语法如下面一样。基本语法：–function函数名(参数1,参数2,...参数N){函数体；}语法说明：–组成一个函数必须有“function”关键字、自定义的函数名、放在小括号中的可选参数（可以没有参数，但括号必须保留）、以及包含在大括号内的由若干条语句构成的函数体。注意：–不能在其他语句或其自身中嵌套function语句，也就是说，每个函数声明都是独立的。11.2.3函数(cont.)!--程序11-4--htmlheadscripttype=text/javascriptfunctionwelcome(name){alert(name+，欢迎您进入函数世界!);}/scripttitle函数的例子/title/headbodyform姓名：inputtype=textname=titleid=titleinputtype=buttonvalue=Clickme!onclick=welcome(document.getElementById('title').value)//form/body/html11.2.3函数(cont.)2.函数的参数–在11-3的程序中定义的函数是这样声明的：functionwelcome(name)–这里的“name”就是参数变量，参数变量的作用就是用来接收函数调用者传递过来的参数。–实参：括号里的“李小璐”就是实际参数值，简称“实参”；–形参：在函数声明时的“name”就是对应的“形参”，函数运行时，就用变量名name来代表实际的值“李小璐”参与到函数体代码中的语句。–函数声明时的参数代表了函数在执行时需要这些参数接收传过来的值，并在代码中具体应用，因此，声明函数的形式参数时应该事先明确每个参数的作用。11.2.3函数(cont.)具体来讲，Javascript函数的参数是可选的。它有下面几个特点：–javascript本身是弱类型，所以，它的函数参数也没有类型检查和类型限定，一切都要靠编程者自己去进行检查；–一般情况下，实参和形参要一一对应；–实参的个数可以和形参的个数不匹配。尽管在函数声明时，可以定义要有３个参数，而在实际的使用中，可以传任意个参数给这个函数。它的识别仅仅是依靠函数名，这与其他语言中的函数调用有很大的不同。如果函数在执行时，发现参数不够，不够的参数被设置为undefined类型。11.2.3函数(cont.)利用arguments处理实参–每一个函数体内都内置地存在着一个对象arguments，它是一个类似数组的对象，通过它可以查看函数当前有几个传递来的参数（并非定义的形式参数），各个参数的值是什么。（程序11-5）scriptlanguage=javascriptfunctiontestparams(){varparams=;for(vari=0;iarguments.length;i++){params=params++arguments[i];}alert(params);}/script11.2.3函数(cont.)3.调用函数–函数必须被调用才能发挥作用，程序11-3已经展示了函数的调用过程。具体调用规则是：函数必须通过名字加上括号才能调用，如程序11-4中welcome()，括号必不可少；函数调用时，必须满足参数传递的要求，按照形式参数的声明要求，保证类型、顺序和个数的统一。11.2.3函数(cont.)用return返回函数的计算结果–函数可以在执行后返回一个值来代表执行后的结果，当然有些函数基于功能的需要并不需要返回任何值。–函数返回一个值非常简单，一般在一个函数代码的最后一行是return语句，return的作用有两点：结束程序的执行，也就是说return之后的语句就不会再执行了；利用return可以返回一个结果。return语句后可以跟上一个具体的值，也可以是简单的变量，还可以是一个复杂的表达式。–当然，一个函数也可以没有返回值，但并不妨碍最后添加一条return语句，明确表示函数执行结束，如show函数一样。11.2.3函数(cont.)functioncompute(radius){vararea=0;area=pi*radius*radius;returnarea;}functionshow(){//利用document对象，获得页面中半径文本框中的输入值varradius=document.getElementById('radius').value;//调用compute函数计算对应的面积vararea=compute(radius);//将计算出的面积值显示到面积文本框中document.getElementById('area').value=area;return;//此句可以不要}带返回值的return语句不带返回值的return语句注：参见程序11-611.2.3函数(cont.)5.函数变量的作用域局部变量–当代码在函数内声明了一个变量后，就只能在该函数中访问该变量，它们被称为“局部变量”。当退出该函数后，这个变量会被撤销。可以在不同的函数中使用名称相同的局部变量而互不影响，这是因为一个函数能够识别它自己内部定义的每个变量。全局变量–如果程序在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量，它们被称为“全局变量”。这些变量的生存期从声明它们之后开始，在页面关闭时结束。11.2.3函数(cont.)示例：程序11-6脚本全局变量picompute局部变量area,radiusshow局部变量area,radius图11-6变量生存期示意图11.2.4常用系统函数系统函数–JavaScript中的系统函数又称内部方法，它与任何对象无关，使用这些函数不需创建任何实例，可直接使用。1.返回字符串表达式中的值–方法名：eval（字符串表达式）–例：result=eval(“8+9+5/2”);eval接受一个字符串类型的参数，将这个字符串作为代码在上下文环境中执行，并返回执行的结果。使用eval函数需要注意：–它是有返回值的，如果参数字符串是一个表达式，就会返回表达式的值。如果参数字符串不是表达式，没有值，那么返回“undefined”；–参数字符串作为代码执行时，是和调用eval函数的上下文相关的，即其中出现的变量或函数调用必须在调用eval的上下文环境中可用。11.2.4常用系统函数(cont.)2.返回字符的编码–方法名：e