02- Modeli i dokumentit me objekte - DOM


Ne kete leksion


 HTML eshte nje gjuhe shume e pasur, por duke qene nje gjuhe markup,mund te perdoret vetem per te percaktuar pamjen e faqes dhe eshte mjaftueshme kur nuk nevojitet te ruhen te dhenat online. Per te shtuar funksionalitete te ndryshme si per shembull montrolli i kontentit qe perdoruesi vendos ne forme perpara se te dergohet ne server, na nevojitet qe te realizojme programim ne Web. JavaScript eshte nje gjuhe programimi e interpretuar (script language).

KUJDES!! JavaScript dhe Java jane dy gjuhe te ndryshme dhe me filozofi te ndryshme. E vetmja pike e perbashket e tyre eshte sintaksa, pasi JavaScript eshte ndertuar duke iu permbajtur sintakses se Java-s.

Taget <script>

Per te shkruajtur nje funksion ose komanda ne javascript nevojitet te perfshijme ne head (ose ne body ) te faqes tone taget e scriptit.

<script language=”javascript”>

......

</script>

Ose

<script type=”text/javascript”>

......

</script>

Shembull:

<html>

<head>

<script  language="Javascript">

 alert("Hello");

</script>

</head>

<body>

</body>

</html>

 

Ne shembullin e mesiperm midis tageve <script> vendoset kodi javascript ne rastin tone funksioni alert, i cili therret nje njoftim ne faqe me tekstin “Hello”.

Midis tageve te scriptit mund te vendosim  te gjithe pjesen e kodit te javascriptit.

Nje shembull tjeter eshte therritja e nje funksioni javascript ne klikim te nje buttoni:

 

Shembull:

 

<html>

<head>

<script  language="Javascript">

function  pershendetje()

{

            alert("Hello");

}

</script>

</head>

<body>

<form>

<input type="button"  name="btn" value="kliko" onClick="pershendetje()" />

</form>

</body>

</html>

 

Per te realizuar nje veprim kur klikojme ne button duhet te vendosim si vlere te atributit onClick midis thonjezash funksionin javascript qe kemi deklaruar ne head.

 

Elementet baze te JavaScript

 

Fjalite ne javascript duhet te perfundojne me ; dhe mund te grupohen ne blloqe duke perdorur kllapat gjarperushe {}. Simbolet sic mund te jene emrat e variablve ose emrat e funksioneve jane Case-Sensitive.

 

Komentet: paraqiten ne dy menyra:

// komentet vetem ne nje rresht

/*

koment i cili mund

te shtrihet ne me shume se nje rresht

*/

 

Javascript perdor disa sekuenca karakteresh ne menyre qe te mund te vendosim karaktere speciale ne konstantet qe jane ne tekst. Shembuj:

\n –  rresht i ri

\t  – Tab

\’ –  Thonjez teke

\” – thonjeza mbyllese

\\  – Backslash

\xxx – Numrat ASCII te karaktereve hexadecimale

 

Tipet e te dhenave dhe variablat

 

Ne javascript, tipet e te dhenave caktohen ne menyre dinamike ne momentin qe ne i japim vlere variablit. Tipi mund te jete:

·         character string

·         integer

·         real

·         boolean

·         array

·         ...

Ne JavaScript, emrat e variablave fillojne me nje germe alfabeti ose me karakterin ‘_’ dhe mund te formohen nga germa ose dhe nga kombinime me karakterin ‘_’. Variablat jane globale dhe nuk ka nevoje per deklarim eksplicit te tyre. Ne rastet kur nevojitet nje varibel lokal ai deklarohet ne trupin e nje funksioni ose duke perdorur fjalen var para variablit. Javascript eleminon shenjuesit ne kujtese por perdor referencat. Referencat funksionojne ne menyre te ngjashme me shenjuesit e memories, vetem se ato nuk merren me menaxhimin e kujteses nga ana e programuesit (specifike e cila sillte prirjen e shenjuesve ndaj gabimeve). Javascript lejon referenca te objektet dhe te funksionet. Kjo aftesi  per te referuar  funksionet do te sherbeje shume kur te perdorim funksionet per te dalluar llojin e browserit te perdorur.

 

