JavaScript

JavaScript podstatně rozšiřuje možnosti jazyka HTML, který slouží k programování webových stránek. Je v něm možné definovat funkce, používat dialogová okna, měnit vzhled otvíraných oken, vytvářet formuláře s rozličnými formulářovými prvky atd.

Umístění kódu na stránce:

Skripty napsané v JavaScriptu lze umísťovat prakticky kdekoliv, někdy je však výhodné skript umístit mezi párovou značku <head>, potom nemůže návštěvník na stránce nic udělat, dokud se JavaScript nenahraje.

Od ostatního kódu stránky se JavaScript odděluje takto:

  <script language="JavaScript">
  <!-- vlastní kód // -->
  </script>

  <script src=”zdroj.js”></script>
    //… načtení externího souboru s JavaScriptem

Základní příkazy JavaScriptu:

Vypsání textu: document.write("Vas prehliadac podporuje JavaScript");
Vypsání proměnné a textu: document.write(“Je vám ”+vek+” let.”);
Přiřazení hodnoty do proměnné: text1=document.write("Ahoj!");
Deklarace pole: base=new Array(0,1,2,3,4,5,6,7,8,9);

Dialogová okna:

Informační okno: window.alert(“Na tuto stránku nemáte přístup!”);
Potvrzovací okno: window.confirm(“Skutečně chcete vstoupit na tuto stránku?”);
Vstupní okno: window.prompt(“Kolik vám je let?”);
Přiřazení hodnoty okna do proměnné: vek= window.prompt(“Kolik vám je let?”);

Formátovací znaky:

\n ... text se začne vypisovat v novém řádku
\t ... vynechá se tak velký počet mezer, jaká je velikost tabulátoru
\" ... tento znak je vhodné použít v případě, kdy potřebujeme napsat uvozovky

Deklarování funkcí:

Funkce se deklarují mezi tagem <head> a </head>. Příklad jednoduché funkce bez vstupních parametrů:

  function cara()
    { document.write("===============================<br>"); }

Příklad složitějších funkcí:

  function vypis(barva,velikost,text)
    { t1="<font "; t2="color="+barva+" ";
      t3="size="+velikost+">"; t4="</font>";
      document.write(t1+t2+t3+text+t4); }

  function nahodne_cislo(rozsah)
    { return Math.round(Math.random()*rozsah); }

První funkce vypisuje zadaný text a formátuje ho podle zadané velikosti a barvy.
V druhém příkladu je Math.random() vnořenou funkcí - funkce generuje náhodné číslo v udaném rozsahu. Funkce Math.round() zaokrouhluje číslo na 0 desetinných míst. Příkaz return zapisuje výsledek funkce na místo, odkud byla volaná.

Matematické funkce v JavaScriptu:

Funkce (Math.nazev)	Popis funkce
abs	absolutní hodnota
sin, cos, tan	standardní trigonometrické funkce (argument v radiánech)
asin, acos, atan	inverzní trigonometrické funkce (vracejí hodnotu v radiánech)
exp	exponenciální funkce (základ e)
log	přirozený logaritmus (základ e)
ceil	zaokrouhlování směrem nahoru
floor	zaokrouhlování směrem dolu
min, max	argument obsahuje 2 čísla, funkce vrátí číslo menší/větší
pow	exponenciální funkce (první argument je základ, druhý exponent)
round	všeobecné zaokrouhlování
sqrt	odmocnina

Stručné zápisy	Popis
pokus++	přičte k proměnné pokus číslo 1
pokus--	odečte od proměnné pokus číslo 1
pokus+=x	přičte k proměnné pokus číslo x
pokus-=x	odečte od proměnné pokus číslo x
pokus*=x	vynásobí původní obsah proměnné číslem x
pokus/=x	vydělí původní obsah proměnné číslem x

Práce s okny:

K otevření nového okna slouží funkce window.open("URL","jmeno_okna","parametry_okna"); Parametrů okna můžeme definovat hned několik (definují se za sebou pouze do jedněch uvozovek):

Parametr
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width
height
top
left

Hodnota
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
yes / no
číslo
číslo
číslo
číslo

Funkce
má se zobrazit toolbar?
řádek s adresou dokumentu?
políčka s vybranými adresami?
stavový řádek?
hlavní menu?
skrolovací šipky?
schopnost měnit velikost okna
má se přenést historie stránek
šířka nového okna
výška nového okna
x-ová souřadnice nového okna
y-ová souřadnice nového okna

Př.: window.open("file:///C:/","druhe_okno","width=300,height=100,menubar=yes");
Pro provedení akce (funkce otevření okna) po kliknutí na objekt se používá parametr onClick, popř. onMouseOver, onMouseOut:

  <a href="#" onClick="otevri_okno();">Otevření okna</a>

Obrázky v JavaScriptu:

K obrázkům přistupujeme pomocí document.images[cislo_obr].src="novy_obr.gif"; (přístup pomocí tohoto automatického číslování však není moc výhodný) , popř. pomocí document.images.name.src="off.gif"; kde name je jméno obrázku definované v tagu <img> v HTML kódu.

Záměna obrázků po najetí myší (proměnlivý odkaz):

  <script>
  <!--
  // nakesovani obrazku (preload):
  obr1=new Image(); obr1.src="on.gif";
  obr2=new Image(); obr2.src="off.gif";

  function zamen(nazev_obr,novy_obr)
  {
    document.images[nazev_obr].src=novy_obr;
  }
  // -->
  </script>

  <a href="1.html" onMouseOver="zamen('obr1','off.gif');"
                      onMouseOut="zamen('obr1','on.gif');">
  <img src="on.gif" border="0" name="obr1"></a>

Formuláře s použitím JavaScriptu:

Používají se formuláře napsané v html kódu, pomocí akcí definovaných pro myš je možné spouštět různé funkce JavaScriptu při potvrzení formuláře… Podobně jako u obrázků, i formuláře jsou automaticky adresovány (číslovány) a lze k nim přistupovat pomocí document.forms[cislo_form]. Vhodnější je formulář si pojmenovat (<form name=”nazev”>) a dále k němu přistupovat přes document.nazev_form. Stejně tak lze přistupovat k jednotlivým prvkům formuláře: document.nazev_form.elements[cislo_prvku] a document.nazev_form.nazev_prvku.

Navigační prvky JavaScriptu:

Pozn.: Všechny následující prvky musí být uzavřeny v párovém tagu <script>. Prvky se odkazují na tuto funkci:

  function skoc(adresa) { window.open(adresa,"_top"); }

Navigační tlačítka:

  <input type="button" value="AltaVista" onClick="skoc('http://av.com');">

Radio button (skupina voličů):

  <input type="radio" name="1" onClick="skoc('http://av.com');">
    AltaVista<br>
  <input type="radio" name="1" onClick="skoc('http://hotbot.com');">
    HotBot<br>
  <input type="radio" name="1" onClick="skoc('http://yahoo.com');">
    Yahoo<br>

Výběrové menu (pull-down):

  <SELECT NAME="menu" onChange="skoc(this.form)">
    <OPTION>VYBEROVE MENU --></OPTION>
    <OPTION></OPTION>
    <OPTION>AltaVista</OPTION>
    <OPTION>Hotbot</OPTION>
    <OPTION>Yahoo</OPTION>
  </SELECT>

Zápis Cookie:

  function ZapisCookie(nazev,hodnota,vyprsi)
  {
    datum=new Date();
    if(vyprsi)
    {
      datum.setTime(datum.getTime()+vyprsi);
      document.cookie=nazev+"="+escape(hodnota)+";
      expires="+datum.toGMTString();
    }
    else
    {
      document.cookie=nazev+"="+escape(hodnota);
    }
  }

zpět | nahoru