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
Vstup metodou prompt objektu window
<SCRIPT language="JavaScript">
var r,S;
//deklarace proměnných
r=parseFloat(prompt("Zadej polomer:",0));
S=Math.PI*r*r;
document.write("<H3>S = "+S+"</H3>");
</SCRIPT>
//vstup
//výpočet
//výstup
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 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;}
<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:
bez parametrů:
jmeno(x,z)
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
<SCRIPT> </SCRIPT>
název funkce
klíčové slovo
hlavička
tělo
function
seznam tzv. formálních parametrů
dist ( x1,y1,x2,y2 )
{
var dx,dy,v;
dx=x2-x1;
dy=y2-y1;
v=Math.sqrt(dx*dx+dy*dy);
return v;
}
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;
definice funkce
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>
volání
B: <INPUT type="text" name="B" size="3"> <BR>
C: <INPUT type="text" name="C" size="3"> <BR>
funkce
<INPUT type="button" value= "Koeficienty zadány"
onClick= "jake_koreny()">
<P>Rovnice má <INPUT type="text" name="vysl" size="25">
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
<SCRIPT>
var v=0;
function dist (x1,y1,x2,y2)
globální proměnná
formální parametry
{ var dx,dy;
lokální proměnné
}
do funkce
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:
 formální: v hlavičce definice funkce
 skutečné: ve volání funkce
Příklad:
function F(x,y)
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);
Příklad
<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=">>> &deg;C na &deg;F >>>"
onclick="Cels2Fahr()"><BR>
<INPUT type="button" value="<<< &deg;F na &deg;C <<<"
onclick="Fahr2Cels()">
<TD>Fahrenheita<BR><INPUT type="text" name="fahrenheit" size="10">
</TABLE>
</FORM></BODY></HTML>
Parametry a jejich předávání
<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+"&nbsp;&nbsp;";
s+="v="+v+"<HR>";
x=F1(document.f.C.value,5); s+="x="+x+"&nbsp;&nbsp;";
s+="document.f.C.value="+document.f.C.value+"<HR>";
x=F2(document.f.C,5).value; s+="x="+x+"&nbsp;&nbsp;";
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>
Descargar

java - FAST VUT v Brně