跟着pink老师前端入门教程(JavaScript)-day02

三、变量

(一)变量概述

1、什么是变量

白话:变量就是一个装东西的盒子

通俗:变量是用于存放数据的容器,通过变量名获取数据,甚至数据可以修改

2、变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间(酒店的房间可以看做一个变量)

(二)变量的使用

变量在使用时分为两步: 1. 声明变量 2. 赋值

1、声明变量

// 声明变量
var age; // 声明一个 名称为age 的变量

var是一个JS关键字,用来声明变量(variable变量的意思),使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管

age 是程序员定义的变量名,要通过变量名来访问内存中分配的空间。

2、赋值

age = 10; // 给 age 这个变量赋值为 10

= 用来把右边的值赋给左边的变量空间中,此处代表赋值的意思

变量名是程序员保存到变量空间里的值

3、变量的初始化

var age = 18; // 声明变量同时赋值为 18

声明一个变量并赋值,称之为变量的初始化

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的使用</title><script>//1. 声明一个age变量var age;// 2. 赋值 把值存入这个变量中age = 18;// 3. 输出结果console.log(age);// 4. 变量的初始化var myname = 'pink';console.log(myname)</script>
</head>

 (三)变量语法扩展

1、更新变量

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了

2、同时声明多个变量

同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;  

3、声明变量特殊情况

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量语法扩展</title><script>// 1. 更新变量var name = '王一';console.log(name);name = '李二';console.log(name);//2. 声明多个变量/*  var age = 18;var name = '张三'; */var age = 18, name = '张三';// 3. 声明变量的特殊情况// 3.1 只声明,不赋值 程序也不知道是什么,因此结果是: undefined 未定义var sex;console.log(sex);// 3.2 不声明不赋值 直接使用会报错console.log(tel);// 3.3 不声明直接赋值使用qq = 110;console.log(qq);</script>
</head>

(四)变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如:var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
  • 推荐翻译网站: 有道 爱词霸
  • name 在有些浏览器中有特殊值,要注意使用

 (五)交换变量案例

要求:交换两个变量的值 ( 实现思路:使用一个 临时变量 用来做中间存储 )

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量命名规范</title><script>// js 是编程语言有很强的逻辑性在李阿敏:实现这个要求的思路,先怎么做后怎么做// 1. 需要一个临时变量// 2. 把a1 给临时变量temp// 3. 把a2 给a1// 4. 把临时变量里面的值给a2var temp; //声明一个临时变量为空var a1 = 10;var a2 = 12;console.log('变换前:a1 = ' + a1 + ', a2 = ' + a2);temp = a1; //把右边给左边a1 = a2;a2 = temp;console.log('变换后:a1 = ' + a1 + ', a2 = ' + a2);</script>
</head>

总结

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

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

相关文章

VS-Code-HTML-CSS-JS配置

前端三剑客开发环境配置 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever HTML开发环境搭建 Auto Close Tag自动闭合HTML标签Auto Rename Tag自动完成两侧标签同步修改HTML SnippetsHTML代码提示补全open in browser右键打开浏览器运行文件Live Server实时…

HarmonyOS一杯冰美式的时间 -- 验证码框

一、前言 像是短密码、验证码都有可能需要一个输入框&#xff0c;像是如下&#xff1a; 恰好在写HarmonyOS的时候也需要写一个验证码输入框&#xff0c;但是在实现的时候碰了几次灰&#xff0c;觉得有必要分享下&#xff0c;故有了此篇文章。 如果您有任何疑问、对文章写的不…

Unity 2D Spine 外发光实现思路

Unity 2D Spine 外发光实现思路 前言 对于3D骨骼&#xff0c;要做外发光可以之间通过向法线方向延申来实现。 但是对于2D骨骼&#xff0c;各顶点的法线没有向3D骨骼那样拥有垂直于面的特性&#xff0c;那我们如何做2D骨骼的外发光效果呢&#xff1f; 理论基础 我们要知道&a…

书生·浦语-模型评测opencompass

大预言模型评测 模型评测包括主管评测与客观评测 测试模型对提示词的敏感性&#xff0c;或通过提示词获得更准确地答案 主流评测框架 opencompass评测平台 作业

智慧公厕:让智慧城市的公共厕所焕发“智慧活力”

智慧城市的建设已经进入了一个新的阶段&#xff0c;不仅仅是智慧交通、智慧环保&#xff0c;如今甚至连公厕都开始迎来智慧化时代。智慧公厕作为智慧城市的神经末梢&#xff0c;正在通过信息化、数字化和智慧化的方式&#xff0c;实现全方位的精细化管理。本文以智慧公厕源头专…

Flink理论—Flink架构设计

Flink架构设计 Flink 是一个分布式系统&#xff0c;需要有效分配和管理计算资源才能执行流应用程序。它集成了所有常见的集群资源管理器&#xff0c;例如Hadoop YARN&#xff0c;但也可以设置作为独立集群甚至库运行,例如Spark 的 Standalone Mode 本节概述了 Flink 架构&…

IBM公司已经创立百年

