01_JavaWeb编程基础

来源：互联网发布：我的世界自瞄辅助js 编辑：程序博客网时间：2024/06/01 17:45

1.1 HTML基础

HTML：超文本标记语言(HyperText Markup Language)

示例1-1：第一个HTML文件

源文件：HelloWorld.htm

<html><head><title>First HTML Doc</title></head><body>Hello World</body></html>

1.2 <HEAD>中常用的标记

1.3 <BODY>中常用的标记

1.3.1 <BODY>标记

bgcolor：背景色

background：背景图片

text：文字颜色

示例1-2：在<BODY>标记中设置文字颜色和背景色

源文件：body.htm

<html><head><title>Second HTML Doc</title></head><body bgcolor="red" background="bg.gif" text="#00ff00"><h1>body中的文字，</h1>将会显示成绿色</body></html>

1.3.2 <FONT>标记

1.3.3 标题字体

1.3.4 <IMG>标记

1.3.5 <A>标记

1.3.6 列表标记

1.3.7 表格定义标记

示例1-3：使用表格

源文件：table.htm

<html><body><table width="300" border="1" bgcolor="#A1A1A1"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>23</td><td>男</td></tr><tr><td>玛丽</td><td>20</td><td>女</td></tr></table></body></html>

示例1-4：不规则的表格

源文件：table1.htm

<html><body><table width="300" border="1"><tr><td colspan="3" align="center">学生登记表</td></tr><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>23</td><td>男</td></tr><tr><td>玛丽</td><td>20</td><td>女</td></tr></table></body></html>

1.3.8 表单定义

1.3.9 文本组件

示例1-5：文本组件

源文件：textele.htm

<html><body><form action="/reg/register.jsp" method="post" name="userinfo"><input type="text" name="UserName" size="15" maxlength="30" value="默认值"/><br /><input type="password" name="UserPwd" size="15" maxlength="30"/><br /><textarea name="DES" rows="5" cols="20">默认的值放在这里</textarea></form></body></html>

1.3.10 下拉列表

示例1-6：单选列表和多选列表

源文件：textele.htm

<html><body><form action="" method="post" name="fn"><select name="Favorite" size="4" multiple><option value="Basketball">篮球</option><option value="Volleyball">排球</option><option value="TableTennis">乒乓球</option><option value="Tennis">网球</option></select><br /><br /><select name="Gender"><option value="Man" selected>男</option><option value="Woman">女</option></select></form></body></html>

1.3.11 单选框

1.3.12 多选框

示例1-7：单选框和多选框

源文件：check.htm

<html><body><form name="fn" action="">选择性别：<input type="radio" name="性别" value="男" />男<input type="radio" name="性别" value="女" checked />女<br /><br /><input type="checkbox" name="兴趣" value="上网" checked />上网<input type="checkbox" name="兴趣" value="踢球" />踢球<input type="checkbox" name="兴趣" value="篮球" />篮球<input type="checkbox" name="兴趣" value="健身" />健身</form></body></html>

1.3.13 按钮

1.3.14 隐藏域

1.3.15 文件上载组件

需要将form的enctype属性设置为"multipart/form-data"，并将method的属性设置为post。

1.4 JavaScript编程入门

1.4.1 JavaScript基础知识

示例1-8：第一个JavaScript程序

源文件： FirstJS.htm

<html><head><title>第一个JavaScript</title></head><body>第一个JavaScript演示<br /><script language="javascript">document.write("这行文字是JavaScript执行后打印出来的！");</script></body></html>

1.4.2 JavaScript常用内置对象

示例1-9：用window.open()新打开一个窗口

源文件： WindowOpen.htm

<html><head><title>父窗口</title></head><body><script language="javascript">window.open("FirstJS.htm","","width=390,height=5,toolbar=no,resizable=no,top=200,left=200");</script></body></html>

1.4.3 JavaScript中的方法

示例1-10：警告框

源文件： Alert.htm

<html><head><title>警告框例子</title><script language="javascript">alert("此处信息会在警告框上出现！");</script></head><body><br />警告框打开的时候，无法对浏览器进行操作。</body></html>

