24 November 2006

Cum sa adaugam si apoi sa stergem elemente create dinamic

In acest tutorial va voi arata cum sa adaugati si cum sa stergeti un paragraf pe care l-ati adaugat in pagina in mod dinamic.


Pentru acest lucru, vom crea un document ".html" si il vom denumi "AddRemElements".


Apoi vom adauga un element TextArea si doua hiperlink-uri.


In codul sursa, vom adauga urmatorul cod Javascript in tag-ul "head" al paginii:


<script type="text/javascript" language="javascript">



// cream o functie globala care va returna id-ul unui element (la alegerea
noastra) din pagina curenta

function $(id) { return document.getElementById(id); }



// aceasta functie va adauga un element "p" in interiorul paginii

function addElement()

{

// cream elementul "p" (paragraf)

var theElement = document.createElement("p");



// cream continutul acstui paragraf transmitandu-i ca valoare

// textul din elementul "TextArea"

var theInnerText = document.createTextNode($("TextArea1").value);



// adaugam textul in paragraf

theElement.appendChild(theInnerText);



// verificam documentul pentru a gasi tag-ul body

var theBody = document.getElementsByTagName("body").item(0);



// verificam daca exista text in elementul "TextArea"

if ( $("TextArea1").value != "" )

{

// daca exista, atunci adaugam acel text in pagina sub forma unui paragraf

theBody.appendChild(theElement);

}

else

{

// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru

alert( "Nimic de adaugat!");

}

}



// aceasta functie va sterge toate elementele "p" create de functia anterioara

// in ordinea inversa crearii lor

function removeElement()

{

// declaram o variabila care va cauta in document toate tag-urile "p"

var allElements = document.getElementsByTagName("p");



// verificam daca exista cel putin un element "p" in pagina

if (allElements.length != 0)

{

// daca exista, atunci le stergem pe toate pe rand incepand cu

// ultimul element creat si terminand cu primul

var lastElementCreated = allElements.item(allElements.length - 1);



// verificam documentul pentru a gasi tag-ul body

theBody = document.getElementsByTagName("body").item(0);



// cream o variabila care va contine ultimul element sters din pagina

var removedElement = theBody.removeChild(lastElementCreated);

}

else

{

// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru

alert("Nimic de sters !");

}

}



</script>



Dupa aceea, vom denumi hiperlink-urile astfel:

<a id="addElementLink" href="javascript:addElement();">Add
paragraph</a>

Aceasta legatura va adauga in pagina un nou paragraf.


Cea de-a doua legatura arata astfel:

<a id="removeElementLink" href="javascript:removeElement();">Undo!</a>

Aceasta legatura va sterge paragrafele pe care le-am creat apasand pe prima legatura.




Asta e tot !




Acum codul sursa al paginii noastre trebuie sa arate astfel:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Adding and removing elements in a web page dinamically</title>



<script type="text/javascript" language="javascript">



// cream o functie globala care va returna id-ul unui element (la alegerea
noastra) din pagina curenta

function $(id) { return document.getElementById(id); }



// aceasta functie va adauga un element "p" in interiorul paginii

function addElement()

{

// cream elementul "p" (paragraf)

var theElement = document.createElement("p");



// cream continutul acstui paragraf transmitandu-i ca valoare

// textul din elementul "TextArea"

var theInnerText = document.createTextNode($("TextArea1").value);



// adaugam textul in paragraf

theElement.appendChild(theInnerText);



// verificam documentul pentru a gasi tag-ul body

var theBody = document.getElementsByTagName("body").item(0);



// verificam daca exista text in elementul "TextArea"

if ( $("TextArea1").value != "" )

{

// daca exista, atunci adaugam acel text in pagina sub forma unui paragraf

theBody.appendChild(theElement);

}

else

{

// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru

alert( "Nimic de adaugat!");

}

}



// aceasta functie va sterge toate elementele "p" create de functia anterioara

// in ordinea inversa crearii lor

function removeElement()

{

// declaram o variabila care va cauta in document toate tag-urile "p"

var allElements = document.getElementsByTagName("p");



// verificam daca exista cel putin un element "p" in pagina

if (allElements.length != 0)

{

// daca exista, atunci le stergem pe toate pe rand incepand cu

// ultimul element creat si terminand cu primul

var lastElementCreated = allElements.item(allElements.length - 1);



// verificam documentul pentru a gasi tag-ul body

theBody = document.getElementsByTagName("body").item(0);



// cream o variabila care va contine ultimul element sters din pagina

var removedElement = theBody.removeChild(lastElementCreated);

}

else

{

// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru

alert("Nimic de sters !");

}

}



</script>



</head>

<body>

<form id="form1" action="#">

<textarea id="TextArea1" rows="5" cols="1" style="width: 261px; height:
119px"></textarea>

<a id="addElementLink" href="javascript:addElement();">Add paragraph</a>

&nbsp;||&nbsp;

<a id="removeElementLink" href="javascript:removeElement();">Undo!</a>

</form>

