当前位置：首页 > news >正文

JavaScript使用

news 2025/8/30 19:05:39

文章目录

一、JavaScript简介
二、JavaScript引入方式
- 1、内部脚本
- 2、外部脚本
三、JavaScript基础语法
- 1、书写语法&输出语句
- 2、变量&数据类型
- 3、运算符
- 4、流程控制语句&函数
四、JavaScript对象
- 1、Array
- 2、String
- 3、自定义对象
五、BOM
- 1、Window
- 2、History
- 3、Location
六、DOM
- 1、获取Element对象
- 2、常见HTML Element对象的使用
七、事件监听
- 1、事件绑定
- 2、常见事件
八、案例：表单验证
九、正则表达式

一、JavaScript简介

在这里插入图片描述

二、JavaScript引入方式

在这里插入图片描述

1、内部脚本

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>alert("Helo js")
</script></body></html>

2、外部脚本

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script src="../js/demo.js"></script></body></html>

alert("Hello js")

三、JavaScript基础语法

1、书写语法&输出语句

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>window.alert("Hello js1");//写入警告框document.write("Hello js2");//写入html页面console.log("Hello js3");//写入浏览器控制台
</script></body></html>

2、变量&数据类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// var test = 20;// test = "张三";// alert(test);/*var:1、作用域:全局变量2、变量可以重复定义*/{var age = 18;//var age = 20;}alert(age);const  PI =3.14;
</script></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//numbervar age = 20;var price = 99.8;alert(typeof age);alert(typeof price);//Stringvar ch = 'a';var name = '张三';var addr = "北京";alert(typeof ch);alert(typeof name);alert(typeof addr);//booleanvar flag1 = true;var flag2 = false;alert(typeof flag1);alert(typeof flag2);//nullvar obj = null;alert(typeof obj);//object//underfinedvar a;alert(typeof a);
</script></body>
</html>

3、运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>/*==:1、判断类型是否一样，如果不一样，则进行类型转换2、再去比较值===:全等于1、判断类型是否一样，如果不一样，直接返回false2、再去比较值*/var age1 = 18;var age2 = '18';//alert(age1 == age2);//truealert(age1 === age2);//false/*类型转换：*其他类型转换为number：1、String：按照字符串的字面值，转换为数字.如果字面值不是数字，则转为NaN。一般使用parseInt2、bollean：true 转为1， false 转为0*其他类型转换为boolean：1、number:0和NaN转化为false，其他数字转换为true2、String:空字符串转为false，其他字符串转为true3、null:false4、undefined:false*/// var str = +'aaa';var str = +'20';alert(parseInt(str) + 1);var flag = +true;alert(flag);var flag = 0;var flag = 'asd';if(flag){alert("转化为ture");}else {alert("转换为false");}var str = 'asd';//健壮性判断//if (str != null && str.length > 0)if(str){alert("转化为ture");}else {alert("转换为false");}
</script></body>
</html>

在这里插入图片描述

4、流程控制语句&函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//1、ifvar count = 3;if (count == 3) {alert(count);}//2、switchvar num = 3;switch (num) {case 1: {alert("星期一");break;}case 2: {alert("星期二");break;}case 3: {alert("星期三");break;}case 4: {alert("星期四");break;}case 5: {alert("星期五");break;}case 6: {alert("星期六");break;}case 7: {alert("星期日");break;}default:{alert("信息有误");break;}}//3、forvar sum = 0;for (let i = 1; i <= 100; i++){sum += 1;}alert(sum);//4、whilevar  i = 1;while (i <= 100){sum += 1;i++;}alert(sum);
</script></body>
</html>

在这里插入图片描述

<!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(1, 2);alert(result);var add = function (a, b) {return a + b;}var result = add(1, 2);alert(result);</script>
</body>
</html>

四、JavaScript对象

