De ce credeti ca se intampla exemplul de aici (Firefox status ofuscation) si e un comportament logic sau nu?

Am gasit o implementare Pacman foarte faina, facuta doar folosind YUI (no flash, no nothing else) si imi place maxim.
Aici jocul si aici autorul.
Sweet!

Cel mai interesant articol pe teme de Javascript care l-am citit in ultima vreme - Non-blocking JavaScript Downloads sau metode de a controla viteza de incarcare a paginii in functie de metoda de incarcare a scripturilor javascript (nici nu stiam ca scripturile blocheaza download-ul celorlalte elemente ale paginii).

..si pentru ca nu vreau sa uit ce ..pun aici linkul.
Cum sa nu submiteze formul in Firefox pe un event de onclick adaugat programatic.

M-am apucat (cu greu si fara nici un elan) de lucrarea de diploma care are ca tema principala un travel-guide interactiv folosind Yahoo! si Google maps API.
Primele linii de cod le-am scris pentru Yahoo! maps si am inceput sa ma documentez despre diferentele dintre cele 2 API-uri.
Am gasit niste articole destul de bune, pentru argumentele pro-Yahoo!
Link 1, Link 2 si probabil cel mai putin impartial, Link 3

La prima vedere, API-ul de la Yahoo! este simpatic, usor de folosit (ca si YUI).
Plus ca Yahoo! este simpatia mea personala (stiati ca vin in RO in vara?)

Despre Google inca nu imi pot da cu parerea...

Si pentru ca tot am vorbit de pagini web interactive contruite cu AJAX, DOM si Javascript sa vedem si o aplicatie practica la aceste tehnologii. Ca exemplu o sa folosesc tema de casa 3, care consta dintr-un calendar care afiseaza colorat fiecare zi in care a fost postat un aricol pe acest blog. Un click pe acea data va va trimitie chiar la pagina cu articolul respectiv. Pentru a putea rula aceste scripturi este nevoie de un server web care sa ruleze php, si de Yahoo User Interface Librari (YUI) care poate fi downloadat de aici

calendar.html:

<>
<>
< equiv="Content-Type" content="text/html; charset=ISO-8859-1">
< type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
< /style>
< rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css">
< type="text/css" rel="stylesheet" href="build/calendar/assets/skins/sam/calendar.css">
< type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js">< /script>
< type="text/javascript" src="build/calendar/calendar.js">< /script>
< type="text/javascript" src="getDates.js">< /script>
< /head>
< class="yui-skin-sam" onload="getDates()">

< id="cal1Container">< /div>

< /body>
< /html>

getDates.js:

var dates;
var xmlHttp;
var calendar;


function createXMLHttp()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

function getDates()
{
xmlHttp = createXMLHttp();
if (xmlHttp.readyState==4 xmlHttp.readyState==0)
{

var connString="http://localhost/getDates.php";
xmlHttp.onreadystatechange=readDates;

xmlHttp.open("GET",connString,true);

xmlHttp.send(null);

}
}

