Ukázka užití skriptů v HTML kódu

Michal Novotný

Tento soubor demonstruje použití Java skriptů a VB Skriptů v kódu HTML. Pro demonstraci zde uvádím skript na preload ("přednačtení") obrázků a jejich záměnu na základě události:

<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
 if (document.images) {
   rslt = new Image();
   rslt.src = arg;
   return rslt;

  }
}

function changeImages() {
 if (document.images && (preloadFlag == true)) {
  for (var i=0; i<changeImages.arguments.length; i+=2) {
   document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
  }
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
Uk1 = newImage("uk1.jpg");
Uk2 = newImage("uk2.jpg");
preloadFlag = true;
  }
}

function presun() {
  alert("Toto je odkaz na soubor test.html z Java skriptu...");
  location.href="test.html";
 }


// -->

</SCRIPT>

Vzhledem k tomu, že potřebujeme provést funkci "preloadImages()" hned při spuštění stránky, přidáme do tagu BODY akci OnLoad, která probíhá při načítání stránky, kde deklarujeme naši funkci "preloadImages()". To znamená, že tag BODY může vypadat následovně:
<BODY ONLOAD="preloadImages();">

Všimněte si středníku na konci. Tento středník zde musí být za každým příkazem, jinak při načítání stránky zobrazí prohlížeč chybu v Java skriptu. Pokud chceme, aby se do stavového řádku napsal text např. "Obrázky načteny" (až se načtou), můžeme využít preloadFlag definovaný ve skriptu. Tato deklarace by potom vypadala následovně:

<BODY ONLOAD="preloadImages(); if (preloadFlag){window.status='Obrázky načteny...'};">

Window.status je proměnná zapisující do stavového řádku prohlížeče. Proměnné vždy musí být v závorkách a značky '{' a '}' nám značí začátek a konec sekce (jako v C++). Dále je nutné si všimnout uvozovek (") na začátku a konci akce OnLoad, proto již není možné použít uvozovky při psaní textu do window.status a je nutné zde psát znak apostrof ('). Chceme-li obrázek použít pro záměnu sama sebe, musíme deklarovat jeho jméno pomocí parametru NAME v jeho vlastním tagu. Na tento název (uvedený v NAME) se budeme odkazovat funkcí changeImages. Deklarace changeImages je následovná: changeImages(název obrázku [NAME], jméno souboru s novým obrázkem). Definice obrázku proto může vypadat následovně:

<a href="vbscript:getDate()">
<img name=
"obraz" border="0" src="uk1.jpg" ONMOUSEOVER="changeImages('obraz', 'uk2.jpg');" ONMOUSEOUT="changeImages('obraz', 'uk1.jpg');">
</a>

Tento obrázek i odkazem na funkci getDate() na zjištění aktuálního data, napsanou ve VBSkriptu. Deklarace odkazů na skripty je vždy název skriptu a nakonci dvojtečka, poté vždy následuje jméno skriptu. Funkce getDate() je vypsána níže. Po najetí myši na obrázek (akce ONMOUSEOVER) se obrázek změní za jiný (ze souboru uk2.jpg) a po "opuštění" obrázku kurzorem (akce ONMOUSEOUT) se změní zpět na původní obrázek (tzn. uk1.jpg). Zde je deklarace funkce getDate() napsané ve VBSkriptu:

<SCRIPT LANGUAGE="VBSCRIPT">
Dim Msg
 Function getDate()
   Msg = "Dnes je " & DateValue(Date)
   MsgBox Msg
 End Function

 
Function neNic()
  MsgBox "Nějaký text..."
 End Function
</SCRIPT>

Kód druhého příkladu je následující:

<a href="nic" ONMOUSEDOWN="vbscript:neNic()">
  <div align=
"center">
    Podívej co má dělat tento odkaz a klikni

  </div>
</a>

Jedny z nějčastějších akcí jsou akce myši:

ONMOUSEOVER - při najetí kursoru myši na obrázek či odkaz
ONMOUSEOUT - při "opuštění" obrázku či odkazu kurzorem myši
ONMOUSEDOWN - při kliknutí na obrázek, odkaz
OMMOUSEUP - při uvolnění tlačítka myši

A na závěr si ukážeme, jak všechny ty ukázky fungují v praxi: 

Najeď kurzorem myši na obrázek a klikni...

Kdyby nějaký ze souborů v preloadImages() neexistoval, nebude vzhledem ke kódu ani záměna načteného obrázku fungovat.

Podívej se na stavový řádek a zkus usoudit, co má tento odkaz dělat. Až potom klikni....
A teď klikni sem, tento řádek ti napíše oznámení a pak se pomocí Java skriptu přesune (Pozor: Toto není výchozí odkazový styl textu!)...

Pro vstup do tajné zóny klikni zde... 

 Doufám, že ti tento dokument aspoň trochu pomůže pochopit HTML skripty a že to dobře využiješ.

Michal Novotný
Autor