Javascript in pagina Html

34

    Codul routinelor scrise in Javascript se plaseaza de regula in zona de heder. Pentru ca anumite browsere se nu faca vizibil acest cod el se scrie intre delimitatorii: <!-- si //-->. Un exemplu de cod este urmatorul.

<HTML><HEAD>
<TITLE> Exemplu de javascript in pagina HTML</TITLE>
<SCRIPT>
<!--
function sin(x,form){
form.sinface.value=Math.sin(x)}

function cos(x,form){
form.cosface.value=Math.cos(x)}

function radian(x,form) {
form.facradiani.value=x/180*Math.PI}

function grad(x,form){
form.facgrade.value=x*180/Math.PI}

function pipe2(form) {form.pip2.value=Math.PI/2}
// -->
</SCRIPT></HEAD>


<BODY BGCOLOR="#00ffff">
<H3> Exemplu de Javascript:</H3>
<font face="Courier New">

<FORM>
PI / 2 <INPUT TYPE="Button" VALUE=" = " onCLICK="pipe2(this.form)">

<INPUT TYPE="Text" NAME="pip2" SIZE="25"><BR><br><b>
&nbsp;&nbsp;&nbsp;SIN(<INPUT TYPE="Text" NAME="sinde" SIZE="25" VALUE="1.5706"> )

<INPUT TYPE="Button" VALUE=" = " onCLICK="sin(sinde.value,this.form)">

<INPUT TYPE="Text" NAME="sinface" SIZE="25"><BR>

&nbsp;&nbsp;&nbsp;COS(<INPUT TYPE="Text" NAME="cosde" SIZE="25" VALUE="1.5706"> )

<INPUT TYPE="Button" VALUE=" = " onCLICK="cos(cosde.value,this.form)">

<INPUT TYPE="Text" NAME="cosface" SIZE="25"><br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="grade" size="20" VALUE="0">
grade&nbsp;&nbsp; <INPUT TYPE="Button" VALUE=" = " onCLICK="radian(grade.value,this.form)">

<input type="text" name="facradiani" size="20"> radiani</b>
<p><b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="radiani" size="20" VALUE="0">
radiani <INPUT TYPE="Button" VALUE=" = " onCLICK="grad(radiani.value,this.form)">

<input type="text" name="facgrade" size="20"> grade</b></p>
<p><BR>
</font></p></FORM></BODY></HTML> 

    Dupa cum se observa tagurile ce delimiteaza un javascript in pagina HTML sunt <SCRIPT> si  </SCRIPT>. In forma executabila aceasta pagina se gaseste aici.

    Tagul <FORM> delimiteaza o zona de cod care in esenta permite vizitatorului unei pagini web sa completeze un formular. 

    Tagul <INPUT> (tag nepereche, adica nu este necesar tagul </INPUT>) este de mai multe tipuri: Text, Button, PASSWORD, CHECKBOX, RADIO, RESET etc. Aici sau folosit primele doua. Tipul Text delimiteaza o caseta editabila in care poate introduce text. Tipul Button creaza un obiect de tip buton cu toate evenimentele specifice, dintre a fost folosit evenimentul onClick.

    Primul tag imput 

<INPUT TYPE="Button" VALUE=" = " onCLICK="pipe2(this.form)">

apeleaza functia pipe2 care calculeaza valoarea   (cu functia PI din biblioteca Math) si transmite rezultatul tagului INPUT de tip text cu numele pip2 in campul VALUE.

function pipe2(form) {form.pip2.value=Math.PI/2}

Variabila form a acestei functii precizeza la momentul apelarii ce forma fa fi utilizata (aici este o singura forma).

   Membrul stang al expresiei

form.pip2.value=Math.PI/2

indica campul VALUE al INPUT-ului cu numele pip2 al formei precizate in momentul apelarii.

Butonul urmator definit prin 

<INPUT TYPE="Button" VALUE=" = " onCLICK="sin(sinde.value,this.form)">

utilizeaza calculeaza functia sin al carui argument este luat din caseta sinde  

<INPUT TYPE="Text" NAME="sinde" SIZE="25" VALUE="1.5706">

rezultatul fiind scris in caseta sinface definita de

<INPUT TYPE="Text" NAME="sinface" SIZE="25">

calculul fiind efectuat de functia

function sin(x,form){
form.sinface.value=Math.sin(x)}

care utilizeaza functia predefinita Math.sin.

Celelalte butoane functioneaza analog.

   Un exemplu ce va mai elaborat este calcultorul din pagina urmatoare.

© Cornel Mironel Niculae, 2003-2004

13-Nov-2009