JS中的变量和数据类型及用户输入详解

news/2024/5/17 15:34:50

源码

variate.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//声明变量var num ;//为变量赋值num = 123 ;//使用变量alert(num) ;//重新赋值num = 456 ;alert(num)</script>
</body>
</html>data-type.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var num = 123; //1.数值型 numberconsole.log(typeof(num));//2 字符串型 stringvar str = '你好'; console.log(typeof(str));var str2 = '123';console.log(typeof(str2));//3 布尔型 booleanvar bool1 = true;var bool2 = false;console.log(typeof(bool1));console.log(typeof(bool2));//4 未定义 undefined 没有赋值的变量类型var a;console.log(typeof(a));//5 空 nullvar b = 123;b = null;console.log(typeof(b)) //object//6 对象型 objectvar obj1 = {};console.log(typeof(obj1));console.log(obj1);var obj2 = {name:"zhangsan",age:"18"};console.log(obj2);console.log(obj2.name);console.log(obj2.age);obj2.age = 22; console.log(obj2.age);// js中的输入var res = prompt("请输入:");alert(res);</script>
</body>
</html>

 

JS变量的使用[variate.html]

  1. 声明变量var num; 这一行代码声明了一个名为num的变量。在JavaScript中,var是声明变量的关键字。

  2. 为变量赋值num = 123; 这一行代码将数字123赋值给变量num。此时,变量num存储了一个整数值。

  3. 使用变量alert(num); 这一行代码使用alert函数弹出一个警告框,显示当前num变量的值。在第一次执行时,警告框会显示123

  4. 重新赋值num = 456; 这一行代码将变量num的值更新为456。这是变量的值被改变的一个例子,展示了JavaScript中变量的值是可以动态改变的。

  5. 再次使用变量alert(num) 这一行代码再次使用alert函数弹出一个警告框,由于之前将num的值更新为456,所以这次警告框会显示456

425f9eabbe594f608c95f31b11f6cc3b.png

b96339e6e18a42eaae670e7fc1a9ddd9.png

JS数据类型

在脚本中,定义了不同类型的变量,并使用console.log()函数和typeof操作符来输出变量的类型和值。

  1. 数值型 (number)

    • var num = 123; 定义了一个数值型变量num,并赋值为整数123
    • console.log(typeof(num)); 使用typeof操作符输出变量num的类型,结果是"number"
  2. 字符串型 (string)

    • var str = '你好'; 定义了一个字符串型变量str,并赋值为'你好'
    • console.log(typeof(str)); 输出变量str的类型,结果是"string"
    • var str2 = '123'; 定义了另一个字符串型变量str2,并赋值为'123'
    • console.log(typeof(str2)); 输出变量str2的类型,结果同样是"string"
  3. 布尔型 (boolean)

    • var bool1 = true; 定义了一个布尔型变量bool1,并赋值为true
    • var bool2 = false; 定义了另一个布尔型变量bool2,并赋值为false
    • console.log(typeof(bool1)); 和 console.log(typeof(bool2)); 分别输出这两个布尔型变量的类型,结果都是"boolean"
  4. 未定义 (undefined)

    • var a; 定义了一个变量a但没有赋值,它的值将是undefined
    • console.log(typeof(a)); 输出变量a的类型,结果是"undefined"
  5. 空值 (null)

    • var b = 123; 定义了一个变量b并赋值为整数123
    • b = null; 将变量b的值更新为null
    • console.log(typeof(b)); 输出变量b的类型,结果是"object"。这是一个JavaScript中的一个特殊行为,typeof操作符对于null值总是返回"object"
  6. 对象型 (object)

    • var obj1 = {}; 定义了一个空的对象obj1
    • console.log(typeof(obj1)); 输出对象obj1的类型,结果是"object"
    • var obj2 = {name:"zhangsan", age:"18"}; 定义了一个包含属性的对象obj2
    • console.log(obj2); 输出对象obj2及其属性。
    • console.log(obj2.name); 和 console.log(obj2.age); 分别输出对象obj2nameage属性的值。
    • obj2.age = 22; 更新对象obj2age属性为22
    • console.log(obj2.age); 输出更新后的age属性值。

当这个HTML文档在浏览器中运行时,console.log()函数的输出将会显示在浏览器的控制台(Console)中。这个网页本身不会在浏览器的可视区域显示任何内容。

