JavaWeb——JavaScript

已于 2022-05-05 10:19:04 修改
阅读量494 收藏 1
点赞数
文章标签： java-ee
于 2022-05-05 10:06:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63544124/article/details/124574077
版权

目录

1.JavaScript引入方式

​2.JavaScript基础语法

2.1书写语法、输出语句

2.2变量

2.3数据类型

​2.4运算符

2.5函数

3.JavaScript常用对象

         3.1Array

3.2String

3.3自定义对象

​​4.BOM

4.1Window

定时器

4.2History

4.3 Location​

5.DOM

5.1获取Element对象

​5.2常见HTML Element对象的使用

6.事件监听

6.1事件绑定

6.2常见事件

7.案例——表单验证

         正则表达式 ​

1.JavaScript引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--外部脚本-->
<script src="../js/demo.js"></script>

<!--内部脚本-->
<script>
    alert("Hello JS 02")
</script>

</body>
</html>


2.JavaScript基础语法

2.1书写语法、输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    window.alert("hello JS 01");//弹出警告框
    document.write("hello JS 02");//写入HTML
    console.log("hello JS 03");//写入控制台
</script>

</body>
</html>


2.2变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var test = 20;
    test="张三";
    alert(test);

    {
        var test ="李四";//可以重复定义
    }
    alert(test);//可以找到变量

    {
        let age = 30;
        alert(age);
    }
    alert(age);//找不到变量

    const age2=90;//不能修改
    alert(age2)

</script>

</body>
</html>

2.3数据类型

2.4运算符


2.5函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //方式一
    function add(a, b) {
        return a + b;
    }
    var result = add("hello", " world");
    alert(result);

    //方式二
    var add = function(a, b){
       return a + b;
    }
    let result2 = add(2,3);
    alert(result2);

</script>
</body>
</html>


3.JavaScript常用对象

3.1Array


3.2String

 


3.3自定义对象




4.BOM

4.1Window

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    window.alert("abc");
    alert("abc");

    var flag = window.confirm("你是否确定删除")
    if(flag){
        //删除逻辑
    }

    window.setTimeout(function () {
        alert("hhhhhhhh")
    },3000)//3s后执行一次

    window.setInterval(function () {
        alert("hhh")
    },1000)//每隔1s执行一次

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="light">

<script>
    function on() {
        document.getElementById('light').src="../img/on.gif";
    }

    function off() {
        document.getElementById('light').src="../img/off.gif";
    }

    var x = 0;
    window.setInterval(function () {
        if (x % 2 == 0) {
            on();
        } else {
            off();
        }
        x++;
    }, 1000)

</script>
</body>
</html>

4.2History

4.3 Location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write('三秒跳转到百度...')
    setTimeout(function () {
        location.href="https://www.baidu.com/"
    },3000)
</script>

</body>
</html>


5.DOM

5.1获取Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="../img/on.gif" id="on">
<img src="../img/off.gif" id="off">

<div>张三</div>
<div>李四</div>

<span class="day">星期一</span>
<span class="day">星期二</span>
<span class="day">星期三</span>

<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">摄影

<script>
    
    document.getElementById("on");

    var divs= document.getElementsByTagName("div");

    var hobbys=document.getElementsByName("hobby");

    var days=document.getElementsByClassName("day");

</script>

</body>

5.2常见HTML Element对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="../img/off.gif" id="light">

<div>张三</div>
<div>李四</div>

<span class="day">星期一</span>
<span class="day">星期二</span>
<span class="day">星期三</span>
<br>

<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">摄影

<script>

    var img = document.getElementById("light");
    setTimeout(function () {
        alert("开灯");
        img.src="../img/on.gif";
    },2000);

    var divs= document.getElementsByTagName("div");
    setTimeout(function () {
        alert("变色");
        divs[0].style.color='red';
        divs[1].style.color='blue';
    },4000);

    var hobbys=document.getElementsByName("hobby");
    setTimeout(function () {
        alert("选中");
        hobbys[0].checked=true;
        hobbys[1].checked=true;
        hobbys[2].checked=true;
    },6000);

    var days=document.getElementsByClassName("day");
    setTimeout(function () {
        alert("背景色");
        days[0].style.backgroundColor="pink";
        days[1].style.backgroundColor="pink";
        days[2].style.backgroundColor="pink";
    },8000);

</script>

</body>

</html>


6.事件监听