</body>

</html>

Posted by C at 11:17 PM Categorie:

0 comentarii

22 November 2006

Sa schimbam culoarea paragrafelor

Cream un document html pe care il vom numi changeTagColor.htm.

In tag-ul "head" al paginii, vom introduce urmatorul cod javascript:

<script type="text/javascript">

<!--

function changeTagColor()

{

//cream o variabila numita "tagList" care va cauta in document toate elementele
"p"

var tagList = document.all.tags("p");

//aici vom parcurge toate elementele "p" din document

for (var i=0; i < tagList.length; i++)

//aici vom aplica textului continut de fiecare element "p" din pagina, culoarea
verde

tagList[i].style.color = "green";

}

//-->

</script>


Dupa care, in tag-ul "body" vom introduce urmatoarele paragrafe:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>



<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>



<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>



Apoi vom introduce si un buton iar in evenimentul "onclick" vom apela functia creata in script:

<input type="button" value="Schimba culoarea" onclick="changeTagColor();" />


Acum sa deschidem pagina intr-o fereastra de browser si sa apasam pe buton; veti vedea cum textul din pagina se va transforma in culoarea verde!



Cool!




Asta e tot !




Acum, codul sursa al paginii noastre ar trebui sa arate astfel:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>changeTagColor</title>

<script type="text/javascript">

<!--

function changeTagColor()

{

//cream o variabila numita "tagList" care va cauta in document toate elementele
"p"

var tagList = document.all.tags("p");

//aici vom parcurge toate elementele "p" din document

for (var i=0; i < tagList.length; i++)

//aici vom aplica textului continut de fiecare element "p" din pagina, culoarea
verde

tagList[i].style.color = "green";

}

//-->

</script>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>



<input type="button" value="Schimba culoarea" onclick="changeTagColor();" />

</body>

</html>

Posted by C at 10:27 AM Categorie:

0 comentarii

14 November 2006

Cum sa afisam un ceas intr-o pagina web

Pentru a afisa un ceas in tr-o pagina html nu avem nevoie decat de un pic de cod javascript.


Astfel, sa cream un document html pe care sa-l numim "time.htm".


In tag-ul "head" al paginii vom insera urmatorul cod javascript:

<script language="javascript" type="text/javascript">

<!--



function startClock() {

window.setInterval("startTick()", 1000);

startTick();

}



function startTick()

{

var d = Date();

var time = d.substring(11,19);



MyTime.innerText = time;

}



//-->

</script>

 


Apoi, in tag-ul "body", vom introduce in evenimentul onload numele functiei javascript care va face ceasul sa porneasca:

<body onload="startClock();">


Dupa care vom introduce un element "p" care va avea id-ul "MyTime":

<p id="MyTime">&nbsp;</p>


Acum nu mai avem decat sa deschidem pagina noastra intr-o fereastra de browser si sa vedem cum ceasul nostru a pornit si cum se actualizeaza la fiecare secunda.


Asta e tot !


Acum codul paginii noastre ar trebui sa arate astfel:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Time</title>

<script language="javascript" type="text/javascript">

<!--

function startClock() {

window.setInterval("startTick()", 1000);

startTick();

}

function startTick()

{

var d = Date();

var time = d.substring(11,19);



MyTime.innerText = time;

}

//-->

</script>

</head>

<body onload="startClock();">

<p id="MyTime">&nbsp;</p>

</body>

</html>

Posted by C at 2:46 PM Categorie:

0 comentarii

13 November 2006

AJAX si XMLHttpRequest


Pentru a putea face o cerere catre server de pe calculatorul personal, intai si intai, trebuie sa vedem pe ce partitie este instalat sistemul de operare (de exemplu, la mine este C:\Windows).



Verificati daca aveti folderul "inetpub" pe partitia "C".

Daca exista, deschideti-l si uitati-va dupa un alt folder, numit "wwwroot".

Daca si acesta exista, atunci creati un nou folder, numit "projects".

Calea completa catre acest folder trebuie sa fie aceasta: "C:\inetpub\wwwroot\projects".



In cazul in care nu aveti folderul "inetpub", creati un folder si redenumiti-l "inetpub".

Dupa care, deschideti-l si creati un nou folder pe care il numiti "wwwroot".

Apoi, creati un nou folder in "wwwroot" pe care il numiti "projects"



In folderul projects vom crea alte doua foldere:

- pe unul il vom numi "res"

- iar pe celalalt il vom numi "scripts"



Deschideti folderul "res" si creati doua noi documente:

- unul numit "reqStyles" cu extensia ".css". Acest document va contine clasele pentru formatarea textului.

- si un document numit "RequestedPage" cu extensia ".html". Aceasta pagina va contine mesajul pe care ni-l va returna serverul.





Deschideti apoi folderul "scripts" si creati un nou document numit "serverRequest" cu extensia ".js".

Acest folder va contine scriptul necesar apelarii metodei "XMLHttpRequest".



Acum vom deschide fisierul "reqStyles.css" si vom adauga urmatoarele doua clase:



.DefaultView

{

background-color: #ffffff;

border: solid 1px #ffffff;

font: 9pt Verdana, sans-serif;

color: #000000;

width: auto;

height: auto;

padding: 3px 3px 3px 3px;

}



.RequestCompleted

{

background-color: #ffffcc;

border: solid 1px #cccccc;

font: 9pt Verdana, sans-serif;

color: #000000;

width: auto;

height: auto;

padding: 3px 3px 3px 3px;

}



Apoi deschidem pagina "RequestedPage.html" si stergem tot ce exista in ea, dupa care introducem urmatorul text:



<h2>This is message</h2>

and there's <strong>some markup</strong> here<br/>

as well as an <a href="http://ajaxpatterns.org">AjaxPatterns link</a>.






Deschidem apoi fisierul "serverRequest.js" si introducem urmatoarele linii de cod:

function $(id) { return document.getElementById(id); }





// create the XMLHttpRequest

window.onload =

function createXMLHttpRequest( )

{

try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}

try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}

try { return new XMLHttpRequest( ); } catch(e) {}



alert("XMLHttpRequest not supported");



return null;

}





// when user clickes the MakeRequestLabel make the request

function GetServerResponse(/* STRING */ elementId)

{

var theContainer = $(elementId);

var req = createXMLHttpRequest();



req.onreadystatechange =

function()

{

if (req.readyState == 4) {

if (req.status == 200) {

theContainer.innerHTML = "Retrieved data from server...<br />";

theContainer.innerHTML += req.responseText;

theContainer.className = "RequestCompleted";

}

else {

alert("Message returned, but with error status. \n" + "Server error: " +
req.status);

}

}

}

// insert here the path to the page wich will be requested

req.open("GET", "res/RequestedPage.htm", true);

req.send(null);

//req.send( ) will complete the request.

//The argument is null because the request only has headers, but no body.

}

 



Cu ajutorul acestui script vom putea face cererea noastra catre server si primi ulterior rezultatul.





Acum nu ne-a mai ramas decat sa mai umblam putin la pagina principala.

Aceasta ar trebui sa arate astfel:


<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>O utilizare simpla a XMLHttpRequest</title>

<link href="../XmlHttpRequest/res/reqStyles.css" media="screen" rel="stylesheet"
type="text/css" />



<script src="scripts/serverRequest.js" type="text/javascript"
language="javascript"></script>

</head>



<body>



<h2>O utilizare simpla a XMLHttpRequest</h2>

<hr align="left" color="#0000cd" noshade="noshade" width="75%" size="2px" />

<br />

<br />

<label id="MakeRequestlabel" onclick="GetServerResponse('RequestedContentDiv');"

style="cursor: hand; font-size: 12pt; color: #ff9966; font-family: Georgia,
Serif;">Click aici pentru a face cerearea catre server</label><br />

<br />

<div id="RequestedContentDiv" class="DefaultView">

</div>

<br />

<br />



</body>

</html>

 



Bun. Pentru a testa, trebuie sa deschidem o fereastra de browser in care sa introducem urmatoarea cale:
"http://localhost/projects/default.html"



Dupa ce ni s-a afisat pagina noastra, putem da click pe linkul "Click aici pentru a face cerearea catre server" si vom vedea daca cererea nostra a avut succes sau nu.



Interesant de observat faptul ca nu se face reimprospatarea (refresh) intregului continut al paginii!

Reimprospatarea este una partiala si se aplica doar elementului "div" in care se afiseaza raspunsul serverului!

Cool!
 


De notat ar fi ca in cazul mutarii folderului "projects" din folderul "wwwroot" serverul local nu mai poate procesa cererea noastra si va returna un mesaj de eroare.



Asta e tot !



Acum pagina noastra ar trebui sa arate astfel:


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Ajax si XMLHttpRequest</title>

</head>



<body>



<p>

Pentru a putea face o cerere catre server de pe calculatorul personal, intai si
intai, trebuie sa vedem pe ce partitie este instalat sistemul de operare (de
exemplu, la mine este C:\Windows).

</p>



<p>

Verificati daca aveti folderul "inetpub" pe partitia "C". <br />

Daca exista, deschideti-l si uitati-va dupa un alt folder, numit "wwwroot".<br
/>

Daca si acesta exista, atunci creati un nou folder, numit "projects".<br />

Calea completa catre acest folder trebuie sa fie aceasta: "C:\inetpub\wwwroot\projects".<br
/>

</p>

<p>

In cazul in care nu aveti folderul "inetpub", creati un folder si redenumiti-l "inetpub".<br
/>

Dupa care, deschideti-l si creati un nou folder pe care il numiti "wwwroot".<br
/>

Apoi, creati un nou folder in "wwwroot" pe care il numiti "projects"<br />

</p>

<p>

In folderul projects vom crea alte doua foldere:<br />

- pe unul il vom numi "res"<br />

- iar pe celalalt il vom numi "scripts"</p>

<p>

