第2章HTML语言和JavaScript语言

1、1,第2章 HTML语言和JavaScript语言,2,主要内容,1.网页的工作机制 2.HTML语言 3.JavaScript语言 4.利用网页编辑器制作网页 源码网：,3,1.网页的工作机制,上网时，在地址栏中输入的网站的地址，称之为URL（Uniform Resource Locator，统一资源定位符）。就像每家每户都有一个门牌号一样，每个网页都有一个Internet地址。 当在浏览器的地址栏中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议（HTTP，Hypertext Transfer Protocol），将Web服务器上站点的网页代码提取

2、出来，并翻译成漂亮的网页。,4,一个URL例子如： :8080/ch1/SimpleJSP.jsp 一般由三部分组成: 使用的协议，在Web网页中，使用HTTP协议。 存放该资源的主机IP地址或者域名（有时也包括端口号，如8080） 。 主机资源的具体地址（如目录和文件名）。 第一部分与第二部分之间用“:/”隔开，第二部分与第三部分之间用“/”隔开，第二部分和第三部分有时可以省略。,5,对于JSP网页，JSP文件在Tomcat服务器中编译时，服务器内部究竟做了些什么呢？或者说JSP网页的执行过程是怎样的？ 当客户端向服务器发出请求时，JSP服务器（如Tomcat）

3、就会将响应的JSP文件转换成一个Servlet，服务器在转换时，如果发现jsp文件有错误，这种转换过程就会停止，并向浏览器发出错误信息。如果没有错误，则编译转换得到Servlet代码，并加载到内存中，最后将结果返回到客户端（浏览器）。由于JSP程序在第一次执行后，会被编译成Servlet的类文件，之后这个Servlet会常驻于内存，所以第一次执行jsp文件时速度相对较慢，而以后的响应速度都是比较快的。,6,2. HTML语言,1、注释 HTML注释的格式如下： 2、HTML文本的基本结构 ,7,其中，、都是标记，标记由一对尖括号及其标记符组成，没有反斜杠“/”的是开始标记，有反斜杠的是结束标记

4、。每个HTML文件是以标记开头，而以标记结束。书上有一个实例：,Html脚本,演示效果,8,3、文字格式标记 设置标题：一共有6种格式的标题，它们显示的是不同大小的标题文字。实例“sample2.html”的脚本如下： 标题标记 标题1 标题2 标题3 标题4 标题5 标题6 ,演示效果,9,设置字体： 其他字体标记： 加粗 斜体 下划线 删除线 倾斜 加强显示 放大显示 缩小显示,10,4、文字版面标记 换行标记： 段落标记： 对齐标记： 居中对齐 居左对齐 居右对齐,换行标记例子,对齐标记例子,11,5、创建表格 表格是由行和列组成，用来显示多条数据，它包括标题、表头、行、单元格等部分。

5、：表格标记 表示整个表格。width=75%表示表格占整个页面宽度的75%。border=1表示表格的边框为1像素。align=center表示表格居中对齐。cellpadding=2表示单元格的大小。cellspacing=0表示单元格之间没有间隙。bgcolor=#CCCCCC属性指定表格的背景颜色。 标记:标题标记 用来设置表格的标题，它可以使用align、valign等属性。,12,标记:表头标记 它有align、background、colspan、rowspan、valign等属性。 标记:行标记 它表示表格的一行，具有align、background、colspan、rowspa

6、n、valign等属性。 标记:单元格标记，或者列标记 每一行中有若干个单元格。它具有align、background、colspan、rowspan、valign等属性。,13,表格的作用并不限于显示多行数据，在实际的网页制作中，常常使用表格来格式化页面，在页面中创建一个表格，设定无边框等属性，使用户表面上看起来好像没有表格，我们用该表格将页面划分为几个区域，并设置每个区域的大小，然后分别设计每个区域,表格例子,14,6、设计表单 表单标记： ,15,action: 用于设定处理表单数据程序URL的地址。 method：指定数据传送到服务器的方式。一共有两种方式：get和post。当meth

7、od为get方式时，将输入的数据追加在action指定的地址后面，并传送到服务器。当method为post方式时，则将输入的数据按照HTTP协议中post传输方式传送到服务器。 name：用于指定表单的名称。 onReset和onSubmit：主要针对Reset按钮和Submit按钮，分别设置在按下这两个按钮之后所要执行的程序。 target：指定输入数据结果显示在哪个窗口。,16,在表单中有： 表单输入标记、下拉菜单标记、多行文本输入标记等。,表单例子,17,7、其他标记 超文本链接标记： 图像标记： src和dynsrc:分别表示图像文件和视频文件的地址（URL）。 height、widt

8、h:分别表示插入的图像的高度和宽度。 vspace、hspace:分别表示插入的图像上下、左右空白区域的大小。 align:表示插入的图像与周围文字的对齐。 border:指定插入的图像的边框宽度。,18,3. JavaScript语言,1、简介 JavaScript是一种解释性的脚本语言，采用在HTML文本中嵌入小程序段的方式，开发过程非常简单。 JavaScript可以直接对用户或者客户的输入做出响应，而不需要经过Web服务器程序，这减少了客户浏览器与服务器之间的通信量，提高了速度。 JavaScript是一种与平台无关的解释性脚本语言，依赖于浏览器，而与操作系统无关，只要计算机能运行浏览

