JavaScript | Web
Tvorba webu – HTML, CSS, JS
Webové stránky stručně a prakticky
HTML

Použití jazyka JavaScript v praxi

JavaScript (JS) je velmi oblíbený programovací jazyk pro web, který je přítomen v každém moderním webovém prohlížeči. Nabízí mnoho možností využití od jednoduché kontroly webových formulářů, manipulaci s obsahem stránky až po možnost vytvářet užitečných klientských aplikací.

JavaScript
JavaScript

Předpokladem úspěchu pro práci s JavaScriptem je alespoň základní znalost jazyků HTML a CSS.

Odkazy

Ukázky

  • Tearable Cloth - animace fyzikálních vlastností
  • Intro to CSS 3D transforms (výuka)
  • HTML5 Video Events and API
  • Geolokace

  • FlipDown.js

    Odpočet času do konce kurzu...

  • Detekce povoleného/zakázaného JavaScriptu:

    ...
<body>
    ...
    <!-- JavaScript detection -->
    <div id="js-info">
        <script>

            // document.write("<p class='bg-success text-white p-1 rounded text-center'>Váš prohlížeč podporuje JavaScript.</p>");

            var p = document.createElement('p');
            p.classList.add('bg-success', 'text-white', 'p-1', 'rounded', 'text-center');
            p.innerText = 'Váš prohlížeč podporuje JavaScript.';
            document.getElementById('js-info').appendChild(p);
        </script>
        <noscript>
            <p class="bg-warning p-1 rounded text-center">Váš prohlížeč nepodporuje JavaScript&nbsp;&ndash; zvažte jeho aktualizaci!</p>
        </noscript>
    </div>
...
  • CKEditor 5 (WYSIWYG editor)

Tipy

  • Hyphenopoly – automatické dělení slov na koncích řádků
  • Typopo – automatická oprava typografických chyb
  • jQuery
    • Colorbox (ajQuery lightbox)
      $(document).ready(function () {
  /* Colorbox
  ============================================================ */
  jQuery('a.gallery').colorbox({ opacity:0.7 , rel:'group1' });
  jQuery.extend(jQuery.colorbox.settings, {
     current: "Obrázek {current}/{total}",
     slideshow: true,
     slideshowSpeed: 3000,
     slideshowStart: "Spustit prezentaci",
     slideshowStop: "Zastavit prezentaci",
  });
});
    • scrollUp jQuery plugin
    • FooTable – responzivní tabulky (zdarma pouze pro nekomerční použití):
    • Vegas background slideshow

Algoritmus

Algoritmus je obecný postup řešení definovaného zadání (úlohy, problému):

  • slovní formulace (návod k použití, kuchařka, zákon, vyhláška atd.)
  • grafické vyjádření (různé typy diagramů a schémat)
    • Flowchart (vývojový diagram) - grafické znázornění jednotlivých kroků algoritmu, procesu nebo pracovního postupu:
      • pouze 1 pohled odpovídající pohledu UML aktivity diagram
    • UML (Unified Modeling Language) - univerzální modelovací jazyk pro analýzu, návrh a dokumentaci softwarových systémů:
      • 7 pohledů v diagramech struktury
      • 7 pohledů v diagramech chování
    • BPMN (Business Process Model and Notation) - modelace obchodních procesů:
      • jen 2 pohledy

Aplikace:

Začátek algoritmu
Začátek
Konec algoritmu
Konec
Rozhodnutí
Rozhodnutí
Akce
Zpracování
Rozdělení toku – paralelizace
Zpracování
Spojení souběžného toku
Zpracování

Začátek algoritmu
Začátek
Konec algoritmu
Konec
Ruční vstup informací
Ruční vstup informací
Vstupní nebo výstupní data
Data
Rozhodnutí
Rozhodnutí
Zpracování dat
Zpracování
Cyklus
Cyklus
Zobrazit informaci
Výstup na monitor
Výstupní dokument (sestava, zpráva)
Dokument
Interní paměť (RAM)
Interní paměť (RAM)
Lokálně uložená data
Lokálně uložená data
Externě uložená data (HDD)
Externě uložená data
Databáze
Databáze
Spojka v rámci stránky
Spojka v rámci stránky
Spojka mimo stránku
Spojka mimo stránku
Podprogram
Podprogram

Programování

Program je konkrétní realizace algoritumu v daném programovacím jazyce.

Výuka:

Příklady

Načtení externího skriptu

<script src="global.js">
<script src="global.js" />
<script src="global.js"></script>

Prvek <script> je prvkem párovým a tudíž musí mít vždy i uzavírací část </script>.

Neblokující načítání externích skriptů

<script async src="script-async.js"></script>
<script defer src="script-defer.js"></script>

Načítání externích skriptů

Otevření dialogového okna (verze A)

...
    <!-- Javascript -->
    <script>
    "use strict";
    window.addEventListener("load", function() {
        alert("Ahoj!");
      console.log("Page is fully loaded");
    });
    </script>
</head>
<body>
    ...

Dialogové okno se zprávou Ahoj! se zobrazí až po načtení úplně celé stránky včetně všech externích objektů – čeká se tedy např. na načtení obrázků.

Otevření dialogového okna (verze B)

...
    <!-- Javascript -->
    <script>
    "use strict";
    window.addEventListener("DOMContentLoaded", function() {
        alert("Ahoj!");
      console.log("DOM fully loaded and parsed");
    });
    </script>
</head>
<body>
    ...

Dialogové okno se zprávou Ahoj! se zobrazí ihned po načtení objektového modelu dokumentu (DOM) – nečaká se tedy např. na načtení obrázků.

Otevření dialogového okna (verze C)

    ...
    <!-- Javascript -->
    <script>
        alert("Ahoj!");
    </script>
    </body>
</html>

Při umístění skriptu na konci těla dokumentu, není kontrola načtení DOM modelu nutná, neboť v tomto okamžiku je již DOM model načten. Nemusejí ovšem být načteny všechny externí objekty!

Vložení aktuálního roku

  • Verze A (nedoporučeno z důvodu přímého zápisu do dokumentu)
    <script>document.write(new Date().getFullYear());</script>

    Umístěním výše uvedeného skriptu do těla stránky zobrazíte v místě vložení aktální rok.

  • Verze B (doporučeno)
    <div id="year"></div>
<script>document.getElementById('year').innerText = (new Date().getFullYear());</script>

Vložení pevných mezer

Dle pravidel českého pravopisu by na konci řádku neměly zůstat neslabičné předložky (k, o, s, u, v, z). Typografické normy vylučují na konci řádku jakékoli samostatné písmeno, tedy i spojky (a, i).

Vložení pevných mezer za definované předložky a spojky.

<script>
    "use strict";
    const body = document.querySelector("body");
    function nbsp() {
        body.innerHTML = body.innerHTML.replace(/( |&nbsp;)([kosuvz]|do|ke|na|od|ku|po|se|ve|za|ze|bez|buď|čím|nad|pod|pro|před|přes|při|tím|[ai]|ač|až|ba|či|že|leč|než|když|vždyť) /g, "$1$2&nbsp;");
    }
    nbsp();
    nbsp();
</script>

Regulární výrazy je možné otestovat např. na stránce Regular Expressions 101.

Návrh Další