Vybrané metody JavaScriptu

Obsah:


Co to jsou objekty

JavaScript je objektově orientovaným programovacím jazykem (OOP), což znamená, že využívá objektového modelu (DOM). Základním objektem je window (okno). Jeho podobjekty jsou např. document (html stránka), navigator (internetový prohlížeč), history (historie navštívených stránek) a další. Podobjekty objektu document jsou kolekce jednotlivých prvků html stránky, tj. kolekce obrázků (images), odkazů (links), formulářů (forms) a  kotev - pojmenovaných míst dokumentu (anchors). Kolekce všech objektů dokumentu (all) je zavedena jen v některých prohlížečích. Podobjekty těchto kolekcí jsou jednotlivé prvky html stránky.

Např. obrázek, jehož name nebo id je pyramida (<img name="pyramida" src="foto01.jpg" width="100" height="75" alt="">), je objekt:
window.document.images.pyramida
Objekt window, jakožto hlavní objekt, můžeme v zápise vynechat:
document.images.pyramida
Obrázek je součástí kolekce images ale i kolekce all:
document.all.pyramida

Tlačítko, jehož name je tlacitko a které je ve formuláři formular, je objekt:
document.forms.formular.tlacitko

Na kolekce objektů se můžeme dívat také jako na pole a tlačítko zapsat jako:
document.forms["formular"].tlacitko
nebo s použitím indexu (index 0 - formular je první formulář dokumentu):
document.forms[0].tlacitko

Na objekty dokumentu (včetně těch, které nejsou součástí výše zmíněných kolekcí, např. h1, div apod.) se můžeme také odkazovat pomocí metod (viz dále):
document.getElementsByName("name_prvku"), která vrací kolekci objektů dokumentu, jež mají zadané name, nebo document.getElementById("id_prvku"), která vrací objekt s daným id.
document.getElementsByName("tlacitko")[0]
document.getElementById("tlac1")

Vlastnosti a metody objektů

Objekty mají určité vlastnosti (např. name, src, value) a metody, pomocí nichž lze s objekty pracovat.

Příklady vlastností:

document.images.pyramida.src               //soubor - zdroj obrázku
document.images.pyramida.width             //šířka obrázku
document.images.pyramida.style.borderWidth //styl - šířka rámečku obrázku
document.images.pyramida.className         //třída stylu obrázku

document.forms["formular"].jmeno.value     //obsah textového pole jmeno
document.forms["formular"].jmeno.maxSize   //maximální délka textového pole

Vlastnosi objektů lze měnit, např.:


         

Metody objektu window jsou např.:
window.alert("zprava")
Název objektu window, jakožto hlavního objektu můžeme vynechat:
alert("zpráva")
prompt("výzva k zadání hodnoty","implicitní hodnota")
confirm("otázka")

     

Metody objektu document jsou např.:
document.write("zpráva")
document.writeln("zpráva")
document.getElementsByName("name")
document.getElementById("id")

Další vybrané metody a vlastnosti

Window

Otevření okna prohlížeče:

window.open(url,název okna,parametry okna);