不知道有谁还知道或记得蓝快。 我在2003年前后因为编程需要买的IBM笔记本电脑&#xff0c;慢慢接触到了IBM蓝快的技术服务人员&#xff0c;他们算是那个年代超级专业性的代名词。因为装Linux&#xff0c;当时流行的系统是Redhat8&#xff0c;Mandrake,slackware,因为Lilio2的引…

初识最短路径

一.最短路径的介绍 最短路径是图论和网络分析中一个重要的概念&#xff0c;它指的是在一个图或网络中连接两个节点或顶点的路径中&#xff0c;具有最小权重总和的路径。这个权重可以表示为路径上边或弧的长度、耗费、时间等&#xff0c;具体取决于问题的背景和应用场景。 如果你…

【STM32 CubeMX】SPI层次结构SPI协议与SPI控制器结构

文章目录 前言一、SPI 程序层次1.1 硬件原理图1.2 硬件框图1.3 软件层次 二、SPI协议2.1 硬件连线2.2 如何访问SPI设备2.3 SPI 框图 总结 前言 随着嵌入式系统的迅猛发展&#xff0c;STM32系列微控制器在各种应用中得到广泛应用。在嵌入式系统设计中&#xff0c;串行外设接口&…

Anaconda、conda、pip、virtualenv的区别

① Anaconda Anaconda是一个包含180的科学包及其依赖项的发行版本。其包含的科学包包括&#xff1a;conda, numpy, scipy, ipython notebook等。 Anaconda具有如下特点&#xff1a; ▪ 开源 ▪ 安装过程简单 ▪ 高性能使用Python和R语言 ▪ 免费的社区支持 其特点的实现…

牛客网SQL进阶123:高难度试卷的得分的截断平均值

官网链接&#xff1a; SQL类别高难度试卷得分的截断平均值_牛客题霸_牛客网牛客的运营同学想要查看大家在SQL类别中高难度试卷的得分情况。 请你帮她从exam_。题目来自【牛客题霸】https://www.nowcoder.com/practice/a690f76a718242fd80757115d305be45?tpId240&tqId2180…

matplotlib从起点出发(13)_Tutorial_13_Autoscaling

0 自动放缩 轴上的限制可以手动设置&#xff08;例如ax.set_xlim(xmin, xmax))&#xff0c;或者Matplotlib可以根据Axes上已有的数据自动设置它们。此种放缩行为有许多选项&#xff0c;如下所述。 我们将从一个简单的折线图开始&#xff0c;显示自动缩放将轴限制扩展到数据的…

08MARL深度强化学习——模型种类

文章目录 前言1、训练与执行的模型2、Centralised Training and Execution2.1 Example——central learning2.2 局限性 3、Decentralised Training and Execution3.1 Example——independent learning3.2局限性 4、Centralised Training with Decentralised Execution4.1 Examp…

vue实现多个下拉框联动(二)

在Vue3的组件中&#xff0c;定义多个下拉框的数据和选中的值。例如&#xff1a; data() {return {firstSelectValue: ,secondSelectValue: ,thirdSelectValue: ,// 其他下拉框的数据和选中的值} }在模板中&#xff0c;使用v-model指令绑定下拉框的选中值&#xff0c;并使用cha…

精读《Function Component 入门》

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

P1090 [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G题解

题目 在一个果园里&#xff0c;多多已经将所有的果子打了下来&#xff0c;而且按果子的不同种类分成了不同的堆。多多决定把所有的果子合成一堆。 每一次合并&#xff0c;多多可以把两堆果子合并到一起&#xff0c;消耗的体力等于两堆果子的重量之和。可以看出&#xff0c;所…

如何将浏览器设置为黑色

步骤 1 设置边框颜色&#xff1a; 找到浏览器的 设置 选项在里面选择浏览器的 外观 选项把 主题 相关的改成 黑色 即可 步骤 2 设置页面背景颜色&#xff1a; 在浏览器搜索栏中输入指令&#xff0c;并确认 浏览器类型指令edgeedge://flags/chromechrome://flags/ 在出现…

绿色化 数据库 MongoDB 和 mysql 安装

绿色化 数据库 MongoDB 和 mysql 安装 【1.1】 前言 为什么要绿色化 安装呢&#xff1f;因为系统老升级&#xff0c;老重装&#xff01;&#xff01;也方便了解下数据库配置和库在那 绿色软件喜欢一般放在 D盘tools目录里 D:\tools\ 数据库 MongoDB D:\tools\MongoDB 数…

Mysql第二关之存储引擎

简介 所有关于Mysql数据库优化的介绍仿佛都有存储引擎的身影。本文介绍Mysql常用的有MyISAM存储引擎和Innodb存储引擎&#xff0c;还有常见的索引。 Mysql有两种常见的存储引擎&#xff0c;MyISAM和Innodb&#xff0c;它们各有优劣&#xff0c;经过多次优化和迭代&#xff0c;…

代码随想录算法训练营第十九天|654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

654.最大二叉树 刷题https://leetcode.cn/problems/maximum-binary-tree/description/文章讲解https://programmercarl.com/0654.%E6%9C%80%E5%A4%A7%E4%BA%8C%E5%8F%89%E6%A0%91.html视频讲解https://www.bilibili.com/video/BV1MG411G7ox/?vd_sourceaf4853e80f89e28094a5fe…