javaweb学习（三）

最新推荐文章于 2023-04-04 19:36:35 发布

A2rcher

最新推荐文章于 2023-04-04 19:36:35 发布

阅读量157

点赞数

分类专栏： java 文章标签： javaweb

本文链接：https://blog.csdn.net/qq_45674677/article/details/114853885

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>
        密&nbsp;&nbsp;码：
        <input type="password" name="password" value=""/><br>
        性&nbsp;&nbsp;别：
        <input type="radio" name="xingbie" value="男"/>男
        <input type="radio" name="xingbie" value="女"/>女<br>
        爱&nbsp;&nbsp;好：
        <input type="CheckBox" name="hobby" value="学习" checked/>学习
        <input type="CheckBox" name="hobby" value="编程"/>编程
        <input type="CheckBox" name="hobby" value="运动"/>编程<br>
        地&nbsp;&nbsp;址：
        <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>

A2rcher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb学习（三）

javaweb学习（三）函数的定义与回调关键字function,函数名加一组参数以及至于大括号中需要执行的一段代码定义的。function functionName([parameter 1,parameter 2,...]){ statements; [return rxpression;]}functionName:指定函数名，唯一并且区分大小写。parameter：指定参数列表。使用多个参数时，参数间使用逗号进行分割。最多255个参数。statement：函数体，实现
复制链接

扫一扫

专栏目录