function readDates()
{
if (xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var response = xmlHttp.responseXML;
//alert("avem raspuns!zzz");
dates = response.getElementsByTagName("Date");
var i;
/*
for(i = 0; i < calendar =" new" i =" 0;" selected =" args[0];" i =" 0;" nodevalue ="=" xmlhttp =" createXMLHttp();" readystate="=" readystate="=" connstring="http://localhost/getUrl.php?date=" onreadystatechange="openDocument;" readystate ="=" status ="=" response =" xmlHttp.responseXML;" url =" response.getElementsByTagName(" i =" 0;" dom="new">load('http://interfeteevoluate.blogspot.com/feeds/posts/default',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');

createLinkDocument($entries);


function createLinkDocument($entries)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);


foreach($entries as $entry)
{
$date = date_parse($entry->getElementsByTagName('published')->item(0)->nodeValue);
#print $date->item(0)->nodeValue . "\n";
#print_r(date_parse($date->item(0)->nodeValue));
$links = $entry->getElementsByTagName('link');
foreach($links as $link)
{
if(strcmp($link->getAttribute('rel'), 'alternate') == 0)
{
$url = $link->getAttribute('href');
#print $url . "\n";
}
}

$dbEntry = $db->createElement('entry');
$root->appendChild($dbEntry);
$dbEntryDate = $db->createElement('Date', $date['month'].'/'.$date['day'].'/'.$date['year']);
$dbEntry->appendChild($dbEntryDate);
$dbEntryURL = $db->createElement('URL', $url);
$dbEntry->appendChild($dbEntryURL);
}

$db->save("db.xml");
}

?>

getDates.php, folosit la incarcarea paginii pentru a determina zilele in care s-au postat articole:

< ?php $dom=new DOMDocument(); $dom->load('db.xml',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');
$result = createDateDocument($entries);

header('Content-Type: text/xml');
echo $result->saveXML();

function createDateDocument($entries)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);
$lastDate = '';

foreach($entries as $entry)
{
$date = $entry->getElementsByTagName('Date')->item(0)->nodeValue;
if(strcmp($date, $lastDate) != 0)
{
$dbEntryDate = $db->createElement('Date', $date);
$root->appendChild($dbEntryDate);
$lastDate = $date;
}
}

return $db;
}
?>

getUrl.php, folosit pentru a afla link-ul catre ultimul articol postat in ziua selectata:

< ?php $dom=new DOMDocument(); $dom->load('db.xml',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');
$date = $_GET['date'];
#$date='12/9/2007';
$result = createDateDocument($entries, $date);

header('Content-Type: text/xml');
echo $result->saveXML();

function createDateDocument($entries, $searchDate)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);

foreach($entries as $entry)
{
$date = $entry->getElementsByTagName('Date')->item(0)->nodeValue;
$url = $entry->getElementsByTagName('URL')->item(0)->nodeValue;
if(strcmp($date, $searchDate) == 0)
{
$dbEntryDate = $db->createElement('URL', $url);
$root->appendChild($dbEntryDate);
$lastDate = $date;
}
}

return $db;
}
?>

Ce este javascript?

Javascript este un limbaj de scripting orientat pe obiect dezvoltat de Netscape.
Javascript este un superset al ECMA-262 Edtion 3 (ECMAScript), cu mici modificari fata de standard.
Contrar asteptarilor, nu este interpretat de Java ci este un limbaj de scripting dinamic care suporta obiecte contruite pe baza de prototipuri. Sintaxa acestui limbaj este similara Java sau C++ fapt care usureaza invatarea acestui limbaj; constructiile de baza cum ar fi ciclurile for, while instructiunea if si blocurile switch si try sunt aproape identice.
Javascript este un limbaj atat procedural cat si orientat pe obiecte. Obiectele sunt create adaugand metode unor obiecte care altfel ar fi fost vide la rulare. Odata creat un obiect poate fi folosit ca model in crearea unor obiecte noi. Este suportat de principalele browsere web actuale: Firefox, Internet Explorer, Netscape si Opera si este folosit in principal pentru a crea pagini web cu continut dinamic,
Impreuna cu AJAX si DOM poate aduce aplicatiile web la acelasi nivel de interactivitate ca si aplicatiile desktop. Pentru incepatori un tutorial simplu si scurt poate fi gasit la aici .

Inainte de a folosi o tehnologie eu cred ca programatorul trebuie sa stie intai la ce foloseste.

Pana la AJAX utilizatorul trebuia sa completeze formularul, sa apese submit, sa astepte ca serverul sa proceseze cererea si primeasca inpoi o pagina complet noua(serverul trimite pagina intreaga). Tot acest proces inseamna asteptare destul de suparatoare mai ales pentru un utilizator nerabdator.
Cu AJAX aplicatiile web pot fi facute mult mai dinamice. Concret AJAX foloseste mai multe tehnologii "mai vechi", HTML, Javascript, DHTML, DOM pentru a actualiza o pagina web fara o reincarcare completa.
AJAX foloseste obiectul XMLHttpRequest si Javascript ca intermediari intre formular si server. Cand utilizatorul introduce datale si apasa submit formularul nu mai este trimis la server. Input-ul este preluat de codul Javascript si trimis la server fara ca utilizatorul sa isi dea seama ce se intampla. Partea si mai buna este cererile catre server se fac asincron ceea ce inseamna ca utilizatorul nu trebuie sa astepte raspunsul cererii anterioare pentru a continua sa foloseasca aplicatia. Pe masura ce sosesc raspunsurile de la server portiuni din pagina sunt actualizate.

O aplicatie care foloseste AJAX consta din 3 parti esentiale:

1. Obtinerea obiectului XMLHttpRequest.

Dupa cum am spus AJAX foleste un obicet XMLHttpRequest. Obtinerea obiectului XMLHttpRequest este diferita pentru browsere diferite. Urmatorul cod urmareste obtinerea obiectelui pentru orice tip de browser.

function createXMLHttp()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

2. Cererile catre server si raspunsurile acestuia.

AJAX interpune codul Javascript intre browser si server pasii urmatori sunt prezenti in majoritatea aplicatiilor AJAX.
- extrage datele din formular
- construieste URL-ul
- deschide o conexiune catre server
- setaza o functia ce va fi apelata cand primeste raspunsul
- trimite cererea

//cererea
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) (city == "")) return;
if ((state == null) (state == "")) return;

// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// Open a connection to the server
xmlHttp.open("GET", url, true);

// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;

// Send the request
xmlHttp.send(null);
}

//raspuns
function updatePage()
{
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}

3. Legatura cu pagina web

Singurul lucru care a mai ramas de facut este sa invocam scriptul cand apare o shimbare in formular.

<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

Exista numeroase carti avand ca subiect Design Patterns, acestea reprezentand un set de solutii (patternuri) care rezolva anumite probleme frecvent intalnite in proiectarea aplicatiilor indiferent de limbajul folosit.
In aceasta serie de articole voi incerca sa prezint cateva exemple de Design patterns in Javascript.
Primul design pattern ales de mine este Singleton, care face parte din Design pattern-urile creationale, fiind in acelasi timp cel mai usor Design Pattern.
Mai multe detalii despre ce este, cand se utilizeaza si cateva implementari simple(Java, C++, C#, Python, PHP) pot fi gasite aici

Javascript-ul are anumite particularitati care il diferentiaza de restul limbajelor orientate obiect, si anume faptul ca este prototype based.
Clasele se declara similar functiilor (folosind in mod similar cuvantul cheie function)

/*Singleton example with eager initialization*/

Singleton = function(){
 var _instance = null;

 return {
    getInstance : function(){
       if(_instance === null){
          _instance = {};      
       }
       return _instance;
    }
 };
}();

Ext.onReady(function(){
 var x = Singleton.getInstance();
 var y = Singleton.getInstance();

 if(x == y){
    alert("Objects are the same instance");
 }
});


/*Singleton example with lazy initialization*/
Singleton = function(){
 var _instance = null;

 return {
    getInstance : function(){
       if(_instance === null){
          _instance = {};      
       }
       return _instance;
    }
 };
}();

Ext.onReady(function(){
 var x = Singleton.getInstance();
 var y = Singleton.getInstance();

 if(x == y){
    alert("Objects are the same instance");
 }
});

Cred ca oricine s-a confruntat cu zeci de probleme in incercarea de a construi aplicatii web cross-browser cu javascript, datorita diferentelor cu care browserele implementeaza standardele W3C (Opera conduce detasat urmata de Mozilla)




Un articol foarte bine scris despre problemele de Javascript intalnite la incercarea de a scrie o aplicatie web sau o interfata utilizator crossbrowser

Nota 10!

Odata cu popularitatea in cresterea a site-urilor folosind AJAX, Javascript a devenit dintr-un limbaj de scripting mai mult sau mai putin folosit, o parte vitala a aplicatiilor web.
Aceasta face ca prevazuta revizuire a standardelor ECMAScript sa devina cruciala, mai ales in conditiile pietei actuale in care nici o firma care implementeaza un anumit browser nu isi poate impune punctul de vedere.
Detalii despre diferentele de opinii asupra viitorului ECMAScript dintre Brendan Eich - creatorul Javascript si Chief Technology Officer pentru Mozilla si Chris Wilson - arhitect al echipei dedicate Internet Explorer a Microsoft - aici.

Un filmulet foarte interesant despre noua librarie Javascript pentru Blogger, cu exemple de utilizare.