Deschideti folderul "res" si creati doua noi documente:<br />

- unul numit "reqStyles" cu extensia ".css". Acest document va contine clasele
pentru formatarea textului.<br />

- si un document numit "RequestedPage" cu extensia ".html". Aceasta pagina va
contine mesajul pe care ni-l va returna serverul.<br />

<br />

</p>

<p>

Deschideti apoi folderul "scripts" si creati un nou document numit
"serverRequest" cu extensia ".js".<br />

Acest folder va contine scriptul necesar apelarii metodei "XMLHttpRequest".<br
/>

</p>

<p>

Acum vom deschide fisierul "reqStyles.css" si vom adauga urmatoarele doua
clase:<br />

<br>

.DefaultView<br />

{<br />

background-color: #ffffff;<br />

border: solid 1px #ffffff;<br />

font: 9pt Verdana, sans-serif;<br />

color: #000000;<br />

width: auto;<br />

height: auto;<br />

padding: 3px 3px 3px 3px;<br />

}<br />

<br />

.RequestCompleted<br />

{<br />

background-color: #ffffcc;<br />

border: solid 1px #cccccc;<br />

font: 9pt Verdana, sans-serif;<br />

color: #000000;<br />

width: auto;<br />

height: auto;<br />

padding: 3px 3px 3px 3px;<br />

}<br />

</p>

<br />Apoi deschidem pagina "RequestedPage.html" si stergem tot ce exista in ea,
dupa care introducem urmatorul text:<br />

<br>

&lt;h2&gt;This is message&lt;/h2&gt;<br />

and there's &lt;strong&gt;some markup&lt;/strong&gt; here&lt;br/&gt;<br />

as well as an &lt;a href="http://ajaxpatterns.org"&gt;AjaxPatterns
link&lt;/a&gt;.<br />



<br /><br />

<p>

Deschidem apoi fisierul "serverRequest.js" si introducem urmatoarele linii de
cod:<br />

<p>function $(id) { return document.getElementById(id); }<br>

<br>

<br>

// create the XMLHttpRequest<br>

window.onload =<br>

function createXMLHttpRequest( )<br>

{<br>

try { return new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) {}<br>

try { return new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e)
{}<br>

try { return new XMLHttpRequest( ); } catch(e) {}<br>

<br>

alert(&quot;XMLHttpRequest not supported&quot;);<br>

<br>

return null;<br>

}<br>

<br>

<br>

// when user clickes the MakeRequestLabel make the request<br>

function GetServerResponse(/* STRING */ elementId)<br>

{<br>

var theContainer = $(elementId);<br>

var req = createXMLHttpRequest();<br>

<br>

req.onreadystatechange =<br>

function()<br>

{<br>

if (req.readyState == 4) {<br>

if (req.status == 200) {<br>

theContainer.innerHTML = &quot;Retrieved data from server...&lt;br
/&gt;&quot;;<br>

theContainer.innerHTML += req.responseText;<br>

theContainer.className = &quot;RequestCompleted&quot;;<br>

}<br>

else {<br>

alert(&quot;Message returned, but with error status. \n&quot; + &quot;Server
error: &quot; +

req.status);<br>

}<br>

}<br>

}<br>

// insert here the path to the page wich will be requested<br>

req.open(&quot;GET&quot;, &quot;res/RequestedPage.htm&quot;, true);<br>

req.send(null); <br>

//req.send( ) will complete the request.<br>

//The argument is null because the request only has headers, but no body.<br>

}<br>

&nbsp;</p>



</p>

Cu ajutorul acestui script vom putea face cererea noastra catre server si primi
ulterior rezultatul.





<br />

<br />

<p>

Acum nu ne-a mai ramas decat sa mai umblam putin la pagina principala.<br />

Aceasta ar trebui sa arate astfel:

<br />

<p>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br>

<br>

&lt;head&gt;<br>

&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;
charset=windows-1252&quot; /&gt;<br>

&lt;title&gt;O utilizare simpla a XMLHttpRequest&lt;/title&gt;<br>

&lt;link href=&quot;../XmlHttpRequest/res/reqStyles.css&quot;
media=&quot;screen&quot; rel=&quot;stylesheet&quot;

type=&quot;text/css&quot; /&gt;<br>

<br>

&lt;script src=&quot;scripts/serverRequest.js&quot;
type=&quot;text/javascript&quot;

language=&quot;javascript&quot;&gt;&lt;/script&gt;<br>

&lt;/head&gt;<br>

<br>

&lt;body&gt;<br>

<br>

&lt;h2&gt;O utilizare simpla a XMLHttpRequest&lt;/h2&gt;<br>

&lt;hr align=&quot;left&quot; color=&quot;#0000cd&quot;
noshade=&quot;noshade&quot; width=&quot;75%&quot; size=&quot;2px&quot; /&gt;<br>

&lt;br /&gt;<br>

&lt;br /&gt;<br>

&lt;label id=&quot;MakeRequestlabel&quot;
onclick=&quot;GetServerResponse('RequestedContentDiv');&quot;<br>

