jQuery开发基础教程第1章 JavaScript基础.pptVIP

（2）在打开的页面中，页面下方有3个视图形式，分别为“普通”、“HTML”和“预览”。在“普通”视图中，可以在页面插入HTML元素，进行页面布局和设计，如图1-10所示； 图1-10 “普通”视图 在“HTML”视图中，可以编辑JavaScript程序，如图1-11所示； 图1-11 “HTML”视图 在“预览”视图中，可以运行网页内容，如图1-12所示。 图1-12 “预览”视图 Dreamweaver是当今流行的网页编辑工具之一。它采用了多种先进技术，提供了图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程变得简单化，生成的网页也极具表现力。 Dreamweaver的下载地址为/downloads/ 【例1-3】下面介绍应用Dreamweaver编程JavaScript脚本的步骤。 （1）安装Dreamweaver后，首次运行Dreamweaver时，展现给用户的是一个“工作区设置”的对话框，在此对话框中，用户可以选择自己喜欢的工作区布局，如“设计者”或“代码编写者”，如图1-13所示。这两者的区别是在Dreamweaver的右边或是左边显示窗口面板区。 1.2.3 使用Dreamweaver 图1-13 “工作区设置”对话框 （2）选择工作区布局，并单击“确定”按钮后。选择“文件”/“新建”命令，将打开“新建文档”对话框。在该对话框中的“类别”列表区选择“基本页”，再根据实际情况来选择所应用的脚本语言，这里选择的是“HTML”，然后单击“创建”按钮，创建以JavaScript为主脚本语言的文件，如图1-14所示。 图1-14 “新建文档”对话框 说明:如果用户选择了“JavaScript”选项，则创建一个JavaScript文档。在创建JavaScript脚本的外部文件时不需要使用script标记，但是文件的扩展名必须使用.js类型。调用外部文件可以使用script标记的src属性。如果JavaScript脚本外部文件保存在本机中，src属性可以是全部路径或是部分路径。如果JavaScript脚本外部文件保存在其他服务器中，src属性需要指定完全的路径 （3）在打开的页面中，有3种视图形式，分别为代码、拆分和设计。在代码视图中，可以编辑程序代码，如图1-15所示； 图1-15 代码视图 在拆分视图中，可以同时编辑代码视图和设计视图中的内容，如图1-16所示； 图1-16 拆分视图 在设计视图中，可以在页面中插入HTML元素，进行页面布局和设计，如图1-17所示。 图1-17 设计视图 注意：在代码模式中编写的JavaScript脚本，在设计模式中不会输出显示，也没有任何标记 在Dreamweaver中插入HTML元素后，通过“属性”面板可以方便地定义元素的属性，使其满足页面布局的要求。在页面中，允许多个表格的嵌套；可以插入图像、flash等；可以插入表单元素，例如：文本框、列表/菜单、复选框、按钮等。 （4）设计页面及编写代码完成后，保存该文件到指定目录下，文件的扩展名为“.html”或“.htm”。 1.3 编写第一个JavaScript程序 1.3.1 编写JavaScript 1.3.2 运行JavaScript程序 1.3.3 调试JavaScript程序 【例1-4】下面应用Dreamweaver编辑器编写第一个JavaScript程序。 （1）启动Dreamweaver编辑器，单击“文件”/“新建”命令，打开“新建文档”对话框，选择“常规”选项卡中的“基本页”/“JavaScript”选项，然后，单击“创建”按钮，即可成功创建一个JavaScript文件。 （2）JavaScript的程序代码必须置身于script language=javascript/script之间。在body标记中输入如下代码： script language=javascript alert(我要学JavaScript！); /script 1.3.1 编写JavaScript 在Dreamweaver中输入JavaScript脚本程序的运行结果如图1-18所示。 图1-18 在Dreamweaver中输入JavaScript脚本程序 Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo * 本章要求： 第1章 JavaScript基础 了解什么是JavaScript 了解什么JavaScript库以 了解如何编写JavaScript的程序 掌握Jav