Jak na ohleduplný JavaScript?

28. října 2002

•

Při tvorbě webu bychom se neměli spoléhat jen na JavaScript, ale měli bychom zabezpečit funkčnost stránek i bez něj. Podívejme se na několik častých případů a současně si ukažme, jak je opravit.

Otevření nového okna

Občas potřebujete otevřít nové malé okno například pro nápovědu. Často se k tomu požívá tento kód:

<a href="JavaScript:window.open(‚napoveda1.htm‘,“, ‚width=250,height=150,menu=0,navigate=0,statusbar=0‘);">napoveda 1</a>

Takový kód ale nebude bez JavaScriptu fungovat. Přitom stačí skript pro otevření okna přesunout na událost onclick takto :

<a href="napoveda1.htm" onclick="window.open(‚napoveda1.htm‘,“, ‚width=250,height=150,menu=0,navigate=0,statusbar=0‘); return(false);" target="_blank">napoveda 1</a>

Parametr href obsahuje adresu která se použije při nedostupnosti javascriptu. Skript události onclick musí končit příkazem return(false); aby se okno neotevíralo dvakrát.

Pokud budete chtít ve stránce použít více odkazů, které budou otevírat nová okna, nadefinujte si v hlavičce dokumentu funkci, která otevře prázdné okno s požadovanými parametry a pojmenujte jej třeba okno_napovedy:

Odkazy, které budou otevírat okno, budou vypadat například takto:

<a href="napoveda_1.htm" target="okno_napovedy" onclick="otevri_napovedu();">Napověda 1</a>
<a href="napoveda_2.htm" target="okno_napovedy" onclick="otevri_napovedu();">Napověda 2</a>

Parametr href="napoveda_1.htm" určuje, který dokument se má otevřít. target="okno_napovedy" určuje, že se má dokument otevřít do nově otevřeného okna. Parametr onclick="otevri_napovedu();" pak zajistí otevření okna pojmenovaného okno_napovedy se zadanými parametry, ve kterém se následně otevře požadovaný dokument.

A jak to bude fungovat bez Javascriptu? Stačí si odmyslet parametr onclick. Parametr target zajistí, že se dokument otevře do nového okna, jak lze vidět na příkladu.

Výsledek formuláře v novém okně

Kód bude podobný odkazu:

<form action="zpracuj.htm" target="okno_napovedy" onsubmit="otevri_napovedu();return(true);">
Zadejte údaj : <input type="text" name="vstup" />
<input type="submit" value="Odeslat" />
</form>

Vše funguje stejně, jako kód pro odkaz, nové okno se otevře při odeslání formuláře, což je zajištěno nastavením události formuláře onsubmit="otevri_napovedu();return(true);".

Navigace pomocí rozevírací nabídky

Často se jako navigační prvek používá rozevírací nabídka v kombinaci s Javascriptem. Obvykle se to dělá tímto způsobem:

<select onchange="document.location.href=this.value;">
  <option value="http://www.interval.cz/">Interval.cz – web o tvorbě webu</option>
  <option value="http://www.czechia.cz/">Czechia.cz – hosting</option>
  <option value="http://www.blazen.cz/">Blázen.cz – zábava na internetu</option>
</select>

K úpravě bude tentokrát potřeba jednoduchý skript na straně serveru, například v PHP, a přeměna samotného selectu ve formulář:

<form action="redir.php">
  <select onchange="document.location.href=this.value;" name="href">
    <option value="http://www.interval.cz/">Interval.cz – web o tvorbě webu</option>
    <option value="http://www.czechia.cz/">Czechia.cz – hosting</option>
    <option value="http://www.blazen.cz/">Blázen.cz – zábava na internetu</option>
  </select>
  <noscript><input type="submit" value="Přejít" /></noscript>
</form>

Pokud je na klientovi dostupný Javascript, bude fungovat stejně, jako původní skript. Pokud ne, bude zobrazeno tlačítko Přejít , po kliknutí na něj se formulář odešle a skript redir.php přesměruje prohlížeč na požadovanou adresu. Ještě zbývá kód souboru redir.php:

<?php
Header(‚Location: ‚.$href);
Echo ("Přesměrování selhalo kliněte <a href=\"$href\">ZDE</a>");
?>

Příklad můžete opět vyzkoušet.

Potvrzení akce

Občas potřebujete potvrdit nějakou akci, např. smazání záznamu z databáze. Takové akci by mělo předcházet potvrzení uživatelem. Je více možností, jak to udělat.

Potvrzení pomocí javascriptu :

<a href="smazat.php?id=100" onclick="return(confirm(‚Opravdu chcete vymazat tento záznam ?‘);">smazat</a>

Uvedené řešení má nevýhodu že pokud klient nebude mít Javascript, akce se provede bez potvrzení. Druhá možnost je použít mezistránku, kde uživatel akci potvrdí. Nevýhoda tohoto řešení je ta, že se bude muset načítat další stránka. Řešení by bylo obě tyto metody zkombinovat.

<a href="smazat_potvrd.htm?id=100" onclick="if(confirm(‚Opravdu chcete vymazat tento záznam ?‘)) location.href=’smaz.htm?id=100′; return(false);">smazat</a>

Pokud má klient Javasrcript, zobrazí se po kliknutí na odkaz dialog pro potvrzení, pokud klikne v tomto dialogu na „ok“, dostane se na stránku, která provede požadovanou akci (smaz.htm), pokud klikne na „storno“, nestane se nic.

Pokud ale Javascript nemá, dostane se na stránku smazat_potvrd.htm, kde potvrdi akci a teprve odtud, pomocí odkazu, na stránku, která provede požadovanou akci.

Příklad můžete vyzkoušet.