Nota Bene:
Ces extraits sont personnellement complétés afin de servir de base pour développer et se former au Javascript. En terme de volume, ils ne dépassent ici pas plus de 1% du livre (218 pages). Il y a volontairement des oublis par rapport à ce qui m'est déjà connu. Le site de référence largement mentionné ici est W3Schools.com
Langage sensible à la casse
<script type="text/javascript"> //Ceci est un commentaire monoligne </script> <script type="text/javascript"> /* Ceci est un commentaire Sur plusieurs lignes */ </script>
Intégré à Internet Explorer 8, il permet de débuger le Javasript (onglet Script, Démarrer le débogage). L'intérêt est alors de consulter le contenu des variables locales. Il est accessible via le menu Outils ou F12.
Intégrée à Firefox, une console web permet d'afficher les erreurs et avertissement Javascript. Elle est accessible via le menu Outils.
Extension de Firefox utile pour debugger des scripts Javascript. https://addons.mozilla.org/fr/firefox/addon/firebug/
L'intérêt est de rajouter des points d'arrêt (onglet Script, marge de gauche) afin d'observer le contenu des variables (onglet Espions):
Il est aussi possible d'executer les instructions en mode "pas à pas" (icones flechées orange).
Script pour utiliser conjointement à jQuery et Firebug. Il permet d'afficher des messages d'erreur dans la console de Firebug. http://james.padolsey.com/javascript/jquery-lint/
Le DOM est une API fondée sur les arbres (qui contient l'ensemble des objets/noeuds (nodes) de la page web).
Diagramme de hiérarchie des objets de Window:
Dans une page comportant un formulaire nommé formu, contenant lui-même un champ nom, si l'on désire accéder à ce champ, la syntaxe suivante sera utilisée:
document.formu.nom;
En plus d'atteindre un objet précis dans une hiérarchie, la syntaxe pointée désigne l'accès à des méthodes ou des propriétés qui permettent de manipuler ou de décrire ces objets.
L'objet window étant le plus élevé dans la hiérarchie, il n'est pas nécessaire de le nommer à chaque manipulation.
Affiche une boite de dialogue avec les boutons OK et Annuler. Renvoie respectivement true et false.
<script language="javascript"> var reponse=window.confirm("ok = true, Annuler = false"); alert("la valeur de la variable réponse est: "+reponse); </script>
Exercice 1: lors de la fermeture de la page, détecter l'évènement et demander la confirmation. Si on annule, la page reste ouverte.
Solution: Exercices/1.confirm_fermer_page.html
constante_numerique=l.45226; constante_texte="ma constante texte";
is Not a Number: renvoie true si la valeur n'est pas un nombre.
JavaScript est faiblement typé c'est-à-dire que les variables n'ont pas besoin de correspondre à un type (texte, numérique, booléen) pour fonctionner.
Une variable est locale (définie dans une fonction), ou globale (définie dans le script).
Déclaration:
var mavariable1, mavariable2, mavariable3;
Les variables n'ayant pas reçu de valeurs, elles sont dites undefined (par exemple, les arguments qui sont oubliés lors d'un apple de fonction); test avec typeof
var numerique=l5; var texte="ma variable"; var booleen=false; document.write("La variable numerique est de type: "+ typeof numerique +"<br />"); // number document.write("La variable texte est de type: "+ typeof texte +"<br />"); // string document.write("La variable booleen est de type: "+ typeof booleen +"<br />"); // boolean
var variablenumerique=parselnt(variabletexte); var variablenumerique=parseFloat(variabletexte);
var variabletexte=variablenumerique.toString(); var n = 123456.789; n.toFixed(0); // "123457" n.toFixed(2); // "123456.79"
var egal = 1 == '1'; // true var strictement_egal = 1 === '1'; // false var different = 1 != '1'; // false var strictement_different = 1 !== '1'; // true var indefini = undefined == null; // true var strictement_indefini = undefined === null; // false
Test: Exercices/2.operateurs_stricts.html
Respectivement, supprime une variable, crée une instance d'un objet et référence l'objet courant.
suite=confirm("Voulez-vous poursuivre? "); (suite==true)? alert("J'en suis heureux") : alert("C'est dommage");
Avec un espace entre les deux mots...
Pour manipuler un objet (et non un tableau!).
var tabProprietes = new Array(); var i = 0; for (var propriete in document) { tabProprietes[i] = propriete; i++; }
Test: Exercices/3.for_in_document.html
Retourner le résultat d'une fonction. Si la fonction n'a rien à renvoyer, la valeur undefined sera retournée.
méthode du prototypage:
function voiture (propMarque, propModele, propAnnee) { this.marque=propMarque; this.modele=propModele; this.annee=propAnnee; } var mavoiture=new voiture("Peugeot","307","2007"); alert("Voici les caractéristiques de mon objet voiture :" + "\n la marque : " + mavoiture.marque + "\n le modèle : " + mavoiture.modele + "\n l'année: " + mavoiture.annee);
Test: Exercices/8.creer_objet_prototype.html
Trois méthodes pour créér des évènements:
<script language="javascript"> function MaFonction() alert("Ceci est ma première fonction"); </script> <input type="submit" name="Submit" value="Fonctionner" onClick="MaFonction()" />
window.OnLoad=alert("Cette fenêtre s'affiche au moment du chargement de la page");
Troisième méthode: l'enregistrement de gestionnaire d'évènement:
Appel de la méthode addEventListener() pour un élément particulier. Trois arguments:
1. nom du type d'évènement, sans le "on" (ex.: click pour onClick)
2. fonction gestionnaire
3. booleen (false, gestionnaire normal)
Le mot clé this se réfère à l'élément sur lequel l'évènement est survenu. Pour la troisième méthode, on préfèrera la propriété currentTarget de l'objet Event qui est passé à la fonction gestionnaire.
function getEventTrigger(event) { var x=event.currentTarget; alert("The id of the triggered element: " + x.id); } document.getElementById('p3').addEventListener('mousedown', getEventTrigger, false);
Ressource:
http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load
http://www.w3schools.com/jsref/dom_obj_event.asp
http://www.w3schools.com/html5/html5_ref_eventattributes.asp
Exemple: Exercices/5.formulaire_reservation.html
Ressource:
http://www.w3schools.com/jsref/obj_window.asp
Exercice: afficher les propriétés de la fenetre.
Solution: Exercices/6.objet_window.html
Ressource:
http://www.w3schools.com/jsref/dom_obj_document.asp
Exercice: afficher les propriétés du document.
Solution: Exercices/7.objet_document.html
Ressource:
http://www.w3schools.com/jsref/jsref_obj_string.asp
Exercice: afficher la propriété longueur et utiliser les méthodes courantes.
Solution: Exercices/9.objet_string.html
getter: fonctions qui commencent par get*
setter: fonctions qui commencent par set*
conversion: fonctions qui commencent par to*
Ressource:
http://www.w3schools.com/jsref/jsref_obj_date.asp
Exercice: afficher la date du jour en français; calculer un intervalle de temps; executer une fonction à intervalle régulier
Solution: Exercices/10.objet_date.html
Ressource:
http://www.w3schools.com/jsref/jsref_obj_array.asp
Exercice: afficher la propriété longueur et utiliser les méthodes courantes.
Solution: Exercices/11.objet_array.html
Ressource:
http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.w3schools.com/jsref/dom_obj_all.asp
Exercice: afficher les dimensions; créér un effet rollover; utiliser appendChild() et removeChild() pour afficher une image dynamiquement.
Solution: Exercices/12.objet_image.html
var patt=new RegExp(pattern,modifiers); //or more simply: var patt=/pattern/modifiers;
Ressource:
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
Exercice: chercher s'il y a "[*]" dans une chaine
Solution: Exercices/13.objet_regexp.html
Ressource:
http://www.w3schools.com/jsref/jsref_obj_math.asp
Exercice: Loto - utilisation de random(), ceil() et eval().
Solution: Exercices/14.objet_math_loto.html
document.cookie="moncookie=mon nom"; alert(document.cookie) ;
Ressource:
http://www.w3schools.com/js/js_cookies.asp
Effet onmouseover: penser à la pseudo classe CSS :hover
Exercice: Créér un menu déroulant et utiliser la classe :hover
Solution: Exercices/15.css_hover.html