Užitečné kódy JavaScriptu

Při vytváření HTML stránek je určitě rádi sem tam obohatíte o kus užitečného javascriptového kódu. A nemusí se zrovna jednat o desítky řádků. Vybral jsem právě ty nejjednodušší kódy, které se vám mohou častokrát hodit.

Kurzor v políčku po načtení stránky

Návštěvníci stránek nemusejí myší klikat do inputu, kurzor tam již "bliká". Hodí se například při přihlašování.

 <input type="text" id="jmeno">

 <script>
  document.getElementById('jmeno').focus();
 </script>

Vyzkoušet

Okamžité přesměrování na nějakou stránku

 <script>
  window.location.href="kam.html";
 </script>

Pokud přesměrováváte na externí stránku, uveďte i http:// (www nestačí).

Přesměrování na stránku za určitý čas

 <script>
  window.setInterval("document.location.href='kam.html';", 3000);
 </script>

Vyzkoušet

Druhý parametr (3000) udává počet milisekund, za který se má přesměrovat. 1000 milisekund = 1 sekunda.

Přesměrování na stránku po kliknutí na tlačítko

 <input type="submit" onclick="window.location.href='kam.html';
 return false">

Vyzkoušet

Přesměrování na stránku až po potvrzení dotazu

 <a href="kam.html"
 onclick="return confirm('Opravdu tam přejít?');">Přejít</a>

Vyzkoušet

Přesměrování na stránku po výběru z menu (selectu)

 <select onchange="location.href=this.options[this.selectedIndex].value">
  <option value="#">zvolte, kam přejít</option>
  <option value="http://www.google.cz">www.google.cz</option>
  <option value="http://www.seznam.cz">www.seznam.cz</option>
 </select>

Vyzkoušet

Automatická obnova stránky po daném čase

 <script>
  window.setInterval("window.location.reload()", 3000);
 </script>

Vyzkoušet

Druhý parametr (3000) opět udává počet milisekund, za který se má akce provést. 1000 milisekund = 1 sekunda.

Náhrada textu

1) U prvků typu <input>

 <input type="text" id="prvek" value="">

 <script>
  document.getElementById("prvek").value = "tento text";
 </script>

Vyzkoušet

2) U <span>, <div>

 <span id="prvek" value="">Text, který bude přepsán</span>

 <script>
  document.getElementById("prvek").innerHTML = "nový text";
 </script>

Vyzkoušet

Ukázání nebo skrytí prvku

 <script>
  function ukazat_nebo_skryt(id)
   {
    if (document.getElementById(id).style.display != "none")
     document.getElementById(id).style.display = "none";
      else
       document.getElementById(id).style.display = "";
   }
 </script>

 <div id="prvek">
  Teď jsem vidět
 </div>

 <a href="javascript:ukazat_nebo_skryt('prvek');">Ukázat
 nebo skrýt</a>

Vyzkoušet

Zrušení zatržených přepínačů

 <form name="formular">
  <input type="radio" name="prepinac" checked>první
  <input type="radio" name="prepinac">druhý
 </form>

 <a href="#" onclick="document.formular.prepinac[0].checked=
 false; document.formular.prepinac[1].checked=false;">zrušit
 vybrané</a>

Vyzkoušet

Inputy jsou brány jako pole, číslovány jsou tak od nuly (prepinac[0], prepinac[1]).

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

 <img src="puvodni.jpg" onmouseover="this.src='zmeneny.jpg';"
 onmouseout="this.src='puvodni.jpg';">

Vyzkoušet