1、Array

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//方式一var arr = new Array(1,2.3);alert(arr);//方式二var arr2 = [1,2,3];alert(arr2);//访问arr[0] = 10;alert(arr);//特点:JavaScript数组相当于Java中集合，变长变类型//变长var arr3 = [1,2,3,];arr3[10] = 10;alert(arr3[10]);alert(arr3[9]);//变类型arr3[5] = "你好";alert(arr3[5]);alert(arr3)//属性：length:数组中元素的个数var arr4 = [1,2,3];for (let i = 0; i < arr4.length; i++) {alert(arr4[i]);}//方法//push:添加方法var arr5 = [1,2,3];arr5.push(10);//splice:删除元素arr5.splice(0,1);alert(arr5);
</script>
</body>
</html>

2、String

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//方式一var str1 = new String("abc");//方式二var str2 = "abc";var str3 = 'abc';//lengthalert(str3.length);//trim():去除字符串前后两端的空白字符var str4 = '    abc ';alert(1 + str4.trim() + 1);
</script>
</body>
</html>

3、自定义对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var person = {name : "张三",age : 18,eat : function () {alert("吃饭")}};alert(person.age);alert(person.age);person.eat();
</script>
</body>
</html>

五、BOM

在这里插入图片描述

1、Window

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//alertwindow.alert("abc");alert("bbb");//confirm,点击确定按钮，返回true，点击取消按钮，返回falsevar  flag = confirm("删除？");if (flag){//逻辑删除}//定时器/*setTimeout:(function,毫秒值)：在一定时间间隔后执行一个function，只执行一次setInterval:(function,毫秒值)：在一定时间间隔后执行一个function，循环执行*/setTimeout(function (){alert("你好");},3000);setInterval(function (){alert("你好");},3000);
</script>
</body>
</html>

2、History

在这里插入图片描述

3、Location

在这里插入图片描述

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

六、DOM

在这里插入图片描述

1、获取Element对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="light" src="../img/off.gif"><br><div class="cls">传智教育</div><br>
<div class="cls">黑马程序员</div><br><input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br><script>//1、getElementById:根据id属性值获取，返回一个Element对象var img = document.getElementById("light");alert(img);//2、getElementsByTagName:根据标签名称获取，返回Element对象数组var divs = document.getElementsByTagName("div");alert(divs.length);for (let i = 0; i < divs.length; i++) {alert(divs[i]);}//3、getElementsByName:根据name属性值获取，返回Element对象数组var hobbys = document.getElementsByName("hobby");for (let i = 0; i < hobbys.length; i++) {alert(hobbys[i]);}//4、getElementsByClassName:根据class属性值获取，返回Element对象数组var clss = document.getElementsByClassName("cls");for (let i = 0; i < clss.length; i++) {alert(clss[i]);}
</script></body>
</html>

2、常见HTML Element对象的使用

 var divs = document.getElementsByTagName("div");/*style:设置元素css样式innerHTML:设置元素内容*/for (let i = 0; i < divs.length; i++) {divs[i].style.color = '红色';divs[i].innerHTML = '你好';}

 var hobbys = document.getElementsByName("hobby");for (let i = 0; i < hobbys.length; i++) {hobbys[i].checked = true;}

在这里插入图片描述

七、事件监听

在这里插入图片描述

1、事件绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn">
<script>function on(){alert("我被点了");}document.getElementById("btn").onclick = function (){alert("我被点了");}
</script>
</body>
</html>

