11 Javascript - programování na klientu - pokračování


Nacházíš se zde: rozcestník kroužku1. Úvodní lekce1. lekce - Teorie klient a server2. lekce - Úvod do vývoje webových aplikací3. lekce - XHTML (XHTML tahák)4. lekce - CSS = kaskádové styly5. lekce - CSS + Třídy6. lekce - CSS a DIVy7. lekce - Publikování stránek8. lekce - Tvorba grafiky9. lekce - Rozřezání a nakódování grafického návrhu10. lekce - Javascript - programování na klientu11. lekce - Javascript - programování na klientu - pokračování


11 Javascript – programování na klientu - pokračování

11.1 Opakování

11.2 Události prohlížeče

Máme pár základních událostí prohlížeče. Jsou to spouštěče pro naše scripty, a to právě tehdy, když dojde k něčemu, na co je ta událost nastavená. Např.: stisknutí tlačítka myši na prvku, přejetí myši přez prvek, načtení stránky …

Základní události:

Názorný příklad zápisu:

<input type="button" onclick="alert('Baf!');" value="Stiskni" />

11.3 Alert

Vyskakovací okno... no comment

alert("Zde je text v okně!");

11.4 Práce s formulářovými prvky

Pouze názorným příkladem: jak vyndat text z textového pole do alertu? Nejdříve si vytvoříme textové pole a tlačítko. Tlačítku dáme do oncliku naší funkci. Nesmíme zapomenou pojmenovat textové pole idčkem, abychom se k němu potom dostali.

<script type="text/javascript">
      function moje_funkce() {
        alert(document.getElementById("text").value);
      }
</script>

<input type="text" id="text" />
<input type="button" value="Stiskni" onclick="moje_funkce()" />

11.5 Úprava vlastností css

Pomocí javascriptu můžeme upravovat většinu vlastností css. Kompletní výčet přepisů vlasntostní do javascriptu najdete zde: http://codepunk.hardwar.org.uk/css2js.htm. Najdete tam také stručný návod, jak se k těm vlastnostem v javascriptu dostat, neboli, jak se upravují.

Na názorném příkladu se ukážeme změnu pozadí prvku při přejetí myší

<script type="text/javascript">
    function na() {
      document.getElementById("ctverecek").style.backgroundColor = "red";
    }

    function ven() {
      document.getElementById("ctverecek").style.backgroundColor = "white";
    }
</script>

<div style="width: 50px; height: 50px; border: 1px solid black;" onmouseover="na()" onmouseout="ven()" id="ctverecek">
   <!-- tento div je ctverecek 50x50 pixelů -->
</div>

Máš chuť na další lekci?