Strukturat e kontrollit

 

Si te gjitha gjuhet e programimit, JavaScript ka disa struktura kontrolli, perfshire dy struktura te njohura te kontrollit If dhe Switch.

 

<html>

<head>

<script  language="Javascript">

function  numer(n)

{

                if(n%2==1)

                {

                                alert("numer tek");

                }

                else

                {

                                alert("numer cift");

                }

}

</script>

</head>

<body>

<form>

<input type="button"  name="btn" value="kliko" onClick=" numer (3)" />

<br/>

<input type="button"  name="btn" value="kliko" onClick=" numer (8)" />

</form>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<script  language="Javascript">

function  numer(n)

{

                switch(n)

                {

                                case 1:                 

                                                alert("numer pozitiv");

                                                break;

                                case -1:

                                                alert("numer negativ");

                                                break;

                                default:

                                                alert("numer i ndryshem nga 1 dhe -1");

                                                break;

                }

}

</script>

</head>

<body>

<form>

<input type="button"  name="btn" value="kliko" onClick="numer(-1)" />

<br/>

<input type="button"  name="btn" value="kliko" onClick="numer(0)" />

</form>

</body>

</html>

 

Ne JavaScript kemi tre struktura ciklike: while,do while, dhe for.

 

<html>

<head>

<script  language="Javascript">

function  afisho()

{

                for(i=0;i<10;i++)

                {

                                /*

                                document.write eshte funksion i cili vendos ne

                                kontentin e faqes stringun e percaktuar midis kllapave

                                */

                                document.write("My licence id is "+i+"<br/>");

                                /*

                                kur ne kontentin e faqes vendosim

                                stringun "<br/>" atehere browseri e interpreton

                                si tag te mirefillte te HTML

                                */

                }

}

</script>

</head>

<body>

<form>

<input type="button"  name="btn" value="kliko" onClick="afisho()" />

</form>

</body>

</html>

 --------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<script  language="Javascript">

function  afisho()

{

                i=10;

                while(i>0)

                {

                                document.write("My licence id is "+i+"<br/>"); 

                                i--;

                }

}

</script>

</head>

<body>

<form>

<input type="button"  name="btn" value="kliko" onClick="afisho()" />

</form>

</body>

</html>

Shembull me vektor:

<html>

<head>

<title>Javascript</title>

<script type="text/javascript">

function klikim()

{ v=[1,7,9,2,6];

for(i=0;i<5;i++)

{

document.getElementById("div1").innerHTML += 

(v[i]).toString() + "<br/>";

}

}

</script>

</head>

<body>

<input type="button" value="klik" onclick="klikim()"/>

<div id="div1"></div>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>funksioni</title>

<script type="text/javascript">

var v = [1,8,4,9,7,5,6,2,9];

function kthePozN(v,N)

{

if(N>=v.length)

{

return -1;

}

else

{

return v[N];

}

}

</script>

</head>

<body onload="alert(kthePozN(v,7))">

</body>

</html>

Thirrja e dates si objekt:

<HTML>

<HEAD>

<TITLE>PERSHENDETJE</TITLE>

<SCRIPT type="text/javascript"> 

function data()

