<< 16.Programování webu | Témata WEB | 18.Programování v javascriptu >>

17. Javascript

  • Javascript - vlastnosti, využití, začlenění, syntaxe
  • Proměnné - deklarace, datové typy, vstup a výstup dat
  • Funkce - syntaxe, využití, vazba na formulář, příklad výpočtu ve formuláři

Javascript

  • Vlastnosti
    • klientský programovací jazyk pro webové stránky interpretovaný v prohlížeči
    • programové skripty vloženy přímo do html kódu nebo připojeny odkazem v hlavičce
    • syntaxe podobná jazykům Java a C, pracuje s objekty, rozlišuje velikost písmen, příkazy odděleny středníkem
  • Využití
    • dynamické prvky ve stránkách - efekty, kurzory, obrázkové galerie, hodiny, vysouvací menu ...
    • zpracování dat a událostí formulářů - vstup, kontrola, výpočet a výstup dat
  • Začlenění
    • začlenění do hlavičky nebo těla stránky pomocí tagu <script>
      • <script>obsah skriptu</script>
    • připojení ke stránce pomocí tagu <script> v hlavičce stránky
      • <script language="JavaScript" type="text/javascript" src="cesta k externímu souboru"></script>
  • Syntaxe
  • příklad zadání poloměru pro výpočet plochy kruhu 
<script>
    document.write("A toto napsal JavaScript");
</script>

Proměnné

  • Deklarace
    • deklarace - pomocí klíčového slova VAR - var proměnná = hodnota
    • název - první znak písmeno, dále čísla a speciální znaky, záleží na velikosti písmen
    • typ - datový typ je určen přiřazením hodnoty
  • Datové typy
    • Čísla - celá (integer), desetinná číslo (float), exponenciální, hexadecimální hodnota
    • Znaky - (char)
    • Řetězce - znakové řetězec (string) - "Toto je řetězec" 'Toto je také řetězec'
    • Logické hodnoty (boolean) - true x false
    • Datová pole - indexovaná řada hodnot stejného typu
      • var dny = new Array() - deklarace pole dny
      • var dny[3] = ["středa"] - přiřazení třetího prvku pole
  • Zpracování dat
    • Vstup dat
      • prompt - metoda objektu Window
        • r=parseFloat(prompt("Zadej poloměr :",0));
      • <INPUT> - vstupní pole formuláře
        • <FORM name="vstup"> <INPUT type="text" name="R">
    • Výstup dat
      • alert - metoda alert objektu window
      • document.write - metoda write objektu document
      • <input> - formulářové pole
      • innerHTML a innerText
    • Konverze dat
      • parseFloat(x) - převod řetězce x na desetinné číslo
      • parseInt(x) - převod řetězce x na celé číslo
    • Matematické operace
      • standardní operátory - + - * /
      • logické operace - > < >= <=, rovnost ==, nerovnost !=, nebo ||, zároveň &&
      • matematické funkce - využití objektu Math
        • (Math.abs(-451), Math.cos(45), Math.random(), Math.round(23.356), Math.sqrt(9), Math.PI
    • Příklad výpočtu 
<script>
   var r,S;		                      //deklarace proměnných
   r=parseFloat(prompt("Zadej poloměr :",0)); //vstup
   S=Math.PI*r*r;                             //výpočet
   document.write("<h4>S = "+S+"</h4>");      //výstup
</script>

Funkce

  • samostatná pojmenovaná část programu (skriptu)
  • umožňuje získávat hodnoty (parametry), se kterými bude skript pracovat a může hodnoty vracet
  • Syntaxe zápisu 
<script>
  function napis(){
  document.write("ahoj");
  }
</script>
<input type="button" onClick="napis();" value="napiš ahoj" />
  • Příklad výpočtu ve formuláři 
<html>
  <script>
     function plocha(){
     var r,S;		                //deklarace proměnných
     r=document.vypocet.polomer.value;  //vstup z formuláře - pole polomer
     S=Math.PI*r*r;                     //výpočet
     document.vypocet.vysledek.value=S; //výstup do formuláře - pole vysledek
     }
  </script>
  <form name="vypocet">
      R = <input type="text" name="polomer" size="10"> 
      <input type="button" value= "Vypocti" onClick= "plocha()"> <br>
      S = <input type="text" name="vysledek" size="25">
  </form>
</html>

Školní stránky

RSS