如何存储你需要的信息 — 变量

预备知识:	电脑基础知识，了解基本的 HTML 和 CSS，了解JavaScript是什么。
目标:	熟悉JavaScript的变量使用

需要的工具

在本章中，你将要输入一些代码来测试你对相关内容的理解。如果你是用的桌面浏览器，输入这些代码最好的地方是浏览器的JavaScript终端，(参考 What are browser developer tools 查看如何使用这些工具)。

当然，我们也提供了一个简单的JavaScript终端，嵌入在下文的页面中，以便你更容易的输入和测试这些代码。

变量是什么?

一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。让我们看一个简单的例子:

<button>Press me</button>

var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

在上面的例子中，点击按钮之后，第一行代码会在屏幕上弹出一个对话框，让你输入名字，然后存储输入的名字到一个变量。第二行代码将会显示包含你名字的欢迎信息，你的名字就是从之前的变量里面读取的。

为了理解变量的作用，我们可以思考一下，如果不使用变量，我们实现上述功能的代码将是这样的:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

你可能暂时还没有完全理解这些代码和语法，但是你应该能够理解到 -- 如果我们没有变量，我们就不得不写大量的代码去枚举和检查输入的名字，然后去显示它们。这样做显然是低效率和不可行的 -- 你没有办法列举出所有可能的输入。

变量的另一个特性就是它们能够存储任何的东西 -- 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。你将在后续的内容中体验到这些用法。

我们说，变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。

声明变量

要想使用变量，你需要做的第一步就是创建它 -- 更准确的说，是声明一个变量。声明一个变量的语法是在var关键字之后加上这个变量的名字:

var myName;
var myAge;

在这里我们声明了两个变量 myName 和 myAge. 那么现在尝试输入这些代码到你的浏览器终端或者下面提供的JavaScript终端 (你也可以在另一个独立的标签页或窗口 open this consol ). 此外，你也可以多声明几个变量.

Hidden code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript console</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>
  </head>
  <body>

    
  </body>

  <script>
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }
    
    createInput();

  </script>
</html>

提示: 在JavaScript中，所有代码指令都会以分号结尾 (;) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。

你可以通过使用变量的方式来验证这个变量的数值是否在执行环境中已经存在。例如，

myName;
myAge;

以上这两个变量并没有数值，他们是空的容器。当你使用他们时，你会得到一个undefined的值。如果他们并不存在的话，那你就会得到一个报错信息。不信的话，可以尝试使用下面的变量，

scoobyDoo;

提示: 千万不要把两个概念弄混淆了，"一个变量存在，但是没有数值"和"一个变量并不存在" — 他们完全是两回事.

初始化变量

一旦你定义了一个变量，你就能够初始化它. 方法如下，在变量名之后跟上一个"="，然后是数值:

myName = 'Chris';
myAge = 37;

尝试回到控制台现在，输入这些行。在每种情况下，您都应该看到您分配给控制台中返回的变量的值以进行确认。同样，您可以通过在控制台中简单输入变量值来返回变量值 - 再次尝试:

myName;
myAge;

您可以同时声明和初始化变量，如下所示:

var myName = 'Chris';

这可能是你大多数时候都会做的，因为它比在两个单独的行上执行两个动作更快。

注意:如果您编写了一个声明和初始化变量的多行JavaScript程序，您可以在初始化之后实际声明它，它仍然可以工作。这是因为变量声明通常在执行其余代码之前先完成。这称为提升 - 请阅读 var hoisting / a>有关主题的更多详细信息。

更新变量

一旦变量具有分配的值，您可以通过简单地给它一个不同的值来更新该值。尝试在控制台中输入以下行:

myName = 'Bob';
myAge = 40;

除了可变命名规则

你可以调用一个变量几乎任何你喜欢，但有限制。通常你应该坚持只使用拉丁字符(0-9，a-z，A-Z)和下划线字符。

You shouldn't use other characters because they may cause errors or be hard to understand by an international audience.
Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.
Don't use numbers at the start of variables. This isn't allowed and will cause an error.
A safe convention to stick to is so-called "lower camel case", where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.
Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.
Variables are case sensitive — so myage is a different variable to myAge.
One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like var, function, let, and for as variable names. Browsers will recognize them as different code items, and so you'll get errors.