URL - adresa html dokumentu (např. kontakty.htm) nebo obrázku (např. foto/pyramidy.jpg) nebo webové stránky (http://webowebu.phorum.cz/html/obrazky.htm)

Název okna - nezadáme-li tento parametr nebo zadáme-li "_blank", otevře se nové nepojmenované okno prohlížeče. Zadáme-li určitý název, můžeme jej použít např. v odkazech v parametru target.

Parametry okna - menubar (menu), toolbar (panel nástrojů), location (pole adresy), status (stavový řádek), width (šířka okna), height (výška okna), top (vzdálenost shora), left (vzdálenost zleva), resizable (možnost zvětšit okno). Chceme-li např. otevřít okno bez menu a panelu nástrojů, uvedeme "menubar=no,toolbar=no" (ne všechny parametry fungují ve všech prohlížečích).
Má-li prohlížeč nastaveno otevření nového okna jako nového panelu (záložky), pak všechny tyto parametry ignoruje. Automatické otevírání nových oken může být prohlížečem blokováno.

   

Zavření okna:

Okno musí být otevřeno pomocí metody open. Do proměnné uložíme odkaz na nové okno.

var win = window.open("divy_sveta/visute_zahrady.png");
win.close();
   

Zavření aktuálního okna přímo z něj:

window.close(); //zavření aktuálního okna (musí být vytvořeno metodou open)

viz předchozí tlačítko zdrojový kód a v jím otevřeném okně tlačítko Zavřít

Aktivování okna (přenesení do popředí):

Otevřeme-li nové okno, pak po kliknutí na další tlačítko (odkaz) se toto okno dostane do pozadí. Otevřeme-li další html dokument nebo obrázek do okna se stejným názvem, zůstane toto okno i po načtení nového obsahu v pozadí (viz první ukázka). Musíme provést jeho aktivaci. 

var win = window.open("divy_sveta/majak.png");
win.focus();
     

Nastavení velikosti okna prohlížeče, posunutí a rolování:

window.resizeTo(1000,800);  //nastavení velikosti aktuálního okna na 1000x800px
window.resizeBy(-100,50);   //zmenšení šířky o 100px a zvětšení výšky o 300px
window.moveTo(400,200);     //posunutí levého horního rohu okna na souřadnice 400,200
window.moveBy(-100,50);     //posunutí okna o 100px vlevo a 50px dolů
window.scrollTo(100,300);   //rolování na pozici 100,300
window.scrollBy(0,200);     //rolování o 200px dolů
     

Location

location.href="fotogalerie2.htm";  //přesměrování na stránku fotogalerie2.htm

Časování

var cas=setInterval("dalsi()",2000); //nastavení intervalu opakování na 2000 milisekund, tj. 2 sekundy
clearInterval(cas);                  //zrušení opakování

Document

History

Navigator

Screen

Date

Vytvoření objektu datum:

var datum = new Date();              //aktuální - dnešní datum
var datum = new Date(rok,měsíc,den); //určité datum (měsíc je třeba zadat o 1 méně)
var datum = new Date(rok,měsíc,den,hodiny,minuty,sekundy);
var datum = new Date(milisekundy);   //počet milisekund od 1.1.1970

Formátování datumu:

datum.toLocaleString();       //formát datumu a času podle nastavení počítače

Den, měsíc, rok, den v týdnu, hodiny, minuty, sekundy z datumu:

datum.getDate();       //číslo dne
datum.getMonth();      //číslo měsíce (o 1 méně): 0-leden, 1-únor, 2-březen …
datum.getFullYear();   //rok
datum.getDay();        //číslo dne v týdnu: 0-neděle, 1-pondělí, 2-úterý, … 6-sobota
datum.getHours();      //hodiny
datum.getMinutes();    //minuty
datum.getSeconds();    //sekundy

Nastavení dne, měsíce, roku, hodin, minut, či sekund:

datum.setDate();       //den
datum.setMonth();      //měsíc (o 1 méně): setMonth(3) nastaví duben
datum.setFullYear();   //rok - čtyřciferně
datum.setHours();      //hodiny
datum.setMinutes();    //minuty
datum.setSeconds();    //sekundy

Porovnání datumů, zjištění počtu uplynulých dnů:

datum.getTime();       //počet milisekund od 1.1.1970

String

Vytvoření textového řetězce:

var text = new String("nějaký text");       //pomocí konstruktoru
var text = "nějaký text";                   //vložením hodnoty
var text = document.forms["formular"].jmeno.value;
var text = document.getElementsByName("jmeno")[0].value;
var text = document.getElementById("jm").value;
                                            //získáním textové hodnoty

Získanou textovou hodnotou nemusí být pouze obsah textového pole formuláře, ale i jiné vlastnosti objektů, např. src, title, width, height, apod.

Délka textového řetězce, jednotlivé znaky:

text.length           //délka textu (vlastnost objektu text)
text.charAt(index)    //znak na i-té pozici textu (metoda objektu text)
                      //znaky textového řetězce jsou indexovány od 0 - viz pole

Převod na malá či velká písmena:

text.toLowerCase()    //převod textu na malá písmena
text.toUpperCase()    //převod textu na velká písmena

Vyhledání pozice znaku či části řetězce:

text.indexOf(hledaná část, pozice)    //index - pozice hledané části textu
                      //není-li pozice zadána, hledá se od začátku textu
                      //je-li pozice zadána, hledá se od tohoto místa
                      //není-li hledaná část nalezena, je výsledkem -1
text.lastIndexOf(hledaná část, pozice)
                      //index hledané části - vyhledává od konce textu

Rozdělení řetězce na části:

text.substr(pozice, délka)    //část řetězce od zadané pozice
                      //není-li délka zadána, bere se zbytek textu do konce řetězce
text.substring(začátek, konec)
                      //část řetězce od zadané začáteční pozice do koncové pozice
text.split(oddělovač, kolikrát)
            //není-li zadáno kolikrát, rozdělí se text ve všech místech oddělovače
            //jednotlivé části lze uložit do pole

Nahrazení části řetězce jiným řetězcem:

text.replace(nahrazovaná část, nový řetězec)
            //nahrazení části řetězce jiným znakem či textem


Math

Absolutní hodnota, mocnina, odmocnina:

Zaokrouhlování:

Math.floor(cislo);    //zaokrouhlí dolů na celé číslo
Math.ceil(cislo);     //zaokrouhlí nahoru na celé číslo

Náhodná čísla:

Math.random()                    //náhodné reálné číslo z intervalu <0,1)
Math.floor(Math.random()*6)+1    //náhodné číslo 1, 2, 3, 4, 5, 6
Math.ceil(Math.random()*6)       //náhodné číslo 1, 2, 3, 4, 5, 6 
                     //pravděpodobnost, že random() bude čistá 0, je mizivá

Array