Embedded Files
Detyre: Makina llogaritese- Te ndertojme nje faqe e cila afishon nje forme me 3 kutija. Ne dy kutite e para vendoset nga nje numer, ndersa ne kutine e trete vendoset shuma e dy numrave qe ndodhen ne dy kutite e para. Sa here qe ndryshon permbajtja e njeres nga kutite e para, rillogaritet dhe afishohet serish shuma ne kutine e trete. Figura me poshte ilustron pamjen e kerkuar te formes.
Nepermjet nje shembulli do te ilustrojme perdorimin e HTML, Javascript, DOM dhe eventeve per te ndertuar nje faqe interaktive.
Permbajtja e leksionit:(Per tu lexuar ne liber )
Prezantim me HTML
Prezantim me JavaScript
Strukturat e kontrollit ne javascript
DOM dhe Eventet
Funksionet ne Javascript
Zgjidhje
Per ti dhene zgjidhje ketij problemi do te na duhet:
Te ndertojme nderfaqen (pamjen
Te ndertojme llogjiken (funksionin qe gjen shumen)
Te vendosim nje "sensor" qe therret funksionin e shumes ne castin qe ndryshon vlera e kutive Nr1 ose NR2.
1- Per te ndertuar ndefaqen do te perdorim HTML
2- Per te ndertuar llogjiken do te ndertojme nje funksion ne javascript
3-Per te aktivizuar funksion e javascript do te vendosim nje event onChange tek kutite nr1 dhe nr2.
Skica me poshte ilustron si e nderton browseri ambjentin per ndertimin e faqes interaktive pasi lexon skedarin html.
Sic duket edhe nga figura kodi html i cili permban:
- ne seksion e kokes deklarimin e funksionit javascript qe kap vlerat e kutive nr1 dhe nr2 dhe vendos shumen e tyre ne kutine sh.
- ne seksionin e trupit kodin html qe nderton nderfaqen si edhe objektet e DOM per kete dokument
- ne seksionin e trupit per sejcilen nga kutite nr1 dhe nr2 dy sensore onChange te cilet therrasin funksionin e javscript per gjetjen e shumes
Me poshte eshte kodi i plote i versionit te pare te zgjidhjes.
Shenim
Kodin mund ta kopjoni direkt ne editorin tuaj te preferuar dhe nese e ruani me prapashtesen .html , mund ta ekzekutoni duke klikuar dy hyre mbi skedarin e ruajtur.
<html>
<head>
<title>Makine llogaritese</title>
<script language="JavaScript">
function shuma()
{
document.frm1.sh.value=
document.frm1.nr1.value+
document.frm1.nr2.value;
}
</script>
</head>
<body>
<form name="frm1">
Nr1 <input type="text" name="nr1" id="nr1" onChange="shuma();"><br>
Nr2 <input type="text" name="nr2" id="nr2" onChange="shuma();"><br>
Shuma <input type="text" name="sh" id="sh">
</form>
</body>
</html>
Versioni dy i zgjidhjes
Nese tashme e keni ekzekutuar krijuar faqen me kodin me siper do te keni vene re qe makina juaj llogaritese nuk eshte shume inteligjente.
Nese do te tentoni per shembull te vendosni numrin 5 tek kutia nr1 dhe tek kutia nr2 (nr1=5,nr=5) atehere rezultati qe do t'ju shfaqet ne kutine shuma (sh) do te jete 55.
Si ka mundesi 5+5=55?
ne fakt duke qene se dy kutite jane tekst (i kemi krijuar me kodin html <input type="text">), javascript konsideron qe ne po realizojme mbledhjen e dy teksteve:
"5"+"5"="55"
fjala "5" + fjala "5"= fjala "55".
Per te konvertuar nje numer qe ndodhet ne nje kuti tekst ne javascript perdoren funksione parseInt() dhe parseFloat(), perkatesisht per numrat e plote dhe per numrat me presje dhjetore.
Me poshte eshte versioni i korrigjuar i makines tuaj llogaritese qe e gjen sakte shumen e dy numrave te plote:
<html>
<head>
<title>Makine llogaritese</title>
<script language="JavaScript">
function shuma()
{
document.frm1.sh.value=
parseInt(document.frm1.nr1.value)+
parseInt(document.frm1.nr2.value);
}
</script>
</head>
<body>
<form name="frm1">
Nr1 <input type="text" name="nr1" id="nr1" onChange="shuma();"><br>
Nr2 <input type="text" name="nr2" id="nr2" onChange="shuma();"><br>
Shuma <input type="text" name="sh" id="sh">
</form>
</body>
</html>
Metoda e objektit document, getElementByID()
Metoda e objektit dokument kthen id e nje objekti te dokumentit dhe merr si argument emrin e tij.
Nese nje objekt e kemi emeruar me atributin id atehere kete objekt mund ta kapim nepermjet metodes getElementByID.
Me poshte eshte nje version i modifikuar lehtesisht i shembullit me makinen llogaritese, ne te cilin eshte modifikuar vetem funksioni shuma().
<html>
<head>
<title>Makine llogaritese</title>
<script language="JavaScript">
function shuma()
{
a=document.getElementById("nr1");
b=document.getElementById("nr2");
c=document.getElementById("sh");
c.value=parseInt(a.value)+ parseInt(b.value);
}
</script>
</head>
<body>
<form name="frm1">
Nr1 <input type="text" name="nr1" id="nr1" onChange="shuma();"><br>
Nr2 <input type="text" name="nr2" id="nr2" onChange="shuma();"><br>
Shuma <input type="text" name="sh" id="sh">
</form>
</body>
</html>
Shenim
Kujtoni qe javascript eshte "case sensitive", pra i dallon shkronjat e medha nga shkronjat e vogla. Per kete arsye Getelementbyid eshte gabim, ndersa getElementById eshte emri i sakte i metodes, si ne shembullin me lart.
Page updated
Report abuse