JavaScript基础之输入输出与变量常量详解

输入和输出

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入,然后再将输入的结果输出:

  • document.write(“要出的内容”): 向body内输出内容

    document.write("这是document.write")
    

在这里插入图片描述

注意:如果输出的内容写的是标签,也会被解析成网页元素

document.write("<h1>标题标签</h1>")

在这里插入图片描述

  • alert(“要出的内容”):页面弹出警告对话框

    alert("弹出警示框")
    

在这里插入图片描述

  • console.log(“控制台打印”): 控制台输出语法,程序员调试使用

    打开浏览器网页,点击F12快捷键,网页就会出现控制台
    请添加图片描述

console.log("这是控制台")

请添加图片描述

输入

prompt()

语法:

prompt("请输入内容")

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入内容。

  <script> //  以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>

运行结果
在这里插入图片描述

变量

在JavaScript中,变量是引用数字或字符串等值的标签。在计算机中,变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据),同时变量这个容器的值是可以改变的。

所以,变量其主要作用是存取数据以及提供存放信息的容器

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!// 将用户输入的内容保存在 num 这个变量(容器)中num = prompt('请输入一数字!')// 通过 num 变量(容器)将用户输入的内容输出出来alert(num)document.write(num)
</script>

声明

在使用变量之前,需要声明变量。

声明(定义)变量有两部分构成:声明关键字、变量名(标识符)

声明关键词

声明关键字是var关键字声明,在JavaScript的ES5版本中所有JavaScript变量都由var声明

说明:目前所讲的知识都是ES5版本中的知识,后续版本都是基于这版本后内容的延申。

变量名

变量名可以是任何有效的标识符。

变量名遵循以下规则:

  • 变量名称只能由字母(a-zA-Z)、数字(0-9)、下划线(_)和美元符号($)组成,不能包含空格。
  • 变量名称是以字母(a-zA-Z)、下划线(_)或美元符号($)开头,变量名称不能以数字开头
  • JavaScript的变量名区分大小写,例如 ,Sunsun,这两个就是不同的变量
  • 变量名不能是保留关键字

驼峰命名法

按照惯例,变量名使用驼峰命名法。

在JavaScript中,驼峰命名法(camel case)是一种常见的命名约定,用于命名变量、函数、属性等标识符。它包括两种形式:小驼峰命名法(lower camel case)和大驼峰命名法(upper camel case)。

  • 小驼峰命名法(lower camel case):第一个单词首字母小写后续单词的首字母大写。例如:firstName、lastName、firstNameAndLastName。
  • 大驼峰命名法(upper camel case):每个单词的首字母都大写。例如:FirstName、LastName、FirstNameAndLastName。

使用驼峰命名法可以使代码更易读、易写和易维护。

实例:

var firstName;
var myMessage;

赋值

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据,赋值也可以说对其变量初始化。

要初始化变量,请先指定变量名称,后跟等号(=)和值

语法:

var 变量名=;

变量的使用语法如下

请添加图片描述

实例:

var message;
message="123"

实例:同时声明和初始化变量

var message="123";

JavaScript允许使用单个语句同时声明两个或多个变量。要分隔两个变量声明,中间要使用英文逗号(“,”)

var message="hello world", number="123",word="hello";

同一个变量名多次赋值,后面的值会覆盖前面的值,你可以通过这分配不同的值来更改其值。

 // 赋值,将 18 这个数据存入了 age 这个“容器”中var age=18; // 这样 age 的值就成了 18//更新变量,变量名直接重新赋值age=19;//age的值为19document.write(age)

变量名输出不能打双引号(“”)或单引号(‘’),多个变量名输出用英文逗号隔开。

 var str = 'hello world!'alert(str);    //变量名输出不能打引号//输出多个变量,要用逗号(,)隔开var name="tom",height="123"console.log(tom,height);

变量作用域

变量根据作用域可分为:

  • 全局变量
  • 局部变量

全局变量

可以在JavaScript脚本中的任何位置被调用,全局变量的作用域是当前文档中整个脚本区域

