web前端学习526-534（变量概述，变量的使用，变量语法扩展，变量命名规范，推荐Diagram Designer）

最新推荐文章于 2023-02-23 12:56:58 发布

香甜的甲基橙

最新推荐文章于 2023-02-23 12:56:58 发布

阅读量434

点赞数

分类专栏： web前端基础学习笔记 JavaScript 文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/weixin_51249285/article/details/123164222

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

之前有个程序是弹出一个填密码的框，然后填写的数据要保存，可以用变量这个方法

1 变量概述

1.1 什么是变量

白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间

类似酒店的房间，一个房子可以看成一个变量

2 变量的使用

变量的使用

声明变量 2. 复制

1 声明变量

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

var是一个JS关键字,用来声明变量( variable变量的意思)。使用该关键字声明变量后 , 计算机会自动为变量分配内存空间, 不需要程序员管
age是程序员定义的变量名 , 我们要通过变量名来访问内存中分配的空间

2 赋值

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

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3 变量的初始化

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

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

eg . 05-变量.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1 声明了一个age 的变量
        var age;
        // 2 赋值 把值存入这个变量中
        age = 18;
        // 3 输出结果
        console.log(age);
        // 4 变量的初始化
        var myname = '墨鱼';
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

网页显示

在这里插入图片描述

案例：变量的使用

有个叫卡卡西的人在旅店登记的时候前台让他填一张表, 这张表里的内容要存到电脑上, 表中的内容有: 姓名、年龄、邮箱、家庭住址和工资,存储之后需要把这些信息显示出来,所显示的内容如下:

我叫旗木卡卡西,我住在火影村, 我今年30岁了, 我的邮箱是kakaxi@itcast.cn ,我的工资2000

eg . 06-变量案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = '旗木卡卡西';
        var address = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

网页显示

在这里插入图片描述

弹出一个输入框, 提示用户输入姓名。
弹出一个对话框, 输出用户刚才输入的姓名。

07-变量案例弹出用户名.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1 用户输入姓名  存储到myname变量里面
        var myname = prompt('请输入您的名字');

        // 2 输出这个用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

网页显示

在这里插入图片描述

输入名字确认后弹出

在这里插入图片描述

3 变量语法扩展

1 更新变量

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

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

2 同时声明多个变量

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

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

3 声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age = 10;console.log(age);	不声明只赋值	10

上面第三种没有报错，但是会变成全局变量，不利于使用。

所以，规范使用，先声明，再赋值

08-变量的语法拓展.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1 变量更新
        var myname = '墨鱼';
        console.log(myname);
        myname = '圣代';
        console.log(myname);
        // 2 声明多个变量
        // var age = 18;
        // var adress = '火影村';
        // var gz = 2000;
        var age = 18,
            address = '火影村';
            gz = 2000;
        // 3 声明变量的特殊情况
        // 3.1只声明不赋值结果是? 程序也不知道里面存的是啥所以结果是undefined 未定义的
        var sex;
        console.log(sex); // undefined
        //3.2不声明不赋值直接使用某个变量会报错滴
        // console.log(te1);
        // 3.3 不声明直接赋值使用
        qq= 110;
        console.log(qq);

    </script>
</head>
<body>
    
</body>
</html>

4 变量命名规范

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

案例：交换两个变量值

交换两个变量值：增加一个临时变量（中间媒介）

在这里插入图片描述

10-交换两个变量值.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js是编程语言有很强的逻辑性在里面: 实现这个要求的思路先怎么做后怎么做
        // 1.我们需要一个临时变量帮我们
        // 2.把apple1 给我们的临时变量temp
        // 3.把apple2里面的苹果给 apple1
        // 4.把临时变量里面的值给  apple2
        var temp; // 声明一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1; //把右边给左边
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
<body>
    
</body>
</html>

网页显示

在这里插入图片描述

5 小结

Q	A
为什么需要变量?	因为我们一些数据需要保存,所以需要变量
变量是什么?	变量就是一个容器 ,用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?	变量是内存里的一块空间,用来存储数据。
变量怎么使用的?	我们使用变量的时候, 一定要声明变量,然后赋值声明。变量本质是去内存申请空间。
什么是变量的初始化?	声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些?	变量名尽量要规范,见名知意—驼峰命名法
交换2个变量值的思路?	区分哪些变量名不合法。学会交换2个变量