Javascript est devenu un composant incontournable pour les sites internet. Le phénomène Web2.0, avec AJAX, a remis ce langage dans le hotspot des futurs développements web. Toutefois, ces problèmes et limitations sont aussi connus depuis de nombreuses années. Le travail pour développer un Flash 'open-source' est déjà en cours afin de préparer la prochaine génération d'applications web.

Le code Javacript est en texte lisible. On arrive vite à des centaines ou milliers de ligne de code pour avoir un traitement graphique sophistiqué. Tout ce code doit être transféré depuis le serveur vers le navigateur. Il peut donc devenir plus lourd que le contenu de la page HTML! Il existe plusieurs méthodes pour réduire la taille des fichiers javascript et leur temps de chargement.

La plus efficace semble être de réduire le code à son essentiel: plus de retour à la ligne, ni d'espace inutile, plus de de commentaires…

Puis d'utiliser la compression gzip du serveur web ou bien par PHP avec ob_start() ob_end().

Avec Apache et le mod_deflate activé: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

Pour faire simple, il suffit de rajouter ce code au fichier .htaccess dans le répertoire contenant les fichiers javascript

setOutputFilter DEFLATE

Google_Gadgets

jQuery

FCKeditor

Pour contruire un éditeur de page en ligne en Javascript, il faut aller dans des domaines encore non standardisés… http://developer.mozilla.org/fr/docs/Migration_d%27applications_d%27Internet_Explorer_vers_Mozilla#.C3.89dition_de_texte_enrichi

On notera les mot-clés contentEditable et puis execCommand, mais aussi TextRange.

Pour Internet Explorer:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/execCommand.asp

Pour FireFox:

http://developer.mozilla.org/fr/docs/Migration_d%27applications_d%27Internet_Explorer_vers_Mozilla#.C3.89dition_de_texte_enrichi

Pour Opera, Safari et autres, les navigateurs sont encore plus loin des standards…

Javascript est pourtant le langage favori pour les prochaines application interactives avec AJAX. Est-ce qu'il faudra attendre un IE8 et FF4 pour avoir une vraie plateforme comme Flash ?

Des bibliothèques de programmation:

jQuery

Des effets en tous genres:

DHTeuMeuLeu

MiniAjax

Des effets de fenêtres:

LightBox

LiteBox

GreyBox

ThickBox

Des editeurs HTML en ligne:

FCKeditor

tinyMCE

Pour aller plus loin dans la programmation Javascript, je conseille vivement ce site: http://www.quirksmode.org/

Quirksmode explique et recense toutes les différences des versions Javascript suivant les différents navigateurs!

Par exemple, pour faire un éditeur en ligne digne de ce nom, il faut pouvoir manipuler la sélection de texte effectuée par l'utilisateur:

http://www.quirksmode.org/dom/range_intro.html

Installer les fichiers et puis faire les includes

<script type="text/javascript">
    var GB_ROOT_DIR = "http://mondomaine.com/chemin-lib/greybox/";
</script>

<script type="text/javascript" src="http://mondomaine.com/chemin-lib/greybox/AJS.js"></script>
<script type="text/javascript" src="http://mondomaine.com/chemin-lib/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://mondomaine.com/chemin-lib/greybox/gb_scripts.js"></script>
<link href="http://mondomaine.com/chemin-lib/greybox/gb_styles.css" rel="stylesheet" type="text/css" />

On retrouve le même principe que Lightbox.

Au chargement de la page, le script examine tous les liens et détecte les attributs rel

• Pour une image, il faut ajouter rel=“gb_image[]”

<a href="http://macible.com/chemin-cible/image.jpg" rel="gb_image[]">CLIQUEZ ICI</a>

• Pour un album d'images, il faut ajouter rel=“gb_imageset[nom-de-l-album]”

<a href="http://macible.com/chemin-cible/image.jpg" rel="gb_imageset[mon-album]">CLIQUEZ ICI</a>
<a href="http://macible.com/chemin-cible/image.jpg" rel="gb_imageset[mon-album]">CLIQUEZ ICI</a>

Mieux que LightBox, qui se contente d'images, on peut aussi afficher des pages web.

<a href="http://microwebagency.com/" title="Micro Web Agency" rel="gb_page[500, 500]">Ouvrir MicroWebAgency</a>

En mode 'Full Screen':

<a href="http://microwebagency.com/" title="Micro Web Agency" rel="gb_page_fs[]">Ouvrir MicroWebAgency</a>

http://w3schools.com/js/default.asp

http://w3schools.com/js/js_obj_string.asp

http://w3schools.com/jsref/jsref_lastIndexOf.asp

From http://adomas.org/javascript-mouse-wheel/plain.html

/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
	if (delta < 0)
		/* something. */;
	else
		/* something. */;
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

Voici un exemple de code pour utiliser l'API GMap.

C'est un formulaire qui permet de chercher la géolocalistion (Lat, Lon) d'une adresse postale.

http://www.journaldunet.com/developpeur/tutoriel/dht/061222-google-maps-api/3.shtml

   function afficherAdresse(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " introuvable");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
   }