9、器，而且该浏览器支持JavaScript，就可以执行JavaScript脚本。,19,JavaScript与Java的区别： JavaScript与Java都是与平台无关的语言，它们都具有很强的实用性。 两者处理方式不同。Java程序必须经过编译，形成独立的字节码，然后在相应的Java虚拟机上执行，正由于Java虚拟机的存在，才使Java能够实现跨平台。JavaScript脚本是嵌入在HTML文本中，不需要编译，通过浏览器逐行解释执行。 在Java程序中，如果需要某个变量，在使用之前必须进行声明，而JavaScript不必事先声明就可以使用变量。,20,在Java程序中，如果需要某个变量，在使

10、用之前必须进行声明，而JavaScript不必事先声明就可以使用变量。 JavaScript是一种嵌入语言，它通过在HTML文本中使用标记：来插入JavaScript小程序。而在HTML文本中使用标记：来调用Java的类（class）文件。 JavaScript是一种脚本语言，学习起来比Java简单得多,21,2、数据类型 常见的数据类型一共有4种： number:数字类型，包括整数和浮点数。整数可以为正整数、0或者负整数，浮点数可以包括小数点，如8.33，或者“E”（也可为“e”，科学计数法中表示10的幂），如7E-2等。 string:字符串类型，字符串数据应加上单引号或者双引号，例如“h

11、ello”。 object:对象类型，这是JavaScript的重要组成部分，将在后面的小节中介绍。 boolean:布尔类型，可以为true和false两个值。,22,JavaScript中的数据也分为常量和变量。对变量的数据类型要求不太严格，可以不必声明每一个变量的类型。使用var关键字来声明一个变量。 JavaScript区分大小写，即变量Orange与orange不一样。变量名称的长度不受限制，但是要遵循以下规则: 第一个字符必须为字母、下划线（_），或者美元符号（$）。 紧接着的字符可以是字母、数字、下划线（_），或者美元符号（$）。 变量名不能为保留字。,23,3、保留字 与其他编

12、程语言一样，JavaScript也有一些保留字，这些保留字不可以用作变量、函数名、对象名等,如abstract、boolean、break、int 等。 4、常用语句 函数定义语句 function 函数名称 (参数) 函数执行部分 return 表达式 ,24,条件语句 if (条件) 语句1 else 语句2 如果条件成立，则执行语句1，否则执行语句2。,25,分支语句 switch (expression) case label1: 语句1; case label2: 语句2; case label3: 语句3; default : 语句n; 如果表达式expression的值与任何一个

13、label都不匹配，将执行default后面的语句n。,26,循环语句 for语句： for (变量初始化; 条件; 更新变量) 语句 forin语句： for (变量 in 对象或数组) 语句 while语句： while (条件) 语句 ,27,5、对象 JavaScript是基于对象的语言,常见对象： String对象:字符串对象,只有一个属性：length属性，表示字符串中包含的字符数目。但String对象具有多种方法，如big()、fontColor()等。 Date对象:如果要在JavaScript程序中获取当前时间，就要用到Date对象。使用Date对象，必须首先使用关键字new

14、来创建。 Math对象：数学对象，有一个很重要的属性：PI（圆周率）。除此之外，它还有许多有用的数学计算方法。,28,Window对象:Window对象是每个HTML网页的顶层对象，在调用Window对象的方法时，不必显式调用Window对象。几个重要方法：open()、alert()、confirm()、prompt()、close()等。 6、事件 鼠标事件：onMouseDown、onMouseUp、onMouseOut、OnClick、onMouseOver、onMouseMove。 键盘事件：onKeydown、onKeyup、onKeypress。 焦点事件：onFocus、onB

15、lur。 调整窗口尺寸事件：onresize。 加载和卸载窗口事件：onLoad、unLoad。,29,如果要开发的网页非常复杂，如网站的主页等，那么它的HTML脚本就会非常庞杂。如果脚本都由人来一行一行的编写，很容易出错，开发工作量也很巨大。为此，一些公司推出了网页编辑器，利用可视化的界面来编写HTML网页。 目前，常见的网页编辑器主要有两种：Frontpage和Dreamweaver。后者是针对专业网页设计师特别设计的视觉化网页开发工具，利用它可以很容易制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,4.利用网页编辑器制作网页,30,Dreamweaver MX的主界面如下所示：,31,习题,一、填空题 （1）JSP的全称是_，中文含义是_。 （2）JSP是以_语言为基础的。 （3）常用的JSP服务器有_、_、_等。 填空题 在HTML语言中，换行标记为_，不换行标记为_。 在HTML语言中，段落标记为_。 在HTML语言中，表单标记为_，表单输入标记为_，多行文本输入标记为_。 在JavaScript中，常见的数据类型一共有4种：_、_、_和_。 在JavaScript中，有许多