6.1事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="点我" id="btn"><!--方式1-->
<input type="button" value="再点我" onclick="on()"><!--方式2-->

<script>

    document.getElementById("btn").onclick=function () {
        alert("我被点了")
    }//方式1

    function on(){
        alert("我又被点了")
    }//方式2

</script>
</body>
</html>


6.2常见事件

JavaScript HTML DOM 事件 (w3school.com.cn)https://www.w3school.com.cn/js/js_htmldom_events.asp

7.案例——表单验证

正则表达式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }

        return flag;
    }

    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }


    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }

</script>
</body>
</html>

m0_63544124
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
JavaWeb：Maven常识性总结
席木木的博客
11-09 366
Maven基础总结篇
【JavaWeb学习】Java Script（入门）
大秦帝国
04-20 422
基本语法
前端web有关javacsript的函数内容总结
weixin_73184497的博客
05-16 345
只有函数才有arguments对象，而且是每个函数都内置好了这个arguments，是一个伪数组，并不是真正意义的数组（具有数组的length的属性，按照索引的方式进行储存的，它没有真正数组的一些方法，pop() puush()等等。相当于var a=9;c=9,b和c直接赋值 没有var声明当全局变量看，若为集体声明应为var a=9,b=9,c=9;在这里fun是变量名不是函数名，，函数表达式声明方式跟声明变量差不多，只不过变量存储的是值而函数表达式里存储的是函数，函数表达式也可以进行参数传递。
JavaWeb——JavaScript应用案例
mxyjsu2021的博客
05-10 811
3.在事件处理程序中，通过JavaScript控制CSS样式和DOM元素，将当前轮播项隐藏，将下一个轮播项显示出来，以达到轮播切换的效果。1.在HTML中，创建轮播图的HTML结构，并添加相应的CSS样式，用来控制轮播图的位置、大小等。3.判断当前滚动距离是否大于等于需要固定的侧边栏元素在视口中的位置信息中的top值，如果是，则添加一个类名或者改变样式，使其固定在页面的特定位置上，否则就去除该类名或样式，还原原来的位置。比如，可以设置一个定时器来定时切换轮播项，或者在用户点击轮播图的控制按钮触发事件。
JavaWeb上
weixin_68718700的博客
01-29 1402
JavaWeb上
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
JavaWeb课程设计——图书馆管理系统.doc
09-30
JavaWeb课程设计——图书馆管理系统.doc
Javaweb期末考核作业——moye健身房
11-30
JSP+JavaBean基于Struts2的DAO...内含4个css文件、1个Javascript文件、15个JSP文件、1个Javabean、1个sql语句Java类文件、1个链接数据库文件、1个struts.xml文件、1个Action文件。。。自己的期末考核作业，仅供参考！
Javaweb项目，使用Tomcat本地服务器，使用servlet以及HTML、CSS、JavaScript、AJAX的校园外卖
最新发布
03-08
Javaweb项目，编译器为IDEA，使用Tomcat本地服务器，使用servlet以及HTML、CSS、JavaScript、AJAX的校园外卖系统，采用算法协同过滤与倒排索引等.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实...
java经典输入输出语句代码
12-07
ava经典输入输出语句代码，自己从书上摘抄修改，也许对两眼一嘛黑的java初学者有点用，呵呵。
JavaWeb--JavaScript
Eumenides_Suki的博客
02-23 3577
目标JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指定元
用JSP求1~10的阶乘
baidu_38958878的博客
05-28 9890
pageEncoding="UTF-8"%> Insert title here     int a=1;   for(int i=1;i %>        } %> for(int i=1;i   { a=a*i; %>          } %>
JavaWeb --- JavaScript
乌云的博客
03-03 1万+
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为 JavaScript
Java016——Java输入输出语句
热门推荐
weixin_45084986的博客
06-18 2万+
Java常用的输出语句有三种：换行输出，输出后会自动换行。不换行输出。按格式输出。
Java中简单的输入输出语句
m0_74968164的博客
04-07 8475
！！
JavaWeb输入输出流
XHT117的博客
06-30 1816
关于内容的读写 关于读InputStream 关于写OutputStream
Javaweb之javascript的详细解析
qq_69748833的博客
11-07 848
通过代码/js效果演示提供资料进行效果演示，通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7705
JavaScript的使用
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等。JavaWeb开发中使用HTTP协议来实现客户端和服务器之间的通信，通过HTTP请求向服务器发送请求，服务器接收请求后处理并返回相应的HTTP响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值