Java-day21学习笔记

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量167 收藏
点赞数
分类专栏： Java学习笔记 文章标签： javascript 按键事件 点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChangeNone/article/details/113188600
版权

day20复习

在这里插入图片描述

Java-day21学习笔记

一、函数

js中的函数就是具有特定功能的代码块，用来简化对代码的操作。

此函数相当于Java的方法

1.1 格式

普通函数
function 函数名(形参列表){
	
	函数的内容;
	return 返回值;
}

注意：如果需要返回值的话再用return返回结果。如果不需要返回值的话，就需要return
匿名函数
function (形参列表){
	
	函数的内容;
	return 返回值;
}

1.2 调用

var 变量名 = 函数名(实际参数);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-普通函数的格式</title>

    <script>

        function sum(a, b){

            //这种直接打印的就不需要返回值了
            // console.log(a + b);

            //需要返回值的
            return a + b;
        }

        //直接调用
        sum(3, 5);

        //输出调用
        // console.log(sum(3, 5));

        //赋值调用
        var result = sum(3, 5);
        console.log(result);

    </script>

</head>
<body>

</body>
</html>

二、事件

事件就是HTML元素（标签）做的的某些事情，（比如用户点击或者输入这种都被称为是事件）

事件一般都需要和js中的函数进行搭配使用，因为触发事件之后可以通过函数完成相应的功能。

image-20210126103056383

2.1 绑定事件的两种方式

第一种：设置标签的属性

直接在HTML标签上写上相关事件的属性即可

<input type="button" value="普通按钮" onclick="clickme()">
第二种：匿名函数的方式

先获取到要绑定的HTML元素（标签）对象，然后再通过获取到的HTML元素的对象去调用相关的事件即可

<script>

    //1. 先获取要绑定元素的对象
    var ipt = document.getElementById("btn");
    // alert(ipt);   //[object HTMLInputElement]

    //2. 绑定
    ipt.onclick = function (){

        alert("I'm clicked");
    }

</script>

事件绑定

2.2 常常见事件

鼠标单击和双击
onclick
ondbclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-鼠标单击和双击</title>
</head>
<body>

<input type="button" id="btn" value="普通按钮">

</body>
</html>

<script>

    var ipt = document.getElementById("btn");

    // ipt.onclick = function (){
    //     alert("被单击了...");
    // }
    ipt.ondblclick = function (){
        alert("被双击了...");
    }
    
</script>
失去焦点和获取焦点
onblur
onfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-失去焦点和获取焦点</title>
</head>
<body>

<input type="text" id="ipt">

</body>
</html>

<script>

    var ipt = document.getElementById("ipt");

    ipt.onblur = function () {

        console.log("失去焦点了...");
    }
    ipt.onfocus = function () {

        console.log("获取焦点了...");
    }
    
</script>

失去焦点和获取焦点

鼠标移入和移出
onmouseover
onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-鼠标移入和移出</title>
</head>
<body>

<img src="../img/mr.jpg" id="pic">

</body>
</html>

<script>

    var pic = document.getElementById("pic");

    pic.onmouseover = function () {

        console.log("鼠标移入图片了...");
    }
    pic.onmouseout = function () {

        console.log("鼠标移出图片了...");
    }

    // pic.onmousemove = function () {
    //
    //     console.log("鼠标在移动...");
    // }

</script>

11

键盘的按下和抬起
onkeydown
onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-键盘按下和抬起</title>
</head>
<body>

<input type="text" id="ipt">

</body>
</html>

<script>

    var ipt = document.getElementById("ipt");

    ipt.onkeydown = function () {

        console.log("按键按下了...");
    }
    ipt.onkeyup = function () {

        console.log("按键抬起了...");
    }
    // ipt.onkeypress = function () {
    //
    //     console.log("按键按死了...");
    // }


</script>
22
改变事件
onchange
页面加载事件
onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-改变事件</title>

    <script>

        //方式一：结合body标签的onload事件
        // function load(){
        //     var slt = document.getElementById("slt");
        //     slt.onchange = function () {
        //
        //         console.log("内容改变了...");
        //     }
        // }

        //方式二：结合页面加载事件
        window.onload = function () {

            var slt = document.getElementById("slt");
            slt.onchange = function () {

                console.log("内容改变了...");
            }
        }

    </script>

</head>
<!--<body onload="load()">-->
<body >

<select id="slt">
    <option value="bj">北京</option>
    <option value="lz">兰州</option>
    <option value="sh">上海</option>

</select>

</body>
</html>

表单提交事件
onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-表单提交事件</title>

</head>
<body>

