Vstupy a výstupy v JavaScriptu Vstup: použitím metody prompt objektu window čtením hodnot z položek formuláře Výstup : použitím metody alert objektu window použitím metody write objektu dokument přiřazením hodnoty do položek formuláře přiřazením hodnoty vlastnosti innerHTML objektu dokument přiřazením hodnoty vlastnosti innerText objektu dokument
var r,S; //deklarace proměnných r=parseFloat(prompt("Zadej polomer:",0)); //vstup S=Math.PI*r*r; //výpočet document.write(" S = "+S+" "); //výstup Vstup metodou prompt objektu window
Získání hodnoty z položky formuláře Obsah kruhu function vypocet() { var r,S; r=parseFloat(document.f.R.value); S=Math.round(100*Math.PI*r*r)/100; document.write("Obsah kruhu je "+S); } Obsah kruhu Zadej polomer:
Výstup metodou alert objektu window var r,S; r=parseFloat(prompt("Zadej polomer:",0)); S=Math.PI*r*r; alert( "S = "+S);
Výstup metodou write objektu window Ve skriptu umístěném v těle dokumentu píše do místa, kde je skript ve zdrojovém textu zapsán: - píše do místa, kde je skript ve zdrojovém textu zapsán: NADPIS Text odstavce document.write("A tento text byl vypsán skriptem"); x=Math.PI*2; document.write(" A jeste výpocet: "+ x +" "); document.write("Konec skriptu"); Zde pokracuje stranka
Výstup metodou write objektu window … function vypocet() { var r,S; r=parseFloat(document.f.R.value); S=Math.round(100*Math.PI*r*r)/100; document.write("Obsah kruhu je"+S); } … Je-li použita ve funkci, která je volána po zobrazení dokumentu, píše do nového dokumentu
Výstup přiřazením do položky formuláře - neformátovaný výstup Obsah kruhu function vypocet() { var r,S; r=parseFloat(document.f.R.value); S=Math.round(100*Math.PI*r*r)/100; document.f.vyst.value="Obsah kruhu je "+S; } Obsah kruhu Zadej polomer: Výsledky:
Výstup přiřazením hodnoty vlastnosti innerHTML Obsah kruhu function vypocet() { var r,S; r=parseFloat(document.f.R.value); S=Math.round(100*Math.PI*r*r)/100; document.all.vys.innerHTML="Obsah kruhu je "+S+" "; } Obsah kruhu Zadej polomer: Výsledky:
Výstup přiřazením hodnoty do vlastnosti innerText Obsah kruhu function vypocet() { var r,S; r=parseFloat(document.f.R.value); S=Math.round(100*Math.PI*r*r)/100; document.all.odst1.innerText="Obsah kruhu je "+S; } Obsah kruhu Zadej polomer: Výsledky:
JavaScript část 3 Funkce, příkaz if
Funkce samostatná pojmenovaná část programu (skriptu) provede se až, když je zavolaná (obvykle v reakci na událost) lze ji aplikovat (volat) opakovaně na různých místech programu uvnitř funkce je možné volat jinou funkci zpřehledňuje program, zkracuje zdrojový text umožňuje získávat hodnoty, se kterými bude program (skript) pracovat: Vrací výsledek jako hodnotu function Obsah1(a) {b =a*a; return b;} x=Obsah1(3); document.write(x); Provede akci (výpočet a výpis výsledku, změna obsahu objektu apod.) function Obsah2(a) {b =Math.PI*a*a; document.f1.vysledek.value=b;}
Příklad
Rozdělení funkcí Funkce vestavěné parseInt(x), parseFloat(x), … matematické funkce objektu Math, … uživatelem vytvořené Definice: function jmeno(x,z) { příkazy } Volání funkce: s parametry: jmeno(x,z) bez parametrů: jmeno()
Jak se funkce ve skriptu definuje V jazyku JScript se definice funkce(í) vkládá obvykle do hlavičky dokumentu Jako každý skript i tyto definice jsou součástí prvku hlavička tělo { var dx,dy,v; dx=x2-x1; dy=y2-y1; v=Math.sqrt(dx*dx+dy*dy); return v; } function dist( x1,y1,x2,y2 ) klíčové slovo název funkce seznam tzv. formálních parametrů
Volání funkce Provedení funkce vyvoláme příkazem, který obsahuje název (identifikátor) funkce se seznamem skutečných parametrů. funkce vrací hodnotu volání je součástí výrazu na pravé straně přiřazovacího příkazu: Příklad: y=2/Math.sqrt(a); x=Obsah1(3); funkce nevrací hodnotu – volání je samostatným příkazem funkce s parametry: jmeno(seznam skutečných parametrů) Příklad: Vyp(x1,x2,25); Obj(this.form); Dej_vysledek(a*3,15,b); funkce bez parametrů: jmeno() Příklad: Vypocet();
Kvadraticka rovnice function jake_koreny() { var a,b,c,d,x1,x2; a=document.koef.A.value; b=document.koef.B.value; c=document.koef.C.value; d=b*b-4*a*c; if (d>0) document.koef.vysl.value= "dva reálné kořeny"; if (d==0) document.koef.vysl.value= "dvojnásobný reálný kořen"; if (d<0) document.koef.vysl.value= "dva komplexní kořeny"; } Jaké kořeny má kvadratická rovnice? Zadej rovnici Ax 2 + Bx + C A: B: C: Rovnice má definice funkce volání funkce Volání funkce
Lokální a globální proměnné, parametry Ve funkci lze pracovat s:. lokálními proměnnými: definovány v těle funkce. globálními proměnnými: def. mimo tělo funkce (ve skriptu). parametry: definovány v hlavičce funkce Možnosti předávání parametrů při práci s funkcemi: z funkce ven return globální proměnné parametry do funkce var v=0;globální proměnná function dist (x1,y1,x2,y2) formální parametry { var dx,dy;lokální proměnné dx=x2-x1;dy=y2-y1; v=Math.sqrt(dx*dx+dy*dy); } V globální proměnné v je po provedení funkce výsledek. … Lze ji případně použít v dalších funkcích.
Parametry a jejich předávání Parametry: Příklad: formální: v hlavičce definice funkcefunction F(x,y) skutečné: ve volání funkcev=F(a,b); Skutečné parametry se při zavolání funkce dosazují na místo formálních. Dva způsoby předávání: hodnotou skutečný parametr – konstanta, proměnná nebo výraz hodnota skutečného parametru se nemění (dosadí se jen hodnota) odkazem skutečný parametr – proměnná (ve funkci se pracuje přímo s parametrem) změna hodnoty formálního parametru změna skutečného parametru Příklad: Hlavička: function dist (x1,y1,x2,y2) Volání: d=dist(3,4,5,6); d=dist(a1,a2,b1,b2); d=dist(a1+p,a2+p,b1+q,b2+q); Obsah(3);
Příklad Funkce function Cels2Fahr() { var teplCels=parseFloat(document.teplota.celsius.value); var teplFahr=(9/5)*teplCels+32; document.teplota.fahrenheit.value=Math.round(teplFahr*10)/10; } function Fahr2Cels() { var teplFahr=parseFloat(document.teplota.fahrenheit.value); var teplCels=(teplFahr-32)*(5/9); document.teplota.celsius.value=Math.round(teplCels*10)/10; } Teplota ve stupních Celsia >> °C na °F >>>" onclick="Cels2Fahr()"> <INPUT type="button" value="<<< °F na °C <<<" onclick="Fahr2Cels()"> Fahrenheita
Parametry a jejich předávání Funkce v=0; function F1(a,b) { a=a*b; return a;} function F2(a,b) { a.value=a.value*b; return a;} function Vyp() { s="v="+v+" "; v=document.f.C.value; s+="v="+v+" "; x=F1(v,5); s+="x="+x+" "; s+="v="+v+" "; x=F1(document.f.C.value,5); s+="x="+x+" "; s+="document.f.C.value="+document.f.C.value+" "; x=F2(document.f.C,5).value; s+="x="+x+" "; s+="document.f.C.value="+document.f.C.value+" "; document.all.V.innerHTML=s; document.f.C.value=3;} Napis cislo: