《JavaScript概述》PPT课件.ppt

,本章要求：,第13章 JavaScript概述,JavaScript的历史及特点理 JavaScript的成功案例库 如何搭建JavaScript开发环境库 编程JavaScript脚本的两种工具库 如何在HTML中使用JavaScript脚本,主要内容,1. JavaScript概貌 2. 搭建JavaScript开发环境 3. 编写JavaScript的工具 4. JavaScript在HTML中的使用 5. 综合实例用JS输出中文字符串,第13章 JavaScript概述,13.1 JavaScript概貌,13.1.1 JavaScript的历史起源 13.1.2 JavaScript的主要特点 13.1.3 JavaScript成功案例,13.1.1 JavaScript的历史起源,JavaScript语言的前身是LiveScript语言。由美国Netscape（网景）公司的布瑞登.艾克（Brendan Eich）为即将在1995年发布的Navigator2.0浏览器的应用而开发的脚本语言。在与Sum（升阳）公司联手及时完成了LiveScript语言的开发后，就在Navigator 2.0即将正式发布前，Netscape公司将其改名为JavaScript，也就是最初的JavaScript 1.0版本。虽然当时JavaScript1.0版本还有很多缺陷，但拥有着JavaScript 1.0版本的Navigator 2.0浏览器几乎主宰着浏览器市场。 因为JavaScript 1.0如此成功，Netscape公司在Navigator 3.0中发布了JavaScript 1.1版本。同时微软开始进军浏览器市场，发布了Internet Explorer 3.0并搭载了一个JavaScript的类似版本，其注册名称为JScript，这成为JavaScript语言发展过程中的重要一步。 在微软进入浏览器市场后，此时有3种不同的JavaScript版本同时存在，Navigator中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，JavaScript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题。1997年，JavaScript 1.1版本作为一个草案提交给欧洲计算机制造商协会（ECMA）。最终由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了TC39委员会，该委员会被委派来标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义。TC39委员会制定了“ECMAScript程序语言的规范书”（又称为“ECMA-262标准”），该标准通过国际标准化组织(ISO)采纳通过，作为各种浏览器生产开发所使用的脚本程序的统一标准。,JavaScript脚本语言的主要特点如下： 解释性 JavaScript不同于一些编译性的程序语言，例如C、C+等，它是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器中运行时被解释。 基于对象 JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，此动作称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 跨平台 JavaScript依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。 安全性 JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据的丢失。,13.1.2 JavaScript的主要特点,使用JavaScript脚本实现的动态页面，在Web上随处可见。下面将介绍几种JavaScript常见的应用。 验证用户输入的内容 使用JavaScript脚本语言可以在客户端对用户输入的数据进行验证。例如在制作用户注册信息页面时，要求用户输入确认密码，以确定用户输入密码是否准确。如果用户在“确认密码”文本框中输入的信息与“密码”文本框中输入的信息不同，将弹出相应的提示信息，如图13-1所示。 图13-1 验证两次密码是否一致,13.1.3 JavaScript成功案例,动画效果 在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果，例如在页面中实现下雪的效果，如图13-2所示。 图13-2 动画效果,窗口的应用 在打开网页时经常会看到一些浮动的广告窗口，这些广告窗口是网站最大的盈利手段。我们也可以通过JavaScript脚本语言来实现，例如，如图13-3所示的广告窗口。 图13-3 窗口的应用,文字特效 使用JavaScript脚本语言可以使文字实现多种特效。例如使文字旋转，如图13-4所示。 图13-4 文字特效,中国网络电视台应用的jQuery效果 访问中国网络电视台的电视直播页面后，在央视频道栏目中就应用了jQuery实现鼠标移入移出效果。将鼠标移动到某个频道上时，该频道内容将添加一个圆角矩形的灰背景，如图13-5所示，用于突出显示频道内容，将鼠标移出该频道后，频道内容将恢复为原来的样式。 图13-5 中国网络电视台应用的jQuery效果,京东网上商城应用的jQuery效果 访问京东网上商城的首页时，在右侧有一个为手机和游戏充值的栏目，这里应用了jQuery实现了标签页的效果，将鼠标移动到“手机充值”栏目上时，标签页中将显示为手机充值的相关内容，如图13-6所示，将鼠标移动到“游戏充值”栏目上时，将显示为游戏充值的相关内容。 图13-6 京东网上商城应用的jQuery效果,应用Ajax技术实现百度搜索提示 在百度首页的搜索文本框中输入要搜索的关键字时，下方会自动给出相关提示。如果给出的提示有符合要求的内容，可以直接选择，这样可以方便用户。例如，输入“明日科”后，在下面将显示如图13-7所示的提示信息。 图13-7 百度搜索提示页面,13.2 搭建JavaScript开发环境,13.2.1 硬件要求 13.2.2 软件要求 13.2.3 浏览器对JavaScript的支持,在使用JavaScript进行程序开发时，要求使用的硬件开发环境如下： 首先必须具备运行Windows 98、Window XP、Windows Vista、Windows 7等，Windows 2000及其Service Pack 2或更高版本的基本硬件配置环境。 至少512MB以上的内存。 640*480分辨率以上的显示器，建议使用1024*768。 至少1G以上的可用硬盘空间。 注意： 一般情况下，计算机的最低配置往往不能满足复杂的JavaScript程序的处理需要，如果增大内存的容量，可以明显地提高程序在浏览器中运行的速度。,13.2.1 硬件要求,本书介绍的JavaScript基本功能适用于大部分浏览器。为了能够更好地利用本书，建议读者的软件安装配置如下： Windows XP、Windows 7操作系统。 Netscape Navigator 3.0浏览器或Internet Explorer 6.0浏览器以上版本。,13.2.2 软件要求,由于各浏览器对JavaScript脚本支持的不一致性，因此，在进行JavaScript脚本编程时，首先应确定用户使用的浏览器类型，然后根据浏览器类型编写JavaScript脚本。下面将介绍Netscape的Navigator浏览器和Microsoft的Internet Explorer浏览器。 1Netscape Navigator（网景浏览器） Netscape Navigator（网景浏览器）是最早也是最有影响力的网页浏览器之一，Netscape Navigator浏览器1.0版发布于1994年12月，比微软IE 1.0浏览器发布时间还早一个多月，但由于IE浏览器和微软的Windows操作系统捆绑在一起，因此对Netscape网景浏览器的市场发展造成了巨大影响，使得Netscape网景浏览器逐渐淡出主流浏览器行列。 下面介绍Netscape Navigator浏览器版本的变化及其支持的JavaScript的版本，如表13-1所示。 表13-1 Netscape Navigator浏览器版本及所支持的JavaScript版本,13.2.3 浏览器对JavaScript的支持,2Microsoft Internet Explorer（微软浏览器） Internet Explorer，原称Microsoft Internet Explorer，简称MSIE（一般称成Internet Explorer，简称IE），是微软公司推出的一款网页浏览器。IE浏览器不是最早的浏览器，但由于IE浏览器自推出之日起就是免费的，因此几乎将其他收费浏览器置于死地。从一定程度上说，是微软提供免费的IE浏览器后带动了整个互联网的发展。 下面介绍Internet Explorer浏览器版本的变化及其所支持的JavaScript的版本，如表13-2所示。 表13-2 IE浏览器版本及所支持的JavaScript版本,13.3 编写JavaScript的工具,13.3.1 Adobe Dreamweaver 13.3.2 Microsoft FrontPage,Dreamweaver是当今流行的网页编辑工具之一，它采用了多种先进技术，提供图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程简单化，生成的网页也极具表现力。从Dreamweaver MX开始，Dreamweaver开始支持可视化开发，这对于初学者来说确实是一个比较好的选择，因为它是所见即所得的。其特征包括，语法加亮、函数补全、参数提示等。值得一提的是，Dreamweaver在提供强大的网页编辑功能的同时，还提供了完善的站点管理机制，极大地方便了程序员对网站的管理工作。 Dreamweaver工具的开发环境如图13-8所示。 图13-8 Dreamweaver工具的开发环境 Dreamweaver工具的开发环境有3种视图形式，分别为“代码”、“拆分”和“设计”。在“代码”视图中可编辑代码；在“拆分”视图中，可以同时编辑“代码”视图和“设计”视图中的内容；在“设计”视图中，可以在页面中插入HTML元素，进行页面布局和设计；在“代码”视图中可以编写代码。,13.3.1 Adobe Dreamweaver,FrontPage是微软公司开发的一款强大的Web制作工具和网络管理向导，它包括HTML处理程序、网络管理工具、动画图形创建和编辑工具以及Web服务器程序。通过FrontPage创建的网站不仅内容丰富而且专业，最值得一提的是，它的操作界面与Word的操作界面极为相似，非常容易学习和使用。 FrontPage工具的开发环境如图13-9所示 图13-9 ProntPage工具的开发环境,13.3.2 Microsoft FrontPage,13.4 JavaScript在HTML中的使用,13.4.1 在页面中直接嵌入JavaScript 13.4.2 链接外部JavaScript,在HTML文档中可以使用标记将JavaScript脚本嵌入到其中。在HTML文档中可以使用多个标记，每个标记中可以包含多个JavaScript的代码集合。标记常用的属性及说明如表13-3所示。 表13-3 标记常用的属性及说明,13.4.1 在页面中直接嵌入JavaScript,【例13-1】 在HTML页面中直接嵌入JavaScript代码，如图13-10所示。 图13-10 在HTML中直接嵌入JavaScript代码 注意： 标记可以放在Web页面的标记中，也可以放在标记中。,在Web页面中引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为.js），然后在需要使用该代码的Web页面中链接该JavaScript文件即可。 在Web页面中链接外部JavaScript文件的语法格式如下： 【例13-2】 调用外部JavaScript文件function.js。首先编写外部的JavaScript文件，命名为function.js。function.js文件的完整代码如图13-11所示。 图13-11 function.js文件中的完整代码,13.4.2 链接外部JavaScript,然后在index.html页面中调用外部JavaScript文件function.js，调用代码如图13-12所示。 图13-12 调用外部JavaScript文件 注意： 在外部JS文件中，不需要将脚本代码用和标记括起来。,本实例将制作一个HTML页面，该页面中使用JavaScript脚本输出一个“你好”中文字符串，效果如图13-13所示。 图13-13 使用JavaScript输出“你好”中文字符串,13.5 综合实例用JS输出中文字符串,使用JavaScript在网页中输出字符串一般通过document对象的write方法实现，关键代码如下： 使用JavaScript输出“你好”中文字符串 document.write(你好); ,（1）JavaScript是一种基于对象的语言。 （2）JavaScript是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器中运行时被解释。 （3）JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。 （4）JavaScript依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。 （5）JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。 （6）在Web页面中使用JavaScript有以下两种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件。 （7）在HTML文档中可以使用标记将JavaScript脚本嵌入到其中。 （8）在Web页面中引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。,知识点提炼,13-1 简单描述JavaScript的特点。 13-2 常用的编写JavaScript的工具有哪些？ 13-3 如何在页面中嵌入JavaScript脚本？ 13-4 如何在页面中链接外部JavaScript脚本文件？,习题,