第1章JavaScript基础.ppt

《第1章JavaScript基础.ppt》由会员分享，可在线阅读，更多相关《第1章JavaScript基础.ppt（46页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第1章章 JavaScript基基础础1.1 脚本语言的介绍脚本语言的介绍lJavaScript是脚本语言的一种，在本节里将是脚本语言的一种，在本节里将会介绍什么是脚本语言、常用的脚本语言有哪会介绍什么是脚本语言、常用的脚本语言有哪些，以及这些脚本语言之间的区别。些，以及这些脚本语言之间的区别。21.1.1 什么是脚本语言什么是脚本语言l脚本语言（脚本语言（Scripting Language）是一种简）是一种简单的程序，这些程序是由一些单的程序，这些程序是由一些ASCII字符构成，字符构成，可以使用任何一种文本编辑器来编写。以往的可以使用任何一种文本编辑器来编写。以往的一些程序语言（如一些

2、程序语言（如C、C+、Java等）都必须等）都必须经过编译，将源代码编译成二进制的可执行文经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器只要有一个与其相适应的解释器（Interpreter）就可以执行。）就可以执行。31.1.2 脚本语言的分类脚本语言的分类l脚本语言可以简单地分为两类：服务器端脚本脚本语言可以简单地分为两类：服务器端脚本语言和客户端脚本语言。语言和客户端脚本语言。l顾名思义，服务器端脚本语言就是在服务器上顾名思义，服务器端脚本语言就是在服务器上执行的脚本语言。常用的服务器

3、端脚本语言有执行的脚本语言。常用的服务器端脚本语言有ASP、JSP、PHP等。使用服务器端脚本，大等。使用服务器端脚本，大多数执行过程都在服务器上完成，服务器将运多数执行过程都在服务器上完成，服务器将运行后的结果返回给客户端。因此，服务器端脚行后的结果返回给客户端。因此，服务器端脚本语言对服务器端的要求比较高，而对客户端本语言对服务器端的要求比较高，而对客户端的要求相对而言就比较低了。的要求相对而言就比较低了。41.1.3 什么是什么是JavaScriptlJavaScript最早是由网景公司开发出来的一种最早是由网景公司开发出来的一种跨平台的、面向对象的脚本语言。最初这种脚跨平台的、面向对象

4、的脚本语言。最初这种脚本语言只能在网景公司的浏览器本语言只能在网景公司的浏览器Netscape中使用。为了抢占浏览器市场，微软在其中使用。为了抢占浏览器市场，微软在其Internet Explorer浏览器里也加入了对浏览器里也加入了对JavaScript的支持，从此的支持，从此JavaScript得到了广得到了广泛的支持。目前几乎所有的主流浏览器都支持泛的支持。目前几乎所有的主流浏览器都支持JavaScript。5lJavaScript 是属于客户端的脚本语言。是属于客户端的脚本语言。JavaScript 被数百万计的网页用来改进设计、验被数百万计的网页用来改进设计、验证表单、检测浏览器、创

5、建证表单、检测浏览器、创建cookies，以及更多的，以及更多的应用。应用。JavaScript 是因特网上最流行的脚本语言。是因特网上最流行的脚本语言。lJavaScript 可在所有主要的浏览器中运行，比可在所有主要的浏览器中运行，比方说方说 Internet Explorer、Mozilla、Firefox、Netscape、和、和 Opera。6什么是什么是 JavaScript？lJavaScript 被设计用来向被设计用来向 HTML 页面添加交互页面添加交互行为。行为。lJavaScript 是一种脚本语言（脚本语言是一种轻是一种脚本语言（脚本语言是一种轻量级的编程语言）。量级的

6、编程语言）。lJavaScript 由数行可执行计算机代码组成。由数行可执行计算机代码组成。lJavaScript 通常被直接嵌入通常被直接嵌入 HTML 页面。页面。lJavaScript 是一种解释性语言（就是说，代码执是一种解释性语言（就是说，代码执行不进行预编译）。行不进行预编译）。7lJava 和和 JavaScript 是相同的吗？是相同的吗？l 在概念和设计方面，在概念和设计方面，Java 和和 JavaScript 是两种完全不同的是两种完全不同的语言。语言。JavaScript是是Netscape公司的产品，其目的是为了扩展公司的产品，其目的是为了扩展Navigator功能，

