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

源码

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.数值型 number
        console.log(typeof(num));
        //2 字符串型 string
        var str = '你好'; 
        console.log(typeof(str));
        var str2 = '123';
        console.log(typeof(str2));
        //3 布尔型 boolean
        var bool1 = true;
        var bool2 = false;
        console.log(typeof(bool1));
        console.log(typeof(bool2));
        //4 未定义 undefined 没有赋值的变量类型
        var a;
        console.log(typeof(a));
        //5 空 null
        var b = 123;
        b = null;
        console.log(typeof(b)) //object
        //6 对象型 object
        var 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.mfbz.cn/a/556166.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详细分析Mysql常用函数(附Demo)

目录 前言1. 聚合函数2. 字符串函数3. 日期函数4. 条件函数5. 数值函数6. 类型转换函数 前言 由于实战中经常运用&#xff0c;索性来一个总结文 创建一个名为 employees 的表&#xff0c;包含以下字段&#xff1a; employee_id&#xff1a;员工ID&#xff0c;整数类型 first…

Redis几种常见的应用方式

1.登录认证 redis最常见的应用就是&#xff0c;登录认证把。再首次登录返回给前端token&#xff0c;把用户名和登录状态缓存到redis一段时间&#xff0c;每次其他请求进来过滤器那这token解析出来的用户名或其他关键的key值&#xff0c;再redis里面查询缓存&#xff0c;有则直…

驱动云创建保存自己的环境

驱动云创建保存自己的环境 制作镜像方法一方法二报错 上一篇link介绍了如何在驱动云上部署llama2以及驱动云在训练大模型的方便之处。也说到了可以直接使用驱动云现有的环境&#xff0c;免得自己配置环境。 但是有的时候免不了自己想要安装一些包。 驱动云的环境是这样的&…

华为手机p70即将上市,国内手机市场或迎来新局面?

4月15日&#xff0c;华为官宣手机品牌全新升级&#xff0c;p系列品牌升级为Pura。华为P70系列手机预计将于2024年第一季度末发布&#xff0c;而网友也纷纷表示期待p70在拍照、性能上的全新突破。 网友们对华为P70系列的热情高涨&#xff0c;也印证了国内高端手机市场的潜力巨大…

遥感图像分割 | 基于一种类似UNet的Transformer算法实现遥感城市场景图像的语义分割_适用于卫星图像+航空图像+无人机图像

项目应用场景 面向遥感城市场景图像语义分割场景&#xff0c;项目采用类似 UNet 的 Transformer 深度学习算法来实现&#xff0c;项目适用于卫星图像、航空图像、无人机图像等。 项目效果 项目细节 > 具体参见项目 README.md (1) 安装依赖 conda create -n airs python3.8…

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测(Matlab实现)

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09; 目录 【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 差异创意搜索算法&…

Flask 解决指定端口无法生效问题

问题重现 手动指定的IP端口是app.run(host0.0.0.0, port9304)&#xff0c;但是启动的地址显示的却是http://127.0.0.1:5000。 if __name__ __main__:app.run(host0.0.0.0, port9304)启动地址如下&#xff1a; 解决方案 PyCharm会自动识别出来flask项目&#xff08;即使你…

24位AD分辨率、256Ksps*16通道国产数据采集卡、uV级采集、支持IEPE

24位AD分辨率、256Ksps*16通道、uV级采集、USB数据传输、支持IEPE、C、LABVIEW、MATLAB、Python等多编程语言&#xff0c;提供例程&#xff0c;支持二次开发。 XM7016-以太网采集卡 XM7016是一款以太网型高速数据采集卡&#xff0c;具有16通道真差分输入&#xff0c;24位分辨率…

互联网技术底蕴探究 | 联网通信原理精析与网络协议通信机制

联网通信原理精析与网络协议入门导览 前提介绍网络网络结构与节点网络应用Sun公司的Jini技术 网络设备网卡&#xff08;Netword Card&#xff09;以太网卡 路由器&#xff08;Router&#xff09;处理数据模式安全控制访问 集线器&#xff08;Hub&#xff09;网关&#xff08;Ga…

CSS的语法规则——基础选择器

元素&#xff1a; 用法&#xff1a; 标签名&#xff1a;{style的内容} 特点&#xff1a; 全局性&#xff0c;使用后&#xff0c;所有的相同标签都是同一种样式。 举例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UT…

【Linux冯诺依曼体系结构】

目录 1.冯诺依曼体系结构原理 1.冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 截至目前&#xff0c;我们所认识的计算机&#xff0c;都是有一个个的硬件组件组成 输入单元&#…

【个人博客搭建】(9)使用日志

net自带日志与Serilog。 1、比较。net 8 webapi使用自带的日志功能与Serilog日志的异同&#xff0c;性能上有多少差距 在.NET 8 WebAPI中&#xff0c;使用自带的日志功能与使用Serilog日志框架存在一些异同。性能上的差距取决于具体的使用场景和配置&#xff0c;但通常Serilog…

详解 C++ 实现K-means算法

一、K-means算法概述 K-means算法是一种非常经典的聚类算法,其主要目的是将数据点划分为K个集群,以使得每个数据点与其所属集群的中心点(质心)的平方距离之和最小。这种算法在数据挖掘、图像处理、模式识别等领域有着广泛的应用。 二、K-means算法的基本原理 K-means算法…

source map 开发优化工具

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

大型网站系统架构演化实例_2.使用缓存改善网站性能

1.使用缓存改善网站性能 网站访问的特点和现实世界的财富分配一样遵循二八定律&#xff1a;80%的业务访问集中在20%的数据上。既然大部分业务访问集中在一小部分数据上&#xff0c;那么如果把这一小部分数据缓存在内存中&#xff0c;就可以减少数据库的访问压力&#xf…

深入剖析Tomcat(三) 实现一个简易连接器

Tomcat中的servlet容器叫做Catalina&#xff0c;Catalina有两个主要模块&#xff1a;连接器与容器。在本章&#xff0c;将会建立一个连接器来增强第二章中应用程序的功能&#xff0c;用一种更好的方式来创建request与response对象。 截止文章编写日期&#xff0c;servlet规范已…

docker 启动时报错

docker 启动时报如下错误 Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details 因为安装docker时添加了镜像源 解决方案&#xff1a; mv /etc/…

学习部分排序,插入排序,冒泡排序以及希尔排序

1.插入排序 <1>.首先我们举个例子 我们要把6进行前面的插入&#xff0c;那我们要进行比较&#xff0c;首先确定一个end的指针&#xff0c;然后他指向的数字就是我们需要比较的&#xff0c;如果end指向的数比我们end1 的大的话&#xff0c;那我们就往前挪一个&#xff0c…

ElasticSearch虚拟机安装(单机版)

1.下载7.10.2 下载链接&#xff0c;选择LINUX X86_64下载 2.创建用户 useradd es也可以使用系统默认用户&#xff08;非root&#xff09;,root用户会报错 3.解压 tar xvf elasticsearch-7.10.2-linux-x86_64.tar.gz假定目录在/home/es/elasticsearch-7.10.2-linux-x86_64 …

读所罗门的密码笔记21_读后总结与感想兼导读

1. 基本信息 所罗门的密码&#xff1a;AI时代的价值、权力与信任 Solomons Code 奥拉夫格罗思 马克尼兹伯格 著 中信出版社,2022年5月出版 1.1. 读薄率 书籍总字数257千字&#xff0c;笔记总字数37780字。 读薄率37780257000≈14.7% 1.2. 读厚方向 千脑智能 脑机穿越 …