01_JavaWeb编程基础
2012-11-15 21:29
253 查看
1.1 HTML基础
HTML：超文本标记语言(HyperText Markup Language)
示例1-1：第一个HTML文件
源文件：HelloWorld.htm
1.2 <HEAD>中常用的标记
1.3 <BODY>中常用的标记
1.3.1 <BODY>标记
bgcolor：背景色
background：背景图片
text：文字颜色
示例1-2：在<BODY>标记中设置文字颜色和背景色
源文件：body.htm
1.3.3 标题字体
1.3.4 <IMG>标记
1.3.5 <A>标记
1.3.6 列表标记
1.3.7 表格定义标记
示例1-3：使用表格
源文件：table.htm
示例1-4：不规则的表格
源文件：table1.htm
1.3.9 文本组件
示例1-5：文本组件
源文件：textele.htm
示例1-6：单选列表和多选列表
源文件：textele.htm
1.3.12 多选框
示例1-7： 单选框和多选框
源文件：check.htm
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
示例1-9： 用window.open()新打开一个窗口
源文件： WindowOpen.htm
示例1-10： 警告框
源文件： Alert.htm
源文件： Confirm.htm
prompt对话框
源文件： Prompt.htm
JavaScript中的事件处理
示例1-13： onload事件处理
源文件： Load&Unload.htm
聚焦事件处理
源文件： Focus.htm
失去焦点事件处理
源文件： Blur.htm
点击事件处理
源文件： Click.htm
内容改变处理
源文件： Change.htm
选择事件处理
源文件：Select.htm
提交事件处理
源文件： Submit.htm
使用JavaScript进行表单验证
示例1-20： 验证表单
源文件： CheckForm.htm
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
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.4JavaScript中的事件处理
示例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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Java编程基础】01.Java中的String类以及字符串的常见操作
- 串口通信与编程01：串口基础知识
- 串口通信与编程01：串口基础知识
- JDBC与DAO篇--01 JDBC原理、JDBC基础编程
- 黑马程序员_看视频记笔记_C#编程基础01
- 串口通信与编程01：串口基础知识
- ASP.NET MVC 4 Web 编程-Chap01 ASP.NET MVC 基础
- 01 java 编程基础
- 第10章 网络编程 01_网络基础_IP_TCP_UDP.wmv
- java网络编程基础夯实01-Internet地址概述
- 黑马程序员 自学01C#编程基础之基本概念
- Linux基础入门及系统管理01-bash脚本编程之二if等条件判断脚本知识17
- 串口通信与编程01：串口基础知识
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- 编程基础01
- 标准C++_01_编程基础
- Linux基础入门及系统管理01-bash脚本编程之一变量、变量类型等16
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
- 01-03.Java基础windows下搭建环境-安装编程工具 MyEclipse 安装与配置