Vstupy a výstupy v JavaScriptu

Vstupy a výstupy v JavaScriptu Vstup: • použitím metody prompt objektu window • čtením hodnotz položekformuláře Výstup : • použitím metody alert objektu window • použitím metody write objektu dokument • přiřazením hodnoty do položekformuláře • přiřazením hodnoty vlastnosti innerHTML objektu dokument • přiřazením hodnoty vlastnosti innerText objektu dokument

Vstup metodou promptobjektu window <SCRIPT language="JavaScript"> var r,S; //deklarace proměnných r=parseFloat(prompt("Zadej polomer:",0)); //vstup S=Math.PI*r*r; //výpočet document.write("<H3>S = "+S+"</H3>"); //výstup </SCRIPT>

Získání hodnoty z položky formuláře <HTML><HEAD><TITLE>Obsah kruhu</TITLE> <SCRIPT language="JavaScript"> 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); } </SCRIPT> </HEAD> <BODY> <H2> Obsah kruhu</H2> <FORM name="f"> <H3>Zadej polomer:</H3> <INPUT type="text" name="R"> <INPUT type="button" value="odeslat" onclick="vypocet()"> <INPUT type="reset" value="Vymaž formulár"> </FORM> </BODY> </HTML>

Výstup metodou alert objektu window <SCRIPT language="JavaScript"> var r,S; r=parseFloat(prompt("Zadej polomer:",0)); S=Math.PI*r*r; alert("S = "+S); </SCRIPT>

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: <BODY bgColor="lightblue"> <H3> NADPIS </H3><HR> <P>Text odstavce </P> <SCRIPT> document.write("A tento text byl vypsán skriptem"); x=Math.PI*2; document.write("<BR><B>A jeste výpocet:</B>"+ x +"<BR>"); document.write("Konec skriptu"); </SCRIPT> <HR> <P> Zde pokracuje stranka </P> </BODY>

Výstup metodou write objektu window Je-li použita ve funkci, která je volána po zobrazení dokumentu, píše do nového dokumentu … <SCRIPT language="JavaScript"> 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); } </SCRIPT> <BODY bgColor="lightblue"> <FORM name="f"> <INPUT type="text" value="0" name="R"> <INPUT type="button" value="obsah kruhu" onClick="vypocet()"> </FORM> …

Výstup přiřazením do položky formuláře - neformátovaný výstup <HTML> <HEAD><TITLE>Obsah kruhu</TITLE> <SCRIPT language="JavaScript"> 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; } </SCRIPT></HEAD> <BODY> <H2> Obsah kruhu</H2> <FORM name="f"> <H3>Zadej polomer:</H3><INPUT type="text" name="R" > <INPUT type="button" value="odeslat" onclick="vypocet()"> <INPUT type="reset" value="Vymaz formulár"> <H3>Výsledky:</H3> <INPUT type="text" name="vyst" > </FORM></BODY></HTML>

Výstup přiřazením hodnoty vlastnosti innerHTML <HTML> <HEAD><TITLE>Obsah kruhu</TITLE> <SCRIPT language="JavaScript"> 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 <B>"+S+"</B>"; } </SCRIPT></HEAD> <BODY> <H2> Obsah kruhu</H2> <FORM name="f"> <H3>Zadej polomer:</H3><INPUT type="text" name="R" > <INPUT type="button" value="odeslat"onclick="vypocet()"> <INPUT type="reset" value="Vymaz formulár"> <H3>Výsledky:</H3> <DIV id="vys"></DIV> </FORM></BODY></HTML>

Výstup přiřazením hodnoty do vlastnosti innerText <HTML> <HEAD><TITLE>Obsah kruhu</TITLE> <SCRIPT language="JavaScript"> 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; } </SCRIPT></HEAD> <BODY> <H2> Obsah kruhu</H2> <FORM name="f"> <H3>Zadej polomer:</H3><INPUT type="text" name="R" > <INPUT type="button" value="odeslat" onclick="vypocet()"> <INPUT type="reset" value="Vymaz formulár"> <H3>Výsledky:</H3> <P id="odst1"></P> </FORM></BODY></HTML>

JavaScript část 3Funkce, 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;} <INPUT type="text" name="vysledek" >

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()

název funkce seznam tzv. formálních parametrů klíčové slovo { var dx,dy,v; dx=x2-x1; dy=y2-y1; v=Math.sqrt(dx*dx+dy*dy); return v; } hlavička function dist ( x1,y1,x2,y2 ) tělo 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 <SCRIPT> </SCRIPT>

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();

Volání funkce <HTML> <HEAD> <TITLE>Kvadraticka rovnice</TITLE> <SCRIPT language= "JavaScript" > 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"; } </SCRIPT> </HEAD> <BODY> <H2>Jaké kořeny má kvadratická rovnice?</H2> <H3>Zadej rovnici Ax<SUP>2</SUP> + Bx + C </H3> <FORM name="koef"> A: <INPUT type="text" name="A" size="3"> <BR> B: <INPUT type="text" name="B" size="3"> <BR> C: <INPUT type="text" name="C" size="3"> <BR> <INPUT type="button" value= "Koeficienty zadány" onClick= "jake_koreny()"> <P>Rovnice má <INPUT type="text" name="vysl" size="25"> definice 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 <SCRIPT> 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); } </SCRIPT>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 funkce function F(x,y) • skutečné: ve volání funkce v=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);

<HTML><HEAD><TITLE>Funkce</TITLE> <SCRIPT> 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; } </SCRIPT> <FORM name="teplota"> <TABLE border="0"> <TR align="center"> <TD colspan="3"><B>Teplota ve stupních</B> <TR align="center"> <TD>Celsia<BR><INPUT type="text" name="celsius" size="10"> <TD><INPUT type="button" value=">>> °C na °F >>>" onclick="Cels2Fahr()"><BR> <INPUT type="button" value="<<< °F na °C <<<" onclick="Fahr2Cels()"> <TD>Fahrenheita<BR><INPUT type="text" name="fahrenheit" size="10"> </TABLE> </FORM></BODY></HTML> Příklad

<HTML><HEAD><TITLE>Funkce</TITLE> <SCRIPT> 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+"<BR>"; v=document.f.C.value; s+="v="+v+"<HR>"; x=F1(v,5); s+="x="+x+" "; s+="v="+v+"<HR>"; x=F1(document.f.C.value,5); s+="x="+x+" "; s+="document.f.C.value="+document.f.C.value+"<HR>"; x=F2(document.f.C,5).value; s+="x="+x+" "; s+="document.f.C.value="+document.f.C.value+"<HR>"; document.all.V.innerHTML=s; document.f.C.value=3;} </SCRIPT></HEAD> <BODY><FORM name="f">Napis cislo: <INPUT type="text" name="C" value="0" size="5"><BR> <INPUT type="button" value="Vypocet" onclick="Vyp()"> </FORM><DIV id="V"></DIV></BODY></HTML> Parametry a jejich předávání

Vstupy a výstupy v JavaScriptu