javaweb学习(三)
函数的定义与回调
关键字function,函数名加一组参数以及至于大括号中需要执行的一段代码定义的。
function functionName([parameter 1,parameter 2,...]){
statements;
[return rxpression;]
}
- functionName:指定函数名,唯一并且区分大小写。
- parameter:指定参数列表。使用多个参数时,参数间使用逗号进行分割。最多255个参数。
- statement:函数体,实现函数功能语句。
- expression:返回函数值。为任意表达式,变量或者常量。
function account(price,number){
car sum = price * number;
return sum;
}
account(10.2,20)
回调就是这个样子。
js事件学习
事件简单的讲就是:js与页面的交互是通过用户操作页面时触发某些东西实现各种功能的。
常用事件
鼠标键盘事件 |
---|
onclick:鼠标单击时触发事件 |
ondblclick:鼠标双击时触发事件 |
onmousedown :按下鼠标时触发此事件 |
onmouseup:鼠标按下后松开鼠标时触发事件 |
oncontextmenu:用户右击鼠标时触发并打开上下文菜单 |
onmousemove:鼠标移动时触发 |
onmouseout:鼠标离开对象范围的上方时触发 |
onmouseover:鼠标移动到对象范围的上方时触发 |
onkeyup:键盘上某个按键被按下后松开时触发 |
onkeydown:键盘上某个按键被按下时触发 |
onkeypress:键盘某个键按下并且释放时触发 |
表单相关事件 |
---|
onfocus:当某个元素获得焦点时触发此事件 |
onblur:当前元素失去焦点时触发此事件 |
onchange:当前元素失去焦点并且元素的内容发生改变时触发此事件 |
onsubmit:一个表单被提交时触发此事件。 |
onreset:当前表中的reset的属性被激活时触发。 |
js中windows对象方法
https://www.runoob.com/jsref/obj-window.html
(参考菜鸟教程yyds)
大概就是说window对象即浏览器窗口对象,是一个全局变量。主要用来才做浏览器页面的内容的。
string对象
参考菜鸟教程。
https://www.runoob.com/jsref/jsref-obj-string.html
Date对象
DOM对象
html实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#main{
width:1000px;
margin:0 auto;
}
#img{
width:1000px;
height:350px;
}
.img1{
width:300px;
height:150px;
float:left;
border:1px solid orange;
text-align:center;
margin:6px;
padding:6px;
}
#nav li{
width:90px;
height:30px;
border:1px solid red;
float:left;
list-style:none;
text-align:center;
line-height:30px;
margin-right:3px;
}
#nav li a{
text-decoration:none;
display:block;
width:90px;
height:30px;
}
#nav li a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div id="main">
<center><h1>HTML+css</h1></center>
<hr color="orange" size="3px">
<ul id="nav">
<li><a href="test.html">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
</ul><br>
<h3>1.字</h3>
<p align="center">段落<font size="36px" color="red">定义</font></p>
<p>段落</p>
<p>段落</p>
<h3>2.图</h3>
<div id="img">
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
<div class="img1">
<img alt="介绍图" src="'https://gitee.com/zjhzjhhh/photo/raw/master/鬼刀.jpg"/>
</div>
</div>
<h3>3.超链接</h3>
<a href="test.html" target="_blank">跳转</a>
<h3>4.表格</h3>
<table border="3">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>98</td>
</tr>
<tr>
<td>001</td>
<td>aaa</td>
<td>98</td>
</tr>
</table>
<h3>5.列表</h3>
有序列表
<ol>
<li>a</li>
<li>c</li>
<li>e</li>
</ol>
无序列表
<ul>
<li><a href="test.html">导航1</a></li>
<li><a href="">导航1</a></li>
<li><a href="">导航1</a></li>
</ul>
<h3>6.表单</h3>
<form action="DoLogin.jsp" method="get">
用户名:
<input type="text" name="username" value=""/><br>
密 码:
<input type="password" name="password" value=""/><br>
性 别:
<input type="radio" name="xingbie" value="男"/>男
<input type="radio" name="xingbie" value="女"/>女<br>
爱 好:
<input type="CheckBox" name="hobby" value="学习" checked/>学习
<input type="CheckBox" name="hobby" value="编程"/>编程
<input type="CheckBox" name="hobby" value="运动"/>编程<br>
地 址:
<select name="location">
<option value="山西">山西</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
</select><br>
个人简介:
<textarea cols="30" rows="10">
</textarea><br>
附件:
<input type="file"><br>
<input type="submit" value="注册">
<input type="reset" value="取消">
</form>
</div>
</body>
</html>