Podmienky v JS sú podobné ako v céčku a na to, aby sme ich mohli aj testovať sa najprv naučíme používať dátum a čas v JS.
Vytvorme si html súbor: podmienky.html
Kód:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/podmienky.js"></script>
<title>Podmienky v JS</title>
</head>
<body>
<p id="vypis" class="modry"></p>
</body>
</html>
[/code]
Asi ste si všimli, že sú tam používané súbory: style.css – to už poznáme, podmienky.js – to je náš pracovný script, ale je tam aj jquery.js. Čo to je a na čo?
Je to najpoužívanejšia knižnica JavaScriptu, ktorá veľmi uľahčuje kódovanie.
Napríklad namiesto kódu z 1. lekcie:
Kód:
window.onload = function() {
var text = "Text, ktorý chceme vložiť do odstavca.";
document.getElementById("vykresli").innerHTML = text;
}
napíšeme:
Kód:
$(function() {
var text = "Text, ktorý chceme vložiť do odstavca.";
$('#vykresli').text(text);
});
Vysvetlím čo to robí.
Kód:
$(function() {});
robí to isté ako
Kód:
window.onload = function() {}
teda spustí script až po načítaní stránky.
Kód:
$('#vykresli').text(text);
robí to isté ako
Kód:
document.getElementById("vykresli").innerHTML = text;
teda do elementu s id=“vykresli“ vloží stanovaný text.
Však pekné?
Teraz sa už môžeme venovať dátumu a času.
Vytvoríme premennú, ktorú naplníme údajmi o aktuálnom dátume a čase.
Použijeme na to objekt Date().
Kód:
var d = new Date();
Vypíšeme:
Kód:
/** podmienky.js **/
$(function() {
var d = new Date();
/* pretože Date() nie je vyslovene textový reťazec a nevypísal by sa, treba ho previesť na string */
$('#vypis').text(d.toString());
});
výsledok:
Kód:
Wed Aug 17 2016 10:24:54 GMT+0200 (Central Europe Daylight Time)
Veľa údajov že? Takže si ich potrebujeme rozdrobiť.
Objekt Date() má niekoľko metód a tie si predstavíme.
• getDate() - vráti číslo dňa v měsíci, 1 je prvého
• getMonth() - vráti číslo mesiaca v roku, január je 0, takže je nutné pripočítať 1
• getFullYear() - vráti aktuálny rok ako 4 číslice
• getHours() - vráti hodiny
• getMinutes() - vráti minúty
• getSeconds() - vráti sekundy
• getTime() - táto metóda vracia počet milisekúnd od 1.1.1970, tento formát sa v informatike často používa (tzv. UNIX TimeStamp)
• getDay() - vráti číslo dňa v týždni, 0 je nedeľa
Upravíme pracovný script.
Kód:
/** podmienky.js **/
$(function() {
var d = new Date();
var den = d.getDate();
var mesiac = d.getMonth();
var rok = d.getFullYear();
var hod = d.getHours();
var min = d.getMinutes();
var sek = d.getSeconds();
var msOd1970 = d.getTime();
$('#vypis').text(den +'.'+ mesiac +'.'+ rok +' '+ hod +':'+ min +':'+ sek +' od 1.1.1970 prešlo '+ msOd1970 +' milisekúnd');
});
Výpis:
Kód:
17.7.2016 10:56:10 od 1.1.1970 prešlo 1471424170245 milisekúnd
Fajn. Konečne môžeme prejsť k podmienkam.
if
if – else
if – else if – else
Platí to isté ako v céčku.
Príklad:
Kód:
var d = new Date();
if (d.getHours() >= 18)
$('#vypis').text("Je po šiestej večer.");
Samozrejme, že to niečo vypíše až keď bude 18:00 hod. a viac, až do polnoci.
Podmienky sa dajú spájať ako v céčku za pomoci operátorov && alebo ||.
Kód:
if ((d.getHours() > 5) && (d.getHours() < 18))
$('#vypis').text("Dobrý deň");
else
$('#vypis').text("Dobrý večer.");
Môžeme sa s tým trochu pohrať.
Kód:
var d = new Date();
var hod = d.getHours();
if ((hod >= 5) && (hod <= 9))
$('#vypis').text("Dobré ráno");
else if ((hod >= 10) && (hod <= 11))
$('#vypis').text("Dobré dopoludnie");
else if (hod == 12)
$('#vypis').text("Dobré poludnie");
else if ((hod >= 13) && (hod <= 17))
$('#vypis').text("Dobré popoludnie");
else if ((hod >= 18) && (hod <= 21))
$('#vypis').text("Dobrý večer");
else
$('#vypis').text("Dobrú noc");
Tieto isté podmienky sa dajú zapísať aj za pomoci terárneho operátora napríklad takto:
Kód:
var vysledok = (hod >= 5) && (hod <= 9) ? "Dobré ráno" :
(hod >= 10) && (hod <= 11) ? "Dobré dopoludnie" :
hod == 12 ? "Dobré poludnie" :
(hod >= 13) && (hod <= 17) ? "Dobré popoludnie" :
(hod >= 18) && (hod <= 21) ? "Dobrý večer" : "Dobrú noc";
$('#vypis').text(vysledok);
Samozrejme sa dá na podmienky použiť aj switch, napríklad takto:
Kód:
var hodnota = 2;
var slovami;
switch (hodnota)
{
case 1:
slovami = "jedna";
break;
case 2:
slovami = "dva";
break;
case 3:
slovami = "ttrii";
break;
default:
slovami = "neviem";
}
$('#vypis').text(slovami);
ale ten sa používa málo.
Fajn, podmienky sme si prešli.
Skúsme ale reagovať na vstup od užívateľa.
Jednoduchý spôsob je použiť funkciu prompt(), ktorá má má dva vstupné parametre a to:
Otázka v tele funkcie a odpoveď, ktorú zadá užívateľ.
Príklad:
Kód:
var vek = prompt("Zadaj svoj vek");
$('#vypis').text((vek >= 18) ? "Si plnoletý" : "Nie si plnoletý");
To je pre dnes všetko. Nabudúce budeme hovoriť o cykloch.
Prihlásenie
Registrovať
Návody
Hľadať
Zoznam bodov
