JavaScript variables
Variables are "containers" used to store information.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
var x=5;
var y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>
</body>
</html>
Click the "Run Instance" button to view the online instance
Just like algebra
x=5
y=6
z=x+y
In algebra, we use letters (like x) to save the value (such as 5).
Through the above expression z=x+y, we can calculate the value of z to be 11.
In JavaScript, these letters are called variables.
 | You can think of variables as containers for storing data. |
|---|
JavaScript Variables
Like algebra, JavaScript variables can be used to store values (such as x=5 ) and expressions (such as z=x+y).
Variables can use short names (such as x and y) or more descriptive names (such as age, sum, totalvolume).
Variables must start with a letter
Variables can also start with $ and _ symbols (but we do not recommend this)
Variable names are case-sensitive (y and Y are different variables)
| ##JavaScript statements and JavaScript variables are case-sensitive. |
|---|
JavaScript Data Types
JavaScript variables can also hold other data types, such as text values (name="Bill Gates").
In JavaScript, a text like "Bill Gates" is called a string.
JavaScript variables come in many types, but for now, we’ll just focus on numbers and strings.
When you assign a text value to a variable, you should surround the value with double or single quotes.
Do not use quotation marks when the value you assign to a variable is a numeric value. If you surround a numeric value with quotes, the value is treated as text.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>
</body>
</html>
Click the "Run Instance" button to view the online instance
Declare (Create) JavaScript Variables
Creating variables in JavaScript is often called "declaring" a variable.
We use the var keyword to declare variables:
After a variable is declared, the variable is empty (it has no value) .
To assign a value to a variable, use the equal sign:
However, you can also declare a variable when Assign a value to it:
In the following example, we create a variable named carname and assign it the value "Volvo" ", and then put it into the HTML paragraph with id="demo":
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
</body>
</html>Click the "Run Example" button to view the online example
| ##A good programming habit is, at the beginning of the code, Declare the required variables uniformly. |
|---|
One statement, multiple variables
You can declare many variables in one statement. The statement starts with var and uses commas to separate variables:
var lastname="Doe", age=30, job="carpenter";
Statement It can also span multiple lines:
var lastname="Doe",
age=30,
job="carpenter";
Value = undefined
In computer programs, variables without value are often declared. The value of a variable declared without a value is actually undefined.
After executing the following statement, the value of variable carname will be undefined:
Redeclare JavaScript variables
If you redeclare a JavaScript variable, the value of the variable will not be lost:
After the following two statements are executed, the value of the variable carname is still "Volvo "：
var
carname="Volvo";
var carname;
JavaScript Arithmetic
You can do arithmetic through JavaScript variables, Operators such as = and + are used:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>Click "Run Instance" " button to see an online example
You will learn more about JavaScript operators later in this tutorial.
