02- Modeli i dokumentit me objekte - DOM

e-learning‎ > ‎Ndertimi i aplikacioneve web nepermjet PHP dhe MySQL‎ > ‎

02- Modeli i dokumentit me objekte - DOM

Ne kete leksion

Contents

1 Prezantim me objektet e dokumentit
2 Funksioni getElementByID

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+="  ";

}

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

{

afishim+="*";

}

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

{

afishim+="  ";

}

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+="  ";

}

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

{

afishim+="*";

}

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

{

afishim+="  ";

}

afishim+="</br>";

}

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

{

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

{

afishim+="  ";

}

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

{

afishim+="*";

}

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

{

afishim+="  ";

}

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>

02- Modeli i dokumentit me objekte - DOM

Permbajtja

Prezantim me objektet e dokumentit

Funksioni getElementByID