Kako u javascriptu  napisati program za rješavanje zadatka  iz OSNOVA

Takav program je dio web stranice. Pozivanjem stranice od strane klijenta (korisnika) u njegovo računalo dolazi i program. Mijenjajem ulaznih podataka korisnik odmah dobiva nove rezultate. Stranicu zajedno sa programom korisnik može kopirati u svoje računalo i zatim lokalno pozivati (off line) . Na taj način može koristiti (ili po potrebi mijenjati-napisati novi )  program za rješavanje zadatka bez uključivanja na mrežu. Popularno se takvi programi nazivaju kalkulatori. Pogledajte "hrpu" kalkulatora ovdje...

Struktura web stranice

<html>      početak stranice

<head>    glava

......naredbe

</head>   završetak glave

<body>   sadržaj stranice (glavni dio stranice)

.........naredbe

</body>  završetak sadržaja

</html>   završetak stranice

Javascript program se ubacuje  u "head"  ili u  "body"  između oznaka <script> program...  </script>

Evo primjera strukture WEB stranice u koju je "ubačen" program za množenje dva broja

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>primjer</title>
 

<SCRIPT language=JavaScript>
function ucitaj() {
a=document.ulaz.pod1.value
b=document.ulaz.pod2.value}
function izracunaj ()
{ ab=a*b;
document.izlaz.rezultat.value=ab }
</SCRIPT>
</head>

<body>
<center> Ovo je primjer programa koji mnozi dva broja
<form name="ulaz">
a = <INPUT Type="text" Name="pod1" Value="234" Size="5">&nbsp;
b = <INPUT Type="text" Name="pod2" Value="153" Size="5"> <br>
<INPUT TYPE="button" VALUE="izračunaj" NAME="B1" ONCLICK="ucitaj();izracunaj()">

</form>
<hr>
<form name="izlaz">
REZULTAT a x b = <INPUT Type="text" Name="rezultat" Value="" Size="8">
</form>

</body>

</html>


Uokvireni  tekst možete kopirati (prepisati) u NOTEPAD i zatim spremiti kao htm "fajl" (npr. pod nazivom mnozenje.htm) u "folder" koji ste pripremili.  Ako ste ovo uspjeli napraviti spremni ste za nove složenije programe. Npr.  umjesto množenja dva broja želite da program izračunava serijski i paralelni spoj dvaju otpornika. Potrebno je napraviti nekoliko izmjena u nazivima varijabli, ulaznih/izlaznih veličina. Možete dodati boje,  itd....evo ovako:

 
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>paralelni spoj</title>
<SCRIPT language=JavaScript>
var R1; var R2

function ucitaj() {
R1=document.ulaz.pod1.value
R2=document.ulaz.pod2.value
R1=eval(R1)
R2=eval(R2)
}

function izracunaj () {

// komentar formuile za seriju i paralelu
Rs=R1+R2
Rp=(R1*R2)/Rs

// komentar zaokruzivanje na dvije decimale za tri upisite 1000
document.izlaz.rezultat1.value=Math.round(100*Rp)/100
document.izlaz.rezultat2.value=Math.round(100*Rs)/100
}

</SCRIPT>
</head>

<body bgcolor="#C0C0C0">
<center>
<div align="center">
<center>
<table border="4" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#008080" width="50%" bgcolor="#FFFFC4">
<tr>
<td width="100%">
<center>
<p> <font face="Arial">Ovo je primjer programa za izračunavanje ukupnog
otpora paralelnog i serijskog spoja otpornika</font></p>
<form name="ulaz">
<p>
<i>R</i><sub>1</sub> = <INPUT Type="text" Name="pod1" Value="234" Size="5">&nbsp;<font face="Symbol">W</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i>R</i><sub>2</sub> = <INPUT Type="text" Name="pod2" Value="153" Size="5">&nbsp;&nbsp;
<font face="Symbol">W</font><br>
<INPUT TYPE="button" VALUE="izračunaj" NAME="tipka1" ONCLICK="ucitaj();izracunaj()">
</p>
</form>
<hr>
<form name="izlaz">
<p>REZULTAT&nbsp;&nbsp;&nbsp;&nbsp; <i>R</i>p = <INPUT Type="text" Name="rezultat1" Value="" Size="8">&nbsp;
<font face="Symbol">W</font> <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; R</i>s = <INPUT Type="text" Name="rezultat2" Value="" Size="8">&nbsp;
<font face="Symbol">W</font> </p>

</form></td></tr></table></center></div>
</body></html>

U ovom programu nije "uprogramirana"  kontrola ulaznih podataka (ne smije biti slovo). Možete primjetiti da je ovdje korištena funkcija Math.round kojom se rezultat zaokružuje   Pažnja: javascript je "osjetljiv " na mala i velika slova.  Ova stranica je spremljena u serveru. Pozovite ovu stranicu  tako da kliknete ovdje...  Možete je spremiti sa "save as  web page" u svoje računalo na kojem onda u off line načinu rada možete izračunavati ekvivalentne otpore.....

Ako ste nakon ovih primjera "dobili volju" za samostalno pisanje programa kojim ćete na taj način  rješavati zadatke iz OE  krenite na posao uz pomoć nekog od internet tutora (npr na stranicama    www.w3schools.com/ imate uz ostalo linkove learn html i learn javascript. Tamo saznajete sve o sintaksi  tih jezika . Naravno osim NOTEPADA dobro je koristiti i neki od alata za pisanje WEB stranica  (npr. Front Page) koji omgućavaju jednostavno stvaranje tabela ubacivanje slika , bojanje itd... Za pocetak neka to bude program za izracun ukupnog otpora za tri serijske odnosno paralelna otpora.  Nakon toga samo dopišete naredbu za izracun struje Iuk=U/Ruk itd. Naravno ako takve stvari savladate na primjerima iz OE stečeno znanje o web-dizajnu možete primjenjivati  u mnogim područjima .....Nije potrebno naglašavati da će i znanje iz OE biti "kvalitetnije". I još nešto, program za rješavanje zadatka možete staviti  putem inerneta na raspolaganje svim zaineresiranim korisnicima (onima koji npr. žele provjeriti svoje "ručno" dobivene rezultate) . Pogledajte ovdje jedan takav program koji rješava složeni mješoviti spoj otpornika. Dapače  "source" ove stranice možete koristiti kao "šprancu" za stvaranje takve stranice (razmještaj teksta,slike, ulaznih  i izlaznih podataka i komentara).

Ivan Felja 2008