JavaScript程序设计教程 第1章 JavaScript简介.pdf

O第1章JavaScript简介1.1什么是 JavaScr ipt?oo1.2JavaScr i pt 与 Java 的区别oo1.3JavaScr i pt能做什么?oo1.4 JavaScr i pt不能做什么?o 1.5 JavaScript 实现 o o1.6 搭建JavaScr i pt环境 o o1.7 编写第一个JavaScr i pt程序 oo 1.8小结 ooQi 1.1 什么是 JavaScript?JavaScript是一种基于对象(Object)和事件驱动(E vent?Driven)并具有安全性能的脚本语言。使用它的目的是与HTML 1(超文本标记语言)、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象，与Web客户交互，从而可以开?发客户端的应用程序等。它是通过嵌入或调入在标准的HTML实 现的。它的出现弥补了HTML的缺陷，它是Java与HTML折中的选 择，具有以下几个基本特点。o丫 1.简单性JavaScript的简单性主要体现在：首先，它是一种基于 Java基本语句和控制流之上的简单而紧凑的设计，从而对学 习Java是一种非常好的过渡；其次，它的变量类型采用弱类 型，并未使用严格的数据类型。6 2.动态性JavaScript是动态的，它可以直接对用户或客户输入做?出响应，无须经过Web服务程序。A 它对用户的响应，是采用以事件驱动的方式进行的。在主页(Home Page)中执行了某种操作所产生的动作称为“事 o 件(E vent)oo?3.跨平台性 JavaScript依赖于浏览器本身，与操作环境无关，只要有 能运行浏览器的计算机，以及支持JavaScript的浏览器就可以 o正确执行。从而实现了“编写一次，走遍天下”的梦想。1 4.节省服务器的开销JavaScript是一种基于客户端的语言，用户在浏览过程中 进行填表、验证等交互过程只需通过浏览器调入HTML文档中的 JavaScript源代码来进行解释，并执行已经编好的JavaScript 的相应程序来完成即可，大大减少了服务器的资源消耗。Ooi 1.2 JavaScript与Java的区别 1.基于对象和面向对象?Java是一种真正的面向对象的语言，即使是开发简单的1 程序，也必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关。的，与用户交互作用的复杂软件。它是一种基于对象和事件 驱动的编程语言。因而它本身提供了非常丰富的内部对象供 设计人员使用。O2.解释和编译两种语言在浏览器中所执行的方式不一样。Java的源代 码在传递到客户端执行之前，必须经过编译，因而客户端上 必须具有相应平台上的仿真器或解释器。JavaScript的源代码在发往客户端执行之前不需经过编 译，而是将文本格式的字符代码发送给客户端由浏览器解释 执行。3.强变量和弱变量两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须 做声明。JavaScript中的变量声明，采用弱类型，即变量在使用 前不需做声明，而是解释器在运行时检查其数据类型。o 4.代码格式不一样T Java是一种与HTML无关的格式，必须通过像HTML中引用外；媒体那样进行装载，其代码以字节代码的形式保存在独立的文 档中。JavaScript的代码是一种文本字符格式，可以直接嵌入!HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文 件一样方便。9 5.嵌入方式不一样1 在HTML文档中，两种编程语言的标识不同，JavaScript使用.来标识，而Java使用applet./applet来标识。O6.静态联编和动态联编Java采用静态联编，即Java的对象引用必须在编译时进行,以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript的对象引用在运 行时进行检查。oQOOo1.3 JavaScript能做什么？用JavaScript可以做许多事情，使网页更具交互性，为站 点的用户提供更好、更令人兴奋的体验。JavaScript可以创建 活跃的用户界面，当用户在页面间浏览时向他们提供反馈。例如：使用JavaScript的翻转器技术，实现当鼠标指针停田在页面按钮上时，会突出显示按钮。还可以使用JavaScript来确保用户以表单形式输入有效的信息，如果表单需要进行Q些校验工作，那么可以在用户机器上用JavaScript来完成，而 不需要任何服务器端处理。OOoQOOOQ另外，使用JavaScript,根据用户的操作可以创建自定 义的Web页面。假设用户正在访问一个美食站点，单击某个 美食，可以在一个新窗口中显示该美食的相关信息。JavaScript可以控制浏览器，可以打开新窗口、显示警 告框，还可以在浏览器窗口的状态栏中显示自定义的消息。除此之外，JavaScript还可以处理表单、设置cookie,即时 构建HTML页面以及创建基于Web的应用程序。OQoo1 1.4 JavaScript不能做什么？JavaScript是一种客户端语言。也就是说，设计它的目的 o 是在用户的计算机上，而不是服务器上执行任务。因此，1 JavaScript有如下一些固有的限制。JavaScript不允许写服务器上的文件。o JavaScript不能关闭不是由它自己打开的窗口。JavaScript不能从来自另一个服务器的已经打开的网页中 读取信息。Oo1.5 JavaScript实现一个完整的JavaScript实现由3个不同部分组成：核心（E CMAScript）文档对象模型（D0M）和浏览器对象模型（B0M）,如图1.1所示。图 JavaScript实现o 1.E CMAScript?E CMAScript是一种通过E CMA-262标准化的脚本程序设工 计语言。它可以为不同种类的宿主环境提供核心的脚本编程 能力。也就是说E CMAScript描述了语言的语法和基本对象。o 它并不与任何具体浏览器相绑定，实际上，它也没有提到用1 于任何用户输入输出的方法（这点与C这类语言不同，它需要依赖外部的库来完成这类任务）。o 浏览器中的E CMAScript添加了与D0M的接口，可以通过脚本改变网页的内容、结构和样式。OoQ2.DOMDOM是HTML和XML的应用程序接口（API）。DOM将把整个 页面规划成由节点层级构成的文档。HTML或XML页面的每个部 分都是一个节点的衍生物。看下面的HTML页面。Sample Pagehello world!*o这段代码可以用DOM绘制成一个节点层次图，如图L2所Qhtml图1.2节点层次图oQODOM将整个页面规划成由节点层次构成的文档，从而使开 发者对文档的内容和结构有很好的控制，可以很方便地删除、添加和替换节点。OOQOOoT 3.BOMBOM主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript扩展都被看作B0M的一部分。这些扩展包括：弹出新的浏览器窗口；I 移动、关闭浏览器窗口以及调整窗口大小；6 提供Web浏览器详细信息的定位对象；提供用户屏幕分辨率详细信息的屏幕对象；?A对cookie的支持；IE扩展了BOM,0口入了ActiveXObject类，可以通过 JavaScript 实例化 ActiveX 对象。Ooo1 1.6 搭建JavaScript环境相比其他语言，JavaScript的优势之一在于不用安装或配 o置任何复杂的环境就可以开始学习。每台计算机上都已具备所 1需的环境，哪怕使用者从未写过一行代码。有浏览器足矣！为了运行本书中的示例代码，建议安装Chrome或F irefox浏 览器，一个合适的编辑器（如Sublime Text或NotePad+）,以 及一个Web服务器（WAMP或XAMPP,这一步是可选的）。Oot.6.t问完器浏览器是最简单的开发环境。Chrome浏览器或者F irefox浏 览器是最常用的。如果使用F irefox浏览器，需要安装F irebug 插件，安装完成后，在浏览器的右上角会看到一个图标，如图 1.3所示。O一 51 XQO自，今与O图1.3 Firebug插件图标o单击F irebug图标，打开浏览器控制台，在命令行区域 中编写所有JavaScript代码，如图L 4所示(执行源代码可 以单击“运行”按钮)。w Firebug-hao123一上网从这里开始-X&*alert CHello World!*)1 alert(*Hello World!*)1O图1.4 Firefox浏览器控制台编码o也可以扩展命令行，来适应F irebug插件的整个可用区域。使用Chrome浏览器也是可以的，Chrome已经集成了G oogleQQDeveloper Tools（谷歌开发者工具）。打开Chrome,单击设置及控制图标，选中更多工具|开发者 工具（英文为Tools|Developer Tools）,如图1.5所示（执行 源代码可按【E nter】键）。Developer Tools-http s:/www.hao123.co m/?tn=9968275 5_h a op g XElements Console Sources Network Timeline Profiles Application 0 top U Preserve log alert(Hello World);图1.5 Chrome浏览器控制台编码oQOOOQt.6.2 WM瞅春紧（加蜀庐）安装WAMP,然后在WAMP安装文件夹下找到htdocs目录。在 该目录下新建一个文件夹，就可以在里面执行本书中所讲述的 源代码，或直接将示例代码下载后提取到此目录。接下来，在启动WAMP服务器后，就可以通过localhost这 个URL,用浏览器访问源代码，注意别忘了打开F irebug或谷歌 开发者工具查看输出。OOo1-7编写第一个JavaScript程序学习JavaScript或者其他新技术的:佳方法都是,要多写多练。每一个范例都务必弄懂并亲自编写。样的下面通过一个例子：脚本1 T,编写第一个JavaScript程 序。通过它可以说明JavaScript的脚本是怎样被嵌入到HTML 文档中的。/JavaScript Appears herealert（这是第一个 JavaScript）;alertp欢迎你进入JavaScript世界!”，;脚本Hhtmloo1 上例是一个HTML文档，其标识格式为标准的HTML格式。如同HTML一样，JavaScript程序代码是一些可用字处理软件 F浏览的文件，它在描述页面的HTML相关区域出现。alert()是JavaScript的窗口对象方法，其功能是弹出一个具有“确定”按钮的对话框，并显示()中的字符串。用来标识注释，注释内容不会被执行。使用注释是一个好的编程习惯，它使 其他人可以读懂你的代码。JavaScript以/$仃11;标签结束 o从上面的实例分析中可以看出，编写一个JavaScript程序 是非常容易的。Oo运行这个实例分别弹出两个窗口，如图1.6和图1.7 所示。X此网页显示：这是箝一个JavaScript例子！确定图1.6第一个JavaScript程序弹窗1X此网页显示：欢迎你进入JavaScript世界！禁止此页再显示对话梅。确定Q图1.7第一个JavaScript程序弹窗2o9 1.8小结JavaScript是一种专为网页交互而设计的脚本语言。本 章主要介绍了JavaScript的实现、JavaScript的主要特点、JavaScript能做哪些事和不能做哪些事以及常用的两种开发 环境，最后以一个实例介绍了JavaScript在HTML文档中的使 用。通过这一章的学习，应该对JavaScript有一个清晰的认 识。下一章将详细介绍JavaScript基础知识。O