JavaScript 变量

简介: 对变量来说,JavaScript 可能是最宽松的语言了。你在使用它之前不必定义一个变量是什么,并且在脚本中你可以随时改变一个变量的类型。

对变量来说,JavaScript 可能是最宽松的语言了。你在使用它之前不必定义一个变量是什么,并且在脚本中你可以随时改变一个变量的类型。然后,为了容易维护并保持一个严格的编码语法,在你的脚本的开头明确的声明变量或者在你的函数中明确定义局部变量是一个非常好的习惯。

我们通过一个唯一的名字和使用var关键字来定义一个变量。

变量名必须以字母表中的一个字符或者一个下划线开始,而名字的其它部分可以由数字,字母,美元符和下划线构成。不要是用任何其它的字符。

                                                                                  

 

n        注解:JavaScript中的大多数词语一样,变量名是大小写敏感的:thisVariable ThisVariable是不同的变量。给你的变量命名要非常小心;如果你给它们命名不一致,那么你会碰到任何类型的错误。为了避免那样的结果,大多数程序员使用骆驼命名法(camel notation):变量名以一个小写字母开始,而后面的单词则大写并且没有空格是不间断的。如这个变量名thisVariable

                                                                                  

 

始终给你的变量起有意义的名字。在我们的下一个例子中,我们将会写一个汇率转换程序,因此我们会使用像euroToDollarRate dollarToPound这样的变量名。对变量进行描述性命名由两个优点:当你隔一段时间回过头再来看的时候,更容易记得代码是做什么的;其它刚接触代码的人可以更容易明白程序是做什么的。代码的可读性和布局对网页的开发是非常重要的。它可以更快速,更容易的发现错误并调试它们,然后按照你想要的修改代码。

                                                                                  

 

n        注解:变量声明以关键字var开始,在技术上并不是必需的。不使用它表示隐含,你会在下一步中看到。

                                                                                  

 

正如我们所说的一切,我来开始声明变量吧。我们可以声明一个变量而不对他进行初始化(给它赋一个值):

var myVariable;

然后它就可以准备并等待我们有值的时候赋值。这样对变量是非常有用的,可以用来保存用户的输入。

我们也可以同时对变量进行定义了初始化:

var myVariable = "A String";

var anotherVariable = 123;

或者我们可以通过把prompt()函数的返回值或一个计算的和赋给它来定义并初始化一个变量:

var eurosToConvert = prompt( "How many Euros do you wish to

convert", "" );

var dollars = eurosToConvert * euroToDollarRate;

 

prompt() 函数是JavaScript的一个函数,它用来让用户输入一个值然后把它返回到代码中。这里我们把输入的值赋给变量eurosToConvert

 

初始化你的变量是个非常好的主意,尤其是在你可以给它们赋一个对程序有用的缺省值的时候。甚至初始化一个变量为空字符串也是非常好的主意,因为你可以对它进行核对而不会引起错误信息,如果变量没有一个值,错误就会突然出现。

让我们看一下变量是如何提高你的代码的可读性和实用性。

下面是一个没有任何变量的代码块:

<html>

<body>

<script type="text/javascript">

document.write( 0.872 * prompt( "How many Euros do you

wish to convert", "" ) );

</script>

</body>

</html>

不是那么可以轻易看出,这段代码是把欧元(euros)转化成美元(dollars),因为没有任何东西告诉我们0.872就是汇率。可是这段代码工作很好;如果你用数字10试验一下,你就会得到如下的结果:

                                                                               

 

8.72

                                                                                

 

我们使用在这个例子中使用了窗口(window)对象的prompt()方法来获得用户的输入(这个实例中window对象时可选的,为了保持代码简短你可以忽略它)。这个方法有两个参数:一个是显示在用户输入框上面的标签,另一个是输入框的初始值。在第四章中,你会学到更多关于prompt()的知识以及如何来使用它。假设我们需要结果显示更多的信息,如:

                                                                                

 

10 Euros is 8.72 Dollars

                                                                               

 

不使用变量,能实现的唯一方式就是让用户对他们想转换的欧元(euros)输入两次,那样确实对用户显得不会很友好。可是使用变量,我们可以临时把数据存起来,然后再我们需要的时候可以多次调用它:

<html>

<body>

<script type="text/javascript">

// Declare a variable holding the conversion rate

var euroToDollarRate = 0.872;

// Declare a new variable and use it to store the

// number of euros

var eurosToConvert = prompt( "How many Euros do you wish

to convert", "" );

// Declare a variable to hold the result of the euros

// multiplied by the conversion

var dollars = eurosToConvert * euroToDollarRate;

// Write the result to the page

document.write( eurosToConvert + " euros is " + dollars +

" dollars" );

</script>

</body>

</html>

我们使用了三个变量:一个用来存储欧元(euros)到美元(dollars)的汇率,另一个存储需要转化的欧元数(euros),最后一个保存着转换成美元(dollars)的结果。接下来我们所要做的就是使用两个变量把结果写出来。这个脚本不只更具实用性,而且它也更加容易读懂。

 
相关文章
|
4月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
4月前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
51 0
JavaScript基础知识-变量的声明提前
|
2月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
2月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
2月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
4月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
51 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
4月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
3月前
|
JavaScript 前端开发
什么是JavaScript变量?
什么是JavaScript变量?
43 0
|
4月前
|
存储 JavaScript 前端开发