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

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

news 2025/12/21 13:05:26

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

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

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

目录

前言

数据类型

数据类型-字符型

数据类型-数值型

数据类型-布尔型

数据类型-其它类型

变量

转义字符

运算符和表达式

算术运算符和表达式

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

位运算符和表达式

条件运算符和表达式

课后练习

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

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

网页标题：用户登录验证

总结

前言

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/12/20 13:09:58

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/12/19 21:51:58

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/12/18 3:35:57

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/21 9:09:26

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/12/14 1:11:38

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/12/18 20:15:17

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/12/10 23:18:38