39445682e6784dd2843be28a12d939ca.png

JS中的用户输入

var res = prompt("请输入:"); 这一行代码调用了prompt函数,该函数会弹出一个对话框,提示用户进行输入。对话框中显示的消息是"请输入:",这是一个提示性的文字,告诉用户需要输入一些信息。用户可以在弹出的对话框中输入文本,然后点击"确定"按钮继续。用户输入的内容将被存储在变量res中。

 

alert(res); 这一行代码调用了alert函数,该函数会弹出一个警告框,显示res变量中的值。如果用户在prompt对话框中输入了内容,并点击了"确定"按钮,alert函数就会显示用户输入的内容。如果用户点击了"取消"按钮,prompt函数将返回null,因此alert函数将显示一个空消息框。

561e50f97a3e4227b7685b8a844f730e.png2826ccc713224a10aec4ed9b7a0dbe2b.png 

 


http://www.mrgr.cn/p/88726645

相关文章

Arrow, 一个六边形的 Python 时间库

文章目录 Arrow, 一个六边形的 Python 时间库第一部分&#xff1a;背景介绍第二部分&#xff1a;库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第…

source map 开发优化工具

什么是 Source map 简单来说 Source map 就是一个存储信息的文件&#xff0c;里面储存着位置信息。 Source map 英文释义&#xff1a;源程序映射。 位置信息&#xff1a;转换后的代码 对应的 转换前的代码 位置映射关系。 有了 Source map&#xff0c;就算线上运行的是转换…

网络爬虫软件学习

1 什么是爬虫软件 爬虫软件&#xff0c;也称为网络爬虫或网络蜘蛛&#xff0c;是一种自动抓取万维网信息的程序或脚本。它基于一定的规则&#xff0c;自动地访问网页并抓取需要的信息。爬虫软件可以应用于大规模数据采集和分析&#xff0c;广泛应用于舆情监测、品牌竞争分析、…

Unity AR开发环境搭建

在这个项目中使用 Unity 2022.3.19。 AR项目建议使用2022.3及以上版本。 创建一个 3D URP 项目并将其命名为 Magicbox-AR。 注意&#xff1a;如果计划发布 iOS 版 AR 项目&#xff0c;则必须有权使用 Mac 进行最终构建。Windows 计算机无法为 iOS 设备构建最终产品。 项目创建…

对比实验系列:Efficientdet环境配置及训练个人数据集

一、源码下载 可以通过下方链接下载Efficientdet源码 GitHub - zylo117/Yet-Another-EfficientDet-Pytorch: The pytorch re-implement of the official efficientdet with SOTA performance in real time and pretrained weights.The pytorch re-implement of the official …

实战指南:使用 xUnit 和 ASP.NET Core 进行集成测试【完整教程】

引言 集成测试可在包含应用支持基础结构(如数据库、文件系统和网络)的级别上确保应用组件功能正常。 ASP.NET Core 通过将单元测试框架与测试 Web 主机和内存中测试服务器结合使用来支持集成测试。 简介 集成测试与单元测试相比,能够在更广泛的级别上评估应用的组件,确认多…

ElasticSearch实战之项目搜索高亮

文章目录 1. 前情配置2、数据操作2.1 操作API2.2 数据入库 3. 高亮搜索3.1 方法封装3.2 高亮搜索 1. 前情配置 为满足ElasticSearch可在项目中实现搜索高亮&#xff0c;我们需要先做一些前情配置 导入ElasticSearch依赖 <dependency><groupId>org.springframewor…

OpenHarmony UI动画-recyclerview_animators

简介 带有添加删除动画效果以及整体动画效果的list组件库 下载安装 ohpm install ohos/recyclerview-animatorsOpenHarmony ohpm 环境配置等更多内容&#xff0c;请参考如何安装OpenHarmony ohpm 包 使用说明 引入组件库 import { RecyclerView } from "ohos/recycler…

AR地图导览小程序是怎么开发出来的?

在移动互联网时代&#xff0c;AR技术的发展为地图导览提供了全新的可能性。AR地图导览小程序结合了虚拟现实技术和地图导航功能&#xff0c;为用户提供了更加沉浸式、直观的导览体验。本文将从专业性和思考深度两个方面&#xff0c;探讨AR地图导览小程序的开发方案。 编辑搜图 …

