JavaScript概述.ppt

《JavaScript概述.ppt》由会员分享，可在线阅读，更多相关《JavaScript概述.ppt（35页珍藏版）》请在三一办公上搜索。

1、JavaScript课程简介,课程名称：JavaScript课程类别：专业必修课教学对象：计算机软件技术专业先修课程：WEB应用设计基础,JavaScript课程简介,本课程主要内容包括：Web技术概述、HTML/XHTML制作、层叠样式表(CSS)技术、JavaScript编程基础、基本流程控制、函数、对象编程、浏览器对象和HTML DOM、事件驱动编程和JavaScript网页特效等。通过本课程的学习，使学生掌握JavaScript程序设计基础教程这些方面的知识。学习本课程后将能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，并学习一些DOM对象的高级用法。,第1章 Java

2、Script概述,【学习目标】,JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。通过本章的学习，读者可以达到以下学习目的：了解什么是JavaScript和JavaScript的作用、基本特点。了解JavaScript的软硬件环境要求。熟悉编写JavaScript所需的工具。独立编写一个JavaScript程序,【学习导航】,本章首先介绍什么JavaScript、JavaScript的作用、基本特点，然后介绍JavaScript的软硬件环境要求，以及编写JavaScript所需的工具，最后编写一个JavaScript程序。

3、本章在书中的学习位置如图1.1所示。,【知识框架】,本章学习内容知识框架如图1.2所示。,本章目录,1.1 JavaScript简述 1.2 JavaScript的环境要求 1.3 编写JavaScript的工具 1.4 编写第一个JavaScript程序,1.1 JavaScript简述,什么是JavaScript JavaScript的主要特点 JavaScript的应用,什么是JavaScript,JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用

4、户交互并响应相应事件的动态页面。,JavaScript的主要特点,JavaScript脚本语言的基本特点如下：（1）解释性JavaScript不同于一些编译性的程序语言，例如C、C+等，它是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器中运行时被解释。（2）基于对象JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。,（3）事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操

5、作所产生的动作，此动作称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。（4）跨平台 JavaScript依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。（5）安全性 JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据的丢失。,JavaScript的应用,使用JavaScript脚本实现的动态页面，在Web上随处可见。下面将介绍几种JavaScript常

6、见的应用。（1）验证用户输入的内容使用JavaScript脚本语言可以在客户端对用户输入的数据进行验证。例如在制作用户注册信息页面时，要求用户输入确认密码，以确定用户输入密码是否准确。如果用户在“确认密码”域输入的信息与“密码”域输入的信息不同，将弹出相应的提示信息，如图1.3所示。,（2）动画效果在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果，例如在页面中实现下雪的效果，如图1.4所示。,JavaScript的应用,JavaScript的应用,（3）窗口的应用在打开网页时经常会看到一些浮动的广告窗口，这些广告窗口是网站最大的盈利手

7、段。我们也可以通过JavaScript脚本语言来实现，例如如图1.5所示的广告窗口。,JavaScript的应用,（4）文字特效使用JavaScript脚本语言可以使文字实现多种特效。例如使文字旋转，如图1.6所示。,1.2 JavaScript的环境要求,硬件要求 软件要求,硬件要求,JavaScript适用于各种支持Internet浏览器的平台，包括Windows、Macintosh、Linux或UNIX变形系统等。下面介绍在Windows系统中安装Netscape的Navigator 7.1或Microsoft的Internet Explorer 6.0所需要的最低系统要求。（1）英特尔

8、奔腾III或以上机型。（2）Windows 98，Windows NT及其Service Pack 6a或更高版本，Windows 2000及其Service Pack 2或更高版本，Windows XP。（3）64MB内存。（4）20MB可用硬盘空间。（5）16位或以上的适配卡和800600分辨率以上的显示器。（6）CD-ROM驱动器。,软件要求,Windows 95/98或Windows NT及以上版本。Netscape Navigator 3.0或Internet Explorer 3.0以上版本。编辑JavaScript程序可以使用任何一种文本编辑器，例如Windows中的记事本、写字

9、板等应用软件。由于JavaScript程序可以嵌入于HTML文件中，因此，读者可以使用任可一种编辑HTML文件的工具软件，例如记事本、FrontPage和Dreamweaver等，具体介绍参见1.2.3节。,1.3 编写JavaScript的工具,编写JavaScript脚本程序的工具有多种，主要包括记事本、FrontPage、Dreamweaver、1st JavaScript Editor和Ultra Edit 32等，下面主要介绍:使用记事本 使用Dreamweaver,使用记事本,记事本是编写JavaScript代码的最简单的工具，它可以做一些简单的文字处理和JavaScript代码的

10、局部修改。虽然记事本使用简单，但如果使用它编写一些复杂的JavaScript代码，则需要熟练掌握JavaScript的语法、对象等。例1.1 下面介绍使用记事本编写JavaScript程序，具体步骤如下。（1）单击“开始”菜单，选择“程序”/“附件”/“记事本”选项，打开记事本。（2）在记事本的工作区域输入HTML标识符和JavaScript代码，具体代码如下。,使用记事本,用记事本编写JavaScript程序 window.alert(Hello Javascript);Hello Javascript,使用记事本,（3）编辑完毕后，选择“文件”/“保存”命令，在打开的“另存为”对话框中，输

11、入文件名，将其保存为.html格式或.htm格式，之后该文件将会变成一个IE浏览器的图标，双击该图标，即可显示结果，如图1.7所示。,说明：利用记事本开发JavaScript程序也存在着缺点，就是整个编程过程要求开发者完全手工输入程序代码，这就影响了程序的开发速度。所以，在条件允许的情况下，最好不要只选择记事本开发JavaScript程序。,使用Dreamweaver,Macromedia公司的Dreamweaver是建立Web站点和应用程序的专业工具。该工具可以将可视化工具应用程序开发功能与代码编辑组合在一起，并且内置了一些JavaScript小程序。例1.4 下面介绍使用Dreamweav

