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

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

news 2026/3/28 8:51:02

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

数据类型

数据类型-字符型

数据类型-数值型

数据类型-布尔型

数据类型-其它类型

变量

转义字符

运算符和表达式

算术运算符和表达式

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

位运算符和表达式

条件运算符和表达式

课后练习

网页标题：事件处理程序返回值的应用

网页标题：表单控件焦点、表单提交、重置事件的应用

网页标题：用户登录验证

总结

前言

Web 前端开发工程师应掌握以下内容

理解 JavaScript 程序的概念与作用；
掌握 JavaScript 标识符和变量的概念及使用方法；
掌握 JavaScript 常用运算符和表达式概念；
掌握 JavaScript 中顺序、分支、循环等 3 种程序控制结构语法；
掌握 JavaScript 函数的定义方法，并学会使用；
学会综合运用 JavaScript 设计具有动态、交互功能的网页。

数据类型

       数据类型是每一种计算机语言中的重要基础，JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。

数据类型-字符型

       字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、‘你好！’、“学习‘语言’”。

l在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。

    如：“学习不是一件‘容易”的事件’(×，交叉错误)。

数据类型-数值型

2.数值型：是JavaScript中最基本的数据类型之一，分为整型、浮点型、内部常量以及特殊值。

l 整型数值即整数，例如 100 、 -3500 、 0 等都是整数。 整数表示方法有十进制表示、八进制和十六进制的方式表示 。

    使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。

    使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。

浮点数，例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.5×1015。

内部常量：Math.E(自然对数的底数e)、Math.PI等。

特殊值：Infinity（∞）、NaN-Not a Number。

数据类型-布尔型

3.Boolean（布尔型）是一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。

 JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。

数据类型-其它类型

4.Null : null,表示空,不是0，0是有值的。

5.Undefined：变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:false） 。

6.Object:对象也是JS的重要组成部分，如date、window、document等，在后面介绍。

    数据类型之间可以通过函数进行转换。

转换函数如下：

Number(value): 把值转换成数字（整型或浮点数）
String(value): 把值转换成字符串
Boolean(value): 把值转换成 Boolean 类型

变量

变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。

格式： var 变量名 [=初值][,变量名[=初值] …] ；

   var作用：声明或创建变量。

   具有良好编程习惯的程序员应该“先声明变量再使用”。例如：

      var userName =““ ;

      var x=0，y=2,str1=“欢迎你学习JS”; 

      var status = true;

      var a,b,c;

      str_name=“张为民";   //向未声明的变量赋值

转义字符

       如果在字符串中涉及到一些特殊字符如“\”、“"”、'”等，这些字符无法直接使用，需要采用转义字符的方式。

转义字符

代表含义

转义字符

代表含义

\b

退格符

\t

水平制表符

\f

换页符

\'

单引号

\n

换行符

\"

双引号

\r

回车符

\\

反斜线

运算符和表达式

JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。

根据操作数的个数，将运算符分为一元运算符、二元运算符和三元运算符。

       由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。

       对应的表达式包括：算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。

算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。

双元运算符（ op1 operator op2 ）
单元运算符（op operator 或 operator op

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

基本语法：

简单赋值运算： < 变量 > = < 变量 > operator < 表达式 >
复合赋值运算： < 变量 > operator = < 表达式 >

位运算符和表达式

      位运算符是对二进制表示的整数进行按位操作的运算符。

      如果操作数是十进制或者其他进制表示的整数，运算前先将这些整数转换成32位的二进制数字，如果操作数无法转换成32位的二进制数表示，位运算的结果为NaN。

      位运算符：&-按位与；~ -按位非；|-按位或；^-按位异或

 其中位运算~， NOT 实质上是对数字求负，然后减 1。

条件运算符和表达式

条件运算符是一个3元运算符，也就是该运算涉及3个操作数。

l 基本语法：

变量=布尔表达式 ? 真值表达式 : 假值表达式

var variable = boolean_expression ? true_value : false_value;

例如：

      var v1=300,v2=-100;

      var max = (v1 >v2) ? v1 : v2;   //由于v1>v2，条件为真值，所以将真值表达式v1的值赋给max，max的值为300 ,比用if语句来得简单些。

课后练习