2、常见事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form id="register" action="#"><input type="text" name="username" /><input type="submit" value="提交">
</form><script>document.getElementById("register").onsubmit = function () {//onsubmit 返回true，则表单会被提交，返回false，则表单不会提交return true;}
</script>
</body>
</html>

八、案例：表单验证

在这里插入图片描述

九、正则表达式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//规则: 单词字符：6~12var reg = /^\w{6,12}$/;var str = 'asd';var flag = reg.test(str);alert(flag);</script>
</body>
</html>

JavaScript使用

文章目录一、JavaScript简介二、JavaScript引入方式1、内部脚本2、外部脚本三、JavaScript基础语法1、书写语法&输出语句2、变量&数据类型3、运算符4、流程控制语句&函数四、JavaScript对象1、Array2、String3、自定义对象五、BOM1、Window2、History3、Locati…...

编程日记 2024/3/11 15:46:42

区块链和人工智能的关系以及经典案例

目录 1.区块链与人工智能的关系 2.应用案例：基于区块链的医疗数据共享平台 2.1背景 2.2方案 2.3优势 2.4挑战区块链技术和人工智能（AI）是两种不同的技术，但它们之间存在着互补关系。区块链技术提供了一种安全、透明、去中心…...

编程日记 2024/3/11 15:44:40

【深度学习笔记】优化算法——Adam算法

Adam算法 🏷sec_adam 本章我们已经学习了许多有效优化的技术。在本节讨论之前，我们先详细回顾一下这些技术： 在 :numref:sec_sgd中，我们学习了：随机梯度下降在解决优化问题时比梯度下降更有效。在 :numref:sec_min…...

编程日记 2024/3/11 15:43:39

sql注入

注入的介绍将不受信任的数据作为命令或查询的一部分发送到解析器时，会产生诸如SQL注入、NoSQL注入、OS 注入和LDAP注入的注入缺陷。攻击者的恶意数据可以诱使解析器在没有适当授权的情况下执行非预期命令或访问数据。注入能导致数据丢失、破坏或泄露给无授…...

编程日记 2024/3/11 15:41:36

Leetcode ： 1137. 高度检查器

学校打算为全体学生拍一张年度纪念照。根据要求，学生需要按照非递减的高度顺序排成一行。排序后的高度情况用整数数组 expected 表示，其中 expected[i] 是预计排在这一行中第 i 位的学生的高度（下标从 0 开始）。给你一个整数…...

编程日记 2024/3/11 15:40:35

Mybatis从入门到CRUD到分页到日志到Lombok到动态SQL再到缓存

Mybatis 入门 1.导入maven依赖 <dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>x.x.x</version> </dependency>2.配置核心文件 <?xml version"1.0" encoding"U…...

编程日记 2024/3/11 15:35:30

四节点/八节点四边形单元悬臂梁Matlab有限元编程 | 平面单元 | Matlab源码 | 理论文本

专栏导读作者简介：工学博士，高级工程师，专注于工业软件算法研究本文已收录于专栏：《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现，并提供所有案例完整源码；2.单元…...

编程日记 2024/3/11 15:33:28

机器视觉学习（一）—— 认识OpenCV、安装OpenCV

目录一、认识OpenCV 二、通过pip工具安装OpenCV 三、PyCharm安装OpenCV 一、认识OpenCV OpenCV（Open Source Computer Vision Library，开源计算机视觉库）是一个跨平台的计算机视觉库，最初由威尔斯理工学院的Gary Bradski于199…...

编程日记 2024/3/11 15:31:25

web3 DePIN赛道之OORT

文章目录什么是DePIN什么是oort背景：去中心化云计算场景团队OORT AIOORT StorageOORT Compute 参考什么是DePIN DePIN是Decentralized Physical Infrastructure Networks的简称,中文意思就是去中心化的网络硬件基础设施,是利用区块链技术和代币奖励来调动分散在世…...

编程日记 2024/3/11 15:23:16

QString 与字符编码 QTextCodec

为了理解编码，我们要先区分文件中字符编码和程序运行时字符编码的区别。文件中字符编码顾名思义就是文字保存在文件中的采用的字符编码方式，可以在IDE中看到程序运行时字符编码，是编译器读取从源文件中读取到字符串后再按要求做的一次…...

编程日记 2024/3/11 15:22:15

【STA】SRAM / DDR SDRAM 接口时序约束学习记录

1. SRAM接口相比于DDR SDRAM，SRAM接口数据与控制信号共享同一时钟。在用户逻辑（这里记作DUA（Design Under Analysis））将数据写到SRAM中去的写周期中，数据和地址从DUA传送到SRAM中，并都在有效时…...

编程日记 2024/3/11 15:21:13

Git的基础使用

几条铁令！！！！！ 切换分支前先提交本地的修改代码及时提交，提交过就不会丢遇到任何问题都不要删除文件目录，第一时间找人请教push前和merge前一定要pull保证代码为最新的，有冲突解决冲…...

编程日记 2024/3/11 15:18:11

贪吃蛇（C语言实现）

贪食蛇（也叫贪吃蛇）是一款经典的小游戏。 —————————————————————— 本博客实现使用C语言在Windows环境的控制台中模拟实现贪吃蛇小游戏。实行的基本功能： • 贪吃蛇地图的绘制 • 蛇吃食物的功能（上、…...

编程日记 2024/3/11 15:17:09

使用 mysqldump 迁移 MySQL 表 OceanBase

使用 mysqldump 迁移 MySQL 表 OceanBase 一、什么是mysqldump二、使用mysqldump导出MySQL数据三、将数据导入到OceanBase四、注意一、什么是mysqldump mysqldump 是 MySQL 数据库管理系统中的一个工具，用于将数据库中的数据导出为文本文件。它可以将整个数据库、…...

编程日记 2024/3/11 15:16:08

谷粒学院--在线教育实战项目【一】

谷粒学院--在线教育实战项目【一】一、项目概述1.1.项目来源1.2.功能简介1.3.技术架构二、Mybatis-Plus概述2.1.简介2.2.特性三、Mybatis-Plus入门3.1.创建数据库3.2.创建 User 表3.3.初始化一个SpringBoot工程3.4.在Pom文件中引入SpringBoot和Mybatis-Plus相关依赖3.5.第一…...

编程日记 2024/3/11 15:15:07

Power Design【数据库设计】

Power Design【数据库设计】前言版权推荐Power Design【数据库设计】推荐11. PowerDesigner的使用11.1 开始界面11.2 概念数据模型11.3 物理数据模型11.4 概念模型转为物理模型11.5 物理模型转为概念模型11.6 物理模型导出SQL语句补充:sqlyog导入sql文件最后前言 2024-3-11…...

编程日记 2024/3/11 15:14:05

Spring Boot中Excel数据导入导出的高效实现

🌟 前言欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...

编程日记 2024/3/11 15:12:02

采购代购系统独立站，接口采集商品上货

采购代购系统独立站的建设与商品上货接口的采集是一个综合性的项目，涉及前端开发、后端开发、数据库设计以及API接口的对接等多个环节。以下是一个大致的步骤和考虑因素： 一、系统规划与需求分析明确业务需求：确定代购系统的核心功能&…...

编程日记 2024/3/11 15:10:00

Redis精讲

redis持久化 RDB方式 Redis Database Backup file (redis数据备份文件), 也被叫做redis数据快照. 简单来说就是把内存中的所有数据记录到磁盘中. 快照文件称为RDB文件, 默认是保存在当前运行目录. [rootcentos-zyw ~]# docker exec -it redis redis-cli 127.0.0.1:6379> sav…...

编程日记 2024/3/11 15:07:58

ELFK 分布式日志收集系统

ELFK的组成： Elasticsearch: 它是一个分布式的搜索和分析引擎，它可以用来存储和索引大量的日志数据，并提供强大的搜索和分析功能。 （java语言开发，）logstash: 是一个用于日志收集，处理和传输的…...

编程日记 2024/3/11 15:06:57

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/8/30 17:32:07

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/6/17 10:46:36

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/8/25 19:36:37

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2025/8/26 15:17:31

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/8/2 0:44:23

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/8/4 5:11:38

Oracle11g安装包

Oracle 11g安装包适用于windows系统，64位下载路径 oracle 11g 安装包...

编程新知 2025/7/30 2:41:23

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落，一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延，滚滚浓烟弥漫开来，周围群众的生命财产安全受到严重威胁。就在这千钧一发之际，消防救援队伍迅速行动，而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/8/22 6:28:01

文章目录

一、JavaScript简介

二、JavaScript引入方式

1、内部脚本

2、外部脚本

三、JavaScript基础语法

1、书写语法&输出语句

2、变量&数据类型

3、运算符

4、流程控制语句&函数

四、JavaScript对象

1、Array

2、String

3、自定义对象

五、BOM

1、Window

2、History

3、Location

六、DOM

1、获取Element对象

2、常见HTML Element对象的使用

七、事件监听

1、事件绑定

2、常见事件

八、案例：表单验证

九、正则表达式

相关文章：