Javascript pro váš web

Pokud se snažíte vytvářet své stránky v HTML, určitě si neustále říkáte, že je pořád co zlepšovat. Zde je několik typů, jak své stránky udělat nejen zajímavější, ale i snadnější pro ovládání návštěvníky.
Všechny Javascripty v příkladech umístěte do hlavičky (<head></head>) vašeho html dokumentu.

Přidání do oblíbených

Proměnná „url“, kterou vidíte na druhém řádku skriptu definuje stránku, která se uživateli zapíše do oblíbených. Druhou proměnnou „title“ definujete text, který se má zobrazovat při otevření záložky prohlížeče „Oblíbené“. Následně vytvoříme funkci bookmark, která volá potvrzující okno Internet Exploreru s nabídkou Přidat oblíbenou položku.

<script language="JavaScript1.2"><!--
var url="http://www.stranka.cz"
var title="Klepněte pro větší obrázek"
function bookmark()
{
window.external.AddFavorite(url,title);
}
//-->
</script>

Poté, co jsme si nadefinovali funkci bookmark, stačí umístit volání javascript:bookmark(); do jakéholi odkazu. Odkaz pro bookmark tedy může vypadat následovně:

<a href="javascript:bookmark();">Přidat do oblíbených</a>

Změna textu po najetí na odkaz

Pokud na své stránce nechcete, aby návštěvníci viděli, kam vámi vytvořené odkazy směřují, jednoduše nastavíte pro celý dokument, aby se vždy při najetí na odkaz zobrazil vámi definovaný text. Tím, že funkci OnMouseOver použijeme hned v nastavení těla(<body>) stránky, bude tato možnost fungovat už při najetí na stránku, text se tedy bude zobrazovat neustále, i když váš návštěvník zrovna nenajel na odkaz.

Pokud chcete definovat pro každý odkaz jiný text, musíte dát OnMouseOver pouze u odkazů a tím pádem si můžete zvolit text ke každému odkazu zvlášť.

Ukázka, kdy se text zobrazuje už při najetí na stránku:

<body onMouseOver="window.status=`Text se zobrazuje uz pri najeti na stranku!` ;return true">

Ukázka změny textu pouze po přejetí odkazu myší:

<a href="stranka.html" onMouseOver="window.status=`Prvni odkaz neni videt` ;return true" onMouseOut="window.status=`` ;return true;">Odkaz1</a>

<a href="stranka2.html" onMouseOver="window.status=`Druhy odkaz neni videt` ;return true" onMouseOut="window.status=`` ;return true;">Odkaz2</a>

Nastavit jako startovací stránku

Pokud si chce návštěvník nastavit vaši stránku, respektive url vaší stránky jako startovací, bude stačit, když klikne na odkaz, který mu pečlivě připravíme…

Postup při nastavování Javascriptu je hodně podobný jako při vytváření skriptu u přidání do oblíbených položek s tím rozdílem, že nebudeme definovat funkci, ale rovnou ji vložíme do odkazu.

<a href="index.html" onclick="this.style.behavior=`url(#default#homepage)`;this.setHomePage(`http://www.stranky.cz`);" onMouseOver="window.status=`nastavit jako homepage`;return true" onMouseOut="window.status=` `">nastavit jako homepage</a>

Jak vidíte, použili jsme navíc znovu kombinaci funkcí OnMouseOver a OnMouseOut. Zde vidíte, jak snadno všechny funkce použít tak, aby splňovaly co nejvíce našich požadavků.

Změna obrázku po najetí myší

Pokud chcete udělat své stránky ještě zajímavější, než bezpochyby jsou, můžete místo klasického textového odkazu vytvořit ikonku, která se navíc po najetí myší změní na druhý obrázek. Vždy je dobré zvolit stejnou velikost obou obrázků a změnu provést pouze v barvách, to už ale závisí na vás.

Opět využijeme funkcí OnMouseOver a OnMouseOut, obrázek se zde musí nějak jmenovat, protože to po nás funkce chtějí kvůli snadnějšímu a konkrétnějšímu vyhledání obrázku v souboru. Náš obrázek, který budeme chtít zaměnit se jmenuje obrazek_test.

<a href="stranka.html" onmouseover="document.obrazek_test.src=`sample2.gif`"; return true;" onmouseout="document.obrazek_test.src=`sample.gif`"; return true;"><img src="obrazek1.gif" name="obrazek_test" border="0"></a>

Otevření nového okna po načtení stránky

Někdy budete potřebovat funkci, která vám zajistí otevření další stránky v novém okně hned po načtení té stávající na kterou návštěvník přišel. Výhoda takto otevřeného okna je v tom, že k němu můžeme nastavit další parametry jako výšku, šířku a třeba i zobrazování bez stavového řádku nebo názvu url adresy. Navíc zde použijeme funkci window.focus(), která dokáže chytře nastavit aktivní okno, ze kterého je spouštěn Javascript, takže se nově otevřené okno může v klidu načítat dokavaď si ho uživatel nezobrazí, popřípadě nezavře.

<script language=JavaScript1.2\>
window.open(`nove_okno.html`, ``, location=0);
window.focus();
</script>

Otevření nového okna při zavření stránky

Opačně můžeme funkci window.open() využít, pokud budeme potřebovat, aby se provedlo otevření okna v případě, že návštěvník zavře naši stránku. K detekci zavření okna použijeme funkci onunload, kterou vložíme do nastavení těla stránky.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function exit() {
window.open(`nova_stranka.html`, ``, location=0);
}
</SCRIPT>
</head>
<body OnUnload="exit()">
</body>
</html>

Doufám, že se vám alespoň některý z mých tipů hodí a přeji mnoho spokojených návštěvníků..

Diskuze (12) Další článek: Registrace domény po česku

Témata článku: Software, Prohlížeče, Internet, Programování, Java, Javascript, Exit, Startovací okno, Head, Otevřené okno


Určitě si přečtěte

10 mýtů a polopravd o bateriích, kterým možná ještě věříte

10 mýtů a polopravd o bateriích, kterým možná ještě věříte

** Kolem baterií a akumulátorů koluje řada mýtů, nepravd a polopravd ** Dnes vám devět z nich zkusíme vyvrátit na základě faktů ** Většina z nich totiž neplatí pro moderní lithiové baterie

Karel Kilián, David Polesný | 99

Jak doma vylepšit signál Wi-Fi: Pomůže repeater, více routerů, ale nejlépe systémy mesh

Jak doma vylepšit signál Wi-Fi: Pomůže repeater, více routerů, ale nejlépe systémy mesh

** Máte špatný signál Wi-Fi? Mesh systémy to vyřeší ** Už vás nezruinují, meziročně ceny příjemně spadly ** Jak systém funguje a čím je výjimečný?

Jiří Kuruc | 107

Pojďme programovat elektroniku: České chytré zásuvky Netio pro kutily i firmy

Pojďme programovat elektroniku: České chytré zásuvky Netio pro kutily i firmy

** Wi-Fi zásuvky nevyrábí pouze Čína ** Vyzkoušeli jsme českou Netio PowerCable ** Je přímo určená pro vývojáře, má totiž jednoduché JSON API

Jakub Čížek | 43


Aktuální číslo časopisu Computer

Megatest: 20 powerbank s USB-C

Test: mobily do 3 500 Kč

Radíme s výběrem routeru

Tipy na nejlepší vánoční dárky