JavaScript程序设计基础

JavaScript程序设计基础JavaScript简介JavaScript编程基础JavaScript中的对象编程JavaScript的动态网页编程技术JavaScript是什么？是Web页面中的一种脚本编程语言，可用于Web系统的客户端和服务器端编程。JavaScript的前身叫做LiveScript，是Netscape公司开发的脚本语言。Sun公司推出Java语言后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并将其更名为JavaScript。JavaScript简介JavaScript的基本特点脚本编程语言：与HTML代码结合在一起，通常由浏览器解释执行。基于对象的语言：JavaScript的许多功能来自于脚本环境中对象的方法与脚本的相互作用。安全性：在HTML页面中JavaScript不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。跨平台：在HTML页面中JavaScript的执行环境依赖于浏览器本身，只要安装了支持JavaScript的浏览器，JavaScript程序就可以执行。JavaScript简介（续1）JavaScript的应用客户端应用：将客户端的JavaScript脚本程序嵌入或链接到HTML文件，当用户通过浏览器请求这样的HTML页面时，JavaScript的脚本程序与HTML一起被下载到客户端，由客户端的浏览器读取HTML文件，若包含JavaScript解释执行。JavaScript简介（续2）浏览器服务器浏览器发出URL请求服务器返回HTML文件，由浏览器解释执行服务器端应用：JavaScript可以用来开发服务器端的Web应用程序。当用户通过浏览器请求URL时，服务器执行JavaScript脚本程序，将生成的数据以HTML格式返回浏览器。JavaScript简介（续3）浏览器服务器浏览器发出URL请求服务器解释执行脚本程序，并将结果以HTML形式返回对于JavaScript的客户端应用和服务器端应用，要根据实际情况进行选择。从程序保密性的角度来看，采用服务器端应用更为妥当（例如，用户注册）。如果只是对数据进行验证，可采用客户端应用来实现，这样效率更高。在Web页面中使用JavaScript在HTML中嵌入JavaScript：在HTML中通过SCRIPT…/SCRIPT引入JavaScript代码。当浏览器读取到SCRIPT标记时，解释执行其中的脚本。在使用SCRIPT标记时，必须通过Language属性指定SCRIPT块中包含的是何种类型的脚本。JavaScript简介（续4）举例：S01_02.htmHTMLHEADTITLE嵌入JavaScript代码/TITLE!--定义页面标题--/HEADBODYSCRIPTlanguage=javascript//脚本标记document.write(HelloWorld!)//在页面上显示一行文字/SCRIPT/BODY/HTMLJavaScript简介（续5）链接JavaScript文件：如果脚本程序较长或者同一段脚本可以在若干Web页中使用，则可以将脚本程序单独放在一个文件里（.js），然后链接到需要它的HTML文件，相当于将其中的脚本填入链接处。具体可通过SCRIPT标记的SRC属性来指定外部脚本文件的URL。举例：S01_03.htm，其中，文件S01_03.js与S01_03.htm放在同一个文件夹中，并含有以下内容：document.write(HelloWorld!)JavaScript简介（续6）S01_03.htm文件内容如下：HTMLHEADTITLE链接JavaScripte代码/TITLE/HEADBODYSCRIPTlanguage=javascriptsrc=s01_03.js/SCRIPT/BODY/HTMLJavaScript简介（续7）编写JavaScript的工具使用纯文本编辑器：早期的脚本编程人员通常使用纯文本编辑器（如Windows的记事本）来编写JavaScript脚本程序。这种方法适合于少量脚本的编写和修改。使用专业化脚本编辑工具：利用可视化工具（如Frontpage、Dreamweaver和Flash等）可以很容易的在Web页面中加入脚本来完成一些功能。JavaScript的专业化开发工具具有许多处理JavaScript特性的功能（如代码生成、语法敏感编辑和调试等），开发人员经常使用这些工具进行Web程序的开发，以便提高效率。JavaScript简介（续8）JavaScript中的常量、变量及表达式常量：数值型（整数、浮点数）、字符串和布尔型。变量可以使用关键字“var”声明变量。如varname,age,weight;变量赋值：varname=“张三”;name=“李四”;运算符算术运算符：+、-、*、/、%（取余数）、++、--关系运算符：、=、、=、==、===（严格等于）、!=、!==（严格不等于）逻辑运算符：&&、||、!字符串运算符：+（连接）JavaScript编程基础赋值运算符：=条件运算符：condition?true_result:false_result在JavaScript中使用对话框警示对话框─alert()举例，S04_01.htmHTMLHEADTITLE警示对话框/TITLE/HEADBODYscriptlanguage=javascriptalert(欢迎浏览本页面！);/scriptP警示对话框显示一些文本信息和一个“确定”按钮。/P/BODY/HTMLJavaScript编程基础（续1）确认对话框─confirm()该方法返回一个布尔值举例，S04_02.htmHTMLHEADTITLE确认对话框/TITLE/HEADBODYscriptlanguage=javascriptvarvisited,show_text;visited=confirm(您来过燕大吗？);show_text=visited?您也认为燕大很美吧！:欢迎您有机会来燕大参观!;document.write(show_text);/script/BODY/HTMLJavaScript编程基础（续2）提示对话框─prompt()举例，S04_03.htmHTMLHEADTITLE提示对话框/TITLE/HEADBODYscriptlanguage=javascriptvarname;name=prompt(请输入您的姓名:,);document.write(name+您好！欢迎您进入我的主页！);/script/BODY/HTMLJavaScript编程基础（续3）JavaScript的流程控制语句分支结构：包括if语句和switch语句。语法结构同C语言类似。举例：输入两个数，求其最大值（S04_05.htm），选择回答问题（S04_10.htm）循环结构：包括for语句、while语句和dowhile语句。语法结构同C语言类似。举例，利用for语句在页面上通过脚本显示6级标题（S04_12.htm），使用while语句求1+2+3+…+100的累加和（S04_13.htm），利用dowhile语句编写一个二位整数相加的测试程序（S04_15.htm），利用循环的嵌套在页面上显示一个“9×9乘法表”（S04_18.htm）JavaScript编程基础（续4）JavaScript的函数预定义函数：包eval()─计算字符串表达式的值、parseFloat()─将字符串开头的整数或浮点数分解出来,转换为浮点数、parseInt()─将字符串开头的整数分解出来,转换为整数。函数定义和调用：无参函数的定义和调用（S05_03.htm），有参函数的定义和调用（S05_04.htm、S05_06.htm）JavaScript编程基础（续5）对象的基本概念对象的属性和方法：对象包含两个要素，一个是用来描述对象的一组数据，即若干变量，通常称为属性；另一个是用来操作对象的若干动作（或函数），通常称为方法。在JavaScript中，对象就是属性和方法的集合。方法是作为对象成员的函数，表明对象所具有的行为；属性是作为对象成员的变量，表明对象的状态。因此，我们可以通过调用对象的方法来对对象进行各种操作。在JavaScript中使用对象：可以使用三种对象，即内置对象、自定义对象和浏览器对象。在JavaScript中，可通过new运算符来创建对象，即变量名=new对象名()。将新创建的对象赋予一个变量（也叫对象变量）后，就可以通过这个变量访问对象的属性和方法。JavaScript中的对象编程JavaScript中的几个常用内置对象Date对象：该对象主要提供获取和设置日期和时间的方法。例如，getFullYear()（返回日期的完整年份，4位整数）、getMonth()--返回日期的月份值（0~11）、getDate()--返回日期的日值（1~31）、getDay()--返回星期几的序号（0~6）。举例，在Web页面中显示当前日期（S06_3.htm）String对象：该对象提供了对字符串进行处理的属性和方法。使用该对象时，首先要创建一个字符串对象变量。可以使用new运算符来创建，也可以直接将字符串赋给变量。JavaScript中的对象编程（续1）String对象的最常用对象和方法：求字符串长度length、将字符串中的字母转换为小写字母toLowerCase()、将字符串中的字母转换为大写字母toUpperCase()、取子串substr(start，len)。举例，将输入的字符串反向输出到页面上，并且要求将其中的小写字母转换为大写字母。实现文件S06_07.htm内容如下：JavaScript中的对象编程（续2）HTMLHEADTITLE使用String/TITLE/HEADBODYscriptlanguage=javascriptvarorigin_s,upper_s,i;origin_s=prompt(请输入一行文字:,);upper_s=origin_s.toUpperCase();for(i=upper_s.length-1;i=0;i--)document.write(upper_s.charAt(i));/script/BODY/HTMLJavaScript中的对象编程（续3）Array对象：在JavaScript中，使用内置对象Array创建数组对象。格式如下：vararrayname=newArray(arraysize)举例，在页面上显示当前日期和时间,并显示是星期几。实现文件S06_09.htm内容如下：JavaScript中的对象编程（续4）HTMLHEADTITLE显示星期几/TITLE/HEADBODYscriptlanguage=javascriptvarweek,today,week_i;week=newArray(星期日,星期一,星期二,星期三,星期四,星期五,星期六);today=newDate();week_i=today.getDay();document.write(today.toLocaleString()+week[week_i]);/script/BODY/HTMLJavaScript中的对象编程（续5）返回日期的字符串表示Array对象最常用的属性和方法：计算数组的长度length、返回一个包含数组中所有元素的字符串toString()。举例，使用toString()方法输