<form action="http://www.baidu.com" onsubmit="return check()">

    <input type="text" id="username" name="username"> <br>
    <input type="password" id="password" name="password"> <br>

    <input type="submit" value="提交">

</form>

</body>
</html>

<script>

function check(){

    // return true;
    return false;
}

</script>

练习：表单校验

1. 一个表单中有用户名、密码、确认密码三个内容
2. 用户名、密码、确认密码不为空且两个密码保持一致的时候注册成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-表单校验</title>
</head>
<body>

<form action="https://www.baidu.com" onsubmit="return check()">

    账号：<input type="text" id="user" name="username"> <br>
    密码：<input type="password" id="pwd" name="password"> <br>
    确认密码：<input type="password" id="repwd" name="repassword"> <br>

    <input type="submit" value="提交">

</form>

</body>
</html>

<script>

    function check(){

        // var user = document.getElementById("user");
        // var username = user.value;
        var user = document.getElementById("user").value;
        var pwd = document.getElementById("pwd").value;
        var repwd = document.getElementById("repwd").value;

        if(user != ""){
            if(pwd != "" && repwd != "" && pwd == repwd){
                alert("注册成功");
                return true;
            }else{
                alert("请确保密码一致，并且都不为空");
                return false;
            }
        }else{
            alert("用户名不能为空！");
            return false;
        }

    }

</script>

三、Date对象

3.1 创建方式

var date = new Date();
var date = new Date(年, 月, 日);
var date = new Date(年, 月, 日, 十, 分, 秒);

注意：此处的月份是从0开始的，也就是说想要显示11月份儿的话，只需要写上10创建就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-创建日期对象</title>
</head>
<body>

</body>
</html>

<script>

    var date = new Date();
    // console.log(date);

    var date2 = new Date(2020, 1, 3);
    // console.log(date2);

    var date3 = new Date(1949, 9, 1, 13, 11, 55);
    // console.log(date3);

</script>

3.2 常见函数

Date()				返回当日的日期和时间   【此方法直接输出即可，不需要通过对象调用】
getDate()			从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()			从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()			从 Date 对象返回月份 (0 ~ 11)。
getFullYear()		从 Date 对象以四位数字返回年份。
getYear()			请使用 getFullYear() 方法代替。
getHours()			返回 Date 对象的小时 (0 ~ 23)。
getMinutes()		返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()		返回 Date 对象的秒数 (0 ~ 59)。

setDate()			设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()			设置 Date 对象中月份 (0 ~ 11)。
setFullYear()		设置 Date 对象中的年份（四位数字）。
setYear()			请使用 setFullYear() 方法代替。
setHours()			设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()		设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()		设置 Date 对象中的秒钟 (0 ~ 59)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-获取方法</title>

    <script>

        var date = new Date();

        date.setFullYear(1919);
        date.setMonth(5);
        date.setDate(30);

        console.log(Date());
        console.log(date.getDate())
        console.log(date.getMonth() + 1);
        console.log(date.getFullYear());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        console.log(date.getMilliseconds());


    </script>

</head>
<body>

</body>
</html>

四、BOM

Browser Object Model 浏览器对象模型。为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

image-20210126171040689

4.1 Window对象方法

方法作用
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
prompt弹出输入框
setInterval(‘函数名()’,time)按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(‘函数名()’,time)在指定的毫秒数后调用函数或计算表达式
clearInterval()取消由 setInterval() 设置的 Interval()
clearTimeout()取消由 setTimeout() 方法设置的 timeout
练习：用定时器输出5次"hello js"后停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-练习</title>

    <script>

        //先声明一个变量，用来统计次数
        var count = 0;

        var close = setInterval(function (){


            count++;
            document.write("hello js!");

            if(count == 5){

                clearTimeout(close);
            }

        }, 2000)

    </script>

</head>
<body>