7、而开发的一种可以嵌入功能，而开发的一种可以嵌入Web页面中的基于对象页面中的基于对象和事件驱动的解释性语言；而和事件驱动的解释性语言；而Java是是SUN公司推出的面向对象公司推出的面向对象的程序设计语言。的程序设计语言。l JavaScript是基于对象的，它是一种脚本语言，是一种基于是基于对象的，它是一种脚本语言，是一种基于对象和事件驱动的语言，它本身提供了非常丰富的内部对象供设对象和事件驱动的语言，它本身提供了非常丰富的内部对象供设计人员使用。而计人员使用。而Java是面向对象的，是一种真正的面向对象的是面向对象的，是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。语言，即

8、使是开发简单的程序也必须设计对象。l JavaScript与与Java在浏览器中所执行的方式不一样。在浏览器中所执行的方式不一样。JavaScript是一种解释性语言，其源代码在发往客户端执行之是一种解释性语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，即前不需经过编译，而是将文本格式的字符代码发送给客户，即JavaScript语句本身随语句本身随Web页面一起下载下来，由浏览器解释页面一起下载下来，由浏览器解释执行。而执行。而Java的源代码在传递到客户端执行之前，必须经过编的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真

9、器或解释器，它可译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码。以通过编译器或解释器实现独立于某个特定的平台编译代码。81.2 JavaScript的作用的作用lJavaScript虽然只是一种客户端的脚本语言，虽然只是一种客户端的脚本语言，但是功能却十分强大。但是功能却十分强大。9lJavaScript 能做什么？能做什么？lJavaScript 为为HTML设计师提供了一种编程工具。设计师提供了一种编程工具。lJavaScript 是一种只拥有极其简单的语法的脚本语是一种只拥有极其简单的语法的脚本语言言lJavaScript 可

10、以将动态的文本放入可以将动态的文本放入 HTML 页面页面lJavaScript 可以对事件作出响应可以对事件作出响应 lJavaScript 可被用来验证数据在数据被提交到服务器之可被用来验证数据在数据被提交到服务器之前，前，JavaScript 可被用来验证这些数据。可被用来验证这些数据。lJavaScript 可被用来检测访问者的浏览器可被用来检测访问者的浏览器 lJavaScript 可被用来检测访问者的浏览器，并根据所检可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。测到的浏览器，为这个浏览器载入相应的页面。lJavaScript 可被用来创建可被用来

11、创建 cookies lJavaScript 可被用来存储和取回位于访问者的计算机中可被用来存储和取回位于访问者的计算机中的信息。的信息。101.3 浏览器对浏览器对JavaScript的支持的支持l目前在市场上使用得比较多的浏览器包括微软目前在市场上使用得比较多的浏览器包括微软公司的公司的Internet Explorer浏览器（简称为浏览器（简称为IE浏浏览器）、网景公司的览器）、网景公司的Netscape浏览器、浏览器、Opera公司的公司的Opera浏览器、浏览器、Mozilla公司的公司的FireFox浏览器等等，都支持浏览器等等，都支持JavaScript。但。但是，不同的浏览器对

12、是，不同的浏览器对JavaScript的支持都有所的支持都有所不同不同.111.4 面向对象的语言面向对象的语言l在最初的程序设计中，所有的关系都是用变量在最初的程序设计中，所有的关系都是用变量或表达式来构成，程序员常常很难弄清楚每个或表达式来构成，程序员常常很难弄清楚每个变量或表达式之间的关系，直到面向对象的概变量或表达式之间的关系，直到面向对象的概念出现。念出现。JavaScript也是一种面向对象的语言。也是一种面向对象的语言。121.4.1 面向对象介绍面向对象介绍l所谓对象，实际上就是一个事先定义好的程序所谓对象，实际上就是一个事先定义好的程序模块，在程序模块中定义好变量或表达式之间

13、模块，在程序模块中定义好变量或表达式之间的关系，程序员可以直接使用这些关系来设计的关系，程序员可以直接使用这些关系来设计自己的程序。自己的程序。131.4.2 对象的操作对象的操作l在在JavaScript中已经预定义好了很多对象，程中已经预定义好了很多对象，程序员可以直接使用这些对象。对象都是使用序员可以直接使用这些对象。对象都是使用new运算符来定义的，例如使用一个日期对象，运算符来定义的，例如使用一个日期对象，可以使用以下语句来定义一个新的日期对象：可以使用以下语句来定义一个新的日期对象：lvar d=new Date();var d=new Date(July 4,1976);var