局部变量

只能在此变量声明语句所属的函数内部使用,局部变量的作用域仅为该函数体

声明变量时,要根据编程的目的决定将变量声明为全局变量还是局部变量。

一般而言,保存全局信息(如表格的原始大小、下拉框包含选项对应的字符串数组等)的变量需声明为全局变量。而保存临时信息(如待输出的格式字符串、数学运算中间变量等)的变量则声明为局部变量

弱类型

JavaScript脚本语言跟其他编程语言一样,其变量都有数据类型。但与此不同的是,JavaScript语言是弱类型语言,在变量声明时不需显式地指定其数据类型,变量的数据类型将根据变量的具体内容推导出来,且根据变量内容的改变而自动改变,而强类型语言在变量声明时必须显式地指定其数据类型。

变量声明时不需显式指定其数据类型是JavaScript脚本语言的优点也是缺点

优点是编写脚本代码时不需要指明数据类型,使变量声明过程简单明了;缺点是有可能造成因微妙的拼写不当而引起致命的错误。

常量

概念:常量是保存一个不会改变的值。使用 const 声明的变量称为“常量”。

命名规范:和变量一致

一旦定义了变量,就无法更改其值。

const PI = 3.14

注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity 装饰器模式(实例详解)

文章目录 简介1. **组件装饰器&#xff08;Component Decorators&#xff09;**:2. **游戏对象特效装饰器&#xff08;GameObject Effects Decorator&#xff09;**:3. **输入处理装饰器&#xff08;Input Handling Decorators&#xff09;**:4. **性能优化装饰器&#xff08;P…

70从零开始学Java之Collection与Collections有什么区别?

作者:孙玉昌,昵称【一一哥】,另外【壹壹哥】也是我哦 CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 截止到现在,壹哥已经把Java里的List、Set和Map这三大集合都给大家讲解完毕了,不知道各位掌握了多少呢?如果你对之前的内容还没有熟练掌握,可以把壹哥前…

day32WEB 攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

本章节知识点&#xff1a; 1 、文件上传 - 二次渲染 2 、文件上传 - 简单免杀变异 3 、文件上传 -.htaccess 妙用 4 、文件上传 -PHP 语言特性 前置知识&#xff1a; 后门代码需要用特定格式后缀解析&#xff0c;不能以图片后缀解析脚本后门代码 ( 解析漏洞除外 ) 如&…

codeforces 1200分