{

var dt = new Date();

document.write( dt.getDate()+"/"+(dt.getMonth()+1)+"/"+dt.getFullYear() );

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" NAME="Button" VALUE="Data" onClick="data()">

</FORM>

</BODY>

</HTML>

Shembull validimi:

<HTML>

<HEAD>

<TITLE>PERSHENDETJE</TITLE>

<SCRIPT type="text/javascript"> 

function validate()

{

var x = this.document.getElementById("email").value;

if(x.indexOf("@")<1 || 

x.indexOf(".")<x.indexOf("@")+2 

|| x.indexOf(".")+2>=x.length)

{

alert("Email i gabuar!");

}

else

{

alert("Email i validuar!");

}

}

</SCRIPT>

</HEAD>

<BODY>

<FORM name="forma" method="GET" action="#">

<label>Email:</label><br/>

<INPUT TYPE="text" NAME="email" ID="email" VALUE=""><br/>

<label>Password:</label><br/>

<INPUT TYPE="password" NAME="password" ID="password" VALUE=""><br/>

<INPUT TYPE="button" NAME="Button" VALUE="Validate" onClick="validate()">

</FORM>

</BODY>

</HTML>

SHEMBULL i nje tabele dinamike te krijuar me ane te JavaScript:

<HTML>

<HEAD>

    <TITLE> Tabele dinamike </TITLE>

    <SCRIPT language="javascript">

function createtable(tableID) 

{

            var table = document.getElementById(tableID);

//fshi elementet e tabeles nese ekzistojne elemente

var rowCount = table.rows.length; 

for(var i=0; i<rowCount; i++) 

{

var row = table.rows[i];

table.deleteRow(i);

rowCount--;

i--;

}

//krijimi i tabeles

            var rowCount = parseInt(document.getElementById('numer_rresht').value)+2;

for(var i=0;i<rowCount-2;i++)

{

var row = table.insertRow(i);

shtorresht(rowCount,i,row);

}

var rowfundit = table.insertRow(rowCount-2);

var cell1=rowfundit.insertCell(0);

cell1.colSpan=rowCount-2;

var cell2=rowfundit.insertCell(1);

var element2 = document.createElement("input");

element2.type = "button";

element2.value= "Kliko";

element2.onclick = function() 

shuma = 0;

for(var sh=0;sh<rowCount-2;sh++)

{

shuma+=parseInt(document.getElementById(sh.toString()+(rowCount-1).toString()).value);

}

document.getElementById((rowCount-2).toString()+(rowCount-1).toString()).value=shuma.toString();

};

cell2.appendChild(element2);

var cell3=rowfundit.insertCell(2);

var element3 = document.createElement("input");

element3.type = "text";

element3.id = (rowCount-2).toString()+(rowCount-1).toString();

cell3.appendChild(element3);

        } 

function shtorresht(rowCount,i,row)

{

for(var j=0;j<rowCount;j++)

{

var cell=row.insertCell(j);

var element = document.createElement("input");

if(j==rowCount-2)

{

element.type = "button";

element.value= "Kliko";

element.onclick = function() 

shuma = 0;

for(var sh=0;sh<rowCount-2;sh++)

{

shuma+=parseInt(document.getElementById(i.toString()+sh.toString()).value);

}

document.getElementById(i.toString()+(rowCount-1).toString()).value=shuma.toString();

};

cell.appendChild(element);

}

else

{

element.type = "text";

element.id = i.toString()+j.toString();

cell.appendChild(element);

}

}

}

    </SCRIPT>

</HEAD>

<BODY>

<LABEL>Shenoni numrin e qelizave te mbledhshme:</LABEL>

<INPUT type="text" value="0" id="numer_rresht"/>

<INPUT type="button" value="Krijo" id="krijimrreshti" onclick="createtable('dataTable')"/>

    </br></br>

<TABLE id="dataTable" width="350px" border="1">        

    </TABLE> 

</BODY>

</HTML>

Ushtrime me yje:

<html>

<head>

<script type="text/javascript">

function magji()

{

var numer = parseInt(this.document.getElementById("numri").value);

var afishim="";

for(var i=0;i<=numer;i++)

{

for(var j=0;j<(numer-i);j++)

{

afishim+="*";

}

afishim+="</br>";

}

this.document.getElementById("layer").innerHTML  += afishim;

}


