深入理解JavaScript变量-优快云博客

本文链接：https://blog.youkuaiyun.com/WangZhang_521/article/details/122692547

这篇博客详细探讨了JavaScript变量的使用，从基本概念到案例实践，包括变量的声明、效果展示、弹出用户名的实例、语法拓展、命名规范，以及如何交换两个变量的值。通过学习，读者将对JavaScript变量有更全面的了解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01-变量

<!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 = 'pink';
        console.log(myname);
    </script>
</head>

<body>

</body>

</html>

02-变量案例

<!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 adress = '火影村';
        // 数字不需要加单引号
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(adress);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>

<body>

</body>

</html>

效果展示

在这里插入图片描述

03-弹出用户名案例

<!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>

04-变量的语法拓展

<!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>变量的语法扩展</title>
    <script>
        // 1.更新变量
        var myname = 'pink老师';
        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);
        // 3.2不声明不赋值直接使用 会报错 报错后下面的值都不会再显示出来 所以需要注释起来
        // console.log(tel);
        // 3.3不声明直接赋值使用 110
        qq = 110;
        console.log(qq);
    </script>
</head>

<body>

</body>

</html>

05-变量命名规范

<!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 app = 10;
        var APP = 100;
        console.log(app);
        console.log(APP);
        // var 18 age;不能以数字开头
        // var var;因为var有特殊意义了，这个叫做关键字，不能作为变量名 for while if
        // 尽量不要使用name作为变量名 以下什么都不会显示 也不会报错
        console.log(name);
    </script>
</head>

<body>

</body>

</html>

06-交换两个变量值

<!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 = '红苹果';
        // 把apple1给我们的临时变量temp 把右边给左边
        temp = apple1;
        // 把apple2里面的苹果给apple1
        apple1 = apple2;
        // 把临时变量里的值给apple2
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>

<body>

</body>

</html>

07-变量总结

<!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>变量总结</title>
    <script>
    </script>
</head>

<body>
    <h4>1.为什么需要变量</h4>
    <p>因为我们一些数据需要保存，所以需要变量</p>
    <h4>2.变量是什么</h4>
    <p>变量就是一个容器，用来存放数据的。方便以后我们使用里面的数据</p>
    <h4>3.变量的本质</h4>
    <p>变量是内存里的一块空间，用来存储数据</p>
    <h4>4.变量的使用</h4>
    <p>我们使用变量的时候，先声明变量，再赋值。</p>
    <p>声明变量的本质是去内存申请空间</p>
    <h4>5.什么是变量的初始化</h4>
    <p>声明变量并赋值称之为变量的初始化</p>
    <h4>6.变量的命名规范</h4>
    <p>变量名要规范，见名知意-驼峰命名法</p>
    <h4>7.交换2个变量值的思路</h4>
    <p>先画图，再写代码。理清思路</p>

</body>

</html>