HOME

5h-3LL 1.0
DIR: /srv/http/adent.cz/tisic.cz.karel/pages
/srv/http/adent.cz/tisic.cz.karel/pages/
Current File : /srv/http/adent.cz/tisic.cz.karel/pages/tahaky-js.php
<?php /*
 title=JavaScript tahák
 &description=Karlův cvičební MVC, aby pochopil, jak se dneska programuje :)
 &keywords= 
 &role=
 &groups=
*/ ?>

<h1>JavaScript Tahák</h1>

<div class="adc-tabs">
    <ul>
        <li class="active"><a href="#zaklady">Základy</a></li>
        <li><a href="#flow-controls">Flow Controls</a></li>
        <li><a href="#zakladni-objekty">Základní objekty</a></li>
        <li><a href="#vychytavky">Vychytávky</a></li>
        <!--li><a href="#jmeno-ouska-2">Ouško2</a></li-->
    </ul>
    
    <!-- Základní konstrukce -->
    <div class="active" id="zaklady">
        <h3>Základní konstrukce:</h3>
        <ul>
            <li>příkazy se oddělují středníky</li>
            
        </ul>
        <h3>Komentáře</h3>
        <ul>
            <li><code>//</code> - jednořádkový</li>
            <li><code>/* ... */</code> - víceřádkový</li>
        </ul>
        <h3>Datové typy</h3>
        <ul>
            <li><code>number</code> - číslo</li>
            <li><code>string</code> - řetězec</li>
            <li><code>boolean</code> - ano/ne</li>
            <li><code>Object</code> - objekt... :)</li>
            <li><code>null</code> - nic, pro proměnnou je jenom alokované místo; je to objekt</li>
            <li><code>undefined</code> - taky nic, ale není ani to alokované místo :) ; není to objekt</li>
        </ul>
        <h3>Proměnné</h3>
        <ul>
            <li><code>let a;</code> - deklarace proměnné <code>a</code>; použití <code>var</code> je zastaralé</li>
            <li class="adc-separator"></li>
            <li><code>const c;</code> - deklarace konstanty <code>c</code>; <em>pozor na konstanty - objekty; jsou to referenšní typy, takže se často definují jako konstanty</em></li>
            <li class="adc-separator"></li>
            <li><a href="https://www.w3schools.com/js/js_arrays.asp">Pole</a>
                <ul>
                    <li><code>let pole = [];</code> - prázdné pole; lze také zapsat <code>let pole = new Array();</code>, ale je to delší... :)</li>
                    <li>pole lze při deklaraci i naplnit, do závorek prostě napíšeme hodnoty oddělené čárkou: <code>let pole = [1, "ano", true];</code></li>
                    <li>přístup k položkám: <code>pole[0] = 1;</code> (indexuje se od nuly)</li>
                    <li class="adc-separator"></li>
                    <li><code>pole.length</code> = počet prvků pole</li>
                    <li><code>pole.includes(hodnota);</code> // funkce vracející boolean: true, pokud je hodnota v poli, false v opačném případě</li>
                    <li><code>pole.push(novy-prvek);</code> // přidá nový prvek na konec pole</li>
                    <li><code>pole.unshift(novy-prvek);</code> // přidá nový prvek na začátek pole</li>
                    <li><code>pole.shift();</code> // vrací první prvek pole a současně ho z pole smaže</li>
                    <li><code>pole.splice(2, 3);</code> // smaže od 3. prvku dále (indexy jsou od nuly) 3 prvky</li>
                    <li><code>pole.sort();</code> // srovná pole vzestupně - pozor! i čísla se řadí jako řetězce</li>
                    <li><code>pole.reverse();</code> // srovná pole sestupně - pozor! i čísla se řadí jako řetězce</li>
                </ul>
            </li>
            <li>
                <a href="https://www.w3schools.com/js/js_objects.asp">Objekty</a> (<a href="https://www.w3schools.com/jsref/jsref_classes.asp">Objekty podle třídy</a>)<br />
                <pre><code>let/const objekt = { 
  vlastnost1: hodnota1,
  ...,
  vlastnostN: hodnotaN
}</code></pre>
            </li>
            <li><a href="https://www.w3schools.com/jsref/jsref_obj_string.asp">Řetězce</a>
                <ul>
                    <li>Přiřazení</li>
                    <li><code>let retezec = "Ahoj!";</code> </li>
                    <li class="adc-separator"> </li>
                    <li>Metody: (jsou to často funkce! změna se pak musí provést jako <code>retezec = retezec.metoda();</code>)
                    </li>
                    <li><code>retezec[i]</code> - (i+1)-tý znak řetězce</li>
                    <li><code>retezec.length()</code> - počet znaků</li>
                    <li class="adc-separator"></li>
                    <li><code>retezec.trim()</code> - odmaže "bílé znaky" (např. mezery) kolem řetezce</li>
                    <li><code>retezec.replace("co", "čím")</code> - provede náhradu textu v řetězci</li>
                    <li><code>retezec.toUpperCase()</code> - na velká písmena</li>
                    <li><code>retezec.toLowerCase()</code> - na malá písmena</li>
                    <li><code>retezec.concat(retezec2, retezec3, ...)</code> - přidá na konec řetězce další řetězec nebo řetězce</li>
                    <li><code>retezec.substr(od, kolik)</code> - vrací podřetězec</li>
                    <li><code>retezec.substring(od, do)</code> - vrací podřetězec</li>
                    <li class="adc-separator"></li>
                    <li><code>retezec.split(oddelovaci-znak)</code> - rozdělí řetězec do pole řetězců podle oddělovacího znaku (default = mezera)</li>
                    <li><code>retezec.indexOf("ahoj")</code> - vrací první index výskytu</li>
                    <li><code>retezec.lastIndexOf("ahoj")</code> - vrací poslední index výskytu</li>
                    <li><code>retezec.search("ahoj")</code> - vrací index hledaného řetězce nebo REGEX výrazu</li>
                    <li class="adc-separator"></li>
                    <li>Specialita: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">Template strings/literals - Řetězce-šablony</a><br />
                        - uzavřené do zpětných apostrofů (Pravý Alt + klávesa pod Escapem), mohou obsahovat proměnné<br />
                        - např. <code>`...text ${promenna} text...`</code>
                    </li>
                </ul>
            </li>
            <li><a href="https://www.w3schools.com/jsref/jsref_obj_number.asp">Čísla</a>
                <ul>
                    <li>Přiřazení</li>
                    <li><code>let x = 10;</code> </li>
                    <li><code>let x = 10e5;</code> - sto tisíc :)</li>
                    <li class="adc-separator"> </li>
                    <li>Funkce a metody</li>
                    <li><code>x.isNaN(hodnota)</code> - Zjistí, zda je objekt v parametru funkce číslo či nikoli. NaN Označuje zkratku Not a Number.</li>
                    <li><code>x.toPrecision(cislo)</code> - Ořízne číslo cislo na danou přesnost.</li>
                    <li><code>x.toString()</code> - Převede číslo na řetězec, tzn. číslo se stane plnohodnotným řetězcem znaků.</li>
                    <li><code>x.toExponential(cislo)</code> - Převede cislo na exponenciální (vědeckou) notaci. Např. pro hodnotu 100 to bude 1e2.</li>
                    <li class="adc-separator"></li>
                    <li><code>Number.MAX_VALUE</code> - Vrací největší možné číslo v JavaScriptu</li>
                    <li><code>Number.MIN_VALUE</code> - Vrací nejmenší možné číslo v JavaScriptu</li>

                </ul>
            </li>
        </ul>
        <h3><a href="https://www.w3schools.com/jsref/jsref_operators.asp">Operátory</a></h3>
        <ul>
            <li><strong>aritmetické</strong>
                <ul>
                    <li><code>+ - * / %</code> - obvyklý význam (% je zbytek v celočíselném dělení)</li>
                    <li><code>+</code> - lze použít pro spojování řetězců</li>
                </ul>
            </li>
            <li><strong>"zkratky"</strong>
                <ul>
                    <li><code>++</code> - přičtení 1 k proměnné: <code>i++</code> je to samé jako <code>i = i + 1</code></li>
                    <li><code>--</code> - obdobně odečtení 1 od proměnné</li>
                    <li><code>+=</code> - přičtení k proměnné: <code>text += ", troubo!"</code> je to samé jako <code>text = text + ", troubo!"</code></li>
                </ul>
            </li>
            <li><strong>logické</strong>
                <ul>
                    <li><code>&amp;&amp;</code> - a</li>
                    <li><code>||</code> - nebo</li>
                </ul>
            </li>
            <li><strong>porovnávací</strong>
                <ul>
                    <li><code>==</code> - rovnost hodnotou</li>
                    <li><code>===</code> - rovnost hodnotou i typem</li>
                    <li><code>&gt;</code> - je ostře větší</li>
                    <li><code>&lt;</code> - je ostře menší</li>
                    <li><code>&gt;=</code> - je větší nebo rovno</li>
                    <li><code>&lt;=</code> - je menší nebo rovno</li>
                    <li><code>!=</code> - nerovnost hodnotou</li>
                    <li><code>!==</code> - nerovnost hodnotou i typem</li>
                    <li><code>!</code> - obecná negace</li>
                </ul>
            </li>
        </ul>
        <h3>Definice funkcí</h3>
        <ul>
            <li>"normální" funkce<br />
                <pre><code>function jmeno-funkce([parametr], [parametr = vychozi-hodnota]) { 
  ... 
  [return hodnota;]
}</code></pre>
            </li>
            <li>nepojmenovaná (anonymní) funkce<br />
                <pre><code>function ([parametr], [parametr = vychozi-hodnota]) {  
  ... 
}</code></pre>
            </li>
            <li>
                !!! Funkce lze přiřadit do proměnné... resp.: všechny funkce jsou v JS vnitřně proměnné :)<br />
                - Funkce tak může být např. parametrem pro jinou funkci (je to tzv. callback).
            </li>
            <!--li><code></code> </li-->
        </ul>

        <h3>"Vyskakovací okna" - Vstupy / Výstupy od uživatele:</h3>
        <ul>
            <li><code>alert("text");</code> - vypíše zadaný text</li>
            <li><code>prompt("dotaz");</code> - vrací hodnotu, kterou uživatel zadá do dialogového okna podle textu dotazu</li>
            <!--li><code></code> </li-->
        </ul>

        <h3>Escape sekvence ("znaky, které nelze v řetězci normálně napsat", obdoba náhrady &amp; za &amp;amp; v HTML):</h3>
        <ul>
            <li><code>\a</code> - Pípnutí</li>
            <li><code>\b</code> - Backspace</li>
            <li><code>\f</code> - Přeskočení na další "stránku"</li>
            <li><code>\n</code> - Nový řádek</li>
            <li><code>\r</code> - Carriage return (někdy jako součást odřádkování)</li>
            <li><code>\t</code> - Horizontální tabulátor</li>
            <li><code>\v</code> - Vertikální tabulátor</li>
            <li><code>\\</code> - Zpětné lomítko</li>
            <li><code>\'</code> - Jednoduchá uvozovka</li>
            <li><code>\"</code> - Dvojitá uvozovka</li>
            <li><code>\0</code> - Nulový znak (také používaný pro ukončení řetězce)</li>
            <!--li><code></code> </li-->
        </ul>
    </div>   
    
    <!-- Flow Controls -->
    <div id="flow-controls">
        <h2><a href="https://www.w3schools.com/jsref/jsref_statements.asp">Řídící struktury</a></h2>
        <h3>Podmínky</h3>
        <ul>
            <li>
                <strong>Normální if</strong> :) <br />
                <pre><code>if ( (d.getHours() >= 5) && (d.getHours() <= 9) )
    document.write("Dobré ráno");
