<< 22.Design webu | Témata PVY | 24.PHP >>

23. Javascript

  • Základy - vlastnosti , využití a použití skriptovacího jazyka, proměnné a datové typy
  • Zpracování dat a událostí - matematické a logické operace, vstup a výstup dat, vstupní události
  • Programování výpočtu - funkce, podmínky a cykly - programování výpočtu
  • Knihovny Javascriptu - podstata, typy a využití knihoven

Základy

  • Vlastnosti
    • 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, hry, hodiny, počítadla přístupů ...
    • zpracování dat a událostí formulářů - vstup, kontrola, výpočet a výstup dat
  • Použití
    • začlenění do hlavičky nebo těla stránky pomocí tagu <script>
      • <script language="JavaScript" type="text/javascript">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">
  • Proměnné
    • 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
    • Ř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
  • Konverze dat
    • parseFloat(x) - převod řetězce x na desetinné číslo
    • parseInt(x) - převod řetězce x na celé číslo

Zpracování dat a událostí

  • 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

Vstup a výstup 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

Programování výpočtu

  • funkce
    • samostatná pojmenovaná část programu (skriptu)
    • umožňuje získávat hodnoty (parametry), se kterými bude skript pracovat a může hodnoty vracet
  • příklad funkce 
<script>
function napis(){
document.write("ahoj");
}
</script>
<input type="button" onClick="napis();" value="napiš ahoj" />
  • podmínky
    • if (podmínka) {příkazy pokud platí;} else {příkazy pokud neplatí}
  • cykly
    • WHILE - se vstupní podmínkou - while(podmínka opakování) {příkazy;}

c = 1; while(c<101) {document.write(c+" "); c++}

  • DO-WHILE - cyklus s výstupní podmínkou - do {příkazy cyklu;} while(podmínka);

var c = 1; do {document.write(c+" "); c++;} while(c<101);

  • FOR s řídící proměnnou - for(inicializace proměnné; podmínka; operace) {příkazy;}

for(c= 1;c<101; c++) {document.write(c+" ")}

  • příklad zadání poloměru pro výpočet plochy kruhu 
<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>

Knihovny Javascriptu

  • připravené třídy a metody objektů pro zrychlení a zefektivnění vývoje programů
  • připravené skripty se připojí k webu pomocí interního nebo externího odkazu
  • Typy knihoven - MooTools, jQuery, DoJo ...
  • Využití knihoven
    • tvorba tlačítek a navigačních menu
    • náhledy obrázků a slideshow
    • využití animačních efektů
    • zpracování událostí při ovládání myši nebo z klávesnice
    • ovládání zobrazení částí obsahu a grafiky
    • vkládání nových dat do stránky bez znovu načtení stránky - AJAX

Školní stránky

RSS