JavaScript/Kenjiro995/HeloWord
První script HeloWord
[editovat]Není nutné cokoliv instalovat protože existují online editory.
- https://replit.com/ - osvědčil se mi při ukládání vytvořených programů, při vytváření nové relace si lze vybrat z mnoha programovacích jazyků
- https://jsfiddle.net/ - ideální pro počáteční experimentování (použít pro tuto hodinu)
jsfiddle.net
[editovat]- okno HTML - použití scriptu v html
- okno CSC - pro kaskádové styly
- okno JavaScript + No-libray (pure JS) - pro psaní čistě v JavaScriptu
Napsaný program se spouští tlačítkem RUN nahoře v liště editoru
HTML
[editovat]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
document.write("Ahoj Světe"); // vypíše do webové stránky
alert("Výpis do informačního boxu!!"); // vypíše jako informační box, výpis má přednost před ostatními formami, ostatní se vypíše až se okno zavře
console.log("Výpis do console"); // vypíše do konzole
</script>
</body>
</html>
Nebo to napsat do druhého okna jako čistý JavaScript, ukázáno pod tímto textem.
JavaScript + No-libray (pure JS)
[editovat]document.write("Ahoj Světe"); // vypíše do webové stránky
alert("Výpis do informačního boxu!!"); // vypíše jako informační box, výpis má přednost před ostatními formami, ostatní se vypíše až se okno zavře
console.log("Výpis do console"); // vypíše do konzole
Výsledek po spuštění programu
[editovat]- Nejdříve vypíše alert("Výpis do informačního boxu!!"); i když je v programu až jako druhý řádek. Prostě má infobox přednost před ostatními. Jakmile je odkliknuto, teprve teď se provedou ostatní příkazy.
- document.write("Ahoj Světe"); vypíše text přímo do stránky vytvořeného html. Příkaz se tedy využije, pokud je třeba měnit obsah webové stránky.
- console.log("Výpis do console"); vypíše text do konzole. Vypisuje se programátorům v editoru jazyka. V prohlížeči se možná nezobrazí, leda by prohlížeč měl zabudovanou programátorskou konzoli.
Další experimentování s výpisem
[editovat]<br> nový řádek
[editovat]Aby bylo možné psát na další řádek je třeba vložit do textu html značku '''<br>'''.
document.write("Ahoj Světe");
document.write("<br>");
document.write("Druhý řádek");
Výsledek:
Ahoj Světe Druhý řádek
Nebo tyto tři texty spojit do jednoho řádku. Bude mít stejný výsledek:
document.write("Ahoj Světe" + "<br>" + "Druhý řádek");
Výsledek:
Ahoj Světe Druhý řádek
Nebo je možné celý řádek spojit do jediného řetězce. Bude mít stejný výsledek:
document.write("Ahoj Světe <br> Druhý řádek");
Výsledek:
Ahoj Světe Druhý řádek
\n nový řádek
[editovat]Pro psaní do infoboxu příkazem alert je ovšem zapotřebí místo <br> použít \n.
alert("Výpis do informačního boxu!!"+"\n"+"druhý řádek");
Nebo:
alert("Výpis do informačního boxu!!\ndruhý řádek");
Nebo použití v php scriptu:
$string = 'Hello everybody \n this is an alert box';
echo "<script>alert(\"$string\")</script>";
Nebo použití v html jako script spuštěný tlačítkem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="alert('Ahoj\nJak se máš?')">Moje tlačítko</button>
</body>
</html>
Přičemž se mezi <body></body> vkládá tlačítko se scriptem:
<button onclick="alert('Ahoj\nJak se máš?')">Moje tlačítko</button>
Po stisknutí tlačítka Moje tlačítko se objeví okno infoboxu se zprávou:
Ahoj Jak se máš?