</script>

</head>

<body>

<input type="text" id="numri"/>

<input type="button" id="klik" value="Kliko" onclick="magji()"/>

<div id="layer">

</body>

</html>

-----------------------------------------------------------------------------------------

<html>

<head>

<script type="text/javascript">

function magji2()

{

var numer = parseInt(this.document.getElementById("numri2").value);

var afishim="";

for(var i=1;i<=numer;i++)

{

for(var j=0;j<(numer-i);j++)

{

afishim+="&nbsp;&nbsp;";

}

for(var j=1;j<=i*2-1;j++)

{

afishim+="*";

}

for(var j=0;j<=numer-i;j++)

{

afishim+="&nbsp;&nbsp;";

}

afishim+="</br>";

}

this.document.getElementById("layer2").innerHTML  = afishim;

}


</script>

</head>

<body>

<input type="text" id="numri2"/>

<input type="button" id="klik2" value="Magji2" onclick="magji2()"/>

<div id="layer2">

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------

<html>

<head>

<script type="text/javascript">

function magji2()

{

var numer = parseInt(this.document.getElementById("numri2").value);

var afishim="";

for(var i=1;i<=numer;i++)

{

for(var j=0;j<(numer-i);j++)

{

afishim+="&nbsp;&nbsp;";

}

for(var j=1;j<=i*2-1;j++)

{

afishim+="*";

}

for(var j=0;j<=numer-i;j++)

{

afishim+="&nbsp;&nbsp;";

}

afishim+="</br>";

}

for(var i=numer-1;i>=1;i--)

{

for(var j=0;j<(numer-i);j++)

{

afishim+="&nbsp;&nbsp;";

}

for(var j=1;j<=i*2-1;j++)

{

afishim+="*";

}

for(var j=0;j<=numer-i;j++)

{

afishim+="&nbsp;&nbsp;";

}

afishim+="</br>";

}

this.document.getElementById("layer2").innerHTML  = afishim;

}

</script>

</head>

<body>

<input type="text" id="numri2"/>

<input type="button" id="klik2" value="Magji2" onclick="magji2()"/>

<div id="layer2">

</div>

</body>

</html>



Prezantim me objektet e dokumentit


Shembull

shuma1.html
<html>
<head>
<title>Makine llogaritese</title>
<script language="JavaScript">
function gjejshumen()
{
document.makina.res.value=
parseFloat(document.makina.nr1.value)+
parseFloat(document.makina.nr2.value);
}
</script>
</head>
<body>
<form name="makina" id="makina" >
Nr1: <input type="text" name="nr1" id="nr1" size="10" onChange="gjejshumen();" ><br>
Nr2: <input type="text" name="nr2" id="nr2" size="10" onChange="gjejshumen();"><br>
Rezultati <input type="text" name="res" id="res" size="10">
</form>
</body>
</html>

Struktura e DOM e krijuar:

https://sites.google.com/a/ictedu.info/web/e-learning/ndertimi-i-aplikacioneve-web-nepermjet-php-dhe-mysql/02--modeli-i-dokumentit-me-objekte---dom/DOM%20-%20New%20Page.png


interface




Funksioni getElementByID


Shembull

shuma2.html


<html>
<head>
<title>Makine llogaritese</title>
<script language="JavaScript">
function gjejshumen()
{
var a,b,c;

a=document.getElementById('nr1');
b=document.getElementById('nr2');
c=document.getElementById('res');

c.value=parseFloat(a.value)+parseFloat(b.value);

}
</script>
</head>
<body>
<form name="makina" id="makina" >
Nr1: <input type="text" name="nr1" id="nr1" size="10" onChange="gjejshumen();" ><br>
Nr2: <input type="text" name="nr2" id="nr2" size="10" onChange="gjejshumen();"><br>
Rezultati <input type="text" name="res" id="res" size="10">
</form>
</body>
</html>