文章目录 1.[B. Same Parity Summands](https://codeforces.com/contest/1352/problem/B)2.[C. Challenging Cliffs](https://codeforces.com/problemset/problem/1537/C)3.[B. Sorted Adjacent Differences](https://codeforces.com/contest/1339/problem/B)4.[C1. k-LCM (eas…

应急响应-windows-日志分析

日志概述 在windows系统中&#xff0c;日志文件包括&#xff1a;系统日志、安全性日志及应用程序日志&#xff0c;对于应急响应工程师来说这三类日志需要熟练掌握&#xff0c;其位置如下。 在windows 2000专业版/windows XP/Windows Server 200&#xff08;注意日志文件的后缀…

swagger2 和 knife4j 整合

swagger整合knife4j 导入依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2</version></dependency>引入配置 我们自己写一个配置类也好,我这里写…

Unity制作右键菜单(自适应分辨率)

一、需求 右键触发打开菜单&#xff0c;左键在内部可选择选项&#xff0c;左键单击菜单范围外关闭。难点在于屏幕坐标系&#xff0c;鼠标位置&#xff0c;UI位置之间的关系。 二、理论 前置知识&#xff1a; unity中&#xff0c;用RectTransform对象的position.x和position.y表…

JavaScript 学习笔记(JS进阶 Day2)

「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. JavaScript 学习笔记&#xff08;Day1&#xff09; 2. JavaSc…

【前端开发】Font Awesome 一个基于CSS和LESS的免费图标库工具包,下载与使用教程!

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起学习和进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&a…

MATLAB知识点:min : 求最小值 和 max:求最大值

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章 3.4.1节 min : 求最小值&#xff08;minimum va…

小迪安全23WEB 攻防-Python 考点CTF 与 CMS-SSTI 模版注入PYC 反编译

#知识点&#xff1a; 1、PYC 文件反编译 2、Python-Web-SSTI 3、SSTI 模版注入利用分析 各语言的SSIT漏洞情况&#xff1a; SSIT漏洞过程&#xff1a; https://xz.aliyun.com/t/12181?page1&time__1311n4fxni0Qnr0%3DD%2FD0Dx2BmDkfDCDgmrYgBxYwD&alichlgrefhtt…

链表--226. 翻转二叉树/medium 理解度A

226. 翻转二叉树 1、题目2、题目分析3、复杂度最优解代码示例4、适用场景 1、题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&…

windows?linux?如何使用JMeter

windows?linux?如何使用JMeter 安装JMeter的步骤以GUI模式启动JMeter如何在非GUI模式下运行JMeter在linux中使用JMeter 安装JMeter的步骤 JMeter 是一个纯 Java应用程序&#xff0c;应该在任何具有兼容Java实现的系统上正确运行。 安装 JMeter 的步骤 步骤1&#xff09;安…

小迪安全21WEB 攻防-JavaWeb 项目JWT 身份攻击组件安全访问控制

#知识点&#xff1a; 1、JavaWeb 常见安全及代码逻辑 2、目录遍历&身份验证&逻辑&JWT 3、访问控制&安全组件&越权&三方组件 Java&#xff1a;大部分都是第三方插件出现漏洞 webgoat的搭建&#xff1a;——java靶场 JDK版本要求&#xff1a;11.0…

应用案例 | 基于三维机器视觉的螺钉抓取上料解决方案

近年来&#xff0c;机器人技术日新月异&#xff0c;为各行各业的发展注入了新的活力。制造业作为一项工作内容重复、劳作时间长的产业&#xff0c;对自动化改造需求最为迫切&#xff0c;因此&#xff0c;也是机器人技术渗透最早、最广的产业。 螺钉抓取在制造业的应用十分广泛&…

Tomcat好帮手---JDK

目录 1、Tomcat好帮手---JDK 2、安装JDK 部署Tomcat参考博主博客 部署TOMCAT详解-CSDN博客 1、Tomcat好帮手---JDK JDK是 Java 语言的软件开发工具包&#xff0c;JDK是整个java开发的核心&#xff0c;它包含了JAVA的运行环境&#xff08;JVMJava系统类库&#xff09;和JAVA…

OpenCV书签 #互信息的原理与相似图片搜索实验

1. 介绍 互信息&#xff08;Mutual Information&#xff09; 是信息论中的一个概念&#xff0c;用于衡量两个随机变量之间的关联程度。在图像处理和计算机视觉中&#xff0c;互信息常被用来度量两幅图像之间的相似性。 互信息可以看成是一个随机变量中包含的关于另一个随机变…

HashMap源码阅读;HashMap的put()方法;

当我们使用一个HashMap做插入操作时。put方法内部都做了什么呢&#xff1f; public static void main(String[] args) {HashMap<String, String> map new HashMap<>();map.put("key1", "value1"); }put 方法 源码 public V put(K key, V v…

Apache Jmeter测试websocket连通性

1、在windows电脑下载apache jmeter 下载地址详情Apache-Jemeter-download 2、解压打开文件夹&#xff0c;下载 jmeter-plugins-manager下载地址&#xff0c;下载后存放到lib的ext路径下&#xff0c; 同时也可以更改bin路径下的jmeter.properties对应第三十七行修改为如下&…

Java 设计者模式以及与Spring关系(五) 策略和观察者模式

目录 简介: 23设计者模式以及重点模式 策略模式&#xff08;Strategy Pattern&#xff09; 示例 spring中应用 观察者模式&#xff08;Observer&#xff09; 示例 spring中应用 简介: 本文是个系列一次会出两个设计者模式作用&#xff0c;如果有关联就三个&#xff0c;…