示例1-11：确定对话框

源文件： Confirm.htm

<html><head><title>确认框例子</title><script language="javascript">if(confirm("你确认删除词条信息么？")){document.write("删除了信息！");}else{document.write("没有删除信息！");}</script></head><body></body></html>

示例1-12： prompt对话框

源文件： Prompt.htm

<html><head><title>询问框例子</title><script language="javascript">var user = prompt("输入你的姓名：","");document.write("你好，" + user);</script></head><body></body></html>

1.4.4 JavaScript中的事件处理

示例1-13： onload事件处理

源文件： Load&Unload.htm

<html><head><title>load/unload</title><script language="javascript">function mytest(){alert("即将退出文档！");}</script></head><body onload="javascript: alert('即将装载文档。');" onunload="javascript: mytest();"></body></html>

示例1-14：聚焦事件处理

源文件： Focus.htm

<html><head><title>focus</title><script language="javascript">function focusHandle(){alert("光标聚焦到文本框！");}</script></head><body><form name="test"><input type="text" name="UserName" onfocus="javascript: focusHandle();" /></form></body></html>

示例1-15：失去焦点事件处理

源文件： Blur.htm

<html><head><title>blur</title><script language="javascript">function blurHandle(){alert(document.test.UserName.value);}</script></head><body><form name="test"><input type="text" name="UserName" onblur="javascript: blurHandle();" /></form></body></html>

示例1-16：点击事件处理

源文件： Click.htm

<html><head><title>click</title><script language="javascript">function validateForm(){if(confirm("你确认提交这个表单么？")){document.test.submit();}}</script></head><body><form name="test"><input type="text" name="UserName" /><br /><input type="button" name="sub" value="提交" onclick="javascript: validateForm();" /></form></body></html>

示例1-17：内容改变处理

源文件： Change.htm

<html><head><title>change</title></head><body><form name="test"><input type="text" name="UserName" onchange="javascript: alert('文本框内容已经改变！');" /><br /><select name="year" onchange="javascript: alert(this[this.selectedIndex].value);"><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option></select></form></body></html>

示例1-18：选择事件处理

源文件：Select.htm

<html><head><title>select</title></head><body><form name="test"><input type="text" name="UserName" value="JS编程基础" onselect="javascript: alert(this.value);" /><br /></form></body></html>

示例1-19：提交事件处理

源文件： Submit.htm

<html><head><title>submit</title><script language="javascript">function checkForm(){return (confirm("你确认提交表单吗？"));}</script></head><body><form name="test" onsubmit="javascript: return checkForm();"><input type="text" name="UserName" value="" /><br /><input type="submit" name="sub" value="提交表单" /></form></body></html>

1.4.5 使用JavaScript进行表单验证

示例1-20：验证表单

源文件： CheckForm.htm

<html><head><title>CheckForm</title><script language="javascript">function checkForm(){var theForm = document.test;if(theForm.UserName.value == ""){alert("请输入用户名！");theForm.UserName.focus();}else if(theForm.pwd.value == ""){alert("请输入密码！");theForm.pwd.focus();}else{theForm.submit();}}</script></head><body><form name="test" method="post" action="Login.jsp">用户名：<input type="text" name="UserName" /><br />密码：<input type="password" name="pwd" /><br /><input type="button" value="提交" onclick="javascript: checkForm();" /></form></body></html>

1.5 配置JSP/Servlet开发环境

1.5.1 Tomcat的安装和使用

1.5.2 建立应用目录

要想让JSP程序正常运行，需要简历自己的应用目录，具体步骤如下：

a.在Tomcat下的webapps目录下创建自己的程序目录，例如first；

b.在first下创建目录WEB-INF，注意大小写；

c.在WEB-INF下创建目录classes和文件web.xml。classes用于存放Servlet类文件、JavaBean类文件以及其他的相关类文件等。

示例1-21：配置web.xml

源代码： web.xml

<web-app><welcome-file-list><welcom-file>index.html</welcom-file></welcome-file-list></web-app>