网页标题：事件处理程序返回值的应用

  • 网页标题：事件处理程序返回值的应用
  • 录入如下代码，熟悉提交事件处理程序返回值的使用

  • 创建一个网页“simple.html”，该网页的显示内容自定。
  • 在浏览器中打开“11-7.html”网页，在文本框中输入姓名单击提交按钮，则首先弹出警示框，单击警示框的确定按钮之后，即打开“simple.html”网页。若不输入任何值单击提交按钮，则弹出警示框，之后不会打开“simple.html”，运行效果如下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>事件处理程序返回值的应用</title><script>function showName(){if(document.form1.name1.value==""){alert("没有输入内容！");return false;}else{alert("欢迎你！"+document.form1.name1.value);return true;}}</script>
</head>
<body><h4>事件处理程序返回值的应用</h4><form name="form1" action="simple.html" onSubmit="return showName();">姓名：<input type="text" name="name1"><input type="submit" value="提交"></form>
</body>
</html>

网页标题：表单控件焦点、表单提交、重置事件的应用

  • 网页标题：表单控件焦点、表单提交、重置事件的应用
  • 设计如下图所示表单，当输入用户名的文本框获得焦点时，文本框自动显示admin，当该文本框失去焦点时，文本框中的字体变为蓝色
  • 单击提交按钮后显示告警框，具体显示信息如下图所示，单击确定按钮后，打开action中的页面。
  • 单击重置按钮，弹出如图所示的告警框：

    • 具体实现代码可参照下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件焦点、表单提交、重置事件的应用</title>
<style>
    input{font-family:Tahoma, Geneva, sans-serif;}
    fieldset{width:300px; height:150px;}
    form{text-align:center;}
</style>
<script>
    function $(id){return document.getElementById(id);}
    function submitTest()
    {//表单的提交事件触发的功能
        var msg="用户名："+$("input1").value;
        msg+="\n密码："+$("input2").value
        alert(msg);
    }
    function resetTest()
    {//表单的重置事件
        alert("开始清空数据！");
    }
    function getFocus(){$("input1").value="admin";} //表单控件获得焦点事件触发的功能
    function loseFocus(){$("input1").style.color="#00f"; } //表单控件失去焦点事件触发的功能
</script>
</head>
<body>
<form name="form1" action="simple.html" method="post" onSubmit="submitTest()" onReset="resetTest()">
    <fieldset>
        <legend>表单数据提交</legend>
        <br><label>用户名：</label><input type="text" id="input1" name="input1" onFocus="getFocus();" onBlur="loseFocus();">
        <br><br><label>密&emsp;码：</label><input type="password" id="input2" name="input2">
        <br><br><input type="submit" value="提交">
        <input type="reset" value="重置">
    </fieldset>
</form>
</body>
</html>

网页标题：用户登录验证

  • 网页标题：用户登录验证
  • 对上题中的功能进行修改：仅当输入用户名admin和密码123时，单击提交按钮时显示登录成功的告警框，并打开action中指定的页面（该页面的内容自行设置），若输入的用户名或密码不对，则弹出如下图所示的告警框，提示用户重新输入，并清空文本框中的内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交、重置事件的应用</title>
<style>input{font-family:Tahoma, Geneva, sans-serif;}fieldset{width:300px; height:150px;}form{text-align:center;}
</style>
<script>function $(id){return document.getElementById(id);}function submitTest(){if($("input1").value=="admin" && $("input2").value=="123"){alert("登录成功！"); return true;}else{alert("用户名或密码错误，请重新输入！");$("input1").value="";$("input2").value="";return false}}function resetTest(){alert("开始清空数据！");}
</script>
</head><body><form name="form1" action="loginindex.html" method="post" onSubmit="return submitTest()" onReset="resetTest()"><fieldset><legend>表单数据提交</legend><br><label>用户名：</label><input type="text" id="input1"><br><br><label>密&emsp;码：</label><input type="password" id="input2"><br><br><input type="submit" value="提交"><input type="reset" value="重置"></fieldset></form>
</body>
</html>

总结

    JavaScript是一种功能强大、使用简便的、具有安全性的客户端脚本语言。

    本章简要地介绍了JavaScript语言的历史和特点，详细讲解了JavaScript的标识符、变量、运算符和表达式、三种程序控制结构（包括顺序结构、分支结构和循环结构）及函数等相关知识。通过在HTML文档中嵌入JavaScript脚本语言，可以增强用户与网页之间的交互性，并在页面中实现各种特效，提高页面的观赏性。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