12、er编写JavaScript程序，具体步骤如下。（1）安装Dreamweaver后，首次运行Dreamweaver时，展现给用户的是一个“工作区设置”的对话框，在此对话框中，用户可以选择自己喜欢的工作区布局，如“设计者”或“代码编写者”，如图1.10所示。这两者的区别是在Dreamweaver的右边或是左边显示窗口面板区。,使用Dreamweaver,（2）选择工作区布局，并单击“确定”按钮后。选择“文件”/“新建”命令，将打开“新建文档”对话框。在该对话框中的“类别”列表区选择“基本页”，再根据实际情况来选择所应用的脚本语言，这里选择的是“HTML”，然后单击“创建”按钮，创建以JavaSc

13、ript为主脚本语言的文件，如图1.11所示。,使用Dreamweaver,（3）在打开的页面中，有3种视图形式，分别为代码、拆分和设计。在代码视图中，可以编辑程序代码，如图1.12所示；在拆分视图中，可以同时编辑代码视图和设计视图中的内容，如图1.13所示；在设计视图中，可在页面中插入HTML元素，进行页面布局和设计，如图1.14所示。,使用Dreamweaver,在Dreamweaver中插入HTML元素后，通过“属性”面板可以方便地定义元素的属性，使其满足页面布局的要求。在页面中，允许多个表格的嵌套；可以插入图像、flash等；可以插入表单元素，例如：文本框、列表/菜单、复选框、按钮等。

14、（4）设计页面及编写代码完成后，保存该文件到指定目录下，文件的扩展名为“.html”或“.htm”。,1.4 编写第一个JavaScript程序,编写JavaScript 运行JavaScript程序 调试JavaScript程序,编写JavaScript,（1）启动Dreamweaver编辑器，单击“文件”/“新建”命令，打开“新建文档”对话框，选择“常规”选项卡中的“基本页”/“JavaScript”选项，然后，单击“创建”按钮，即可成功创建一个JavaScript文件。（2）JavaScript的程序代码必须置身于之间。在标记中输入如下代码。alert(我要学JavaScript！);在

15、Dreamweaver中输入JavaScript脚本程序的运行结果如图1.15所示。,编写JavaScript,JavaScript脚本在HTML文件中的位置有3种。在HTML的标记中的任何位置。如果所编写的JavaScript程序用于输出网页的内容，应该将JavaScript程序置于HTML文件中需要显示该内容的位置。在HTML的标记中。如果所编写的JavaScript程序需要在某一个HTML文件中多次使用，那么，就应该编写JavaScript函数（function），并将函数置身于该HTML的标记中。function check()alert(我被调用了);,编写JavaScript,使用

16、时直接调用该函数名就可以了。单击“提交”按钮，调用check()函数。在一个js的单独的文件中。如果所编写的JavaScript程序需要在多个HTML文件中使用，或者，所编写的JavaScript程序内容很长，这时，就应该将这段JavaScript程序置于单独的js文件中，然后在所需要的HTML文件“a.html”中，通过标记包含该js文件。如：被包含的ch1-1.js文件代码如下。document.write(这是外部文件中JavaScript代码!);,编写JavaScript,（4）JavaScript脚本语言区分字母大小写。,编写JavaScript,（5）在创建好JavaScript

17、程序后，选择“文件”/“保存”命令，在弹出的“另存为”对话框中，输入文件名，将其保存为.html格式或.htm格式，如图1.16所示。,（6）保存完.html格式后文件图标，将会变成一个IE浏览器的图标。,运行JavaScript程序,运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司Navigator 3.0以上版本的浏览器都能支持Javascript程序，微软公司 Internet Explorer 3.0以上版本的浏览器基本上支持Javascript。双击刚刚保存的“ch1-2.html”文件，在浏览器中输出运行结果，如图1.17所示。,

18、调试JavaScript程序,程序出错类型分为语法错误和逻辑错误两种。1语法错误语法错误是在程序开发中使用不符合某种语言规则的语句，从而产生的错误称为语法错误。例如，错误地使用了JavaScript的关键字，错误地定义了变量名称等，这时，当浏览器运行JavaScript程序时就会报错。例如，将上面程序中的第7行中的语句改写成下述语句，即将第一个字符由小写字母改成大写字母。Alert(我要学JavaScript！);保存该文件后再次在浏览器中运行，程序就会出错。运行本程序，将会弹出如图1.18所示的错误信息。,调试JavaScript程序,2逻辑错误有些时候，程序中不存在语法错误，也没有执行非法

19、操作的语句，可是程序运行的结果却是不正确的，这种错误叫做逻辑错误。逻辑错误对于编译器来说并不算错误，但是由于代码中存在的逻辑问题，导致运行结果没有得到期望的结果。逻辑错误在语法上是不存在错误的，但是从程序的功能上看是Bug。它是最难调试和发现的Bug。因为它们不会抛出任何错误信息。惟一能看到的就是程序的功能（或部分功能）没有实现。例如，某商城实现商品优惠活动，如果用户是商城的会员，那么商品打八五折，代码如下。,调试JavaScript程序,user=会员;if(user=会员)price=485*8.5;/485是商品价格,8.5是打的八五折alert(商品的会员价格是：+price);/输出商品的会员价运行程序时，程序没有弹出错误信息 price=485*8.5/10;/485是商品价格,8.5/10是打的八五折对于逻辑错误而言，发现错误是容易的，但要查找出逻辑错误的原因却很困难。因此，在编写程序的过程中，一定要注意使用语句或者函数的书写完整性，否则将导致程序出错。,