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

Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák) → 4. lekce - CSS = kaskádové styly → 5. lekce - CSS + Třídy → 6. lekce - CSS a DIVy → 7. lekce - Publikování stránek → 8. lekce - Tvorba grafiky → 9. lekce - Rozřezání a nakódování grafického návrhu → 10. lekce - Javascript - programování na klientu → 11. 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?