相关文章：

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…...

编程日记 2024/2/18 10:23:19

【Java】文件操作与IO

文件操作与IO Java中操作文件针对文件系统的操作File类概述字段构造方法方法及示例 文件内容的读写 —— 数据流Java提供的 “流” API文件流读写文件内容InputStream 示例读文件示例1&#xff1a;将文件完全读完的两种方式示例二&#xff1a;读取汉字 写文件谈谈 OutputStream…...

编程日记 2024/2/18 10:21:17

开关电源电路主要元器件基础知识详解

在学习电子电路过程中&#xff0c;电源我们无法绕开的一个重要部分&#xff0c;很多时候&#xff0c;故障就出现在电源部分&#xff0c;特别是开关电源。开关电源电路主要是由熔断器、热敏电阻器、互感滤波器、桥式整流电路、滤波电容器、开关振荡集成电路、开关变压器、光耦合…...

编程日记 2024/2/18 10:18:13

- 项目落地 - 《选择项目工具的方法论》

本文属于专栏《构建工业级QPS百万级服务》 提纲&#xff1a; 选择大概率能完成业务目标的工具选择最适合的工具制作最适合的工具 本文所说的项目工具&#xff0c;泛指业务软件开发&#xff0c;所依赖的第三方提供的成熟的资源。包括但不限于开发语言、编辑工具、编译工具、三方…...

编程日记 2024/2/18 10:17:11

美国突然致敬中本聪

作者&#xff1a;秦晋 有点看不懂美国的神操作。 2月16日&#xff0c;据《Bitcoin Magazine》报道&#xff0c;比特币的竞争对手、美国参议员伊丽莎白-沃伦对比特币的立场突然180度大转弯。由反对立场转为支持立场。让很多行业媒体出乎意料&#xff0c;甚至惊掉下巴。 报道称&a…...

编程日记 2024/2/18 10:15:09

精品springboot基于大数据的电脑主机硬件选购助手-可视化大屏