</body>
</html>
ChangeNone
关注
专栏目录
day11-day27学习笔记.rar
03-21
首先，从文件名“day12学习笔记.docx”到“day27学习笔记.rar”，我们可以推测这是一系列连续的学习过程，覆盖了Java的基础到进阶内容。这些笔记可能包括了Java语法的介绍，如变量、数据类型、运算符、流程控制（如...
接口高级-day01-笔记、代码.rar
02-21
【接口高级-day01-笔记、代码.rar】这个压缩包文件是关于接口高级学习的资料，包含了一天的学习笔记和相关的Python代码示例。通过分析文件名，我们可以推测这是一个关于接口编程的初级到中级的教程，主要围绕Python...
JAVA学习笔记- - - day 1
热门推荐
m0_71956038的博客
11-18 6万+
目录💕前言：作者是一名正在学习JAVA的初学者，每天分享自己的学习笔记，希望能和大家一起进步成长💕​编辑运算符(重要)运算符四则运算基本数据类型变量间的运算赋值运算符比较运算符逻辑运算符(重要)流程控制(重要)1.if2.if...else...3.if...else if...else4.switch 只能做等值判断5.三元运算符6.循环结构while 先判断在做循环do...while 先循环在做判断for循环break面向对象面向过程面向对象类的属性类的方法创建对象的内存结构局部变量成员变量匿名对
Java学习笔记-day01-Java入门
c1023j的博客
06-27 840
安装->简单配置->编写案例。Java SE：用于桌面应用开发，是其他两个版本的基础。Java ME：用于嵌入式电子设备或者小型移动设备，例如微波炉、数码相机。Java EE：用于web方向的网站开发。2.3.3 Java的主要特性：面向对象、安全性、多线程、简单易用、开源、跨平台。高级语言的编译运行方式：编程、编译、运行。编译型：c/c++、解释型：python、混合型：Java。Java不是直接运行在系统中，而是运行在虚拟机中。2.3.4 JRE和JDK。
java学习笔记--day08
qq_44043477的博客
03-23 574
Servlet Servlet简介 Servlet是sun公司开发动态web的一门技术 sun在这些API中提供一个接口叫做Servlet，如果想要开发一个Servlet程序，只需要 编写一个类，实现Servlet接口 把开发好的java部署到web服务器中 把实现了Servlet接口的java程序叫做Servlet HelloServlet Servlet接口有两个默认的实现类：HttpServlet，GenericServlet 构建一个M
JAVA学习笔记- - - day 2
m0_71956038的博客
11-26 5万+
目录💕前言：作者是一名正在学习JAVA的初学者，每天分享自己的学习笔记，希望能和大家一起进步成长💕封装(重点)数组一维数组(重点)二维数组方法的重载(重点)this关键字（重点）构造器（重点）默认构造器有参构造器static关键字（重点）属性上(静态属性/变量)方法上（静态方法）静态代码块设计模式(重点)单例。
java_day3学习笔记
m0_73857800的博客
07-12 859
title: Java_Day_3学习笔记tags: Java。
JAVA学习笔记-JAVA基础语法-DAY01
zzq393109417的博客
06-04 266
注意此版本为9.0.4。
JAVA学习笔记-day1
riverMS的博客
08-11 339
自学
Java项目【苍穹外卖】学习笔记-day01
Gilpin30的博客
04-21 1878
Java项目【苍穹外卖】学习笔记-day01
java学习笔记-第一课
weis_2007的博客
07-25 835
Java 是什么Java 是一种高级编程语言，由 Sun Microsystems（现为 Oracle）开发。它是跨平台的，即“写一次，处处运行”（Write Once, Run Anywhere, WORA）。Java 广泛用于开发企业级应用、移动应用（Android）、Web 应用等。
JAVA学习笔记DAY8——Spring_AOC Spring-tx
weixin_47227105的博客
06-17 1093
AOC,即面向切面编程，是一种编程思想。如果说面向对象编程（OOP）是一种纵向的编程思维，AOC则是横向的编程思维。用于Spring中可以弥补OOP存在的不足，例如难以对方法细节进行单独修改而不影响子父类，AOP将所有非核心代码进行统一管理，降低了代码的耦合性。底层使用代理技术。正常写核心方法advice类（增强类）用不同注解对应不同的方法同样需要@Component和@Aspect提取到公共行为的切点 pointcut开启aspectj注解支持。
2020/2/19学习笔记-day01
01-20
【Java学习笔记-day01】 Java是一门广泛应用于软件开发的高级编程语言，自1995年诞生以来，经历了多次版本更新，逐渐发展成为现代软件工程的重要支柱。本篇笔记主要介绍了Java学习的一些基础知识，包括XML、面向...
黑马程序员hibernate框架开发2016版视频day1-day4源码笔记
04-24
《黑马程序员Hibernate框架开发2016版视频day1-day4源码笔记》是一份针对初学者和进阶者深入理解Hibernate框架的重要学习资源。该资料集覆盖了Hibernate框架的基础到高级应用，通过day1至day4的学习内容，旨在帮助...
day3 java 学习笔记
01-13
day3 java 笔记
JavaScript 生成二维码
qq_30049249的博客
11-02 219
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 437
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 101
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 384
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
Java学习笔记：Day03-条件结构 switch-case
"一起学Java——Day03.md" 在Java编程中，条件结构是控制程序流程的重要组成部分，它根据特定条件来决定程序的执行路径。本节主要探讨了两种常用的条件控制结构：switch-case和if的多种分支结构。让我们深入了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChangeNone

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值