style=&quot;cursor: hand; font-size: 12pt; color: #ff9966; font-family: Georgia,


Serif;&quot;&gt;Click aici pentru a face cerearea catre
server&lt;/label&gt;&lt;br /&gt;<br>

&lt;br /&gt;<br>

&lt;div id=&quot;RequestedContentDiv&quot; class=&quot;DefaultView&quot;&gt;<br>

&lt;/div&gt;<br>

&lt;br /&gt;<br>

&lt;br /&gt;<br>

<br>

&lt;/body&gt;<br>

&lt;/html&gt;<br>

&nbsp;</p>

<p>

Bun. Pentru a testa, trebuie sa deschidem o fereastra de browser in care sa
introducem urmatoarea cale:

"http://localhost/projects/default.html"

</p>

<p>

Dupa ce ni s-a afisat pagina noastra, putem da click pe linkul "Click aici
pentru a face cerearea catre server" si vom vedea daca cererea nostra a avut
succes sau nu.

</p>

<br />Interesant de observat faptul ca nu se face reimprospatarea (refresh)
intregului continut al paginii! <br />

Reimprospatarea este una partiala si se aplica doar elementului "div" in care se
afiseaza raspunsul serverului!<br />

Cool!

&nbsp;<p>

De notat ar fi ca in cazul mutarii folderului "projects" din folderul "wwwroot"
serverul local nu mai poate procesa cererea noastra si va returna un mesaj de
eroare.

</p>

<p>

Asta a fost tot !

</p>

</body>



</html>

 

Posted by C at 12:38 PM Categorie:

0 comentarii

Cum sa stergem un fisier cookie pe care l-am creat


Acum vom sterge fisierul cookie creat anterior.


Pentru acest lucru vom crea un document html pe care il vom numi "deleteCookies.html"



In tag-ul "head" al paginii vom introduce urmatorul cod javascript:


<script language="javascript">

<!--



// definim variabile globale pentru a avea un cod mai lizibil

var thisCookie;

var expireDate = new Date;

var i;

var cookieName;

var xElement;



// cream functia cu care vom sterge fisierele coookie

function deleteCookies(/*STRING*/ elementID)

{

xElement = document.getElementById(elementID);



// verificam daca exista fisiere cookie

if (document.cookie != "")

{

// afisam o fereastra de dialog pentru a obtine un raspuns clar din partea
utilizatorului

if (confirm("Esti sigur(a) ca vrei sa stergi fisierele cookie?"))

{

// daca raspunsul este afirmativ, atunci stergem fisierele cookie

thisCookie = document.cookie.split("; ");

expireDate.setDate(expireDate.getDate() - 1);

//incepem o structura repetitiva pentru a putea sterge toate cookie-urile

for (i=0; i < thisCookie.length; i++)

{

cookieName = thisCookie[i].split("=")[0];

document.cookie = cookieName + "=; expires=" + expireDate.toGMTString();

}

// afisam rezultatul intr-un element din pagina

xElement.innerHTML = "<h3>Numarul fisierelor cookie sterse este: " +
thisCookie.length + "<\/h3>"

}

}

}

//-->

</script>

 



Apoi, in tag-ul "body" al paginii vom introduce un element "div" in care vom stoca numarul fisierelor cookie sterse:


<div id="divCookies">

<!--[ IN ACEST ELEMENT SE VA AFISA NUMARUL FISIERELOR COOKIE STERSE ]-->

</div>

 



In cazul in care ati rulat scriptul "Cum sa cream un fisier cookie." atunci aveti un fisier cookie in calculatorul vostru.


Daca nu ati rulat acel script, in momentul in care veti afisa aceasta pagina "deleteCookies.html" in browser, nu se va intampla nimic...!

De ce?

Pentru ca browser-ul nu recunoaste decat fisierele cookie create de el insusi; adica browser-ul va sti ce fisiere cookie au fost create de fiecare instanta a lui deschisa.



Asta e tot !



Acum pagina "deleteCookies.html" ar trebui sa arate astfel:


<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Sterge fisierele cookie</title>

<script language="javascript">

<!--



// definim variabile globale pentru a avea un cod mai lizibil

var thisCookie;

var expireDate = new Date;

var i;

var cookieName;

var xElement;



// cream functia cu care vom sterge fisierele coookie

function deleteCookies(/*STRING*/ elementID)

{

xElement = document.getElementById(elementID);



// verificam daca exista fisiere cookie

if (document.cookie != "")

{

// afisam o fereastra de dialog pentru a obtine un raspuns clar din partea
utilizatorului

if (confirm("Esti sigur(a) ca vrei sa stergi fisierele cookie?"))

{

// daca raspunsul este afirmativ, atunci stergem fisierele cookie

thisCookie = document.cookie.split("; ");

expireDate.setDate(expireDate.getDate() - 1);

//incepem o structura repetitiva pentru a putea sterge toate cookie-urile

for (i=0; i < thisCookie.length; i++)

{

cookieName = thisCookie[i].split("=")[0];

document.cookie = cookieName + "=; expires=" + expireDate.toGMTString();

}

// afisam rezultatul intr-un element din pagina

xElement.innerHTML = "<h3>Numarul fisierelor cookie sterse este: " +
thisCookie.length + "<\/h3>"

}

}

}

