搜索秦石磊jsp课件可得到整套ch02.ppt

第二章 HTML 语言和JavaScript语言,前面第一章中，我们学习了如何来配置JSP的运行环境，如果我们希望做一个比较完善的网站，我们还需要学习一些有关网页的基础知识，包括HTML语言、JavaScript语言等。下面我们来介绍这些内容。,2.1 网页的工作机制,网页的工作机制实际上并不复杂，书上给出了大家四种浏览网络地址的情况，我们这里只需明白第四种执行情况，也就是JSP网页的执行情况，而这部分前面我们已经介绍过，希望大家能掌握。,2.2 HTML语言,前面我们给大家的那个简单JSP的例子中，已经涉及到了html语言，这里我们就不在叙述。,2.2.1 HTML 注释,html 语言的注释格式如下： ,2.2.2 HTML 文本的基本结构,在HTML文档中，标签（也就是我们书中说的标记）是用来规定 Web文档的逻辑结构并控制文档的显示格式。可以使用HTML标签来 设置链接、标题、段落、列表等等。一般HTML标签格式是这样的： 相应内容 注意： (1) 标签名用尖括号括起来，不区分大小写。 (2) HTML标签一般成对出现。 (3) 某些HTML元素只有起始标签而没有相应的结束标签，例如 换行标签，由于不包括相应的内容，所以只使用BR就可以了。 下面我们就来编写一个简单的html网页，这里我们 用记事本来编 辑。大家要注意，在编完之后一定要用保存为扩展名为“html”或者 “htm”的存文本文件。 http:/localhost:8080/ch2/sample1.html 我们可以采用 IE 工具 查看原代码 来看我们编写的文件.,2.2.3 文字格式的设置,上节介绍的是一个很简单的html网页，实际上要掌握好html语言，我们必须熟悉它的其它标记的用法。这节我们来介绍如何来设置文字信息。, 设置标题,标题元素有6种，分别为h1, h2,h6，用于表示文章中的各种题目。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释： 一级标题标记 变粗变大加宽，程度与级数反比 二级标题标记 将字体变粗变大加宽 三级标题标记 将字体变粗变大加宽 四级标题标记 将字体变粗变大加宽 五级标题标记 将字体变粗变大加宽 六级标题标记 将字体变粗变大加宽 http:/localhost:8080/ch2/sample2.html, 设置字体,在HTML语言中，我们使用来设置字体，包括字体的字号、大小、颜色等。它的格式为： face 表示采用什么字体，size 表示字体大小，color 表示字体颜色 当然这些属性不需要全部设置。 hello 这个表示face 属性设置了组合字体，在选择时首选第一个，当然如果没有face 属性，表示将采用系统的默认设置。 http:/localhost:8080/ch2/sample3.html, 其它字体标记,当然有时候我们可能需要将某段文字加粗、以斜体显示或者别的特殊效果时，我们可以通过下面的文字标记。 http:/localhost:8080/ch2/sample4.html,2.2.4 文字版面标记,这里讲到的文字版面标记，主要是指设置换行、文字分段和对齐等标记。, 换行标记,在HTML语言中，换行标记为： ,值得注意的是换行标记是一个单独标记，不是成对标记。 另外对应换行标记，也有一个不换行标记： 下面我们给大家一个例子，来示范这两个标记的效果。 http:/localhost:8080/ch2/sample5.html, 段落标记,格式： 它标识一个段落，并在段前段后各添加一个空行，其中的文字不受影响。, 对齐标记,可以使用一些标记将文字按某种方式对齐，如居中对齐、居左对齐等。我们直接看例子： http:/localhost:8080/ch2/sample6.html,2.2.5 创建表格,表格是一种能够有效的描述信息的组织方式，由行、列和单元 格组成。它可以将文字和图片等按照行和列排列起来，可以很好地控制页面布局。 在浏览器中显示时，表格的整体外观是由标签的属性 决定的。 HTML中使用 标签创建表格，其基 本格式为： 表格内容 .标签用来定义表格的表头。 .标签用来定义表格的某一行。 .标签用来定义表格的单元格 ，或者叫列标记。,注意： 对于表格的Border的属性值为非负数，0表示表格边框不可见 ，但是内容可见。 ,2.2.6 设计表单,表单的制作有两个部分，首先，你必须使用标记和标记建立表单的输入界面，其次才是表单的后端处理。, 插入表单与按钮,制作表单网页的首要步骤是在html文件中使用标记插入表单，然后使用标记来插入按钮。我们首先来认识一下两个按纽，也是我们经常要用到的，“提交”（Submit)和“重新输入”(Reset)”，当我们按下“提交”按纽的时候，浏览器会将浏览者输入的数据返回服务器，当我们点取“重新输入”的时候，浏览器会清除浏览者输入的数据，使表单恢复至原始数据。, 插入单行文本框, 姓名： E-Mail： ,文本框的作用不言而喻，不过这里有几点要注意一下： 1、单行文本框的名称限英文且唯一，实际上同一个表单中的所有字段必须以英文命名，且不能重复。 2、单行文本框默认是空白，不显示数据，若要显示数据在在标记的value属性中设置(中英文均可） 3、可以利用标记的maxlength属性来设置浏览者输入的字符数, 插入单选按钮,年龄： 未满20岁 2029 3039 4049 50岁以上,“单选按纽”就像只允许单选的选择题一样，我们通常会利用这个组件列出数个选项，这里面也有几点值得大家注意： 1、同一组单选按纽的名称（name)应该相同，并且限英文同时也应该是唯一的。 2、同一组中各个单选按纽的数值(value)必须是不同的，这里面中英文均可。, 插入复选按钮,诺基亚 摩托罗拉 爱立信 三星,“复选框”就象复选的选择题一样，它允许浏览者同时选取多个选项。 这里面也要注意的是同一组复选按纽的名称（name)应该相同，并且限英文，同时也应该是唯一的。, 插入多行文本框, 你使用手机时最常碰到哪些问题？ 线路太忙 ,“多行文本框”允许浏览者输入多行的文字说明，如个人意见等信息。我们可以使用标记在表单中插入多行文本框。 它必须放在标记之间，多行文本框默认是空白不显示任何数据，如果要在多行文本框中间显示数据，可以将数据放在标记之间。 其中cols 和rows 两个属性分别设置文本框的宽度和高度,书上还给出了一个wrap属性，来设置自动换行的，这个大家了解一下就可以，一般不用设置。, 插入下拉式菜单, 中国电信 中国联通 远传 铁路网 其他 ,“下拉式”菜单允许浏览者从下拉式菜单中选择项目，我们可以利用标记搭配标记来制作下拉式菜单。而标记是用来指定下拉式菜单的选项。 值得我们注意的是标记必须结合标记来指定下拉式菜单的选项。其中可以利用size属性来设置下拉式菜单的高度，利用来设置浏览者可以在下拉式菜单中选取多个选项。 标记放在之间以指定下拉式菜单的选项,我们最后一起来看一个例子 书上给出的例子是 ,里面有些地方是有问题的。,2.2.7 其他标记, 超文本链接标记, text href 属性用来设定链接到哪个网页上去。 如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。一般常用的是“_self ”表示在原来页面上的窗口打开。而“_blank” 表示在浏览器的一个新窗口打开。 text, 图象标记,通过图象标记，可以在HTML文件中插入图象，其格式为： 这个标记一般单独出现，书上有点错误。 我们来看个例子 ch2/sample9.html ,它里面的超级链接为sample10.html 其中，图片src 地址采用相对路径，“./image/02_1.jpg” ,其中“./”表示当前目录。,2.3 JavaScript 语言,前面我们介绍了html语言，它主要用来设置一些文字格式、创建表格、和设计表单等。如果我们想利用它来检测表单中的文本输入框是否为空，此时它将显得无能为力，这时就要借助我们下面要学习的JavaScript 来设置。,2.3.1 JavaScript 简介,JavaScript 语言的前身叫做LiveScript，它是 由NetScape 公司来设计出来的。 它有很多优点 (1) 简单易学。它主要采用HTML 文本中嵌入小程序段的方式，开发过程非常简单。 (2) 响应速度快 (3) 最关键的是它是一种与平台无关的语言，只要浏览器能执行，它就可以运行，而与操作系统无关。, JavaScript 与Java 区别 很多人认为JavaScript就是基于Java 语言的编程语言，实际上它们是完全两个公司开发的产品，下面我们来看看它们之间的区别。 (1) 它们相同之处是二者都是与平台无关的语言。 (2) 两者的处理方式不同，JAVA程序必须经过编译，然后在JAVA的虚拟机上执行，而JavaScript语言则是通过浏览器边解释边执行。 (3) JAVA中如果需要个变量，在使用之前必须声明，而JavaScript语言不必事先声明就可以使用。 (4) JavaScript 是一种嵌入式语言，它通过在html文件中使用 来插入JavaScript 小程序。 而JAVA 则是在html 文件中使用 来调用java 的类文件。 (5) JavaScript 是一种脚本语言，学习起来比JAVA 容易。, 一个简单的实例,2.3.2 数据类型,在JavaScript中，常见的数据类型有四种，分别是： number (数字类型）、string(字符串类型）、object(对象类型）和boolean( 布尔类型） 在对变量的声明时，我们可以不必声明每一个变量的类型，我们可以使用var 关键字来声明一个变量。例如； var isapple=true; 值得注意得是，JavaScript 是区分大小写的，大家给变量起名字的时候这一点应该记住。 当然变量名肯定不能为我们系统的保留字，JavaScript的保留字在书上44页表2-2中已经列出。,2.3.4 常用语句,在JavaScipt 语言中，还有几种重要的语句。下面我们一起来学习一下这些语句。, 函数定义语句,我们采用如下格式来定义函数； function 函数名称 （参数） 函数内容 return 表达式 当然不是所有的函数都必须利用return 表达式。, 条件和分支语句,条件语句 if else 结构 if (条件） 语句1 else 语句2 ,(2) 分支语句 分支语句switch 是根据一个表达式取值的不同而采取不同的处理方法，其语法如下： switch (expression) case label1: 语句1； default : 语句 n+1; 如果表达式的值与任何的label都不匹配，则执行default后面的语句n+1。, 循环语句,我们这里主要说的是for 语句 和 while 语句等。,for 语句 for 语句的语法如下： for (变量初始化；条件； 更新变量） 语句 只要条件成立，就会反复执行循环体中的语句。 (2) for in 语句 它循环的一般是一个对象的所有属性或数组的元素 for (变量 in 对象或数组） 语句 ,(3) while 语句 while 语句格式如下： while (条件） 语句 如果条件成立，则一直循环，直到条件不再成立。 值得注意的是，还有两个有用的语句:break 语句和continue 语句。 break 语句是结束当前的各种循环，并跳出循环体，去执行循环的下一条语句。 而continue 语句是结束当前的循环，然后开始下一个循环。,2.3.5 对象,JavaScript 是面向对象的语言，对象由属性和方法来构成。对象的属性是指对象的特征，而对象的方法是对对象属性所进行的操作。 访问对象的属性，一般采用下面方法： 对象名称 . 属性名称 访问对象的方法的格式为； 对象名称 . 方法 在JavaScript中有许多对象，如String 、Date、Window、document、form、location等，下面我们来给大家介绍一些常用的对象。, String 对象,String 是字符串对象，它只有一个属性: length属性，但是它有很多方法。我们直接看个例子，通过这个例子来学习它的方法。 这里面substring(start ,end )表示获取自start 到end的子串 indexOf (char,start) 表示字符串从start开始查找第一次出现的char 字符，并返回其位置。 注意，大小写区分。 , Date 对象 如果想要获取时间，就必须用到Date 对象。使用Date 对象，必须首先使用关键字new 来创建，如： 变量名 =new Date ( ) Date 对象中的方法很多，我们主要看两个，一个是 getMonth( ) ,它来获取当前月份，由于它从0开始记数，所以我们实际算的时候，要+1，才能真正得到当前月份。 getTime( ) ,它是返回从1970年1月1日到现在的毫秒数。 下面我们来看个例子 , Math 对象,Math对象给我们提供了很多有用的数学计算方法。 在 调用的时候，我们直接利用Math.属性 或者 Math.方法 来用就可以了。它提供了一个很重要的属性：PI （圆周率） 下面我们直接看个例子： , Window 和 document 对象,在前面的例子中，我们频繁使用了alert（）方法，它实际上就是Window对象的方法，由于Window对象 是每个HTML网页的顶层对象，我们在调用的时候，不必显示调用Window对象。 对于Window 对象一般有以下几个有用的方法：,open ( ) 打开一个窗口，有三个参数，第一个表示打开网页的文件名，第二个表示窗口名，第三个表示所要打开窗口的大小和结构。,(2) alert ( ) 打开一个对话框，并显示信息。 (3) confirm( ) 打开一个具有“确定 ”和“取消”的对话框，并显示信息。 (4) prompt ( ) 显示一个prompt ，要求用户根据显示信息给予相应输入。 (5) close( ) 关闭当前窗口，同时系统会弹出确认对话框。 document ,