JavaWeb_JavaScript

已于 2022-01-20 19:21:28 修改
阅读量513 收藏
点赞数
分类专栏： JavaWeb笔记 文章标签： javascript 前端 开发语言
于 2022-01-18 15:31:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50796684/article/details/122537810
版权
这篇博客详细介绍了JavaScript的基础知识，包括与HTML的结合方式、变量类型、数组、函数的定义及用法，特别是深入探讨了JS中的事件，如onload、onclick等，并讲解了DOM模型中的一些关键操作，如正则表达式和元素查询方法。
摘要由CSDN通过智能技术生成

文章目录

一.JavaScript和html代码结合

1.第一种方式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello javaScript!");
    </script>
</head>

2.第二种方式

    <script type="text/javascript" src="hello.js"></script>

hello.js

alert("2022 hello!");

二.变量

数值：number
字符串:string
对象：object
布尔：boolean
函数：function
特殊的值：undefined未赋予初始值的默认值，null空值，NAN非数字非数值

<script type="text/javascript">
        let i;
        alert(i);/*undefine*/
        i=12;
        alert(typeof i);/*number*/
        i="abc";
        alert(typeof i);/*string*/

        let a=12;
        let b="abc";
        alert(a*b);/*NaN*/
    </script>

1.关系运算

等于：== 简单的做字面值的比较
全等于：=== 除了字面值的比较还有变量的类型

    <script type="text/javascript">
        let a="12";
        let b=12;
        alert(a==b);/*true*/
        alert(a===b);/*false*/
    </script>

2.逻辑运算

且&& 或|| 反！
所有的变量都可作为一个boolean变量去使用
0、null、undefine、""(空串)都认为是false

&&
全真：返回最后一个表达式的值
假：返回第一个为假的表达式
||：
全假：返回最后一个表达式的值
真：返回第一个为真的表达式

三.数组

<script type="text/javascript">
        let arr=[];/*定义一个空数组*/
        alert(arr.length);//0
        /*JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组扩容操作*/
        arr[2]="abc";
        alert(arr.length);//3
        alert(arr[1]);//undefine
    </script>

    <script type="text/javascript">
        let arr=[1,"abc",true];
        for (let i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
    </script>

四.函数

1.函数定义的方式

方式一
<script type="text/javascript">
        function sum(num1,num2){
            let res=num1+num2;
            return res;
        }

        alert(sum(20,30));
    </script>
方式二
    <script type="text/javascript">
        let sum=function(num1,num2){
            let res=num1+num2;
            return res;
        }

        alert(sum(20,30));
    </script>

函数不允许重载，一样的定义会覆盖上一次

2.隐形参数arguments

    <script type="text/javascript">
        function sum(num1,num2){
            let res=0;
            for (let i = 0; i < arguments.length; i++) {
                if (typeof arguments[i]=="number")
                  res+=arguments[i];
            }
            return res;
        }
        alert(sum(1,2,3,4,5,6,7,"abc",8,9,10));//55
    </script>

五.JS中的自定义对象

1.Object定义对象

    <script type="text/javascript">
        let obj = new Object();
        obj.name="张三";
        obj.age=18;
        obj.show=function(){
            alert("name:"+this.name+", age:"+this.age);
        }
        obj.show();
    </script>

2.{}定义对象

    <script type="text/javascript">
        let obj={
            name:"张三",
            age:18,
            show:function() {
                alert("name:" + this.name + ", age:" + this.age)
            }
        };
        obj.show();
    </script>

六.JS中的事件

事件的注册：告诉浏览器，事件响应后，需要执行的操作代码
静态注册：通过HTML标签的事件属性直接赋予事件响应后的代码
动态注册：通过js代码得到的标签DOM对象，再通过DOM对象.事件名=function(){}这种形式赋予事件响应后的代码

1.onload加载完成事件

常用于页面js代码初始化
静态注册

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onloadFun(){
            alert('静态注册onload事件');
        }
    </script>
</head>
<body onload="onloadFun()">
</body>


动态注册

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (){
            alert('动态注册的onload事件');
        }
    </script>
</head>
<body>
</body>

2.onclick单击事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态注册onclick事件");
        }
        window.onload=function (){
            let obj=document.getElementById("btn01");
            obj.onclick=function () {
                alert('动态注册onload事件');
            }
        }
    </script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>