//-->

</script>

</head>



<body onload="deleteCookies('divCookies');">



<div id="divCookies">

<!--[ IN ACEST ELEMENT SE VA AFISA NUMARUL FISIERELOR COOKIE STERSE ]-->

</div>

</body>

</html>

 

Posted by C at 12:10 PM Categorie:

0 comentarii

Cookies, anyone ?! - Cum sa cream un fisier cookie.

Pentru a crea un fisier cookie avem nevoie doar de o pagina html.

Pentru aceasta, vom crea un document html pe care il vom numi "index.html".

In codul sursa al acestei pagini vom introduce urmatoarele:
- o portiune de cod javascript
- un element "div" in care sa afisam continutul fisierului cookie pe care il vom crea.

Sa incepem !

Mai intai, vom insera codul javascript in tag-ul "head" al paginii:

<script type="text/javascript" language="javascript">
<!--

var expireDate = new Date;
expireDate.setMonth(expireDate.getMonth() + 6);

var userName = "";

if (document.cookie != "")
{ userName = document.cookie.split("=")[1]; }



function setCookie()
{
if (document.MyForm.uNameTextBox.value != "")
{
userName = document.MyForm.uNameTextBox.value;
document.cookie = "userName= " + userName + "; expires= " + expireDate.toGMTString();
}
else
{
alert("Trebuie sa introduceti un nume !");
}
}


var xElement;
function readCookie( /*STRING*/ elementID)
{
xElement = document.getElementById(elementID);

if (document.cookie != "")
{
xElement.innerHTML = "<h3>Salut, " + document.cookie.split("=")[1] + " !<\/h3>";
}
else
{
xElement.innerHTML = "<h3>Nu am putut citi nici un fisier cookie, deoarece nu a fost creat nici unul !<\/h3>";
}
}

//-->
</script>


Dupa aceea, trecem in tag-ul "body" al paginii si inseram urmatoarele:

<form name="MyForm" action="index.htm" method="post">
<label for="uNameTextBox">Introduceti un nume de utilizator
<input type="text" name="uNameTextBox" size="24" width="120px" /></label>
<input type="button" value="Creaza cookie" name="submitButton" onclick="setCookie();" />
<hr />
<input type="button" value="Arata cookie" onclick="readCookie('cookieDiv');" />
</form>

<div id="cookieDiv">
<!--[ IN INTERIORUL ACESTUI ELEMENT SE VA AFISA CONTINUTUL FISIERULUI COOKIE CREAT ANTERIOR ]-->
</div>


Asta e tot!



Acum codul sursa al paginii noastre ar trebui sa arate astfel:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>New Page 1</title>
<script type="text/javascript" language="javascript">
<!--

// setam data de expirare (data la care browserul va sti ca trebuie sa stearga fisierul cookie)
// pentru aceasta, vom seta data de stergere setand data curenta (data la care este creat fisierul cookie)
// in cazul nostru "luna (getMonth)" si adaugand cifra "6"
// "6" reprezentand lunile cat fisierul cookie va fi activ in calculatorul in care a fost creat
var expireDate = new Date;
expireDate.setMonth(expireDate.getMonth() + 6);

// cream o variabila numita userName
// aceasta variabila va stoca numele de utilizator
// care va fi introdus in caseta de text
var userName = "";

// verificam daca obiectul document.cookie nu este null
// in cazul in care nu este null returnam valoarea stocata de fisierul cookie
if (document.cookie != "")
{ userName = document.cookie.split("=")[1]; }

function setCookie()
{
// verificam daca exista text in caseta de text
if (document.MyForm.uNameTextBox.value != "")
{
// daca exista, stocam numele (textul din caseta de text) in fisierul cookie
userName = document.MyForm.uNameTextBox.value;
document.cookie = "userName= " + userName + "; expires= " + expireDate.toGMTString();
}
else
{
// daca nu exista, atunci returnam un mesaj de eroare
// prin care atentionam ca trebuie introdus un text
// in caseta de text
alert("Trebuie sa introduceti un nume !");
}
}


var xElement;
function readCookie( /*STRING*/ elementID)
{
xElement = document.getElementById(elementID);

// verificam daca fisierul cookie exista
if (document.cookie != "")
{
// daca exista, returnam valoarea stocata in acesta
xElement.innerHTML = "<h3>Salut, " + document.cookie.split("=")[1] + " !<\/h3>";
}
else
{
// altfel, atentionam ca nu exista nici un fisier cookie creat in prealabil
xElement.innerHTML = "<h3>Nu am putut citi nici un fisier cookie, deoarece nu a fost creat nici unul !<\/h3>";
}
}

//-->
</script>

</head>

