Skripta OVI

Objekty DOM

Document object model – DOM = jednotný zápis objektů, jak se budou řadit a jmenovat – nezávislé na volbě prohlížeče

Základní objekty

Window

  • nejvyšší objekt v hierarchii objektů
  • všechny ostatní objekty (kromě Math a Date apod.) jsou podobjekty window
  • nepovinný název, nemusí se psát:
window.location //je to samé jako:
location
//adresa načteného dokumentu

alert(location)
//vypíše adresu do alertu

location.href="http://www.physiome.cz/wiki/"
//vlastnost - načte danou stránku - měl by tento krok zařadit do historie

location.replace("http://www.physiome.cz/wiki/")
//metoda - také načte danou stránku - vymění ji za tu stávající - neměl by tento krok zařadit do historie

location.reload(true);
//metoda - automaticky aktualizuje danou stránku

Aktuální čas a datum aktualizované pomocí location.reload:

<body>
<script>
//alert(location)
//location.reload(true);

var datum = new Date();
var rok = datum.getFullYear();
var mesic = datum.getMonth();
var den = datum.getDate();
var denVTydnu = datum.getDay();
var hodina = datum.getHours();
var minuta = datum.getMinutes();
var sekunda = datum.getSeconds();

//alert(denVTydnu);

var jmenoDne;

switch(denVTydnu) {
 case 0:alert("je nedele"); break;
 case 4: jmenoDne = "ctvrtek" ; break;
 }
 
document.write("Dnes je "+jmenoDne+" "+den+". "+mesic+". "+rok+"<br>");
document.write("<br>Právě je <b>"+hodina+":"+minuta+":"+sekunda+".</b>");
</script>
<br>
<a href="javascript:location.reload()"> Obnov. </a>

</body>

Location se skládá z:

protocol://hostname:port/pathname/?search#hash

  • protocol – https nebo http
  • hostname – adresa, např „www.google.cz“
  • port – většinou není žádný, některé služby ho vypisují např 80:80
  • path name – za lomítkem, např. /wiki/
  • search – vyhledávání – v search je uložená hodnota proměnné např. ?jmeno=Martin
  • **** – tagy – hodnoty, které jsou nastavené

Window history

  • jednoduchý objekt, má pár metod
  • na složitější práci s historii je potřeba využít cookies
history.back() - vrátí o stránku zpět
history.back(2) - o dvě stránky zpět
history.forward() - posune o stránku vpřed (pokud se uživatel posune zpět, může se vrátit)
history.go() 
history.go(-1) - vrátí stránku o jednu zpět

Window navigator

  • zjišťuje informace o typu a verzi prohlížeče
document.write("<br>"+navigator.appName); //jméno prohlížeče
document.write("<br>"+navigator.appVersion); //verze prohlížeče
document.write("<br>"+navigator.plugins.length); //počet pluginů
document.write("<br>"+navigator.platform); //operační systém
document.write("<br>"+navigator.systemLanguage); //jazyk operačního systému

Dialogová okna

Upozornění nebo chybová hláška, která se otevře v novém oznamovacím okně:

Dialogové okno s oznámením

<script>
    alert("Baf!")
</script>

Dialogové okno vyžadující vstup uživatele

<script>
    var jmeno = prompt("zadej své jméno")
    document.write("<br>Tvé jméno je " + jmeno);
</script>

Dialogové okno ano/ne

<script>
    var pauza = confirm("Chcete pauzu?")
    if (pauza) document.write("<br>Dáme pauzu")
</script>

Window open (vyskakovací okno)

  • otevře nové okno

window.open(„adresa stránky“, „jméno stránky“, „další parametry“)

další parametry:

  • sirka
  • vyska
  • vzdálenost od okrajů (right, left, top…)
  • fullscreen
//vyskakovací okno při spuštění prohlížeče 
<script>
window.open("http://www.seznam.cz", "nove", "fullscreen");
 
</script>
//vyskakovací okno po kliknutí na odkaz
<a href="http://www.seznam.cz" onclick="window.open(this.href, 'nove', 'hight=600')">zde</a>
<a onclick="promenna.close()">zavři</a>
</body>
Automatické zavření otevřeného okna:
<body>
<script>
 	var promenna = window.open("http://www.seznam.cz", "nove");
 
</script>
<a href="http://www.seznam.cz" onclick="window.open(this.href, 'nove', 'hight=600')">zde</a>
<a onclick="promenna.close()">zavři</a>
</body>

Automatické zavření okna:

– zavře aktuálně otevřené okno

window.close

Zmenšení okna:

funguje jen na aktuální okno

window.resizeTo(500,500);

Zmenšení okna:

funguje jen na aktuální okno

<p onclick="window.print()">tiskni</p>

Časování

  • spuštění akce po nějakém čase * některé prohlížeče upozorní na své zavření (explorer), jiné ne a okno zavřou automaticky (chrome)
var casovat = setTimeout ("co se má stát/jméno funkce", čas v milisekundách)

příklad – vyskakovací okno po 5s:

function naCas(){
	window.open("http://www.seznam.cz", "nove", "hight=200, width=300, left=50");
	}
var casovat = setTimeout ("naCas()", 5000)

Adresování objektů

Obrázky * pomocí indexu, jejich index určuje podle pořadí ve zdrojovém kódu

Výměna dvou obrázků:

<script>
function naStisk(){
    var pom = document.images[0].src;
	
	document.images[0].src = document.images[1].src;
	document.images[1].src = pom;
}

</script>
</head>

<body>

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Niobe050905-Siamese_Cat.jpeg" alt="1" width="200px">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="2" width="200px">
<input type="button" value="Stiskni" onclick="naStisk()">

</body>

Objektům lze nastavit id – s textovým řetězcem

např:

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Niobe050905-Siamese_Cat.jpeg" id="prvni">

k takovému objektu se přistoupí:

document.images["prvni¨"].src = ...

Takto lze upravovat i styly:

<script>
    function vypniStyly(){
	document.styleSheets[0].disabled = true;
    }
</script>
</head>

<body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Niobe050905-Siamese_Cat.jpeg" id="prvni" alt="1" width="200px">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="2"  width="200px">
<input type="button" value="styl" onclick="vypniStyly()">
</body>

Vypínání a zapínání stylu:

function vypniStyly(){
	document.styleSheets[0].disabled = !;          document.styleSheets[0].disabled;
}

admin