3.onblur失去焦点事件

常用于输入框失去焦点后验证其输入是否合法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurFun(){
            console.log("静态注册onblur事件");
            //console控制台对象，专门用来向浏览器的控制台打印输出，用于测试使用
            //log是打印的方法
        }
        window.onload=function (){
            let obj=document.getElementById("password");
            obj.onblur=function () {
                console.log("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
用户姓名：<input type="text" onblur="onblurFun()"><br>
用户密码：<input type="text" id="password"><br>
</body>

4.onchange内容发生改变事件

下拉列表和输入框内容发生改变后操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("姓名已经改变了！");
        }
        window.onload=function (){
            let obj=document.getElementById("num");
            obj.onchange=function (){
                alert("数字已经改变了！");
            }
        }
    </script>
</head>
<body>
请选择正确的姓名：
<select onchange="onchangeFun()">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option>
</select>
<br>
请选择正确的数字：
<select id="num">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</body>

5.onsubmit表单提交事件

验证表单项是否合法，如果不合法则阻止提交

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun(){
            alert("静态注册onsubmit事件");
            return false;
        }
        window.onload=function (){
            let obj=document.getElementById("form");
            obj.onsubmit=function (){
                alert("动态注册onsubmit事件");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册">
</form>
<form action="http://localhost:8080" method="get" id="form">
    <input type="submit" value="动态注册">
</form>
</body>

七.DOM模型

1.验证用户名是否有效

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            let obj=document.getElementById("usrname");
            let usrName=obj.value;
            let patt=/^\w{5,12}$/;

            let tipe=document.getElementById("tipe");

            /*test方法用于测试某个字符串，是不是匹配规则*/
            if(patt.test(usrName)){
                tipe.innerHTML="用户名合法！";
            }else{
                tipe.innerHTML="用户名不合法！";
            }
        }
    </script>
</head>
<body>
<!--验证规则：必须由数字，字母，下划线组成，长度5-12-->
    用户名：<input type="text" id="usrname">
    <span style="color: red" id="tipe"></span>
    <button onclick="onclickFun()">校验</button>
</form>
</body>

2.正则表达式

字符描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(xly)查找任何以l分隔的选项。
\w包括大写字母、小写字母、下划线、数字。
\d查找数字。
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含X个连续的 n 的字符串。
n{X,Y}匹配包含X-Y个连续的 n 的字符串。
n$匹配以n结尾的字符串。
n^匹配以n开头的字符串。

注意：^……$表示从头到尾检查
常用正则表达式

3.getElementsByName方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function clickAll() {
            let hobbies=document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked=true;
            }
        }
        function clickNone(){
            let hobbies=document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked=false;
            }
        }
        function clickReverse(){
            let hobbies=document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked=!hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">c++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="js">javaScript
    <br>
    <button onclick="clickAll()">全选</button>
    <button onclick="clickNone()">全不选</button>
    <button onclick="clickReverse()">反选</button>
</form>
</body>

4.getElementsByTagName方法

将上述例子中的 let hobbies=document.getElementsByName(“hobby”); 改为

let hobbies=document.getElementsByTagName("input");

document对象的三个查询方法：
优先级：id->name->tapName
以上三个方法代码一定要在页面加载完成之后执行，才能查询到标签

退堂鼓十级演奏家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——JavaScript
qq_45821255的博客
06-25 4448
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
javaweb_javascript基本语法
虚空掠夺者~
08-09 387
JavaScript: 概念：一门客户端脚本语言 运行在客户端浏览器中的，每一个浏览器都有JavaScript的内置的 解析引擎 脚本语言：不需要编译，直接就可以被浏览器解释执行了，web中的静态资源 功能： 用来增强用户和html的页面交互过程，可以用来控制html的页面效果，增强用户体验效果 JavaSCript的发展史： 1.1992年，NomBase公司，开发出了第一门客户端脚本语言，专门用于表单的校验。命名为：c–后来更名为ScriptEase 2.1995年，Netscape(网景)公司，开发了
JavaWeb_JavaScript 防止javascript注入
迎难而上
01-06 2503
需要进行两个步骤， 1.在新增的时候将""符号转换为转移字符串； 2.获取数据的时候使用JSTL中的 1.在新增的时候将""符号转换为转移字符串； 示例： // 防止javascript 注入： String strings ="test"; // System.out.println(strings.replace("",">")); public class St
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7785
JavaScript的使用
JavaWeb之JavaScript
qq_46130027的博客
12-17 2637
!// 定义一个空数组 // alert(arr.length);// 0 // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。// undefined // 数组的遍历 for(var i = 0;i ++) {
Javaweb_Vue
m0_64837052的博客
07-21 48
【代码】黑马2023 Javaweb_Vue。
JavaWeb_Vue
wanananhh的博客
10-25 157
【代码】JavaWeb_Vue。基本使用
JavaWeb JavaScript
weixin_65637841的博客
07-19 6452
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 ......
3.3 JavaWeb-JavaScript
热门推荐
老李头喽博客
11-19 2万+
JavaScript与Java的关系可谓是，雷锋与雷峰塔——毫无关系。JavaScript 是 Web 的编程语言，JavaScript是一种面向对象思想的脚本语言，通过JavaScript可以实现用户与静态网页之间的交互，也称为动态网页技术（JavaScript+HTML+CSS）。HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为JavaScript 对象 | 菜鸟教程。
尚硅谷JavaWeb_2020idea_王振国_学习笔记
weixin_41677899的博客
06-17 2856
项目是书城项目，感觉不太完整。在讲各种web技术的同时，顺带做下项目。该项目没有使用SSM、SSH等框架，Javaweb三层框架都是直接写的代码。大致熟悉一下流程即可，在真正开发的时候会用框架来做。 B站地址：https://www.bilibili.com/video/BV1Y7411K7zz?p=1 网盘视频和相应资料文件地址：尚硅谷公众号回复 Java 获取。在第一个Java基础文件夹中，找尚硅谷JavaWeb_2020idea新版。 前置知识：Java入门、数据库和JDBC。同样方式获取资料。
wowo_javaweb_
09-30
《构建JavaWeb团购网站——以“wowo_javaweb_”为例》 在IT行业中，JavaWeb技术因其强大的功能和广泛的应用而备受青睐。本文将深入探讨如何使用JavaWeb技术构建一个类似“窝窝团”的团购网站。我们将从整体架构、...
webapps_javaweb_
10-04
此外，它还可能包含静态资源（如HTML、CSS、JavaScript文件）、图片和其他公共资源。 2. **myapp** - 这可能是一个自定义的应用程序目录，包含了该Java Web项目的所有源代码、资源和配置文件。在这个目录下，我们...
book_javaweb_
10-01
9. CSS和JavaScript：为了提供良好的用户体验，登录页面通常会使用CSS来控制样式，JavaScript进行前端验证，比如检查输入是否为空，密码是否符合复杂度要求等。 总的来说，“book_javaweb_”可能包含上述所有知识点...
ajax_javaweb_
10-02
**Ajax技术详解与JavaWeb应用** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 278
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 343
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 285
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 415
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
javaweb和javascript的区别
03-17
JavaWeb是基于Java语言的Web开发技术，主要用于服务器端的网络应用程序的开发，它可以利用Java语言的特性和优势来开发和维护大型、高性能的Web...简单来说，JavaWeb是运行在服务器端的，而JavaScript是运行在客户端的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值