<body>
<form name="MyForm" action="index.htm" method="post">
<label for="uNameTextBox">Introduceti un nume de utilizator
<input type="text" name="uNameTextBox" size="24" width="120px" /></label>
<input type="button" value="Creaza cookie" name="submitButton" onclick="setCookie();" />
<hr />
<input type="button" value="Arata cookie" onclick="readCookie('cookieDiv');" />
</form>

<div id="cookieDiv">
<!--[ IN INTERIORUL ACESTUI ELEMENT SE VA AFISA CONTINUTUL FISIERULUI COOKIE CREAT ANTERIOR ]-->
</div>

</body>
</html>

Posted by C at 11:27 AM Categorie:

0 comentarii

12 November 2006

Crearea unui banner alternant

Pentru a crea un banner alternant, avem nevoie, in primul rand, de cateva imagini.
Asadar, sa cream un folder pe care o sa-l numim Project in care vom stoca imaginile si un document html.
Ideal ar fi ca imaginile sa aiba aceleasi dimensiuni, deoarece nu dorim sa redimensionam continutul paginii in cazul in care una din imagini este mai mare sau mai mica decat celelalte.

Bun. Acum ca avem imaginile si documentul la locul lor in folder, deshidem pagina html intr-unul din programele de editare a paginilor web, cum ar fi FrontPage sau Dreamweaver.
De notat ca puteti folosi, in lipsa programelor mentionate anterior, si Notepad sau Wordpad din Windows.

Mai intai, vom crea scriptul de care avem nevoie pentru a face rotatia intre imagini.

Acesta va fi introdus in tag-ul <head> al paginii si arata astfel:

<script type="text/javascript" language="javascript">
<!--
var imagesList= new Array("image1.gif", "image2.jpg", "image3.png");
var theImage = 0;
var theContor = imagesList.length;

function loadBanner()
{
if(document.images)
{
theImage++ ;

if (theImage == theContor)
{ theImage = 0; }

document.img1.src = imagesList[theImage];
setTimeout("preloadBanner()", 3*1000);
}
}

//-->
</script>

Apoi, in tag-ul <body> al paginii, vom introduce functia"loadBanner" pentruevenimentul "onload". Astfel, scriptul se va executa in momentul incarcarii paginiiin browser.

<body onload="loadBanner()">

Acum nu ne-a mai ramas decat sa inseram o imagine, care va contine banner-ul nostru.

<img id="img1" name="img1" src="image1.gif" style="width: auto; height: auto;" />

!! De notat
Acest script va da posibilitatea de a incarca mai multe imagini, nu doar trei cate aufost prezentate in acest exemplu.
Pentru a incarca mai multe imagini, nu trebuie decat sa le adaugati in lista din script.Imaginile pot avea aceeasi extensie sau pot avea extensii diferite.

Asta e tot! Acum avem un banner alternant!

Iar pagina noastra ar trebui sa arate astfel:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Create an alternate banner</title>
<script type="text/javascript" language="javascript">
<!--

var imagesList = new Array("image1.gif", "image2.jpg", "image3.png");
var theImage = 0;
var theContor = imagesList.length;

function loadBanner()
{
if(document.images)
{
theImage++ ;

if (theImage == theContor)
{ theImage = 0; }

document.img1.src = imagesList[theImage];
setTimeout("preloadBanner()", 3*1000);
}
}

//-->
</script>
</head>

<body onload="loadBanner();">
<img id="img1" name="img1" src="image1.gif" style="width: auto; height: auto;" />

</body>

</html>

Posted by C at 11:59 AM Categorie:

0 comentarii

11 November 2006

Afisarea continutului unui fisier xml intr-o pagina html [partea a doua]

Acum vom afisa in pagina default.html un continut xml mai bogat.


Pentru asta, vom crea urmatoarele:

  • un document xml pe care il vom numi persoane.xml
  • un document html pe care il vom numi default.html


Deschidem autori.xml si introducem urmatoarele date:

<?xml version="1.0" encoding="utf-8" ?>

<persoane>
<persoana1>
<nume>Trifan</nume>
<prenume>Costin</prenume>
<varsta>28</varsta>
<tara>Romania</tara>
</persoana1>

<persoana1>
<nume>Trifan</nume>
<prenume>Lucian</prenume>
<varsta>25</varsta>
<tara>Romania</tara>
</persoana1>

<persoana1>
<nume>Trifan</nume>
<prenume>Cristian</prenume>
<varsta>24</varsta>
<tara>Romania</tara>
</persoana1>
</persoane>

Apoi, in tag-ul "body" din pagina default.html importam documentul xml:

<body>


Dupa care introducem datele din xml intr-un tabel:


<table datasrc="#persoane" cellspacing="0" cellpadding="0" width="100%"
align="left" border="1" >

<tbody>


<tr>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Nume:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Prenume:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Varsta:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Tara:</td>

</tr>

<tr>

<td style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px;
VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: left"><span datafld="nume"></span></td>

<td style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px;
VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: left"><span datafld="prenume"></span></td>

