Easy Web Development: JavaScript

Showing posts with label JavaScript. Show all posts

22 June 2008

The new JavaScript Framework : JUNE

Long time no see, but I, at least, have a good reason: I've been working on my new JavaScript Framework: JUNE.

It's using the Object Literal Notation and the Module pattern. It has great support for Event handling, DOM manipulation and AJAX.

June Framework. Helps you code JavaScript better. Really.

That's because it doesn't add a layer of sugar on top of JavaScript to make writing JavaScript like writing in another language.

JUNE can only help you coding JavaScript in JavaScript.

Also I've set up a forum, so if you have any problems in using the JUNE Framework, don't hesitate to come by and let me know about your problem so we can work it out.

Download JUNE Framework, use it in your projects and, if you'd like, come by to the forums and let us know your impressions about it!

Hope to see you there soon!

21 April 2007

18 April 2007

Browser Redirects

Implementing browser redirects

Using meta refresh:

Using JavaScript:

Using ASP.NET

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
MyBase.OnLoad(e)
     Response.Status = "301 Moved Permanently"
     Response.AddHeader("Location", "http://jasp-costin.blogspot.com")
     Response.End()
End Sub

16 April 2007

View last modified date

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//
//
// VIEW LAST MODIFIED DATE

function getLastDate(/*STRING*/ id)
{
var elementId = document.getElementById(id);

var m_lastDate = document.lastModified;

elementId.innerHTML = m_lastDate;
}
</script>

</head>

<body onload="getLastDate('Span1');">

<span id="Span1"></span>

</body>

</html>

Set As Home Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//
// MAKE HOME-PAGE
//
function makeHomePage(/*STRING*/ elementId)
{
TheLink = document.getElementById(elementId);
TheLink.style.behavior='url(#default#homepage)';
TheLink.setHomePage('http://jasp-costin.blogspot.com');
}
</script>

</head>

<body>

<span id="MakeHomePage_Span" onclick="makeHomePage(this.id);">Set as home
page</span>

</body>
</html>

Open Popup Window

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<script type="text/javascript">

</script>
</head>

<body>
<span id="Span1" onclick="openWindow();" style="cursor: hand;">Open pop-up
window</span>
</body>
</html>

Display Current Date

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//
// DISPLAY DATE
//
function GetCurrentDate()
{
var months = new Array(13);
months[1]= "January";
months[2]= "February";
months[3]= "March";
months[4]= "April";
months[5]= "May";
months[6]= "June";
months[7]= "July";
months[8]= "August";
months[9]= "September";
months[10]= "October";
months[11]= "November";
months[12]= "December";

var time = new Date();
var lmonth = months[time.getMonth() + 1];
var date = time.getDate();
var year = time.getYear();

if (year < 2000)
year = year + 1900;
document.write(lmonth + " " + date + " " + year);
}

</script>

</head>
<body>

<span>
<script type="text/javascript">GetCurrentDate();</script>
</span>

</body>
</html>

Add Page To Favorites

This script will help you to add a given page to favorites.
It's quite small, simple and easy to understand.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//
// ADD THIS PAGE TO FAVORITES
//
function addPageToFav(/*STRING*/ title, /*STRING*/ url )
{
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "");
}
</script>

</head>

<body>

<span id="AddToFav_Span"
onclick="addPageToFav('EasyWebDevelopment','http://jasp-costin.blogspot.com')">Add
to favorites</span>

</body>
</html>

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>

 || 

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

</form>

</body>

</html>

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:

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:

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">



</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>

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:

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

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

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:

13 November 2006

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:

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

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">



</script>

</head>

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

<div id="divCookies">



</div>

</body>

</html>

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:

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">

</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">

</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">

</div>

</body>
</html>

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:

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.

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

!! 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">

</script>
</head>

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

</body>

</html>

Easy Web Development