JavaScript/Kenjiro995/HeloWord

První script HeloWord

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

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

<!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)

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

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

<br> nový řádek

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

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áš?