<td style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px;
VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: left"><span datafld="varsta"></span></td>

<td style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px;
VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: left"><span datafld="tara"></span></td>

</tr>

<tr>

<td style="HEIGHT: 2px" colspan="4"></td>

</tr>

</tbody>

</table>





Dupa cum vedeti, nu a trebuit sa cream in tabel cate un rand pentru fiecare nod din documentul xml si asta din cauza ca atunci cand este vizualizata pagina in browser, acesta va citi fisierul xml si apoi va adauga in tabel atatea randuri cate sunt necesare pentru afisarea intregului continut al documentului xml.


Asta e tot !




Acum, default.html ar trebui sa arate astfel:


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<xml id="persoane" src="persoane.xml"></xml>
<table border="1" datasrc="#persoane" width="100%" align="left" cellspacing="0"
cellpadding="0" bordercolor="#000080">
<tbody>


<tr>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Nume:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Prenume:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Varsta:</td>

<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;
background-color: #cccccc;">Tara:</td>

</tr>
<tr>
<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;"><span
datafld="nume"></span></td>
<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;"><span
datafld="penume"></span></td>
<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;"><span
datafld="varsta"></span></td>
<td style="text-align: left; vertical-align: middle; padding: 2 2 2 2;"><span
datafld="tara"></span></td>
</tr>
<tr>
<td colspan="4" style="height: 2px;"></td>
</tr>
</tbody>
</table>
</body>
</html>

Posted by C at 2:44 AM Categorie:

0 comentarii

10 November 2006

Afisarea continutului unui fisier xml intr-o pagina html [partea intai]

Pentru acest lucru avem nevoie de un fisier xml pe care il voi numi "cars.xml" si
o pagina html pe care o voi numi "default.html".

cars.xml va contine urmatorul cod:

<?xml version="1.0" encoding="utf-8" ?>

<cars>
<car1>
<model>Suzuki</model>
<type>Coupe</type>
<color>Red</color>
<year>2005</year>
</car1>
</cars>


In tag-ul "body" din pagina default.html, importam fisierul cars.xml:

<body>
<xml id="auto" src="cars.xml"></xml>

Apoi vom crea un tabel ca in exemplul de mai jos:

<table datasrc="#auto" border="1" width="27%" align="left" cellpadding="2" height="100" bordercolor="#000080" id="table1">

<tr>
<td width="70"><font color="#993300">Model: </font></td>
<td style="font: 9pt Verdana; "><span datafld="model"></span></td>
</tr>
<tr>
<td width="70"><font color="#993300">Type: </font> </td>
<td style="font: 9pt Verdana; "><span datafld="type"></span></td>
</tr>
<tr>
<td width="70"><font color="#993300">Color: </font></td>
<td style="font: 9pt Verdana; "><span datafld="color"></span></td>
</tr>
<tr>
<td width="70"><font color="#993300">Year: </font></td>
<td style="font: 9pt Verdana; "><span datafld="year"></span></td>
</tr>
</table>

Observati ca tabelului i-am adaugat proprietatea "datasrc" care are ca valoare "ID-ul" fisierului xml.

Apoi, fiecarui tag "span" i-am adaugat proprietatea "datafld" care are ca valoare numele fiecarui tag xml ( care contine date ) din "cars.xml".

De exemplu, primul tag "span" are ca valoare a parametrului "datafld" 'model', al doilea are 'type' s.a.m.d.

Astfel, putem afisa datele aflate intr-un fisier xml extern.

Ce este mai interesant, este faptul ca in momentul vizualizarii paginii html in browser, in cadul sursa nu apar datele
continute de fisierul xml.

La sfarsit, continutul fisierului "default.html" este acesta:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Default</title>
</head>

<body>
<xml id="auto" src="cars.xml"></xml>

<font size="5" color="#000080">Afisarea continutului unui fisier xml intr-o pagina html</font><div align="left">

<hr noshade color="#FF9900" align="left" width="75%" size="1">

<br />

<table datasrc="#auto" border="1" width="27%" align="left" cellpadding="2" height="100" bordercolor="#000080" id="table1">

<tr>
<td width="70">
<font color="#993300">Model: </font>
</td>
<td style="font: 9pt Verdana; ">
<span datafld="model"></span>
</td>
</tr>
<tr>
<td width="70">
<font color="#993300">Type: </font>
</td>
<td style="font: 9pt Verdana; ">
<span datafld="type"></span>
</td>
</tr>
<tr>
<td width="70">
<font color="#993300">Color: </font>
</td>
<td style="font: 9pt Verdana; ">
<span datafld="color"></span>
</td>
</tr>
<tr>
<td width="70">
<font color="#993300">Year: </font>
</td>
<td style="font: 9pt Verdana; ">
<span datafld="year"></span>
</td>
</tr>
<tr>
<td colspan="2" style="height: 2px;">
</td>
</tr>
</table>
</div>
</body>
</html>

Posted by C at 8:45 PM Categorie:

0 comentarii

Subscribe to: Posts (Atom)