14、d=new Date(7,4,1976);var d=new Date(7,4,1976,12,00,00);141.4.3 类、对象与对象实例类、对象与对象实例l虽然虽然JavaScript被称为被称为“面向对象面向对象”的语言，的语言，但是在但是在JavaScript中并没有正式的中并没有正式的“类类”的概的概念，这一点与其他面向对象的程序设计语言有念，这一点与其他面向对象的程序设计语言有所不同。简单一点说，类是指一个分类，例如所不同。简单一点说，类是指一个分类，例如汽车、动物都是一个类。而在汽车类中的卡车、汽车、动物都是一个类。而在汽车类中的卡车、公共汽车、货车等，这些都是对象。同样在动

15、公共汽车、货车等，这些都是对象。同样在动物类中，猪、狗、猫等，也都是对象。物类中，猪、狗、猫等，也都是对象。151.5 JavaScript编辑器编辑器lJavaScript是嵌入是嵌入HTML中的一段程序代码，中的一段程序代码，因此，只要能编辑因此，只要能编辑HTML的编辑器，都可以编的编辑器，都可以编辑辑JavaScript。161.5.1 记事本记事本l记事本是最简单的文本编辑器，就是因为简单，记事本是最简单的文本编辑器，就是因为简单，除了做些简单的文字处理之外，就没有其他功除了做些简单的文字处理之外，就没有其他功能了。如果使用记事本来编辑能了。如果使用记事本来编辑JavaScript，

16、需，需要对要对JavaScript的语法、对象等都比较熟悉。的语法、对象等都比较熟悉。不过也因为记事本比较简单，打开速度快，使不过也因为记事本比较简单，打开速度快，使用方便，常常用来做局部的修改。用方便，常常用来做局部的修改。171.5.2 1st JavaScript Editorl1st JavaScript Editor是一个很好的是一个很好的JavaScript编辑软件，有着十分丰富的编辑功编辑软件，有着十分丰富的编辑功能，可以显示正确的语法代码，还有十分出色能，可以显示正确的语法代码，还有十分出色的提示功能。在输入代码时可以弹出代码提示，的提示功能。在输入代码时可以弹出代码提示，除了

17、可以提高开发人员的工作效率之外，还可除了可以提高开发人员的工作效率之外，还可以减少出现错误的机会。以减少出现错误的机会。181.5.3 Ultra Edit 32lUltra Edit 32是由IDM Computer Solutions公司出品的著名的文本编辑器，该编辑器内置了HTML、JavaScript的语法检查，可以显示正确的JavaScript代码。Ultra Edit 32可以同时编辑多个文件，并且开启速度也很快，可以取代记事本使用。191.5.4 DreamweaverlMacromedia公司的Dreamweaver是建立Web站点和应用程序的专业工具，该工具可以将可视化工具、

18、应用程序开发功能与代码编辑组合在一起，并且内置了一些JavaScript小程序。在手动编辑JavaScript方面，也有代码提示，可以让程序员轻松完成代码编辑工作。201.6 在网页中加入在网页中加入JavaScriptlJavaScript作为脚本语言，可以插入到HTML代码之中，下面介绍如何在HTML代码之中加入JavaScript。211.6.1 使用使用标签标签l在在HTML中加入中加入Script代码，必须将代码，必须将Script代代码放在码放在与与标签之间。如以标签之间。如以下代码：下代码：01020304document.write(Hello World!);/输出经典的输出

19、经典的Helloworld050607221.6.2 简单的输出简单的输出l在系统学习JavaScript之前，先介绍两个常用的JavaScript语句，这两个语句经常用来调试JavaScript程序。l输出警告框输出警告框l输出文字输出文字0102034document.write(Hello World!);/输出经典的输出经典的Helloworld5alert(“Hello World!”);050607231.6.3 注释注释l与其他语言程序一样，与其他语言程序一样，JavaScript也可以使用也可以使用注释语句来注释一行或一段代码。被注释的代注释语句来注释一行或一段代码。被注释的代

