javaweb基础知识
Posted 钟钟终
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaweb基础知识相关的知识，希望对你有一定的参考价值。
1、静态网页和动态网页的区别
静态网页是指网页所有内容由浏览器解析执行，扩展名是html或htm，静态网页的成分包括html，css，javasript。
动态网页是指网页中有需要服务器执行的元素，扩展名是jsp（对于其他动态网页技术则是php、aspx等），
动态页面中除了上述静态元素外，还包括服务器端脚本代码（Java）、指令、动作标签，表达式语言等。
2.页面会显示两个时间，假设服务器端和客户端时钟一致，请问理论上哪个时间显示的早？
答：服务器端显示的时间更早。
<body>
<script>
document.write("111");
document.write(new Date());
</script>
<br/>
<%
out.print(new Date());
%>
</body>
3、Tomcat对静态网页和动态网页的处理
当客户端请求的页面扩展名是html或htm时，Tomcat不做任何处理，直接返回到客户端。
当访问的是jsp页面时，Tomcat会执行页面中动态部分并和静态部分合并返回到客户端。
因此页面中有动态成分，扩展名必须为jsp，只有静态内容，则扩展名都可以。
HTML简介
div:是块级元素
span：是行内元素
<html>
<head>
<title></title>
</head>
<body>
<font color="red"> zsy</font>
</body>
</html>
html标签属性值，单双引号皆可
标签不区分大小写，语法结构松散
<h1>-<h6> 定义标题
<font> 定义文本字体、字体hi村、字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
<center> 定义文本居中
<p> 定义段落
<br> 定义换行
<hr> 定义水平线
<a href="url" title="" target="">
target:指定打开链接方式，self在当前页面打开，_blank在空白页面打开
title:光标放到链接上时显示的内容
有序列表ol、无序列表ul
<ol type="">
<li></li>
<li></li>
</ol>
表格标签,th定义表头单元格
colspan合并横跨的列
rowspan合并横跨的行
<table border="1" cellspacing="0" width="500">
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
form表单标签
action：指定表单数据提交的URL
*表单数据要想被提交，则必须指定其那么属性
method：指定表单的提交方式
*get:默认值，请求参数拼接在URL后面，并且长度有限制
*post:请求参数会在http请求协议的请求体中
<input>
<select>
<textarea>
单选框type=radio需要设置value值
提交文件type=file
CSS控制网页的表现，层叠样式表
css导入方式
1.内连样式：<div style="color:red">Hello CSS</div>
2.内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css">
div
color:red;
</style>
3.外部样式:定义link标签，引入外部的css文件
<link href="../css/demo.css" rel="stylesheet">
css选择器:选取需要设置样式的元素(标签)
1.元素选择器:divcolor:red;
2.id选择器
#namecolor:red;
<div id="name">hello css2</div>
3.类选择器
.clscolor:red
<div class="cls">hello css3</div>
谁的选择范围最小，其优先级越高。id>类>元素
css属性（不需要重点掌握）
javascript
是一门跨平台、面向对象的脚本语言，来控制网页行为，使得网页可交互。
使用格式
内部脚本
1.在HTML文档中可以在任意地方，放置任意数量的
外部脚本
定义一个js文件,再进行导入
getElementById方法
1.getElementById()只能以document.getElementById()的方式调用，而不能作为DOM中其他元素的方法。这是因为id在全局页面的唯一性，所以作为document中的部分局部元素不需要存在这个函数。
2.getElementById()只能查找在文档中的元素，而只是在js中创建，但是没有被加入至文档的元素不可以被获取。
<script src="../js/demo.js"></script>
document对象表示当前页面文档，常用它获取和设置网页元素的状态。
获取元素常用的几个方法：
根据id获取某个元素：document.getElementById(id); （返回对象）
根据name获取元素：document.getElementsByName(name);(返回对象数组）
根据tagName获取元素：document.getElementsByTagName(tagName);(返回对象数组)
<select id="jiguan">
<option value="山东">山东</option>
<option value="北京">北京</option>
<option value="广东">广东</option>
</select>
<input type="button" id="bt4" value="获取籍贯" onclick="f4();" />
<script>
function f4()
var a = document.getElementById("jiguan");
var selectedIndex = a.selectedIndex;
alert(a.options[selectedIndex].value);
</script>
时间刷新：
<html>
<head></head>
<body>
<div id="t1"></div>
</body>
</html>
<script>
function f1()
document.getElementById("t1").innerHTML=new Date().toLocaleString();
setInterval(f1, 1000);
</script>
日期的表示：
<html>
<head>
</head>
<body>
<div id="m1"></div>
<div id="msg"></div>
</body>
</html>
<script>
var dnow = new Date();
var s;
dyear = dnow.getFullYear(); //返回年份
dmonth = dnow.getMonth(); //需要+1表示月份
ddate = dnow.getDate(); //本月的第几天
dday = dnow.getDay(); //返回0123456的下标
dhours = dnow.getHours(); //本月的第几天
//document.getElementById("m1").innerHTML=dhours;
if (dhours >= 6 && dhours < 12)
s = "上午好";
else if (dhours >= 12 && dhours < 18)
s = "下午好";
else if (dhours >= 18 && dhours < 24)
s = "晚上好";
else if (dhours >= 0 && dhours < 6)
s = "凌晨好";
s = s + ",今天是" + dyear + "年" + (dmonth + 1) + "月" + ddate + "日 星期"
+ '日一二三四五六'.charAt(dday);
document.getElementById("msg").innerHTML = s;
</script>
设置时间跳转：
<script>
setTimeout("location.href='http://www.baidu.com'", 3000);
</script>
利用javascript进行表单数据有效性验证
法一：
用普通按钮button<input type="button" value="提交" onclick="f();"/>
数据有效执行提交语句form1.submit();
知识点：
onload="form1.username.focus();"设置光标在那个控件中
<body onload="form1.username.focus();">
在提交数据前判断
<br> (1)用户名是否为空
<br> (2)两次密码输入是否一致
<br> (3)密码长度是否超过6
<br> (4)年龄输入的是否是数值
<br> 只有所有条件都满足，才将数据提交给服务器。
<br>
<form name="form1" action="http://www.sdau.edu.cn">
输入用户名:<input type="text" name="username"/>
<br>
输入密码:<input type="password" name="pwd1"/>
<br>
确认密码:<input type="password" name="pwd2"/>
<br>
年龄:<input type="text" name="age" size="5"/>
<br>
<input type="button" value="提交" onclick="f();"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
<script>
function trim(s)
return s.replace(/(^\\s*)|(\\s*$)/g, ""); //设置字符串格式
function f()
var a = trim(form1.username.value);
var b = trim(form1.pwd1.value);
var c = trim(form1.pwd2.value);
var d = trim(form1.age.value);
if (a == "")
alert("用户名不能为空");
else if (b == "" || c == "")
alert("密码不能为空");
else if (b != c)
alert("两次密码不一致");
else if (b.length <= 6)
alert("密码长度必须大于6");
else if (isNaN(d) || d == "")
alert("年龄必须为数值");
else
form1.submit();
</script>
法2：
1.用提交按钮<input type="submit" value="提交" onclick="return f();" />
2.数据无效函数return false
函数内返回True或False
控制文字加粗、倾斜：
<body>
<div id="d1"><font size=20>zsy</font></div>
<input type="button" id="bt1" name="bold"
value="加粗" onclick="f1();">
<input type="button" id="bt2" name="italic"
value="倾斜" onclick="f2();">
</body>
</html>
<script>
var a=1,b=1;
function f1()
if(a==1)
d1.style.fontWeight="bold";
a=-a;
bt1.vlaue="取消加粗";
else
d1.style.fontWeight="normal";
a=-a;
bt1.vlaue="加粗";
function f2()
if(b==1)
d1.style.fontStyle="italic";
b=-b;
bt2.value="取消倾斜";
else
d1.style.fontStyle="normal";
b=-b;
bt2.value="倾斜";
</script>
求圆的周长、面积：
获得浮点类型的文本值：var a = parseFloat(r.value);
Math.round()函数是默认加上0.5之后，向下取整。
<body>
请输入圆的半径：
<input type="text" name="r" id="r" size="8" />
<br />
<input type="button" value="求周长" onclick="f1();" />
<input type="button" value="求面积" onclick="f2();" />
<div id="result"></div>
</body>
<script>
function f1()
var a = parseFloat(r.value);
var c = 2 * Math.PI * a;
c = Math.round(c * 100) / 100;
result.innerHTML = "圆的周长是" + c;
function f2()
var a = parseFloat(r.value);
var s = Math.PI * a * a;
s = Math.round(s * 100) / 100;
result.innerHTML javaweb基础知识