Evolution du WEB 1.0 (avec de navigateurs au javascript bloqué) vers le WEB 2.0 (javascript optimisé pour les navigateurs)

Puisque la majorité des navigateurs clients web sont compatibles Javascript, on peut passer au WEB 2.0

On retrouve de bonnes bases fondamentales :

  • Javascript, chapitre 1 : le grand nettoyage !
    • Jamais, au grand jamais, vous ne devez insérer de Javascript directement dans le document
    • Le Javascript permet d'améliorer l'expérience de l'utilisateur, ce n'est cependant pas une fonctionnalité fiable à 100%
    • Vérifiez qu'un objet est disponible avant de le manipuler
    • Écrivez du Javascript, et pas un dialecte particulier à un navigateur
    • N'utilisez pas des variables qui ne vous appartiennent pas
    • Ne soyez pas dépendant de la souris !

Les fonctions et attributs que nous pouvons utiliser pour parcourir l'arbre d'un document, et comment sauter d'un élément à l'autre. Fonctions servant à atteindre un élément dans une page

 
getElementById('elementID')
  renvoie l'élément dont l'id est elementID, en tant qu'object (un objet en Javascript).
getElementsByTagName('tag')
  renvoie tous les éléments dont la balise est tag, en tant qu'array (un tableau en Javascript).

Bien sûr vous pouvez panacher les deux. Par exemple :

document.getElementById('navigation').getElementsByTagName('a')[3];
  renvoie le quatrième lien à l'intérieur de l'élément dont l'id est 'navigation'.
document.getElementsByTagName('div')[2].getElementsByTagName('p')[0];
  renvoie le premier paragraphe à l'intérieur de la troisième div du document.

Quelques astuces Javascript

Positionner le visuel de l'écran là où on le souhaite, remonter tout en haut de la page

void window.scrollTo(Integer x, Integer y)

Description : Positionne les ascenseurs avec un scrolling de x pixels en horizontal et de y pixels en vertical. Voir aussi scrollBy() pour déplacer les ascenceurs

window.scrollTo(0,0); // Tout en haut de la page et à gauche

void window.scrollBy(Integer x, Integer y)

Description : Active l'ascenseur horizontal de x pixels et l'ascenseur vertical de y pixels. Voir aussi scrollTo() pour fixer une position aux ascenseurs.

window.scrollBy(0,100);

Déplacer le visuel de l'écran vers une ancre nommée

Avec la balise ancre suivante : <a name="nameAnchor"></a>

Pour aller sur l'ancre :

window.location.hash=nameAnchor;
/

Touche shift ascii javascript, détecter l'événement de click sur une touche (spéciale telle que SHIFT, CRTL, ALT, ALT-GR, ...)

HTML DOM Event Object
  • Event Handlers
  • Mouse / Keyboard Attributes
    • event.altKey Returns whether or not the "ALT" key was pressed when an event was triggered
    • event.ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered
    • event.shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered
KeyEvent

Liste des codes ASCII : Key code

  • TAB : 9
  • ENTER : 14

L'ordre des événements des clés (key events) : Il y a les événements keydown, keypress et les keyup.

Attention, keyPress semble ne fonctionner qu'avec Firefox, il ne fonctionne pas avec IE 6, Chrome ! Utilisez donc plutôt keydown ou keyup selon vos besoins. Voir :

Détecter la touche Shift ?

ETAT de la touche SHIFT ( dans la page avec et sans enfoncer SHIFT au préalable) : A vous de cliquer...

function detection(e)
{
  var elt = document.getElementById('resultClick');
  e = e || event;
  elt.innerHTML = e.shiftKey ? 'AVEC' : 'SANS';
 
  return true;
}

Reconnaitre touche tapée

Tapez ici n'importe quelle touche : Hit here any key you want : associée ou non avec [Alt] enventually with [Alt] 

 
 (avec/sans touche Alt)
 
 (avec/sans touche Control)
 
 (avec/sans touche Shift)



function shiftKeyPressed(evt) { return (evt && evt.shiftKey); }




typeof



    

  • typeof
    • 

  • Type 	Result
    • 

  • Undefined 	"undefined"
    • 

  • Null 	"object"
    • 

  • Boolean 	"boolean"
    • 

  • Number 	"number"
    • 

  • String 	"string"
    • 

  • Host object (provided by the JS environment) 	Implementation-dependent
    • 

  • Function object (implements [[Call]] in ECMA-262 terms) 	"function"
    • 

  • E4X XML object 	"xml"
    • 

  • E4X XMLList object 	"xml"
    • 

  • Any other object 	"object"
    • 



    

  • Opérateurs pour déterminer le type
    • 

  • boolean (variable OUI/NON),
    • 

  • string (variable de chaîne de caractères),
    • 

  • number (variable numérique),
    • 

  • function (fonction),
    • 

  • object (objet),
    • 

  • undefined (type indéterminé).
    • 




cast ou parsing




String to Float




parseFloat("4.333");




String to Int




parseInt("100.5", 10);




javascript arrondir 2 décimal




var num = new Number(13.3714);
num.toFixed(2);





Try catch finally javascript





La spécification JavaScript 1.5 définie six type d'erreur primaire (devshed.com - JavaScript-Exception-Handling):


    

  • EvalError - raised when the eval() functions is used in an incorrect manner;
    • 

  • RangeError - raised when a numeric variable exceeds its allowed range;
    • 

  • ReferenceError - raised when an invalid reference is used;
    • 

  • SyntaxError - raised when a syntax error occurs while parsing JavaScript code;
    • 

  • TypeError - raised when the type of a variable is not as expected;
    • 

  • URIError - raised when the encodeURI() or decodeURI() functions are used in an incorrect manner;
    • 



try
{
   // Le mauvais code
}catch (e) {
   if (e instanceof TypeError) {
   }
   alert(e);
   alert("Exception.name: " + e.name + " Exception.message: " + e.message);
}
// Optionnellement le bloc finaly
finally {
  // Action a faire dans tous les cas
}




Parcourir un objet en Javascript




for ( var cle in t ) {
    // cle contient le nom de la clé
    // on peut obtenir la valeur via t[cle]
    alert( cle+':'+t[cle] );
}




Écrire dans la console javascript du navigateur



Console.WriteLine("OK BOY");




Console is not defined
[Break on this error] Console.WriteLine("OK BOY");




console.log("OK BOY"); // (Test IE6 à 9 sans le déboguer (Outils de développement F12) : Erreur : fait planter le script en cours. Contrairement à Firefox, Chrome, Opera, Safari : OK)




Pour remédier à ce problème de console.log sous IE, on peut rajouter l'objet et sa fonction :



if(!window.console){
//	alert("!window.console");	// IE
	var console = {
		log:function(o){
//			alert(o);
		}
	};
}




Ou utiliser : Simulating a Firebug, Safari or Opera debugging console in Microsoft Internet Explorer with Faux Console




Pour Firefox




Pour Internet Explorer, jetez un œil sur :




Plus générique encore




Pour la console.log() avec jQuery, voyez les possibilités dans la section jQuery




Vérifier la qualité du code .js avec avec JSLINT



    

  • The JavaScript Code Quality Tool : JSLint
    • 




Réduire la taille de son code javascript et l'offusquer (le rendre illisible)





Ressources





    

  • jsFiddle.net - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS
    •