第16章+CSS与JavaScript.ppt

第16章CSS与JavaScript,在第5章我们提到了事件，事件处理程序，引出了JavaScript这个名词；在之后的第6章、第7章等也都提到了它，限于内容，并未进行具体的介绍。现在，本书对于CSS的讲解已经接近尾声，专门开辟一章来介绍JavaScript则很有必要。JavaScript是一种解释运行的脚本语言。它的主要分类-客户端JavaScript和CSS一样，同为网页中重要的组成部分。JavaScript在网页中可以做很多事情：作为事件处理程序，验证用户输入的信息是否符合规范；作为页面各标签的组织者，实现众多的炫目页面效果；特别地，利用JavaScript也可以设置CSS样式规则，从而实现控制页面外观的目的。本章将对JavaScript进行简单的讲解，使得读者能够对它有一些基本的认识，并能够在今后的工作中继续提高。,16.1JavaScript简介,从字面上看，JavaScript是由Java与script两个词组合而成的。Java是印度尼西亚的一个岛屿，也就是爪哇岛，印尼的首都雅加达就坐落在这个岛屿上；而后者Script是剧本、脚本的意思。在计算机世界里，Java则是Sun公司推出的程序设计语言的名称；script表示出于控制某种程序的目的，需要计算机进行解释才能运行的语言，即脚本语言。【JavaScript并不是Java】有的读者可能听说过Java。其实，JavaScript和Java没有任何关系。当初推出JavaScript的前身LiveScript时，Java在业内刚开始流行，人们到处都在谈论它。为了吸引眼球，获得商业上的成功，JavaScript的主人Netscape公司跟风才将名称修改为JavaScript。【编译和解释】在前文中提到JavaScript是一种解释运行的语言。这里通俗地介绍一下编译和解释。我们知道，用计算机编程语言编写的程序称为源程序，比如我们编写网页的源代码HTML等。但是，计算机只能看懂0和1，看不懂源代码，因此不能直接执行源程序。如何使计算机工作呢？方法就是依赖翻译，把源代码翻译成计算机看得懂的0和1。,16.1.1JavaScript的分类,JavaScript既然需要解释才能运行，那么就需要一个翻译来陪同，它就是代码的解释器。计算机世界中的解释器一般都只能解释一种语言，也就是说JavaScript解释器只负责解释JavaScript，其他语言则一概不管。根据解释器所处的位置不同，JavaScript可以分为三类：客户端JavaScript：解释器被包括在浏览器内部，当用户上网时，负责解释服务器传来网页中的JavaScript。服务器端JavaScript：解释器存在于电脑系统内部，当用户在计算机系统内运行JavaScript程序时，负责解释代码。嵌入的JavaScript：解释器存在于其他程序或者设备内部。虽然现在还很少见，但随着技术的发展，今后很可能会越来越多。需要指出的是，我们在本章所介绍的JavaScript都属于第一种，即客户端JavaScript。因此，书中把客户端JavaScript简称为JavaScript，请读者注意。,16.1.2一个简单的包含JavaScript网页,本小节将制作一个包含JavaScript代码的HTML页面，读者可从中学习到如下几点：JavaScript在页面中的位置，它如何区别于HTML页面的其他部分。JavaScript代码的书写规范和在页面中实际效果。JavaScript代码注释，CSS样式规则中的注释以及HTML代码中的注释在语法上的区别。,一个包含JavaScript的简单网页,16.1.3JavaScript的作用概述,总体说来，利用JavaScript可以实现：控制网页内容和外观：在代码16-1中，通过document.write语句，我们已经将一个h1标签加入到网页的内容当中。关于控制外观，也将在16.2节中详细介绍。实现对浏览器的控制：JavaScript可以通过location对象、window对象实现浏览器转向别的网页或者打开一个新的浏览器窗口。实现事件处理程序，完成和用户的交互：在第5章我们介绍的事件处理程序在大多数情况下都是由JavaScript来完成的。当用户提交一个表单，单击一个按钮，或者仅仅是鼠标划过某个标签，都会触发相应的事件，JavaScript代码可以对这些事件进行处理，将结果告知用户，完成交互。控制浏览器和网页的部分行为：JavaScript可以通过Window对象实现对窗口的移动，可以实现对标签的拖拽等等。获得当前浏览器甚至系统信息的功能：比如利用Screen对象可以获得显示器大小、系统使用的分辨率等信息；利用Date对象可以获得系统的日期和时间等等。通过Cookie来记录用户的状态：通过Cookie对象，可以记录用户在浏览当前网站时的一些信息。,16.2JavaScript范例,本节中通过几个范例页面，来说明上一节末尾提到的JavaScript在网页中的作用。关于控制网页内容和外观，代码已经给出了例子，这里不再重复。,16.2.1用JavaScript控制浏览器,如下两种情景想必每一个读者在上网的过程中都会经历：向服务器请求一个网页，但该网页已经不存在，网站于是返回一个“该页找不到”的提示信息页，过几秒钟后浏览器自动转向栏目首页。打开网站首页时，跳出几个弹出窗口，内容为广告。,在打开网页10秒之内代码的显示图打开网页10秒钟之后自动转到搜狐首页,16.2.2用JavaScript实现事件处理,利用JavaScript可以完成第5章所提到，但没有具体介绍的事件处理。当标签上的一个事件发生时，浏览器根据标签内预先设定好的事件处理程序名在页面内部或者外部找到它，执行它。就是这样一个事件处理程序，它在按钮被单击的时候，检查旁边的文本框输入的字符长度是否大于10，并且给用户以提示。,单击按钮的事件处理程序显示结果,16.2.3JavaScript控制浏览器与网页行为,利用JavaScript还可以对浏览器和网页某标签进行控制，比如移动窗口，允许标签拖拽等，由于相对复杂，我们初学者只需看懂如下的代码即可。利用前文讲解过的setTimeout()实现了网页窗口每隔1分钟挪动方位的效果，同时，在网页上，还有一个背景为橙黄色的Div标签，当用户鼠标单击其中时会改变位置。,通过JavaScript控制浏览器窗口和网页标签的行为,16.2.4利用JavaScript获得系统信息,有的时候我们需要取得用户浏览器的类型、显示屏幕的颜色数等信息，利用JavaScript同样可以实现，如代码所示。,代码在IE中的显示代码在Firefox中的显示,16.2.5JavaScript通过Cookie记录用户状态,JavaScript可以通过将Cookie记录在本地来保存用户的状态。我们在浏览网站，特别是遇到登录界面的时候，往往能够发现如“记住用户名”之类的选项，这就是通过Cookie来实现的，如图所示的163邮箱首页。,163邮箱首页：记住用户名的设置,16.3利用JavaScript动态改变页面样式,在讲述JavaScript的作用时，我们只举出了控制网页内容的代码16-1作为例子，如何控制外观将在本节中进行讲述。利用JavaScript可以很方便的动态改变页面样式。之所以称为“动态”，是因为在网页已经显示完毕之后，利用JavaScript可以将某标签的样式再次改变，也就是说页面的样式不再是在浏览器中一成不变的了。,16.3.1JavaScript间接修改样式,本小节介绍的方法可以称得上是间接法，即通过JavaScript动态指定标签所应用的样式表名称，并不涉及具体的样式规则修改。这个方法的特点如下：利用JavaScript修改HTML标签的className属性值。修改后的值也必须是一个样式规则的名称。JavaScript只负责切换样式规则，不负责具体的样式设置，还是由CSS来实现此功能。其实，我们在第6章介绍过className这个属性，它为很多HTML标签所共有。,16.3.2JavaScript直接修改样式,所谓“直接法”，就是利用设置JavaScript中的style具体属性来改变样式。在这种情况下，不需要额外的样式表，由JavaScript来完成原来由CSS完成的功能。继续上一节有关用户动态改变背景色的问题。现在需要网页能够使得用户自助选择背景颜色和字体颜色，可想而知，如果两种颜色的组合都用样式表来实现，该建立多少个样式表啊。这种情况下，通过下面的几行代码可以轻松的搞定，如代码所示其在浏览器中的显示如图。,利用JavaScript修改style属性值进行样式修改,16.3.3JavaScript动态修改样式小结,本节中我们学习了两种利用JavaScript动态修改标签样式的方法：间接法：通过修改标签的className属性，为其指定另一个页面中存在的样式规则。直接法：通过修改标签的style属性，为其直接指定显示的样式。在实际应用中，一般来说直接法要利用的多些，我们应该根据场合和优缺点有计划的选择。,16.4使用JavaScript需要注意的一些问题,本节将简单介绍一些学习和使用JavaScript时需要注意的问题，计有以下几个：开启浏览器的JavaScript功能。网页中JavaScript的位置。Dreamweaver中如何编辑JavaScript。如何深入学习JavaScript。,16.4.1开启浏览器的JavaScript功能,在前文我们介绍了很多JavaScript的强大功能，但是如果浏览器没有带上JavaScript的翻译-解释器就麻烦了，这么美好的事情恐怕要成为泡影了。虽然不支持JavaScript的浏览器是越来越少了，但是有意无意中把浏览器中的JavaScript功能关闭倒是很可能发生的：比如，在Windows2003下，如果开启了InternetEnhancedSecurity的功能，则JavaScript八成是被禁止掉了。在浏览器中开启JavaScript功能也很简单，通过浏览器的设置即可实现。在IE中开启的界面如图所示。,在IE7中开启JavaScript功能,16.4.2JavaScript在网页中的位置,与CSS类似，JavaScript在网页中可以放置于页面的内，以标签和别的部分区别开，但也可以通过类似“外部样式表”的方式，链接一个外部JavaScript文件到网页。这样的外部JavaScript文件以.js为后缀名，在网页中链接它的代码如代码所示。代码网页中链接外部JavaScript文件链接外部JavaScript依然以标签开头，但是类似图片，增加了一个src属性，后面为外部文件的绝对或者相对地址，最后用封闭标签。使用外部JavaScript文件的好处与使用外部样式表文件类似，都可以方便管理、修改和功能在多个网页上共享。,16.4.3在Dreamweaver中编辑JavaScript,本小节作为第14章的补充，讲解在Dreamweaver中如何编辑JavaScript。,在Dreamweaver中新建JavaScript文档,16.4.4深入学习JavaScript的建议,JavaScript是一门博大精深的语言，学好它是一个漫长的过程，本书提出了如下的建议，供读者参考：购买一本有关JavaScript的专业书籍仔细研读。比如DavidFlanagan著的JavaScript权威指南一书，国内有中文版本，内容很全面。多写JavaScript程序。编码能力是练出来的，多写代码才能熟悉一门语言。学习有关计算机的基础知识，比如面向对象技术，堆