JAVAWEB学习笔记
HTML
通过标签显示在网页的各个部分来显示内容
<!DOCTYPE html><!--声明约束-->
<html lang="zh_CN">
<head><!--头部文件，一般包括标题，css样式，js代码-->
<meta charset="UTF-8"><!--表示字符集为utf-8-->
<title>Title</title><!--标题-->
</head>
<body><!--body显示整个页面的内容-->
内容
</body>
</html>
标签
常用标签
<font color=“green” face="宋体"size=“7”>hello</font>
特殊字符
| < | > | 空格 |
|---|---|---|
| < | > |   |
标题标签
h1到h6
h1最大，h6最小
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
超链接
在网页中点击可以跳转的为超链接
<a href="https://www.baidu.com">百度</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a><br/>
<a href="https://www.baidu.com" target="_blank">百度</a><br/>
<br/>为换行符
列表标签
有序列表
<ol type="1">
<li>2</li>
<li>3</li>
<li>8</li>
<li>1</li>
</ol>
img标签，图片
<img src="路径" width="宽度" height="高度" border="边框" alt="错误反馈">
表格标签
<table align="conter" cellpadding="100" border="1" width="300" >
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
iframe
<iframe src="www.baidu.com" width="300" ></iframe>
<!--在页面上开辟一个小区域显示一个页面-->
实现点击跳转到一个小窗口
<iframe name="abc"></iframe>
<ul>
<iframe src="https://www.baidu.com/" width="300" name="abc"></iframe>
<li><a href="https://www.baidu.com/" target="abc"></a> </li>
<li></li>
<li></li>
</ul>
表单标签
<form>
<!-- form表示一个表单-->
<form action="https://localhost:8080" method="get">
<!-- action表名提交地址，merhod表示提交方式 锁调教的标签需要name
get的特点是 明文传输，长度限制，不安全
post 请求相对安全，理论没有数据长度限制-->
用户名：<input type="text"value="默认值">
密码：<input type="password"><br/>
性别：<input type="radio" name="a">男 <input type="radio" name="a" checked="checked">女<br/>
<!-- input为单行输入框
tyoe表示其格式
text为文本框
password为密码文本框
radio为单选框
name可以分组
checked表示默认选中
checkbox为复选框
reset 重置
submit提交
button按钮
file文件上传
hidden隐藏区域
-->
select
国籍：<select>
<option>请选择国籍</option>
<option>中国</option>
<option>日本</option>
<option>美国</option>
</select>
<!--select为下拉列表框-->
文本区域
<textarea rows="10" >默认值</textarea>
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>csstest</title>
<link rel="stylesheet" type="text/css" href="1.css">
<!-- 引入css代码-->
</head>
<body>
<div>设置边框的宽度，实现颜色</div>
</body>
</html>
css代码
div{
border: 2px solid rebeccapurple;
}
不同的标签使用不同的标签选择器
标签名{
属性：值；
}
id选择器
相同标签样式不同时使用id选择器
#id {
属性：值；
}
类型选择器
可以重复使用在不同的标签中
#class{
}
组合选择器
#id，#class{
}
常用样式
div{
border: 2px solid rebeccapurple;
color: yellow;
width: 300px;
height: 200px;
font-size: 20px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
a{
text-decoration: none;
}
table{
border: 2px solid red;
border-collapse: collapse;
}
javascrip
主要完成页面的数据验证
特点：
交互性：可以完成数据交互
安全性：不允许直接访问硬盘
跨平台性：不受平台限制
javascrip与html的结合
在head标签中或者body标签中定义一个scrip标签就可以完成书写
使用scrip标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>
变量
数据类型：数值型
字符串;String
对象数值;object
布尔类型：boolean
函数类型：function
undefined 未定义的值初始值为undefined
null 空值
NAN 非数值
比较运算符
=== 全等于 比较数值的情况下比较数据类型
逻辑运算
&&且、||或。！ 取反
且运算
当表达式为全真的时候返回最后的值
当有一个为真假时返回第一个为假表达式的值
或运算
当表达式全假时返回最后一个表达式
当有一个为真时返回第一个为真的表达式的值
混用时可能会出现短路，导致不分表达式不判断
数组
var 数组名=[];//空数组
var 数组名=[a,b,c];
默认扩容
函数
第一种
function 函数名（形参列表）{//参数不需要不需要声明数据类型，函数体可以直接输出返回值。
函数体}
函数名（）；调用函数
第二种
var 函数名 =function（形参列表）{函数体}
函数常见问题
隐形参数类似于与可变长参数
arguments隐形参数，不需要声明但可以调用
function sum(num1,num2){
var result=0;
for (let i = 0; i <arguments.length ; i++) {
result += arguments[i];
}
return result;//无需声明返回类型
}
alert(sum(24,43));
不允许重载
js自定义对象
方式1
object形式的自定义对象
var 变量名 =new object（）；
调用
变量名.属性
变量名.函数名
对象的访问
变量名.属性名/方法名;
举例
var obj=new Object();
obj.name="huazai";
obj.age=18;
obj.fun=function (){
alert(this.name+","+this.age);
}
obj.fun();
方式2
定义
var 变量名={
属性名：值，
属性名：值，
函数名：function
}
调用
变量名.属性/函数名
代码实现2
var obj={
name :"qqq",
age :17,
fun:function (){
alert(this.name+","+this.age);
}
}
obj.fun();
js中的事件
什么是事件：事件是电脑输入设备与页面进行交互的响应：点击滑动。。。。
常用的事件
onload 加载完成事件：常用于页面代码js的初始化操作
onclck 单击事件：常用于按钮响应事件
onblur 失去焦点事件： 常用于输入框失去焦点时验证输入是否合法
oncharge 内容发生改变事件 ：常用于下拉列表和输入框发生改变后的操作
onsubmit：常用于表单提交时，内容是否合法
事件的注册
告诉浏览器响应后需要执行的代码
静态注册
：通过html标签的事件属性直接赋予事件响应
动态注册
先通过js代码得到标签的dom对象事件名 fuction 这种方式赋予事件响应的代码叫动态注册
步骤，获取标签对象
标签对象.事件名
onload事件
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadfun(){
alert("静态注册onload")
}
</script>
</head>
<body onload="onloadfun()">
</body>
</html>
动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
alert("静态注册onload");
}
</script>
</head>
<body>
</body>
</html>
单击事件onclick
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickfun(){
alert("单击事件onclick")
}
</script>
</head>
<body>
<button onclick="onclickfun()">按钮1</button>
<button>按钮2</button>
</body>
</html>
动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
var btobj= document.getElementById("bt02");//是js提供的一个文档对象
btobj.onclick=function (){
alert("动态注册onclick")
}
}
</script>
</head>
<body>
<button onclick="onclickfun()">按钮1</button>
<button id="bt02">按钮2</button>
</body >
</html>
失去焦点事件
onblur
静态失去焦点事件注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurfun(){
console.log("静态注册失去焦点事件");//consel是控制台对象
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurfun()" ><br/>
密码:<input type="password"><br/>
</body >
</html>
动态注册onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
var obj=document.getElementById("01");
obj.onblur=function(){.
console.log("动态注册失去焦点事件");//consel是控制台对象
}
</script>
</head>
<body>
用户名：<input type="text" ><br/>
密码:<input type="password"><br/>
</body >
</html>
onchange
内容发生改变事件静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangefun(){
alert("选择已经改变");
}
</script>
</head>
<body>
<select onchange="onchangefun()">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body >
</html>
内容发生改变事件动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
var obj=document.getElementById("se01");
obj.onchange=function(){.
alert("发生改变")
}
</script>
</head>
<body>
<select >
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body >
</html>
onsubmit表单提交事件
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitfun(){
var w=0;
if (1){
alert("输入不合法");return false;
} else {
alert("已提交");
}
}
</script>
</head>
<body>
<form action="https://localhost:8080" method="get" onsubmit="return onsubmitfun()">
<!-- //onsubmit= return flase 不会提交-->
<input type="submit" value="静态注册">
</form>
</body >
</html>
动态注册onsubmit
window.onload=function (){
var formobj=document.getElementById("fo01");
formobj.onsubmit=function (){
}
}
dom模型
文档对象模型，将文档中的标签属性文本转化为对象管理
document对象
1.document管理类所有的html文件内容
2.document是一种结构性文件，有层级关系
3.他让我们把所有的标签都对象化
4.可以通过document访问所有的标签对象
document对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//当用户点击了校验按钮需要验证输入的数据是否合法
// 规则是，必须由字母下划线数字组成，5-12个数据
function onclickfun(){
var username = document.getElementById("username");
// alert(username.value);
var usernametext=username.value;
var patt=/^\w{5,12}$/;
if (patt.test(usernametext) ){
alert("合法");
}else {
alert("不合法");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="用户名需要使用字母数字下划线组成，5-12个字符"/ >
<button onclick="onclickfun()">校验</button>
</body>
</html>
数据库的约束
1.非空约束;NOT NULL 保证不能有null值
2.唯一约束：UNIQUE 保证所有数据各不相同
3.主键约束：PRIMARY KEY 一行数据的唯一标识，非空且唯一
3.检查约束：CHECK 保证值满足某一条件
4.默认约束：DEEAULT保存数据时，未指定值采用默认值
5外键约束：FOREIGH KEY 对两个表建立连接，保证数据的唯一性和完整性
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