20、码是不会被执行的，通常用于代码调试或说明。码是不会被执行的，通常用于代码调试或说明。JavaScript中的注释语句两种：单行注释与多中的注释语句两种：单行注释与多行注释。行注释。24注释注释document.write(这是一行由这是一行由JavaScript输出的文字输出的文字);/document.write(该行文字被注释了，不会被执行。该行文字被注释了，不会被执行。);document.write(这是另一行由这是另一行由JavaScript输出的文字输出的文字);/*这一段文字都被注释了，这一段文字都被注释了，全部不会被执行，哪怕有以下输出语句：全部不会被执行，哪怕有以下输出语句：

21、document.write(这是一行由这是一行由JavaScript输出的文字输出的文字);document.write(这是另一行由这是另一行由JavaScript输出的文字输出的文字);*/251.6.4 使用使用HTML的注释语句来标的注释语句来标记记JavaScript代码代码l虽然现在主流的浏览器都支持虽然现在主流的浏览器都支持JavaScript，但，但也无法确保所有用户都在使用主流浏览器。有也无法确保所有用户都在使用主流浏览器。有些用户甚至还在使用不支持些用户甚至还在使用不支持JavaScript的浏览的浏览器来浏览网页。此时可以利用器来浏览网页。此时可以利用HTML的注释语的

22、注释语句来标记句来标记JavaScript代码，让那些老浏览器不代码，让那些老浏览器不执行这些执行这些JavaScript代码。在代码。在HTML语言里，语言里，可以使用可以使用“”来注释代码。来注释代码。26使用使用HTML的注释语句来标记的注释语句来标记JavaScript代码代码!-document.write(这是一行由这是一行由JavaScript输出的文字输出的文字);document.write(这是另一行由这是另一行由JavaScript输出的文字输出的文字);-271.6.5 浏览效果浏览效果l由于由于JavaScript是嵌在是嵌在HTML中的代码，如果中的代码，如果要浏览

23、要浏览JavaScript的效果，只要能运行的效果，只要能运行HTML文件即可。本地计算机上的文件即可。本地计算机上的HTML文件可以直文件可以直接双击打开，接双击打开，Web上的上的HTML文件可以在浏览文件可以在浏览器中输入网址打开。器中输入网址打开。281.7 标记介绍标记介绍lJavaScript脚本其实就是脚本其实就是HTML文件的一部分，文件的一部分，只是只是JavaScript脚本代码必须放在脚本代码必须放在与与标签之间。在这两个标签之间可以放标签之间。在这两个标签之间可以放置一行或多行置一行或多行JavaScript代码。代码。JavaScript代代码的出现次序就是码的出现次

24、序就是JavaScript的执行次序。一的执行次序。一个个HTML文档中可以出现多个文档中可以出现多个标签，标签，但但标签之间不能嵌套。标签之间不能嵌套。291.7.1 设置脚本语言名和版本设置脚本语言名和版本l通过前面的章节可以知道，脚本语言分为通过前面的章节可以知道，脚本语言分为JavaScript、VBScript、JScript、ECMAScript几种，在几种，在标签里可以通过标签里可以通过language属性属性来设置使用哪种脚本语言，如以下代码：来设置使用哪种脚本语言，如以下代码：0102034document.write(Hello World!);/输出经典的输出经典的Hel

25、loworld5alert(“Hello World!”);050607301.7.2 指定脚本语言的指定脚本语言的MIME类型类型l在在HTML 4标准里并不赞成使用标准里并不赞成使用language属性，属性，而是赞成使用而是赞成使用type属性。属性。language属性可以用属性可以用来指定使用哪种脚本语言，而来指定使用哪种脚本语言，而type属性可以指定属性可以指定脚本语言的脚本语言的MIME类型。从理论上而言，为脚本类型。从理论上而言，为脚本语言指定语言指定MIME类型比指定脚本语言名称要科学类型比指定脚本语言名称要科学得多，但是事实上各种浏览器对得多，但是事实上各种浏览器对lan

26、guage属性属性的支持比对的支持比对type属性的支持要好得多。属性的支持要好得多。31lll引用外部引用外部Script文件文件llllll321.7.3 包括外部的包括外部的JavaScript文件文件lJavaScript除了可以直接嵌入除了可以直接嵌入HTML文件中，文件中，也可以独立存在与也可以独立存在与HTML文件之外。可以通过文件之外。可以通过设置设置标签中标签中src属性来指定外部属性来指定外部JavaScript文件的地址。文件的地址。l l331.8 JavaScript的执行方式的执行方式lJavaScript的功能十分强大，有些的功能十分强大，有些JavaScript