else if ( (d.getHours() >= 10) && (d.getHours() <= 11) )
    document.write("Dobré dopoledne");
else if ( (d.getHours() == 12) )
    document.write("Dobré poledne");
else if ( (d.getHours() >= 13) && (d.getHours() <= 17) )
    document.write("Dobré odpoledne");
else if ( (d.getHours() >= 18) && (d.getHours() <= 21) )
    document.write("Dobrý večer");
else
    document.write("Dobrou noc");</code></pre>
            </li>
            <li>
                <strong>Ternární operátor</strong> - <em>"zkrácený zápis" přiřazení hodnoty proměnné na základě (ne)splnění podmínky</em><br />
                <code>promenna = ( podminka ) ? hodnota-pro-splnenou-podminku : hodnota-pro-nesplnenou-podminku ;</code>
            </li>
            <li class="adc-separator"></li>
            <li>
                <strong>Větvení switch/case</strong> - <em>doporučuje se nepoužívat...</em><br />
                <pre><code>switch (hodnota) {
    case 1:
        slovy = "jedna";
        break;
    case 2:
        slovy = "dva";
        break;
    case 3:
        slovy = "tři";
        break;
    default:
        slovy = "nevím";
}</code></pre>
            </li>
        </ul>

        <h3>Cykly for</h3>
        <ul>
            <li>
                obvyklý for-cyklus pro čísla<br />
                <pre><code>for (let i = 0; i < 3; i++) { 
  ... 
}</code></pre>
            </li>
            <li>
                obvyklý for-cyklus pro objekty (vlastnost:hodnota)<br />
                <pre><code>for (const property in object) {
  console.log(`${property}: ${object[property]}`); // výpis názvů a hodnot všech vlastností objektu do konzole
}</code></pre>
            </li>
            <li>
                obvyklý for-cyklus pro pole<br />
                <pre><code>for (x of cars) {
  document.write(x + "&lt;br /&gt;"); //výpis pole do HTML - co položka, to řádek
}</code></pre>
            </li>
        </ul>

        <h3>Cyklus while</h3>
        <ul>
            <li>
                cyklus s podmínkou na začátku (nemusí se provést ani jednou)<br />
                <pre><code>while (i < 5) {
  text += "<br>The number is " + i;
  i++;
} </code></pre>
            </li>
        </ul>

        <h3>Cyklus do...while</h3>
        <ul>
            <li>
                cyklus s podmínkou na konci (provede se aspoň jednou)<br />
                <pre><code>do {
  text += "The number is " + i;
  i++;
}
while (i < 5);</code></pre>
            </li>
        </ul>
    </div>   

    <!-- Základní objekty -->
    <div id="zakladni-objekty">
        <h3><a href="https://www.w3schools.com/jsref/jsref_obj_date.asp">Date</a></h3>
        <ul>
            <li><code>let d = new Date();</code> - deklarace objektu s datumem</li>
            <li><code>d.getDate()</code> - Vrátí číslo dne v měsíci, 1 je prvního.</li>
            <li><code>d.getMonth()</code> - Vrátí číslo měsíce v roce, leden je 0, takže je nutné přičíst 1.</li>
            <li><code>d.getFullYear()</code> - Vrátí aktuální rok jako 4 číslice.</li>
            <li><code>d.getHours()</code> - Vrátí hodiny.</li>
            <li><code>d.getMinutes()</code> - Vrátí minuty.</li>
            <li><code>d.getSeconds()</code> - Vrátí sekundy.</li>
            <li><code>d.getTime()</code> - Vrátí počet milisekund od 1.1.1970. Tento formát se v informatice často používá (tzv. UNIX TimeStamp).</li>
            <!--li><code></code> </li-->
        </ul>

        <h3><a href="https://www.w3schools.com/jsref/jsref_obj_math.asp"">Math</a></h3>
        <ul>
            <li>Konstanty</li>
            <li><code>Math.PI</code> - Ludolfovo číslo</li>
            <li><code>Math.E</code> - Eulerovo číslo</li>
            <li><code>Math.LN10</code> - přirozený logaritmus 2</li>
            <li><code>Math.SQRT2</code> - odmocnina ze 2</li>
            <li class="adc-separator"></li>
            <li>Funkce</li>
            <li><code>Math.max(1,10)</code> - maximum ze seznamu čísel</li>
            <li><code>Math.min(1,10)</code> - minimum ze seznamu čísel</li>
            <li><code>Math.pow(4,3)</code> - čtyři na třetí (=64)</li>
            <li><code>Math.sqrt(x)</code> - druhá odmocnina z x</li>
            <li><code>Math.random()</code> - náhodné číslo mezi O a 1</li>
            <li><code>Math.abs(x)</code> - absolutní hodnota z x</li>
            <li><code>Math.round(x)</code> - zaokrouhlení čísla x na celá čísla</li>
            <li><code>Math.ceil(x)</code> - zaokrouhlení čísla x nahoru</li>
            <li><code>Math.floor(x)</code> - zaokrouhlení čísla x dolů</li>
            <li><code>Math.cos(x)</code> - kosinus x</li>
            <li><code>Math.sin(x)</code> - sinus x</li>
            <li><code>Math.log(x)</code> - přirozený logaritmus z x</li>
            <!--li><code></code> </li-->
        </ul>

        <h3><a href="https://www.w3schools.com/jsref/jsref_obj_json.asp">JSON</a></h3>
        <ul>
            <li><code>JSON.parse(retezec)</code> - vezme řetězec a převede ho na objekt</li>
            <li><code>JSON.stringify(objekt)</code> - vezme objekt a převede ho na řetězec</li>
            <!--li><code></code> </li-->
        </ul>
        
        <h3>window</h3>
        <ul>
            <li><code>window.onload = function() { ... }</code> - definuje funkci, která se spustí po načtení HTML kódu stránky</li>
            <!--li><code></code> </li-->
        </ul>

        <h3>document</h3>
        <ul>
            <li>Vypsání textu do HTML kódu JavaScriptem</li>
            <li><code>document.write("nějaký text");</code></li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li>Vyhledání elementu</li>
            <li><code>document.getElementById("tlacitko");</code> - vrací element s daným id</li>
            <li><code>document.getElementsByClassName()</code> - vrací pole (resp. list) elementů s danou třídou</li>
            <li><code>document.getElementsByTagName();</code> - vrací pole elementů s daným tagem</li>
            <li><code>document.querySelector("input[type=text].hezky#uvodni");</code> - vrátí první element, pro který daný selektor platí</li>
            <li><code>document.querySelectorAll("input[type=text].hezky#uvodni");</code> - vrátí pole všech elementů, pro které daný selektor platí</li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>document.getElementsByTagNameNS();</code> - pole elementů podle tagu a jeho jmenného prostoru - pro znalce XML a vyhledávání na základě jména</li>
            <li><code>document.getElementsByName();</code> - pro vyhledávání prvků ve formulářích, kde se atribut name používá</li>
            <!--li><code></code> </li-->
        </ul>
        
        <h3><a href="https://www.w3schools.com/jsref/dom_obj_anchor.asp">HTML a DOM elementy</a></h3>
        <ul>
            <li><code>element.innerHTML</code> - řetězec s HTML kódem, který daný element obsahuje; lze ho přečíst i nastavit!</li>
            <li><code>element.innerText</code> - řetězec s textem (bez HTML kódu), který daný element obsahuje; lze ho přečíst i nastavit!</li>
            <li><code>element.textContent</code> - řetězec s viditelným textem (bez HTML kódu), který daný element obsahuje; lze ho přečíst i nastavit!</li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>element.hasAttribute(nazev-atributu)</code> - true, pokud má element zadaný atribut</li>
            <li><code>element.hasAttributes()</code> - true, pokud má element nějaký atribut</li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>element.childNodes</code> - pole (resp. NodeList) všech potomků elementu</li>
            <li><code>element.firstChild</code> - první potomek elementu</li>
            <li><code>element.lastChild</code> - poslední potomek elementu</li>
            <li><code>element.firstElementChild</code> - první potomek elementu, který je HTML elementem (ne např. komentář, text, bílá mezera a tak)</li>
            <li><code>element.lastElementChild</code> - poslední potomek elementu, který je HTML elementem</li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>let span = document.createElement("span");</code> - vytvoří HTML element "<span></span>", který můžeme opatřit textem např. span.innerHTML = "Ahoj!";</li>
            <li><code>let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");</code> - </li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>element1.append(element2);</code> - vloží na konec element1 nový element2</li>
            <li><code>document.body.insertBefore(element1, element2);</code> - vloží "co, před co" (element1 před element2)</li>
            <li><code>element.replaceChild(element1,element2);</code> - v elementu element nahradí "čím, co" (vyhodí element2 a místo něj dá element1)</li>
            <li><code>element.removeChild(potomek);</code> - v elementu smaže potomka</li>
            <!--li><code></code> </li-->
            <li class="adc-separator"></li>

            <li><code>element.parentElement;</code> - vrací rodiče elementu</li>
            <!--li><code></code> </li-->
        </ul>

    </div>  

    <!-- Vychytávky -->
    <div id="vychytavky">
        <p>Co jsem dlouho googlil :)</p>
        <dl>
            <dt>Spojení výchozích a uživatelských nastavení</dt>
            <dd>Pomocí <code>Object.assign(vychozi-nastaveni, uzivatelske-nastaveni);</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#browser_compatibility">více na Mozzile</a>.</dd>
            
        </dl>
    </div>  

    <!-- Nadpis -->
    <div id="jmeno-ouska-2">
        <p>Obsah ouška 2...</p>
    </div>  

</div>