注意:您可以在 #Keywords">词法语法 - 关键字。

好名称示例:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

错误名称示例:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

现在尝试创建一些更多的变量，上面的指导。

变量类型

有几种不同类型的数据可以存储在变量(数据类型)中。在本节中，我们将简要介绍这些，然后在以后的文章中，您将更详细地了解它们。

到目前为止，我们已经看过前两个，但还有其他。

数字

您可以在变量中存储数字，例如30(也称为整数)或像2.456这样的十进制数字(也称为浮点数或浮点数)。对于不同的数字类型，JavaScript没有不同的数据类型，例如一些编程语言。当给一个变量一个数字值，你不包括引号:

var myAge = 17;

字符串

字符串是文本片段。当你给一个变量一个字符串值，你需要将它包装在单引号或双引号中，否则JavaScript将尝试将它作为另一个变量名。

var dolphinGoodbye = 'So long and thanks for all the fish';

布尔

布尔值是true / false值 - 它们可以有两个值， true 或 false 。这些通常用于测试条件，之后适当地运行代码。例如，一个简单的情况是:

var iAmAlive = true;

而在现实中，它将被更多地使用:

var test = 6 < 3;

这是使用"小于"运算符(< )来测试6是否小于3.如你所料，它将返回 false ，因为6不是小于3！你将在课程中学到更多关于这样的操作员。

数组

数组是单个对象，包含用方括号括起来并用逗号分隔的多个值。尝试在控制台中输入以下行:

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

定义这些数组后，您可以使用如下所示的语法访问它们各自的值。尝试这些行:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

这里的方括号包含一个索引值，用于指定要返回的值的位置。你可能已经注意到，计算机从0计数，而不是像我们人类一样。

在将来的文章中，您将学到更多关于数组的内容。

对象

在编程中，对象是对现实生活对象进行建模的代码结构。你可以有一个简单的对象代表一个停车场，并包含关于它的宽度和长度的信息，或者你可以有一个对象代表一个人，并包含关于他们的名字，身高，体重，他们说什么语言，如何说你好，他们，等等。

尝试在您的控制台输入以下行:

var dog = { name : 'Spot', breed : 'Dalmatian' };

要检索存储在对象中的信息，可以使用以下语法:

dog.name

我们现在不会再查看对象了 - 您可以在未来的模块中了解更多信息。

松散键入

JavaScript是一种"宽松类型语言"，这意味着，与其他一些语言不同，您不需要指定变量将包含什么数据类型(例如number？string？)。

例如，如果你声明一个变量并给它一个带引号的值，那么浏览器就会知道它是一个字符串:

var myString = 'Hello';

它仍然是一个字符串，即使它包含数字，所以要小心:

var myNumber = '500'; // oops, this is still a string
typeof(myNumber);
myNumber = 500; // much better — now this is a number
typeof(myNumber)

尝试输入上面的四行到控制台一个一个，看看什么结果(不要输入评论)。你会注意到，我们使用一个特殊的函数 typeof() - 这会返回你传递给它的变量的数据类型。第一次在上面的序列中调用它，它应该返回 string ，因为在这一点 myNumber 变量包含一个字符串\'500\' >。看看，看看它返回的第二次你叫它。

概要

现在，您应该知道有关JavaScript变量的合理金额以及如何创建它们。在下一篇文章中，我们将更详细地讨论数字，看看如何在JavaScript中做基本的数学。

w3cschool 编程狮，随时随地学编程

如何存储你需要的信息 — 变量

需要的工具

变量是什么?

声明变量

Hidden code

初始化变量

更新变量

除了可变命名规则

变量类型

数字

字符串

布尔

数组

对象

松散键入

概要

Web开发入门

HTML—构建网络

HTML介绍

Multimedia_and_embedding

Introduction_to_CSS

Accessibility

Styling_text

First_steps

Tools_and_testing

Building_blocks

CSS_layout

Objects

Express_Nodejs

Django