【Linux驱动层】iTOP-RK3568学习之路(二):vscode中设置头文件路径-完成代码自动补全

在Ubuntu下用vscode写Linux驱动层的时候&#xff0c;需要添加头文件&#xff1a; #include<linux/module.h> #include<linux/init.h> #include<linux/kernel.h>但vscode没有智能提示&#xff0c;因此需要我们手动添加自己的头文件路径&#xff1a; topeetu…

算法部署 | 使用TensorRT在Jetson-Xavier-AGX上部署YOLOv4目标检测算法

项目应用场景 面向 NVIDIA Jetson Xavier AGX 平台部署 YOLOv4 目标检测算法场景&#xff0c;项目采用 TensorRT 进行 GPU 算法加速推理。 项目效果 项目细节 > 具体参见项目 README.md (1) 安装依赖 Install pycuda (takes awhile) $ cd ${HOME}/catkin_ws/src/yolov4_tr…

不需要GPU就可以玩转模型,同时支持本地化部署

简单一款不需要GPU就可以在Win 机器跑的模型&#xff1a;Ollama&#xff1b;用于本地运行和部署大型语言模型&#xff08;LLMs&#xff09;的开源工具 关于Ollama的简要介绍 平台兼容性&#xff1a;Ollama支持多种操作系统&#xff0c;包括macOS、Linux和Windows&#xff0c;…

【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【QTOpenCV】车牌号检测 学习记录 首先在QT里面配置好OpenCV .pro文件中加入&#xff1a; INCLUDEPATH G:/opencv/build/include LIBS -L"G:/opencv/build/x64/vc14/lib"\-lopencv_core \-lopencv_imgproc \-lopencv_highgui \-lopencv_ml \-lopencv_video \-lo.c…

前端三大件速成 01 HTML

文章目录 一、前端基础知识二、标签1、什么是标签2、标签的属性3、常用标签&#xff08;1&#xff09;声明&#xff08;2&#xff09;注释&#xff08;3&#xff09;html 根标签&#xff08;3&#xff09;head标签&#xff08;4&#xff09;body标签 三、特殊字符四、其他标签1…

Nacos—配置管理

简介&#xff1a; Nacos是阿里巴巴开发的&#xff0c;它旨在帮助用户更敏捷和容易地构建、交付和管理微服务平台。Nacos的主要功能和特性包括&#xff1a; 动态服务发现。Nacos支持基于DNS和RPC的服务发现&#xff0c;允许服务提供者和消费者之间的高效交互。动态配置管理。…

Mac下brew安装php7.4

这里作者挂了梯子&#xff0c;所以很流畅&#xff01; brew的下载&#xff0c;可参考另外一篇博文&#xff5e;Homebrew 安装与卸载 1、将第三方仓库加入brew brew tap shivammathur/php2、安装指定版本的PHP brew install php7.43、替换Mac自带PHP环境并刷新环境变量 -> …

transformer架构详细详解

一、transformer的贡献 transformer架构的贡献&#xff1a;该架构只使用自注意力机制&#xff0c;没有使用RNN或卷积网络。且可以实现并行计算&#xff0c;加快模型训练速度。 &#xff08;将所有的循环层全部换成&#xff1a;multi-headed self-attention&#xff09; 二、t…

HTML5+JavaScript实现本地视频/音频播放器

HTML5JavaScript实现本地视频/音频播放器 HTML5 提供了本地视频和音频播放器的支持&#xff0c;通过 <video> 和 <audio> 标签&#xff0c;这些标签支持多种媒体格式&#xff0c;并且可以通过 JavaScript 进行控制&#xff0c;实现功能比较完整的本地视频音频播放器…

在 Linux 终端中创建目录

目录 ⛳️推荐 前言 在 Linux 中创建一个新目录 创建多个新目录 创建多个嵌套的子目录 测试你的知识 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 前言 在本系列的这一部…

Objective-C网络数据捕获:使用MWFeedParser库下载Stack Overflow示例

概述 Objective-C开发中&#xff0c;网络数据捕获是一项常见而关键的任务&#xff0c;特别是在处理像RSS源这样的实时网络数据流时。MWFeedParser库作为一个优秀的解析工具&#xff0c;提供了简洁而强大的解决方案。本文将深入介绍如何利用MWFeedParser库&#xff0c;以高效、…