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
    评论
前端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：Maven常识性总结
席木木的博客
11-09 366
Maven基础总结篇
JavaWeb——JavaScript应用案例
mxyjsu2021的博客
05-10 811
3.在事件处理程序中，通过JavaScript控制CSS样式和DOM元素，将当前轮播项隐藏，将下一个轮播项显示出来，以达到轮播切换的效果。1.在HTML中，创建轮播图的HTML结构，并添加相应的CSS样式，用来控制轮播图的位置、大小等。3.判断当前滚动距离是否大于等于需要固定的侧边栏元素在视口中的位置信息中的top值，如果是，则添加一个类名或者改变样式，使其固定在页面的特定位置上，否则就去除该类名或样式，还原原来的位置。比如，可以设置一个定时器来定时切换轮播项，或者在用户点击轮播图的控制按钮触发事件。
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; %>          } %>
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
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
乌云的博客
03-03 1万+
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为 JavaScript
Java016——Java输入输出语句
热门推荐
weixin_45084986的博客
06-18 2万+
Java常用的输出语句有三种：换行输出，输出后会自动换行。不换行输出。按格式输出。
Web初学-2022.11.6-12.02
intmain404的博客
12-02 740
JavaScript必学基础
javaweb系列-js引入、输出、变量、数据类型、运算符
shouhouxiaomuwu的专栏
05-14 479
标签之间在HTML文档中，可以在任意地方，放置任意数量的一般会把脚本置于元素的底部，可改善显示速度
Javaweb开发项目之JS知识(JavaScript)
CV在读
05-31 799
目录 一、JS介绍 二、 点击事件案例 三、计算器 一、JS介绍 1、直接嵌入HTML页面。 2、由浏览器解释执行代码，不进行预编译。 JS：解释型语言 Java: 编译型语言 JS不区分单引号和双引号。 若想写JavaScript语言，使用script标签，type=text/javascript，直接写在body标签中 <!DOCTYPE html> <html lang="en"> <head> <meta ..
JavaWeb：Script
ccw_dy123的博客
07-25 293
JavaScript 是一种具有函数优先级的轻量级，解释型或者及时编译型的动态脚本语言，被广泛应用于Web开发。可以通过操作HTML元素、读写元素内容、验证提交数据、检验浏览器信息、还可以在HTML中添加动画效果，提高用户体验。 javaScript组成：ECMAScript：核心部分，包括基本语法、语句、事件、对象；DOM文档对象模型：操作文档中的元素和内容；BOM浏览器对象模型：操作浏览器对象。 JavaScript引入方式：行内式，直接在HTML某个标签中直接写JavaScript脚本<i
8.JavaScript（正则表达式）
子衿
10-04 340
## JavaScript： * 概念：一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 * 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 * JavaScript发展史： 1. 1992年，N...
javaweb里用java代码怎么输出“”
weixin_45328579的博客
05-16 710
用转义符\" 就可以把英文格式""输出，代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="UTF-8">
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值