====== Introduction ======

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.


====== Compression ======

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
<code>
setOutputFilter DEFLATE
</code>


====== Google gadgets ======

[[AJAX:Google_Gadgets|Google_Gadgets]]


====== jQuery ======

[[AJAX:jQuery|jQuery]]




====== FCKeditor ======

[[AJAX:FCKeditor|FCKeditor]]




====== Editeur WYSIWYG ======

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 ?




====== Liens ======

Des bibliothèques de programmation:

[[http://jquery.com|jQuery]]

Des effets en tous genres:

[[http://www.dhteumeuleu.com|DHTeuMeuLeu]]

[[http://www.miniajax.com/|MiniAjax]]

Des effets de fenêtres:

[[http://www.huddletogether.com/projects/lightbox2/|LightBox]]

[[http://www.doknowevil.net/litebox/|LiteBox]]

[[http://orangoo.com/labs/GreyBox/|GreyBox]]

[[http://jquery.com/demo/thickbox/|ThickBox]]

Des editeurs HTML en ligne:

[[http://www.fckeditor.net/|FCKeditor]]

[[http://tinyMCE.moxiecode.com/|tinyMCE]]

====== Quirksmode ======

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



====== GreyBox ======

===== Installation =====

Installer les fichiers et puis faire les includes
<code html>
<script type="text/javascript">
    var GB_ROOT_DIR = "http://mondomaine.com/chemin-lib/greybox/";
</script>
</code>
<code html>
<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" />
</code>


===== Usage =====

==== Photos ====

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[]"
<code html>
<a href="http://macible.com/chemin-cible/image.jpg" rel="gb_image[]">CLIQUEZ ICI</a>
</code>

  * Pour un album d'images, il faut ajouter rel="gb_imageset[nom-de-l-album]"
<code html>
<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>
</code>



==== Page Web ====

Mieux que LightBox, qui se contente d'images, on peut aussi afficher des pages web.
<code html>
<a href="http://microwebagency.com/" title="Micro Web Agency" rel="gb_page[500, 500]">Ouvrir MicroWebAgency</a>
</code>

En mode 'Full Screen':
<code html>
<a href="http://microwebagency.com/" title="Micro Web Agency" rel="gb_page_fs[]">Ouvrir MicroWebAgency</a>
</code>



====== Astuces de Programmation ======


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

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

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

====== Mouse Wheel Events ======

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

<code>
/** 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;

</code>

====== Google Maps ======

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

<code>
   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);
            }
          }
        );
      }
   }
</code>