《[含文档PPT源码等]精品基于springboot基于大数据的电脑主机硬件选购助手[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&a…...

编程日记 2024/2/18 10:14:08

全量和已占用字符集 、字符串统计

题目描述&#xff1a; 全量和已占用字符集 、字符串统计&#xff08;分值100&#xff09; 给定两个字符集合&#xff0c;一个是全量字符集&#xff0c;一个是已占用字符集&#xff0c;已占用字符集中的字符不能再使用。 要求输出剩余可用字符集。 输入描述 输入一个字符串 一…...

编程日记 2024/2/18 10:12:05

什么是智慧公厕，智慧公厕有哪些功能

1.什么是智慧公厕&#xff1f; 随着智慧城市的快速发展&#xff0c;公共厕所作为城市基础设施的一部分&#xff0c;也在逐步升级转型。那么&#xff0c;什么是智慧公厕&#xff1f;智慧公厕作为智慧城市的重要组成部分&#xff0c;将公共厕所的建设、设计、使用、运营和管理等…...

编程日记 2024/2/18 10:09:03

给定n个结点m条边的简单无向图，判断该图是否存在鱼形状的子图：有一个环，其中有一个结点有另外两条边，连向不在环内的两个结点。若有，输出子图的连边

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e18 * 3, maxm 4e4 …...

编程日记 2024/2/18 10:03:58

深入理解lambda表达式

深入理解ASP.NET Core中的中间件和Lambda表达式 var builder WebApplication.CreateBuilder(args); var app builder.Build(); app.Use(async (context, next) > { // Add code before request. await next(context);// Add code after request.}); 这段C#代码是用于设…...

编程日记 2024/2/18 9:57:52

删除 Windows 设备和驱动器中的 WPS网盘、百度网盘等快捷图标

在安装诸如WPS软件、百度云盘、爱奇艺等客户端后&#xff0c;Windows 的“我的电脑”&#xff08;或“此电脑”&#xff09;中的“设备和驱动器”部分会出现对应的软件图标。这种情况被许多技术人员视为不必要的干扰&#xff0c;因此许多用户想要知道如何隐藏或删除这些图标。 …...

编程日记 2024/2/18 9:56:51

【深度学习：DICOM 注释工具】在 DICOM 注释工具中寻找的 7 个功能

【深度学习&#xff1a;DICOM 注释工具】在 DICOM 注释工具中寻找的 7 个功能 原生 DICOM 支持原生 3D 注释易于使用的界面DICOM 图像的自动注释质量控制功能审计跟踪SOC2 和 HIPAA 合规性 如果您尝试为医疗 AI 模型创建训练数据&#xff0c;您可能已经使用了免费的开源工具&am…...

编程日记 2024/2/18 9:54:48

Spring Boot与Kafka集成教程

当然可以&#xff0c;这里为您提供一个简化版的Spring Boot与Kafka集成教程&#xff1a; 新建Spring Boot项目 使用Spring Initializr或您喜欢的IDE&#xff08;如IntelliJ IDEA, Eclipse等&#xff09;新建一个Spring Boot项目。 添加依赖 在项目的pom.xml文件中&#xff0c;…...

编程日记 2024/2/18 9:53:47

基于飞腾ARM+FPGA国产化计算模块联合解决方案

联合解决方案概述 随着特殊领域电子信息系统对自主创新需求的日益提升&#xff0c;需不断开展国产抗恶劣环境计算整机及模块产 品的研制和升级。特殊领域电子信息系统的自主创新&#xff0c;是指依靠自身技术手段和安全机制&#xff0c;实现信息系统从硬 件到软件的自主研发…...

编程日记 2024/2/18 9:49:43

关于DVWA靶场Could not connect to the database service的几种解决办法

总的来说这个问题都是 config 配置文件没有修改正确 一般修改数据库的用户名和密码与 phpstudy 一致并且添加了 key 就能初始化成功的 但是我还遇到过另一种情况&#xff0c;修改了上面的东西依旧无法连接到数据库 Could not connect to the database service. Please check …...

编程日记 2024/2/18 9:47:41

已解决ModuleNotFoundError: No module named ‘paddle‘异常的正确解决方法，亲测有效！！！

已解决ModuleNotFoundError: No module named paddle异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 在人工智能和深度学习领域&#xff0c;PaddlePaddle是由百度发起的开源平台&#…...

编程日记 2024/2/18 9:45:39

并发编程之深入理解JVM并发三大特性

并发编程之深入理解JVM&并发三大特性 并发编程解决的问题 ​ 多线程同步&#xff08;一个线程需要等待另一个线程的结果&#xff0c;一个线程依赖于另一个线程&#xff09;&#xff0c;互斥&#xff08;一个资源只能一个线程使用&#xff09;&#xff0c;分工&#xff08…...

编程日记 2024/2/18 9:35:30

helm部署gitlab-runner问题解决

关于.gitlab-ci.yml中build镜像时&#xff0c;docker守护进程未启动错误 问题截图 解决方法 conf.toml添加 [[runners.kubernetes.volumes.host_path]]name "docker"mount_path "/var/run/docker.sock"read_only falsehost_path "/var/run/dock…...

编程日记 2024/2/18 9:34:29

[嵌入式系统-28]：开源的虚拟机监视器和仿真器：QEMU（Quick EMUlator）与VirtualBox、VMware Workstation的比较

目录 一、QEMU概述 1.1 QEMU架构 1.2 QEMU概述 1.3 什么时候需要QEMU 1.4 QEMU两种操作模式 1.5 QEMU模拟多种CPU架构 二、QEMU与其他虚拟机的比较 2.1 常见的虚拟化技术 2.1 Linux KVM 2.2 Windows VirtualBox 2.3 Windows VMware workstation 三、VirtualBox、VM…...

编程日记 2024/2/18 9:29:24

计算机组成原理：存储系统【三】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;计算机组成与原理基础 &#x1f680;1 只读存储器ROM✈️1.1 总览✈️1.2 各种ROM✈️1.3 计算机内部重要的ROM✈️1.4 总结 &#x1f680;2 主存储器与CPU的连接&#x1f6e9;️2.1 总览&…...

编程日记 2024/2/18 9:21:16

别再搞混了！AUTOSAR通信栈里，PduR和CanTp到底为谁打工？一个DCM诊断请求的完整旅程

AUTOSAR通信栈揭秘&#xff1a;诊断请求如何穿越PduR与CanTp的迷宫 在汽车电子系统的开发中&#xff0c;诊断通信就像车辆的"健康检查系统"&#xff0c;而AUTOSAR架构中的通信栈则是确保这些诊断命令能够准确传达的神经网络。许多工程师第一次接触AUTOSAR通信栈时&am…...

编程新知 2026/3/28 7:08:55

STM32主从定时器实战：用CubeMX搞定PWM移相+动态调占空比（附G474配置）

STM32主从定时器实战&#xff1a;CubeMX图形化配置PWM移相与动态调占空比 在电力电子和电机控制领域&#xff0c;精确的PWM信号控制是系统高效运行的关键。对于需要多路相位可调PWM的应用场景&#xff0c;如交错并联DC/DC变换器、三相逆变器等&#xff0c;传统的手动寄存器配置…...

编程新知 2026/3/28 6:58:53

从‘社交网络’到‘路径规划’：邻接表DFS在5个真实场景中的实战应用

从‘社交网络’到‘路径规划’&#xff1a;邻接表DFS在5个真实场景中的实战应用 邻接表和深度优先搜索&#xff08;DFS&#xff09;这对黄金组合&#xff0c;远不止是算法教材里的抽象概念。当它们走出理论课本&#xff0c;进入真实世界的复杂系统时&#xff0c;展现出的问题解…...

编程新知 2026/3/28 6:38:48

Materials Studio8.0在CentOS7.9环境下的安装与配置指南

1. 环境准备与系统检查 在CentOS 7.9上安装Materials Studio 8.0之前&#xff0c;我们需要确保系统环境满足最低要求。我遇到过不少因为环境配置不当导致的安装失败案例&#xff0c;这里分享几个关键检查点&#xff1a; 首先检查主机名是否包含特殊字符。Materials Studio对主机…...

编程新知 2026/3/28 6:26:41

Granite TimeSeries FlowState R1电商销量预测实战：Vue前端可视化大屏

Granite TimeSeries FlowState R1电商销量预测实战&#xff1a;Vue前端可视化大屏 最近和几个做电商的朋友聊天&#xff0c;他们都在头疼同一个问题&#xff1a;备货。备多了怕压库存&#xff0c;备少了又怕错过销售高峰&#xff0c;眼睁睁看着流量来了却没货可发。传统的经验…...

编程新知 2026/3/28 6:24:37

StructBERT中文Large模型技术白皮书精读：结构化预训练策略深度解读

StructBERT中文Large模型技术白皮书精读&#xff1a;结构化预训练策略深度解读 1. 项目概述与核心价值 StructBERT是由阿里达摩院开发的中文预训练语言模型&#xff0c;它在经典BERT架构基础上引入了结构化预训练策略&#xff0c;显著提升了中文语言理解能力。这个模型特别针…...

编程新知 2026/3/28 5:00:30

Webflux fromXXX对比

Mono.fromFuture和Mono.fromSupplier 刚开始尝试使用 Spring WebFlux 的时候&#xff0c;很多人都会使用 Mono.fromFuture() 将异步请求转成 Mono 对象&#xff0c;或者 Mono.fromSupplier() 将请求转成 MOno 对象&#xff0c;这两种方式在响应式编程 中都是不建议的&#xff0…...

编程新知 2026/3/28 4:52:06

双阶段目标检测算法演进：从R-CNN到Mask R-CNN的技术突破与应用实践

1. 双阶段目标检测算法概述 目标检测是计算机视觉领域的核心任务之一&#xff0c;它不仅要识别图像中的物体类别&#xff0c;还要精确定位物体的位置。在众多目标检测算法中&#xff0c;双阶段检测算法因其高精度特性&#xff0c;一直是工业界和学术界的研究热点。这类算法的典…...

编程新知 2026/3/28 3:49:47

Python原生AOT编译到底稳不稳？我们压测了7类生产负载：高并发API、实时流处理、边缘AI推理——结果出乎意料（附完整benchmark报告）

第一章&#xff1a;Python原生AOT编译方案2026实战案例全景概览Python原生AOT&#xff08;Ahead-of-Time&#xff09;编译在2026年已进入工程化落地深水区&#xff0c;主流方案如Nuitka 2.0、PyO3 Rust AOT Pipeline、以及新兴的CPython官方实验分支cpython-aot&#xff0c;均…...

编程新知 2026/3/28 3:21:20

Display Driver Uninstaller深度清理实战指南

Display Driver Uninstaller深度清理实战指南 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers-uninstaller 当你遭遇游戏帧…...

编程新知 2026/3/28 2:51:10