27、代码可能需要立即执行，而有些代码可能需要立即执行，而有些JavaScript代代码可能需要在触发了一些事件（如单击了按钮）码可能需要在触发了一些事件（如单击了按钮）之后才可以执行。之后才可以执行。341.8.1 直接执行直接执行l在在与与标签中的标签中的JavaScript代代码，只要不是放置在函数中的，都是属于直接码，只要不是放置在函数中的，都是属于直接执行的执行的JavaScript代码。代码。35直接执行的直接执行的JavaScript代码代码直接执行的直接执行的JavaScript代码代码!-document.write(JavaScript有以下几个版本有以下几个版本);-JavaS

28、cript 1.0JavaScript 1.1JavaScript 1.2JavaScript 1.3JavaScript 1.4361.8.2 使用使用“javascript:”调用调用l在在HTML里可以通过里可以通过“javascript:”方式来方式来调用调用JavaScript的函数或方法，请看以下代码：的函数或方法，请看以下代码：使用使用“javascript:”javascript:”a href=javascript:alert()请请点我点我37使用使用“javascript:”请点我请点我381.8.3 与事件结合调用与事件结合调用lJavaScript可以支持很多事件，所

29、谓事件可以可以支持很多事件，所谓事件可以影响用户的操作，比如说单击鼠标左键、按下影响用户的操作，比如说单击鼠标左键、按下键盘、移动鼠标等等。与事件结合，可以调用键盘、移动鼠标等等。与事件结合，可以调用执行执行JavaScript的方法或函数。请看以下代码：的方法或函数。请看以下代码：39lll与事件相结合与事件相结合llllll请将鼠标请将鼠标放在上面放在上面l请点我请点我ll401.9 注意事项注意事项lJavaScript虽然比较简单，但是在编写虽然比较简单，但是在编写JavaScript代码时，有以下几点是需要注意的。代码时，有以下几点是需要注意的。411.9.1 大小写敏感大小写敏感l

30、虽然虽然HTML对大小写不敏感，但是嵌入对大小写不敏感，但是嵌入HTML中的中的JavaScript对大小写却是敏感的。因此，对大小写却是敏感的。因此，在定义与使用在定义与使用JavaScript的常量、变量、函数的常量、变量、函数名时，一定要保持大小写相同。例如名时，一定要保持大小写相同。例如“JavaScript”、“javascript”、“Javascript”与与“JAVAscript”就是四个不就是四个不同的变量名。同的变量名。421.9.2 空格与换行空格与换行l在在JavaScript中会忽略程序中的空格、换行和中会忽略程序中的空格、换行和制表符，除非这些符号是字符串或正则表达

31、式制表符，除非这些符号是字符串或正则表达式中的一部分。因此可以在程序中随意使用这些中的一部分。因此可以在程序中随意使用这些特殊符号来进行排版，让代码更加易于阅读和特殊符号来进行排版，让代码更加易于阅读和理解。理解。431.9.3 可有可无的分号可有可无的分号l在在JavaScript中，可以使用分号来代表一个语中，可以使用分号来代表一个语句结束，如以下代码代表两个不同的语句：句结束，如以下代码代表两个不同的语句：la=123;lreturn true;441.10 小结小结lJavaScript是一种面向对象的客户端脚本语言，是一种面向对象的客户端脚本语言，目前主流的浏览器都支持目前主流的浏览

32、器都支持JavaScript。JavaScript代码可以写在代码可以写在HTML文件的任何一文件的任何一个地方，但必须放在个地方，但必须放在与与标签标签之间。在编写之间。在编写JavaScript代码时要了解其执行代码时要了解其执行方式和一些注意事项。下一章将详细介绍方式和一些注意事项。下一章将详细介绍JavaScript的常量、变量和数据类型。的常量、变量和数据类型。45参考书参考书l零基础学零基础学Java Script 丁士锋等编著丁士锋等编著 机械工机械工业出版社业出版社lJavaScript基础教程基础教程(第第7版版)（美）内格里诺，（美）内格里诺，（美）史密斯著，陈剑瓯等译（美）史密斯著，陈剑瓯等译 人民邮电出版人民邮电出版社社46