第01章JavaScript及其Web开发语言.pdf

m 第一章第一章JavaScriptJavaScriptJavaScript JavaScript 及其及其WebWebWeb Web 开发语言开发语言 主要内容主要内容 HTMLHTMLHTML HTML 简介简介 JavaScriptJavaScriptJavaScript JavaScript 简介简介 JscriptJscriptJscript Jscript 简介简介 使用使用JavaJavaJava Java 语言编写语言编写WebWebWeb Web 程序程序 调试调试HTMLHTMLHTML HTML 和和 JavaScriptJavaScriptJavaScript JavaScript 脚本的工具脚本的工具 IEIEIE IE 浏览器中的错误报告浏览器中的错误报告 1 1HTML1 1HTML1 1HTML 1 1HTML 简介简介 主要内容主要内容 引言引言 程序示例程序示例 在不兼容的浏览器中隐藏在不兼容的浏览器中隐藏JavaScriptJavaScriptJavaScript JavaScript 1 1 11 1 11 1 1 1 1 1 引言引言 HTMLHTMLHTML HTML 即超文本标记语言即超文本标记语言 编写并发布联机文档时所采用的脚本描述语言编写并发布联机文档时所采用的脚本描述语言 m 由文本 表格 图像 声音 动画 视频 超链接等组成由文本 表格 图像 声音 动画 视频 超链接等组成 HTMLHTMLHTML HTML 文档用于描述网页中的绝大多数成分文档用于描述网页中的绝大多数成分 HTMLHTMLHTML HTML 文档是将各种文档是将各种HTMLHTMLHTML HTML 代码与页面内容有效地组织起代码与页面内容有效地组织起来来 HTMLHTMLHTML HTML 标记都是用尖括号标记都是用尖括号 括起来括起来 HTMLHTMLHTML HTML 文档的基本结构如下 文档的基本结构如下 文档首部内容文档首部内容 文档正文内容文档正文内容 m 1 1 21 1 21 1 2 1 1 2 一个简单的一个简单的HTMLHTMLHTML HTML 程序程序 例例 010101 01 0 0 0 0 1 1 1 1 使用三级标题使用三级标题 标记块显示三行文字 标记块显示三行文字 程序浏览结果 程序浏览结果 1 1 1 1 2 2 2 2 3 3 3 3 htmlhtmlhtml html 文档文档 4 4 4 4 5 5 5 5 6 6 6 6 加入加入InternetInternetInternet Internet 俱乐部 共同感受时代精神俱乐部 共同感受时代精神 7 7 7 7 使用使用InternetInternetInternet Internet 搭上驶向新世纪的诺亚方舟搭上驶向新世纪的诺亚方舟 8 8 8 8 会使用会使用InternetInternetInternet Internet 网是现代文明人的通行证网是现代文明人的通行证 9 9 9 9 101010 10 m 1 2JavaScript1 2JavaScript1 2JavaScript 1 2JavaScript 简介简介 主要内容主要内容 JavaScriptJavaScriptJavaScript JavaScript 概述概述 JavaScriptJavaScriptJavaScript JavaScript 应用应用 JavaScriptJavaScriptJavaScript JavaScript 的优点与不足的优点与不足 JavaScriptJavaScriptJavaScript JavaScript 的正式定义 的正式定义 JavaScriptJavaScriptJavaScript JavaScript 是一种使用方便的 基于对象的脚本描是一种使用方便的 基于对象的脚本描述述 语言 主要应用于建立真正的联机应用程序 无论语言 主要应用于建立真正的联机应用程序 无论是是 在客户端方面还是在服务器端方面 这种联机应用在客户端方面还是在服务器端方面 这种联机应用程程 序都可以将对象和信息资源连接在一起 序都可以将对象和信息资源连接在一起 大多数浏览器都遵循大多数浏览器都遵循ECMA 262ECMA 262ECMA 262 ECMA 262 标准标准 1 2 1JavaScript1 2 1JavaScript1 2 1JavaScript 1 2 1JavaScript 概述概述 m 1 1 1 1 什么是脚本语言什么是脚本语言 网页脚本语言是为网页的浏览效果服务网页脚本语言是为网页的浏览效果服务 主要特征 主要特征 容易使用容易使用 解释实现解释实现 运行方便运行方便 交叉调用交叉调用 通信功能强大通信功能强大 2 JavaScript2 JavaScript2 JavaScript 2 JavaScript 简介简介 JavaScriptJavaScriptJavaScript JavaScript 的前身是的前身是NetScapeNetScapeNetScape NetScape 公司开发的公司开发的 LiveScriptLiveScriptLiveScript LiveScript JavaScriptJavaScriptJavaScript JavaScript 看成是看成是 JavaJavaJava Java 语言的一种简化版本语言的一种简化版本 JavaScriptJavaScriptJavaScript JavaScript 脚本可以方便地访问脚本可以方便地访问 JavaJavaJava Java AppletAppletApplet Applet 程序程序 JavaJavaJava Java AppletAppletApplet Applet 程序也可以方便地访问程序也可以方便地访问JavaScriptJavaScriptJavaScript JavaScript 脚本脚本 1 2 2JavaScript1 2 2JavaScript1 2 2JavaScript 1 2 2JavaScript 应用应用 1 1 1 1 客户端应用客户端应用 1 1 1 1 客户端应用原理 客户端应用原理 m 客户端应用 客户端应用 在在 HTMLHTMLHTML HTML 表单中实现交互表单中实现交互 提供事件处理机制实现操作控制提供事件处理机制实现操作控制 控制浏览器窗口控制浏览器窗口 读写读写cookiecookiecookie cookie 信息信息 2 2 2 2 客户端应用形式 客户端应用形式 利用利用 标记中的标记中的 属性直接使用属性直接使用 JavaScriptJavaScriptJavaScript JavaScript 语句语句 例例 010101 01 0 0 0 0 2 2 2 2 在浏览器中显示一行文字内容 在浏览器中显示一行文字内容 1 1 1 1 2 2 2 2 3 3 3 3 htmlhtmlhtml html 文档文档 4 4 4 4 5 5 5 5 body body body m 利用利用 标记中的标记中的languagelanguagelanguage language 属性直接使用属性直接使用JavaScriptJavaScriptJavaScript JavaScript 代代码码 例例 010101 01 0 0 0 0 3 3 3 3 在浏览器中显示三行文字信息 在浏览器中显示三行文字信息 程序浏览结果 程序浏览结果 6 6 6 6 7 7 7 7 1 1 1 1 2 2 2 2 3 3 3 3 htmlhtmlhtml html 文档文档 4 4 4 4 5 5 5 5 6 6 6 6 script script script language JavaScript language JavaScript language JavaScript 7 7 7 7 document write document write document write document write 加入加入InternetInternetInternet Internet 俱乐部 共同感受时代精神俱乐部 共同感受时代精神 8 8 8 8 document write document write document write document write 使用使用InternetInternetInternet Internet 搭上驶向新世纪的诺亚方舟搭上驶向新世纪的诺亚方舟 9 9 9 9 document write document write document write document write 会使用会使用InternetInternetInternet Internet 网是现代文明人的通行证网是现代文明人的通行证 101010 10 111111 11 121212 12 m 使用使用 标记中的标记中的srcsrcsrc src 属性间接引用属性间接引用JavaScriptJavaScriptJavaScript JavaScript 程序程序 例例 010101 01 0 0 0 0 4 4 4 4 在浏览器中显示三行文字信息 在浏览器中显示三行文字信息 首先 新增文件首先 新增文件link jslink jslink js link js 然后 编写然后 编写HTMLHTMLHTML HTML 文件 文件 1 1 1 1 document write document write document write document write 加入加入InternetInternetInternet Internet 俱乐部 共同感受时代精神俱乐部 共同感受时代精神 2 2 2 2 document write document write document write document write 使用使用InternetInternetInternet Internet 搭上驶向新世纪的诺亚方舟搭上驶向新世纪的诺亚方舟 3 3 3 3 document write document write document write document write 会使用会使用InternetInternetInternet Internet 网是现代文明人的通行证网是现代文明人的通行证 1 1 1 1 2 2 2 2 3 3 3 3 htmlhtmlhtml html 文档文档 4 4 4 4 5 5 5 5 6 6 6 6 script script script src link js src link js src link js 7 7 7 7 m 要运行要运行JavaScriptJavaScriptJavaScript JavaScript 脚本 脚本 在在 资源管理器资源管理器 窗口中双击网页文件窗口中双击网页文件 在在 IExplorerIExplorerIExplorer IExplorer 浏览器中打开网页文件 浏览器中打开网页文件 2 2 2 2 服务器端应用服务器端应用 1 2 3JavaScript1 2 3JavaScript1 2 3JavaScript 1 2 3JavaScript 的优点与不足的优点与不足 1 JavaScript1 JavaScript1 JavaScript 1 JavaScript 的优点的优点 简单性简单性 跨平台无关跨平台无关 安全可靠安全可靠 方便移植方便移植 浏览器对象浏览器对象 8 8 8 8 9 9 9 9 m 运行环境要求小运行环境要求小 2 JavaScript2 JavaScript2 JavaScript 2 JavaScript 的不足的不足 浏览效果不同浏览效果不同 安全性较弱安全性较弱 不能制作多用户程序不能制作多用户程序 1 3Jscript1 3Jscript1 3Jscript 1 3Jscript 简介简介 主要内容主要内容 JscriptJscriptJscript Jscript 简介简介 程序示例程序示例 1 3 1Jscript1 3 1Jscript1 3 1Jscript 1 3 1Jscript 简介简介 微软公司开发微软公司开发JavaScriptJavaScriptJavaScript JavaScript 实现版本 实现版本 JscriptJscriptJscript Jscript 自由地使用原来自由地使用原来JavaScriptJavaScriptJavaScript JavaScript 中的一切语法和语句中的一切语法和语句 结合结合IExplorerIExplorerIExplorer IExplorer 浏览器增加了许多全新的功能浏览器增加了许多全新的功能 JScriptJScriptJScript JScript 最新版本是基于最新版本是基于 ECMAScript4 0ECMAScript4 0ECMAScript4 0 ECMAScript4 0 版规范的版规范的 JScript NETJScript NETJScript NET JScript NET 1 3 21 3 21 3 2 1 3 2 程序示例程序示例 例例 010101 01 0 0 0 0 5 5 5 5 在浏览器中显示三行文字内容 在浏览器中显示三行文字内容 m 程序浏览结果 程序浏览结果 1 1 1 1 2 2 2 2 3 3 3 3 htmlhtmlhtml html 文档文档 4 4 4 4 5 5 5 5 6 6 6 6 script script script language JScript language JScript language JScript 7 7 7 7 document write document write document write document write 加入加入InternetInternetInternet Internet 俱乐部 共同感受时代精神俱乐部 共同感受时代精神 8 8 8 8 document write document write document write document write 使用使用InternetInternetInternet Internet 搭上驶向新世纪的诺亚方舟搭上驶向新世纪的诺亚方舟 9 9 9 9 101010 10 111111 11 会使用会使用InternetInternetInternet Internet 网是现代文明人的通行证网是现代文明人的通行证 121212 12 131313 13 m 1 3 31 3 31 3 3 1 3 3 在不兼容的浏览器中隐藏在不兼容的浏览器中隐藏JavaScriptJavaScriptJavaScript JavaScript 例如 例如 1 41 41 4 1 4 使用使用JavaJavaJava Java AppletAppletApplet Applet 语言编写语言编写WebWebWeb Web 程序程序 主要内容主要内容 简单的简单的JavaJavaJava Java AppletAppletApplet Applet 程序介绍程序介绍 JavaJavaJava Java AppletAppletApplet Applet 程序调试过程程序调试过程 美国美国SunSunSun Sun 公司发布的白皮书 公司发布的白皮书 JavaJavaJava Java 语言是一个简单的 面向对象的 分布式的 语言是一个简单的 面向对象的 分布式的 解释的 健壮的 安全的 独立于平台的 可移植解释的 健壮的 安全的 独立于平台的 可移植的 的 高性能的 多线程的 动态的程序设计语言 高性能的 多线程的 动态的程序设计语言 1 4 11 4 11 4 1 1 4 1 一个简单的一个简单的JavaJavaJava Java AppletAppletApplet Applet 程序程序 AppletAppletApplet Applet 又称为又称为JavaJavaJava Java 小程序小程序 它是它是JavaJavaJava Java 语言与语言与WebWebWeb Web 网页技术相结合的结果网页技术相结合的结果 AppletAppletApplet Applet 使网页能够与用户动态地进行交互使网页能够与用户动态地进行交互 1 1 1 1 m AppletAppletApplet Applet 使网页具有动画 声音 图像 视频等多媒体使网页具有动画 声音 图像 视频等多媒体 效果效果 例例 010101 01 0 0 0 0 6 6 6 6 一个简单的一个简单的JavaJavaJava Java AppletAppletApplet Applet 程序 程序 1 1 1 1 JavaJavaJava Java AppletAppletApplet Applet 程序程序 WelcomeStudyApplet java WelcomeStudyApplet java WelcomeStudyApplet java WelcomeStudyApplet java 2 2 2 2 嵌 入 嵌 入 WelcomeStudyApplet classWelcomeStudyApplet classWelcomeStudyApplet class WelcomeStudyApplet class 的的 HTMLHTMLHTML HTML 文 件文 件 AppletDemo htmAppletDemo htmAppletDemo htm AppletDemo htm 1 1 1 1 这是这是JavaJavaJava Java AppletAppletApplet Applet 程序 程序文件名为程序 程序文件名为WelcomeStudyApplet javaWelcomeStudyApplet javaWelcomeStudyApplet java WelcomeStudyApplet java 2 2 2 2 importimportimport import java awt java awt java awt java awt 3 3 3 3 importimportimport import java applet java applet java applet java applet 4 4 4 4 publicpublicpublic public classclassclass class WelcomeStudyAppletWelcomeStudyAppletWelcomeStudyApplet WelcomeStudyApplet extendsextendsextends extends AppletAppletApplet Applet 5 5 5 5 publicpublicpublic public voidvoidvoid void paint Graphicspaint Graphicspaint Graphics paint Graphics g g g g 6 6 6 6 g drawString g drawString g drawString g drawString 欢迎学习欢迎学习JavaJavaJava Java 语言程序设计语言程序设计 100 100 100 100 60 60 60 60 7 7 7 7 8 8 8 8 1 1 1 1 2 2 2 2 输出提示信息输出提示信息 3 3 3 3 WelcomeWelcomeWelcome Welcome tototo to studystudystudy study JavaJavaJava Java programmingprogrammingprogramming programming 4 4 4 4 5 5 5 5 applet applet applet width 400 width 400 width 400 m 1 4 2Java1 4 2Java1 4 2Java 1 4 2Java AppletAppletApplet Applet 程序调试过程程序调试过程 JavaJavaJava Java AppletAppletApplet Applet 程序的调试过程 程序的调试过程 编辑源程序编辑源程序 将将 JavaJavaJava Java 源程序编译成字节码程序源程序编译成字节码程序 将将 AppletAppletApplet Applet 程序嵌入到程序嵌入到HTMLHTMLHTML HTML 文件中文件中 运行运行JavaJavaJava Java AppletAppletApplet Applet 程序程序 1 1 1 1 编辑源程序 编辑源程序 打开打开 记事本记事本 输入脚本并以文件名输入脚本并以文件名WelcomeStudyApplet javaWelcomeStudyApplet javaWelcomeStudyApplet java WelcomeStudyApplet java 存盘存盘 6 6 6 6 7 7 7 7 8 8 8 8 m 注意 注意 保存文件时 要指定文件扩展名 并区分大小写字保存文件时 要指定文件扩展名 并区分大小写字母 母 2 2 2 2 将 将JavaJavaJava Java 源程序编译成字节码程序源程序编译成字节码程序 用用 javac exejavac exejavac exe javac exe 将将 WelcomeStudyApt javaWelcomeStudyApt javaWelcomeStudyApt java WelcomeStudyApt java 编 译 成 字 节 码编 译 成 字 节 码 WelcomeStudyApt classWelcomeStudyApt classWelcomeStudyApt class WelcomeStudyApt class 3 3 3 3 将 将AppletAppletApplet Applet 程序嵌入到程序嵌入到HTMLHTMLHTML HTML 文件中文件中 打开记事本 输入程序内容并以打开记事本 输入程序内容并以AppletDemo htmAppletDemo htmAppletDemo htm AppletDemo htm 存盘存盘 4 4 4 4 运行 运行JavaJavaJava Java AppletAppletApplet Applet 程序程序 m 使用使用AppletAppletApplet Applet 程序查看器 程序查看器 appletviewerappletviewerappletviewer appletviewer AppletDemo htmAppletDemo htmAppletDemo htm AppletDemo htm 在在 命令提示符命令提示符 窗口中输入命令 窗口中输入命令 appletviewerappletviewerappletviewer appletviewer AppletDemo htmAppletDemo htmAppletDemo htm AppletDemo htm 程序浏览结果 程序浏览结果 要使用要使用 IExplorerIExplorerIExplorer IExplorer 浏览器则可以打开浏览器则可以打开 HTMLHTMLHTML HTML 文件并运行 浏文件并运行 浏 览效果 览效果 m 1 51 51 5 1 5 调试调试 HTMLHTMLHTML HTML 和和 JavaScriptJavaScriptJavaScript JavaScript 脚本的工具脚本的工具 主要内容主要内容 使用纯文本编辑器使用纯文本编辑器 专业脚本编辑软件专业脚本编辑软件FrongPageFrongPageFrongPage FrongPage 专业脚本编辑软件专业脚本编辑软件MicrosoftMicrosoftMicrosoft Microsoft ScriptScriptScript Script EditorEditorEditor Editor 1 5 11 5 11 5 1 1 5 1 使用纯文本编辑器使用纯文本编辑器 使用纯文本编辑器 使用纯文本编辑器 WindowsXPWindowsXPWindowsXP WindowsXP 系统内含的记事本系统内含的记事本 J J J J 内含的文本编辑器内含的文本编辑器 UltraEditUltraEditUltraEdit UltraEdit 的具体操作过程的具体操作过程 m 1 1 1 1 选择选择 所有程序所有程序 UltraEditUltraEditUltraEdit UltraEdit UltraEditUltraEditUltraEdit UltraEdit 文本编辑器文本编辑器 打开打开 UltraEditUltraEditUltraEdit UltraEdit 编辑编辑 窗口 窗口 2 2 2 2 在图在图 1 1 1 1 121212 12 中的中的 UltraEditUltraEditUltraEdit UltraEdit 编辑编辑 窗口内部 含文件视窗口内部 含文件视 图 编辑窗口 输出窗口 模板列表四个窗格 可在图 编辑窗口 输出窗口 模板列表四个窗格 可在编编 辑窗格中输入一个辑窗格中输入一个 HTMLHTMLHTML HTML 文件并保存为文件并保存为 HTMHTMHTM HTM 类型的类型的 m 文件 这里的文件名是文件 这里的文件名是 编辑编辑01 htm01 htm01 htm 01 htm 如图 如图1 1 1 1 131313 13 所所 示 示 不同不同HTMLHTMLHTML HTML 标记中的语法成分具有不同的颜色 标记中的语法成分具有不同的颜色 蓝色表示蓝色表示HTMLHTMLHTML HTML 标记标记 红色表示红色表示HTMLHTMLHTML HTML 标记中的属性标记中的属性 黑色表示文本内容黑色表示文本内容 m 1 5 21 5 21 5 2 1 5 2 专业脚本编辑软件专业脚本编辑软件FrongPageFrongPageFrongPage FrongPage 1 FrontPage1 FrontPage1 FrontPage 1 FrontPage 200320032003 2003 概述概述 主要功能 主要功能 编辑编辑HTMLHTMLHTML HTML 代码并生成代码并生成WebWebWeb Web 页面页面 校对工具和转换器校对工具和转换器 2 FrontPage2 FrontPage2 FrontPage 2 FrontPage 编辑器的功能编辑器的功能 主要功能 主要功能 能够打开能够打开 HTMLHTMLHTML HTML 文档文件 以及保留文档文件 以及保留WebWebWeb Web 页面中页面中的的 HTMLHTMLHTML HTML 代码标记 代码标记 允许用户建立基于允许用户建立基于 WebWebWeb Web 页面的主题 模版等 页面的主题 模版等 可以在可以在 HTMLHTMLHTML HTML 的样式表中插入文本 建立多层列表的样式表中插入文本 建立多层列表 改变文字大小 改变文字颜色 设置各种应用格式改变文字大小 改变文字颜色 设置各种应用格式如如 标题文字 斜体字等 标题文字 斜体字等 插入插入 ActiveXActiveXActiveX ActiveX 控件 控件 JavaJavaJava Java AppletAppletApplet Applet JavaScriptJavaScriptJavaScript JavaScript VBScriptVBScriptVBScript VBScript 脚本 脚本 VBasicVBasicVBasic VBasic 程序等 程序等 可以插入大多数图形格式的图像文件 可以插入大多数图形格式的图像文件 3 3 3 3 启动启动 FrontPageFrontPageFrontPage FrontPage 编辑器编辑器 m 启动启动FrontPageFrontPageFrontPage FrontPage 编辑器 编辑器 指定指定HTMLHTMLHTML HTML 文件 使用文件 使用 打开打开 命令并用鼠标双击指命令并用鼠标双击指 定的定的HTMLHTMLHTML HTML 文件文件 新建新建HTMLHTMLHTML HTML 文件 选择文件 选择 文件文件 菜单中的菜单中的 新建新建 命令命令 创建一个创建一个HTMLHTMLHTML HTML 文件文件 4 4 4 4 四个操作视图四个操作视图 1 1 1 1 设计视图 设计视图 m 2 2 2 2 HTMLHTMLHTML HTML 代码编辑视图代码编辑视图 3 3 3 3 预览视图 预览视图 m 4 4 4 4 拆分视图 拆分视图 m 1 5 31 5 31 5 3 1 5 3 专业脚本编辑软件专业脚本编辑软件MicrosoftMicrosoftMicrosoft Microsoft ScriptScriptScript Script EditorEditorEditor Editor 1 Microsoft1 Microsoft1 Microsoft 1 Microsoft ScriptScriptScript Script EditorEditorEditor Editor 软件简介软件简介 MicrosoftMicrosoftMicrosoft Microsoft ScriptScriptScript Script EditorEditorEditor Editor 是是 MicrosoftMicrosoftMicrosoft Microsoft OfficeOfficeOffice Office 内置的脚本调试内置的脚本调试器器 调用调用MicrosoftMicrosoftMicrosoft Microsoft ScriptScriptScript Script EditorEditorEditor Editor 在在 WordWordWord Word 窗口中选择窗口中选择 工具工具 宏宏 MicrosoftMicrosoftMicrosoft Microsoft 脚本编辑器脚本编辑器 m 说明 说明 HTMLHTMLHTML HTML 标记用红色表示标记用红色表示 HTMLHTMLHTML HTML 属性值用蓝色表示属性值用蓝色表示 注释用绿色表示注释用绿色表示 文本用黑色表示文本用黑色表示 2 2 2 2 查看查看 JScriptJScriptJScript JScript 电子文档电子文档 m 查看查看JscriptJscriptJscript Jscript 电子文档 电子文档 选择选择 帮助帮助 MocrosoftMocrosoftMocrosoft Mocrosoft 脚本调试器帮助脚本调试器帮助 选择左窗格中的选择左窗格中的 JScriptJScriptJScript JScript 选项并展开选项并展开JscriptJscrip