《第2章-HTML语言和JavaScript语言.ppt》由会员分享，可在线阅读，更多相关《第2章-HTML语言和JavaScript语言.ppt（60页珍藏版）》请在三一文库上搜索。
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例子如： http:/127.0.0.1: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,HTML (HyperText Markup Language，超文本标记语言)不是程序设计语言，而是一组标记，便于网页设计人员把文本、图像、动画等制作成有一定效果的网页，资源间通过超链接联结成为一个
4、有机的整体。 HTML文件的基本结构包括文件头（Head）和文件体（Body）两大部分，头部为浏览器提供所需的描述信息，主体则包含待显示的内容。 HTML文本由浏览器解释并还原出页面效果,2. HTML语言,HTML标记是用尖括号标识的字符串，尖括号中的英文名叫标记名(如)，标记名与左边的“标记可定义字体、字号和字的颜色等。,7,1、HTML文本的基本结构 ,大部分HTML标记是成对出现，不带“/”的叫起始标记，带有“/”的叫结束标记。标记的属性参数一般写在起始标记内。起始标记和结束标记间的对象称为标记体，标记的效果作用在标记体上，例如： JSP程序设计 当一个标记对没有标记体时，称之为空标记
5、，此时可用简写式来表示，即：在起始标记的“”字符前加上“/”，并把结束标记省略不写。如： ,8,9,标记表示HTML文件从此处开始，到标记结束，这对标记处在最外层，网页的内容写在此标记内。每个HTML文件是以标记开头，而以标记结束。如下实例：,Html脚本,演示效果, 标记表示此处是HTML文档的文件头。文件头内部的信息一般不会在浏览器的正文区显示。此标记对内可以插入其它标记，如网页标题标记。 标记表示此处是网页的主体，一般不能省略，标记体的内容在浏览器正文区中显示，例如文字、图片和超链接等。,10,11,2、排版标记 注释 HTML注释的格式如下：,注释在HTML文件中的作用是对网页中的代码
6、作说明，可以放在网页中的任何位置。注释内容会返回到客户端浏览器上，但不显示。在IE浏览器中，通过菜单【查看】【查看源文件】,可以看到注释。,标记 标记对用于标识一个段落，两个相邻的段落间有一空行的间隔。在DreamWeaver8的设计视图模式中，输入文字后按键，会自动产生标记。 标记 这个标记没有结束标记，表示换行。在DreamWeaver8的设计视图中，输入文字后按+组合键，会自动产生标记。标记和都能换行，但换行后，上下两行的间距比较小，标记换行后，上下两行有一空行的间距。,12,13,对齐标记： 居中对齐 居左对齐 居右对齐,换行标记例子,对齐标记例子,14,3、文字格式标记 设置标题：一
7、共有6种格式的标题，它们显示的是不同大小的标题文字。实例“sample2.html”的脚本如下： 标题标记 标题1 标题2 标题3 标题4 标题5 标题6 ,演示效果,15,设置字体： 其他字体标记： 加粗 斜体 下划线 删除线 倾斜 加强显示 放大显示 缩小显示,size属性用于设置字号，HTML中定义了7种字号，1号最小，7号最大，如：。字号也可以用“磅”(px)表示。 color属性用于设置文本的颜色，color有三种方法来设定颜色，第一种方法是用颜色名称，第二种方法用红、绿和蓝色百分比的RGB值来设定，第三种方法是用十六进制的颜色代号来设定颜色。 如： 颜色设定 颜色设定 颜色设定,1
8、6,4、创建表格,在网页中，表格主要分成排版表格和数据表格两种。 排版表格在浏览器中不显示边线，仅供排版、布局用。 数据表格在浏览器中显示边线或背景色，用于列表显示数据。,18,表格是由行和列组成，用来显示多条数据，它包括标题、表头、行、单元格等部分。 ：表格标记 表示整个表格。width=“75%“表示表格占整个页面宽度的75%。border=“1“表示表格的边框为1像素。align=“center“表示表格居中对齐。cellpadding=“2“表示单元格的大小。cellspacing=“0“表示单元格之间没有间隙。bgcolor=“#CCCCCC“属性指定表格的背景颜色。 标记:标题标记
9、 用来设置表格的标题，它可以使用align、valign等属性。,19,标记:表头标记 它有align、background、colspan、rowspan、valign等属性。 标记:行标记 它表示表格的一行，具有align、background、colspan、rowspan、valign等属性。 标记:单元格标记，或者列标记 每一行中有若干个单元格。它具有align、background、colspan、rowspan、valign等属性。,20,、间的嵌套关系为：, . . . ,间如果有n对标记，表示此表格有n行。 表示一行中的一列，一般写在内。,21,在实际的网页制作中，常常使用表
10、格来格式化页面，在页面中创建一个表格，设定无边框等属性，使用户表面上看起来好像没有表格，我们用该表格将页面划分为几个区域，并设置每个区域的大小，然后分别设计每个区域,表格例子,上机1：用DW8制作一个4行4列的细线数据表格，表格宽400像素，边线粗细为1个像素，边线颜色为红色，并把下列数据填充上去。,表单是系统和用户交互的手段之一。用户在表单中填写数据，提交后，表单中的数据传递给后台程序处理，实现了客户端和服务器的交互。 标记表示表单的开始和结束。在表单标记中可以存放各种表单元素，如文本域、按钮等。一个表单元素相当于一个变量，它的取值相当于变量的取值。 标记中的id为表单的ID名，用于在当前网
11、页中标识表单，在当前网页中此ID名应该唯一。,23,5、设计表单,24, ,25,action: 用于设定处理表单数据程序URL的地址。 method：指定数据传送到服务器的方式。一共有两种方式：get和post。当method为get方式时，将输入的数据追加在action指定的地址后面，并传送到服务器。当method为post方式时，则将输入的数据按照HTTP协议中post传输方式传送到服务器。 用GET方式提交表单数据的优点是速度快，缺点是变量值会在浏览器的地址栏中显示，并且URL的长度有限制，一次所能提交的数据量有限。 如果用POST方式提交表单数据，表单数据按“变量名=变量值”的形式存
12、放在HTTP请求报头尾部的数据体中，表单数据不会显示在URL中。,name：用于指定表单的名称。 onReset和onSubmit：主要针对Reset按钮和Submit按钮，分别设置在按下这两个按钮之后所要执行的程序。 target：指定输入数据结果显示在哪个窗口。,在表单中有： 表单输入标记、下拉菜单标记、多行文本输入标记等。,27,文本域标记 文本域表单的常见用法如： 标记表示此标记是写入标记，存储用户写入的信息。标记中的id和name属性为文本域的ID名，type属性表示此写入标记的类型，value属性存储文本域的值。,28,多行文本框用文本区域表单元素实现，它的HTML标记使用格式如下
13、： 内容 name属性是文本区域的名字。由于多行文本框可以输入较多的内容，所以把写入的内容存储在标记体中。,单选按钮 在实际应用中的“性别”信息一般通过单选按钮采集，用户在给定的“男”和“女”两个选项中选择其中一个，相应的HTML代码如：,复选按钮 在实际应用的“爱好”信息一般通过复选按钮采集，用户在列出的多个爱好中作出选择，可以选零个，也可以全选，相应的HTML代码如：,隐藏表单域 隐藏表单域是不可视的表单元素，用于存储隐含信息，例如将用户的登录信息存储在隐藏表单域中，用户提交表单后，隐藏表单域中的信息也会被提交给服务器。它的HTML标记类似于：,32,列表表单元素 列表表单元素预先把一组可
14、供选择的数据存储在列表中，以下拉菜单或列表的形式供用户在其中选择，其中name是选项的提示文字，value才是选项的值。它的HTML标记形如：, 公司员工 在校学生 公务员 ,33,文件域表单元素 文件域表单由一个文本域和一个按钮组成，单击按钮后会激活一个文件选择对话框，从本地磁盘中选择一个文件，被选中文件的路径及文件名自动填写在文本域中。上传文件时，需要用到文件域。文件域的HTML标记形如：,34,上机2：用DW8设计一个会员注册的页面，如图,表单例子,35,7、其他标记 超文本链接标记： href属性值为目标资源的URL，如果是空链接，则URL写为“#”。 图像标记： src和dynsrc
15、:分别表示图像文件和视频文件的地址（URL）。 height、width:分别表示插入的图像的高度和宽度。 vspace、hspace:分别表示插入的图像上下、左右空白区域的大小。 align:表示插入的图像与周围文字的对齐。 border:指定插入的图像的边框宽度。,36,3. JavaScript语言,1、简介 JavaScript是一种解释性的脚本语言，采用在HTML文本中嵌入小程序段的方式，开发过程非常简单。 JavaScript可以直接对用户或者客户的输入做出响应，而不需要经过Web服务器程序，这减少了客户浏览器与服务器之间的通信量，提高了速度。 JavaScript是一种与平台无关
16、的解释性脚本语言，依赖于浏览器，而与操作系统无关，只要计算机能运行浏览器，而且该浏览器支持JavaScript，就可以执行JavaScript脚本。,37,JavaScript与Java的区别： JavaScript与Java都是与平台无关的语言，它们都具有很强的实用性。 两者处理方式不同。Java程序必须经过编译，形成独立的字节码，然后在相应的Java虚拟机上执行，正由于Java虚拟机的存在，才使Java能够实现跨平台。JavaScript脚本是嵌入在HTML文本中，不需要编译，通过浏览器逐行解释执行。,38,在Java程序中，如果需要某个变量，在使用之前必须进行声明，而JavaScript
17、不必事先声明就可以使用变量。 JavaScript是一种嵌入语言，它通过在HTML文本中使用标记：来插入JavaScript小程序。而在HTML文本中使用标记：来调用Java的类（class）文件。 JavaScript是一种脚本语言，学习起来比Java简单得多,39,2、数据类型 常见的数据类型一共有4种： number:数字类型，包括整数和浮点数。整数可以为正整数、0或者负整数，浮点数可以包括小数点，如8.33，或者“E”（也可为“e”，科学计数法中表示10的幂），如7E-2等。 string:字符串类型，字符串数据应加上单引号或者双引号，例如“hello”。 object:对象类型，这是
18、JavaScript的重要组成部分，将在后面的小节中介绍。 boolean:布尔类型，可以为true和false两个值。,40,JavaScript中的数据也分为常量和变量。对变量的数据类型要求不太严格，可以不必声明每一个变量的类型。使用var关键字来声明一个变量。 JavaScript区分大小写，即变量Orange与orange不一样。变量名称的长度不受限制，但是要遵循以下规则: 第一个字符必须为字母、下划线（_），或者美元符号（$）。 紧接着的字符可以是字母、数字、下划线（_），或者美元符号（$）。 变量名不能为保留字。,41,3、保留字 与其他编程语言一样，JavaScript也有一些保
19、留字，这些保留字不可以用作变量、函数名、对象名等,如abstract、boolean、break、int 等。 4、常用语句 函数定义语句 function 函数名称 (参数) 函数执行部分 return 表达式 ,例子1： 一个简单的函数例子 function example() alert(“这是一个javascript例子“); ,42,43,条件语句 if (条件) 语句1 else 语句2 如果条件成立，则执行语句1，否则执行语句2。, function example() var a=10,b=20; if(ab) alert(“a大于b“); else alert(“a小于等于b
20、“); ,44,45,分支语句 switch (expression) case label1: 语句1; case label2: 语句2; case label3: 语句3; default : 语句n; 如果表达式expression的值与任何一个label都不匹配，将执行default后面的语句n。, function example() today=new Date(); switch(today.getDay() case 0:document.write(“星期日“);break; case 1:document.write(“星期一“);break; case 5:docume
21、nt.write(“星期五“);break; default:document.write(“星期六“);break; ,46,47,循环语句 for语句： for (变量初始化; 条件; 更新变量) 语句 forin语句： for (变量 in 对象或数组) 语句 while语句： while (条件) 语句 ,48,5、对象 JavaScript是基于对象的语言,常见对象： String对象:字符串对象,只有一个属性：length属性，表示字符串中包含的字符数目。但String对象具有多种方法，如big()、fontColor()等。例子 Date对象:如果要在JavaScript程序中获
22、取当前时间，就要用到Date对象。使用Date对象，必须首先使用关键字new来创建。例子 Math对象：数学对象，有一个很重要的属性：PI（圆周率）。除此之外，它还有许多有用的数学计算方法。 例子,49,Window对象:Window对象是每个HTML网页的顶层对象，在调用Window对象的方法时，不必显式调用Window对象。几个重要方法：open()、alert()、confirm()、prompt()、close()等。 Confirm例子 open、close例子 prompt例子 6、事件 鼠标事件：onMouseDown、onMouseUp、onMouseOut、OnClick、o
23、nMouseOver、onMouseMove。 键盘事件：onKeydown、onKeyup、onKeypress。 焦点事件：onFocus、onBlur。 调整窗口尺寸事件：onresize。 加载和卸载窗口事件：onLoad、unLoad。,50,如果要开发的网页非常复杂，如网站的主页等，那么它的HTML脚本就会非常庞杂。如果脚本都由人来一行一行的编写，很容易出错，开发工作量也很巨大。为此，一些公司推出了网页编辑器，利用可视化的界面来编写HTML网页。 目前，常见的网页编辑器主要有两种：Frontpage和Dreamweaver。后者是针对专业网页设计师特别设计的视觉化网页开发工具，利用
24、它可以很容易制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,4.利用网页编辑器制作网页,51,Dreamweaver MX的主界面如下所示：,52,习题,一、填空题 在HTML语言中，换行标记为_，不换行标记为_。 在HTML语言中，段落标记为_。 在HTML语言中，表单标记为_，表单输入标记为_，多行文本输入标记为_。 在JavaScript中，常见的数据类型一共有4种：_、_、_和_。 在JavaScript中，有许多对象供我们使用，如_、_、_、_、_等。 JavaScript是事件驱动的语言，在JavaScript中，鼠标事件一共有6个：_、_、_、_、_、_，键盘事件主要有3个
25、：_、 _、_。,53,二、问答题 JavaScript与Java有什么区别？ 三、编程题 编写一个网上购物系统的用户注册页面，该注册页面中需要包含待用户设置的用户名、密码、真实姓名、性别、年龄等项目，并使用JavaScript编写函数，当用户单击【提交】按钮时，会检测用户名、密码、真实姓名项是否为空。,54,谢谢！,结束, function strexample() var str=“String example“; document.write(str.length+); document.write(str.big() +); document.write(str.small() +);
26、 document.write(str.fontsize(3) +); document.write(str.fontcolor(00ff00) +); document.write(str.italics() +); document.write(str.bold()+); document.write(str.toUpperCase()+); document.write(str.toLowerCase()+); document.write(str.substring(4,10) +); document.write(str.indexOf(x,0) +); ,55,返回, functi
27、on dateexample() today=new Date(); document.write(“今天是：“); document.write(today.getYear(); document.write(“年“); document.write(today.getMonth()+1); document.write(“月“); document.write(today.getDate(); document.write(“日“); document.write(“现在时间：“); document.write(today.getHours()+“:“); document.write(
28、today.getMinutes()+“:“); document.write(today.getSeconds(); document.write(“自1970-1-1以来的毫秒数：“); document.write(today.getTime(); ,56,返回,57, math对象 function mathexample() document.write(Math.PI+“); document.write(Math.sin(Math.PI)+“); document.write(Math.exp(2)+“); document.write(Math.max(2,3)+“); doc
29、ument.write(Math.min(2,3)+“); document.write(Math.pow(2,3)+“); document.write(Math.sqrt(9)+“); ,返回,58,返回, function dConfirm() var sel = confirm(“请选择确定或者取消！“) if (sel = true) document.write(“你选择了确定！“) else document.write(“你选择了取消！“) ,59,返回, prompt例子 function windowexample() var str=prompt(“请输入数据：“); document.write(“你输入的文字是：“+str); ,60,返回,