Proměnné JavaScriptu lze deklarovat 4 způsoby:
Automaticky
Pomocí var
Pomocí let
Pomocí const
V tomto prvním příkladu x, y a z jsou nedeklarované proměnné.
Jsou automaticky deklarovány při prvním použití:
x = 5;
y = 6;
z = x + y;Zkuste to sami →
<!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>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Za dobrou programátorskou praxi se považuje vždy deklarovat proměnné před použitím.
Z příkladů můžete hádat:
x ukládá hodnotu 5
y ukládá hodnotu 6
z ukládá hodnotu 11
var x = 5;
var y = 6;
var z = x + y;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Klíčové slovo var bylo použito ve všech kódech JavaScript od roku 1995 do roku 2015.
Klíčová slova let a const byla do JavaScriptu přidána v roce 2015.
Klíčové slovo var by se mělo používat pouze v kódu napsaném pro starší prohlížeče.
let x = 5;
let y = 6;
let z = x + y;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Dvě proměnné price1 a price2 jsou deklarovány pomocí klíčového slova const.
Tyto hodnoty jsou konstantní a nelze je měnit.
Proměnná total je deklarována pomocí klíčového slova let.
Hodnotu total lze změnit.
1. Vždy deklarujte proměnné
2. Pokud se hodnota nemá měnit, vždy použijte const
3. Vždy použijte const, pokud typ nemá být měněn (pole a objekty)
4. let použijte pouze v případě, že nemůžete použít const
5. var používejte pouze v případě, že MUSÍTE podporovat staré prohlížeče.
Stejně jako v algebře mají proměnné hodnoty:
let x = 5;
let y = 6;Stejně jako v algebře se proměnné používají ve výrazech:
let z = x + y;Z výše uvedeného příkladu můžete uhodnout, že součet je vypočítán na 11.
Proměnné jsou kontejnery pro ukládání hodnot.
Všechny proměnné JavaScriptu musí být identifikovaný pomocí jedinečných jmen.
Tyto jedinečné názvy se nazývají identifikátory.
Identifikátory mohou být krátké názvy (jako x a y) nebo popisnější názvy (věk, součet, celkový objem).
Obecná pravidla pro vytváření jmen pro proměnné (jedinečné identifikátory) jsou:
Jména mohou obsahovat písmena, číslice, podtržítka a znaky dolaru.
Jména musí začínat písmenem.
Názvy mohou také začínat znakem $a _ (v tomto tutoriálu ho ale nepoužijeme).
V názvech se rozlišují velká a malá písmena (y a Y jsou různé proměnné).
Vyhrazená slova (jako klíčová slova JavaScriptu) nelze použít jako názvy.
V identifikátorech JavaScriptu se rozlišují velká a malá písmena.
V JavaScriptu je rovnítko (=) operátorem "přiřazení", nikoli operátor "rovná se".
To se liší od algebry. Následující nedává smysl algebra:
x = x + 5 V JavaScriptu to však dává dokonalý smysl: přiřadí hodnotu x + 5 to X.
(Vypočítá hodnotu x + 5 a výsledek vloží do x. Hodnota x se zvýší o 5.)
Operátor "rovná se" se v JavaScriptu zapisuje jako ==.
Proměnné JavaScriptu mohou obsahovat čísla jako 100 a textové hodnoty jako „John Srna".
V programování se textové hodnoty nazývají textové řetězce.
JavaScript umí pracovat s mnoha typy dat, ale zatím si představte jen čísla a řetězce.
Řetězce jsou psány uvnitř dvojitých nebo jednoduchých uvozovek. Čísla jsou psána bez uvozovek.
Pokud vložíte číslo do uvozovek, bude s ním zacházeno jako s textovým řetězcem.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';Zkuste to sami →
<!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 = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Vytvoření proměnné v JavaScriptu se nazývá „deklarování“ proměnné.
Proměnnou JavaScriptu deklarujete pomocí klíčového slova var nebo let:
var carName;let carName;Po deklaraci nemá proměnná žádnou hodnotu (technicky je undefined).
Chcete-li proměnné přiřadit hodnotu, použijte rovnítko:
carName = "Volvo";Můžete také přiřadit hodnotu proměnné, když ji deklarujete:
let carName = "Volvo";V níže uvedeném příkladu vytvoříme proměnnou s názvem carName a přiřadíme jí hodnotu "Volvo" k tomu.
Poté „vypíšeme“ hodnotu uvnitř odstavce HTML s id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Je dobrým programátorským postupem deklarovat všechny proměnné na začátku skriptu.
V jednom příkazu můžete deklarovat mnoho proměnných.
Spusťte prohlášení pomocí let a oddělte proměnné čárkou:
let person = "John Doe", carName = "Volvo", price = 200;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Deklarace může zahrnovat více řádků:
let person = "John Doe",
carName = "Volvo",
price = 200;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
V počítačových programech jsou proměnné často deklarovány bez hodnoty. Hodnota může být něco, co se musí vypočítat, nebo něco, co bude poskytnuto později, jako uživatelský vstup.
Proměnná deklarovaná bez hodnoty bude mít hodnotu undefined.
Po provedení tohoto příkazu bude mít proměnná carName hodnotu undefined:
let carName;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Pokud znovu deklarujete proměnnou JavaScriptu deklarovanou pomocí var, neztratí svou hodnotu.
Proměnná carName bude mít po provedení těchto příkazů stále hodnotu "Volvo":
var carName = "Volvo";
var carName;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Nemůžete znovu deklarovat proměnnou deklarovanou pomocí let nebo const.
Toto nebude fungovat:
let carName = "Volvo";
let carName;Stejně jako u algebry můžete provádět aritmetiku s proměnnými JavaScriptu pomocí operátory jako = a +:
let x = 5 + 2 + 3;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Můžete také přidat řetězce, ale řetězce budou zřetězeny:
let x = "John" + " " + "Doe";Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Zkuste také toto:
let x = "5" + 2 + 3;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Pokud vložíte číslo do uvozovek, zbytek čísel bude považován za řetězce a bude zřetězen.
Nyní zkuste toto:
let x = 2 + 3 + "5";Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Protože JavaScript zachází se znakem dolaru jako s písmenem, identifikátory obsahující $jsou platnými názvy proměnných:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Používání znaku dolaru není v JavaScriptu příliš běžné, ale často jej používají profesionální programátoři jako alias pro hlavní funkci v knihovně JavaScript.
V JavaScriptové knihovně jQuery je například hlavní funkce $ se používá k výběru prvků HTML. V jQuery $ ("p"); znamená "vybrat všechny prvky p".
Protože JavaScript považuje podtržítko za písmeno, identifikátory obsahující _ jsou platnými názvy proměnných:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Použití podtržítka není v JavaScriptu příliš běžné, ale konvencí mezi profesionálními programátory je používat jej jako alias pro "soukromé (skryté)" proměnné.