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

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

news 文章来源：https://blog.csdn.net/ormstq/article/details/136072976 2025/5/24 21:39:41

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

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

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

目录

前言

数据类型

数据类型-字符型

数据类型-数值型

数据类型-布尔型

数据类型-其它类型

变量

转义字符

运算符和表达式

算术运算符和表达式

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

位运算符和表达式

条件运算符和表达式

课后练习

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

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

网页标题：用户登录验证

总结

前言

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

学习Android的第十三天

目录 Android TextClock 文本时钟控件 TextClock 控件主要属性和方法 简单的 TextClock 参考文档 Android AnalogClock 控件 AnalogClock 属性 Android Chronometer 计时器 Chronometer 属性 Chronometer 主要方法 范例&#xff1a; 完整的计时器 范例&#xff1a; …...

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

【开源】SpringBoot框架开发学校热点新闻推送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新闻留言模块2.4 新闻评论模块2.5 新闻收藏模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 新闻类型表3.2.2 新闻表3.2.3 新闻留言表3.2.4 新闻评论表3.2.5 新闻收藏表 四、系统展…...

编程日记 2024/2/18 9:17:12

代码随想录刷题笔记 DAY 28 | 复原 IP 地址 No.93 | 子集 No.78 | 子集 II No.90

文章目录 Day 2801. 复原 IP 地址&#xff08;No. 93&#xff09;1.1 题目1.2 笔记1.3 代码 02. 子集&#xff08;No. 78&#xff09;2.1 题目2.2 笔记2.3 代码 03. 子集 II&#xff08;No. 90&#xff09;3.1 题目3.2 笔记3.3 代码 Day 28 01. 复原 IP 地址&#xff08;No. 9…...

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

LeetCode LCR 085. 括号生成

题目链接https://leetcode.cn/problems/IDBivT/description/ 正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 class Solution {public List<String> generateParenthesis(int n) {List<String>…...

编程日记 2024/2/18 9:13:08

django定时任务(django-crontab)

目录 一&#xff1a;安装django-crontab&#xff1a; 二&#xff1a;添加django_crontab到你的INSTALLED_APPS设置&#xff1a; 三&#xff1a;运行crontab命令来创建或更新cron作业&#xff1a; 四&#xff1a;定义你的cron作业 五&#xff1a;创建你的管理命令&#xff…...

编程日记 2024/2/18 9:12:07

【教3妹学编程-算法题】输入单词需要的最少按键次数 II

2哥 : 叮铃铃&#xff0c;3妹&#xff0c;准备复工了啊&#xff0c;过年干嘛呢&#xff0c;是不是逛吃逛吃&#xff0c;有没有长胖呢。 3妹&#xff1a;切&#xff0c;不想上班&#xff0c;假期能不能重来一遍啊&#xff0c;虽然在家我妈张罗着要给我相亲呢。可是在家还是很好的…...

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

突破编程_C++_高级教程（多线程编程实例）

1 生产者-消费者模型 生产者-消费者模型是一种多线程协作的设计模式&#xff0c;它主要用于处理生产数据和消费数据的过程。在这个模型中&#xff0c;存在两类线程&#xff1a;生产者线程和消费者线程。生产者线程负责生产数据&#xff0c;并将其放入一个共享的数据缓冲区&…...

编程日记 2024/2/18 9:09:05

精读《Function Component 入门》

1. 引言 如果你在使用 React 16&#xff0c;可以尝试 Function Component 风格&#xff0c;享受更大的灵活性。但在尝试之前&#xff0c;最好先阅读本文&#xff0c;对 Function Component 的思维模式有一个初步认识&#xff0c;防止因思维模式不同步造成的困扰。 2. 精读 什…...

编程日记 2024/2/18 9:06:02

类的构造方法

在类中&#xff0c;出成员方法外&#xff0c;还存在一种特殊类型的方法&#xff0c;那就是构造方法。构造方法是一个与类同名的方法&#xff0c;对象的创建就是通过构造方法完成的。每个类实例化一个对象时&#xff0c;类都会自动调用构造方法。 构造方法的特点&#xff1a; 构…...

编程日记 2024/2/18 9:05:00

ChatGPT和LLM

ChatGPT和LLM&#xff08;大型语言模型&#xff09;之间存在密切的关系。 首先&#xff0c;LLM是一个更为抽象的概念&#xff0c;它包含了各种自然语言处理任务中使用的各种深度学习模型结构。这些模型通过建立深层神经网络&#xff0c;根据已有的大量文本数据进行文本自动生成…...

编程日记 2024/2/18 8:59:56