Embedded Files
JavaScript Variables
JavaScript Variables
A JavaScript variable is nothing more than the name of a storage place. Variables in JavaScript are classified into two types: local variables and global variables. When declaring a JavaScript variable (also known as an identifier), there are several guidelines to follow. The name must begin with a letter (a-z or A-Z), underscore (_), or dollar ($) symbol.
Variables are Containers for Storing Data
Variables are Containers for Storing Data
JavaScript Variables can be declared in 4 ways:
Automatically
Using var
Using let
Using const
In this first example, x, y, and z are undeclared variables.
They are automatically declared when first used:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
x = 1;
y = 2;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
From the examples you can guess:
x stores the value 5
y stores the value 6
z stores the value 11
EXAMPLE using Var
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
var x = 1;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
Example using let
Example using let
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
let x = 1;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
Example using const
Example using const
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
const x = 1;
const y = 2;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
Example Mixed Example
Example Mixed Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
const price1 = 1;
const price2 = 2;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The value of z is: " + total;
The const keyword is used to declare the two variables price1 and price2.
These are fixed values that cannot be modified.
The let keyword is used to declare the variable total.
The total value can be modified.
When to Use var, let, or const?
When to Use var, let, or const?
1. Variables should always be declared.
2. If the value should not be modified, always use const.
3. If the type should not be modified (Arrays and Objects), always use const.
4. If you can't use const, use let.
5. Use var only if you MUST support ancient browsers.
JavaScript Data Types
JavaScript Data Types
Variables in JavaScript may store integers such as 100 as well as text values.
Text values are referred to as text strings in programming.
JavaScript can handle a wide range of data types, but for now, focus on integers and strings.
Strings are enclosed in double or single quotations. Numbers are written without quotation marks.
When you place a number in quotation marks, it is interpreted as a text string.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 403;
let person = "It's Me";
let answer = 'Howdy, did you miss me partner?';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Declaring a JavaScript Variable
Declaring a JavaScript Variable
In JavaScript, creating a variable is referred to as "declaring" a variable.
The var or let keyword is used to declare a JavaScript variable:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<p id="demo9"></p>
<p id="demo10"></p>
<p id="demo11"></p>
<p id="demo12"></p>
<p id="demo13"></p>
<p id="demo14"></p>
<p id="demo15"></p>
</body>
</html>
JAVASCRIPT
let countryName1 = "Germany";
document.getElementById("demo1").innerHTML = countryName1;
let countryName2 = "France";
document.getElementById("demo2").innerHTML = countryName2;
let countryName3 = "Poland";
document.getElementById("demo3").innerHTML = countryName3;
let countryName4 = "Spain";
document.getElementById("demo4").innerHTML = countryName4;
let countryName5 = "Portugal";
document.getElementById("demo5").innerHTML = countryName5;
let countryName6 = "Italy";
document.getElementById("demo6").innerHTML = countryName6;
let countryName7 = "UK";
document.getElementById("demo7").innerHTML = countryName7;
let countryName8 = "Greece";
document.getElementById("demo8").innerHTML = countryName8;
let countryName9 = "Sweden";
document.getElementById("demo9").innerHTML = countryName9;
let countryName10 = "Norway";
document.getElementById("demo10").innerHTML = countryName10;
let countryName11 = "Finland";
document.getElementById("demo11").innerHTML = countryName11;
let countryName12 = "Denmark";
document.getElementById("demo12").innerHTML = countryName12;
let countryName13 = "Switzerland";
document.getElementById("demo13").innerHTML = countryName13;
let countryName14 = "Serbia";
document.getElementById("demo14").innerHTML = countryName14;
let countryName15 = "Bulgaria";
document.getElementById("demo15").innerHTML = countryName15;
One Statement, Many Variables
One Statement, Many Variables
Many variables can be declared in a single sentence.
Begin the sentence with let, and then separate the variables with a comma:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
let person = "Gideon Arias", countryName = "Norway", place = "Stadtlandet";
document.getElementById("demo").innerHTML = countryName;
A declaration can span multiple lines:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>
JAVASCRIPT
let person1 = "Gideon Arias",
countryName1 = "Norway",
place1 = "Stadtlandet";
document.getElementById("demo1").innerHTML = person1;
let person2 = "CJ Cabuco",
countryName2 = "France",
place2 = "Paris";
document.getElementById("demo2").innerHTML = countryName2;
let person3 = "Jacob Lee",
countryName3 = "Germany",
place3 = "Berlin";
document.getElementById("demo3").innerHTML = place3;
JavaScript Arithmetic
JavaScript Arithmetic
You can do arithmetic with JavaScript variables, just like you do with algebra, by using operators like = and +:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Howdy! It's me again, Sorry for ruining some parts of the webpage partner!</p>
<p>Anyways, the result of adding "Gideon" + " " + "Arias" is:</p>
<p id="demo"></p>
<script>
let x = "Gideon" + " " + "Arias";
document.getElementById("demo").innerHTML = x;
</script>
<p>With this we can also created some cool lines! I will add "You are a wonderful" + " " + "person"</p>
<p id="demo1"></p>
<script>
let y = "You are a wonderful" + " " + "person";
document.getElementById("demo1").innerHTML = y;
</script>
<p>Not bad right? What do you think partner? ;)</p>
</body>
</html>
Page updated
Google Sites
Report abuse