Javascript

1. Javascript Présenté par : M. BetariAmine Blog Personnel : www.abetari.com AnnéeScolaire: 2013 - 2014

2. Sommaire • Javascript : Vue d’ensemble • Syntaxe Javascript • Les fonctions • Les tableaux • Les objets • Les événements • Introduction jQuery

3. Javascript: Vue d’ensemble • Javascript est un langage de script simplifié orienté objet • Javascript permet de rendre un site internet développé en HTML dynamique • Javascript est exécuté par le navigateur du visiteur • Javascript est déterminé par une norme, nommé ECMA-262/ECMAScript

4. Javascript: Vue d’ensemble • Historique • 1995 : inventé par Brendan Eich et développé par Netscape • LiveScript comme première appellation

5. Javascript: Vue d’ensemble • Dans une utilisation web, l’exécution du code PHP se déroule comme suit :

6. Javascript: Vue d’ensemble • Le code Javascript est placé dans une page HTML • Un minimum d’une page HTML

7. Javascript: Vue d’ensemble • Il y a deux méthodes pour insérer du Javascript dans une page web : • Directement dans les balises HTML (événements) • Directement dans le code HTML (<script></script>) • Placer le code dans un fichier séparé <script type="text/javascript" src="script.js"></script>

8. Syntaxe Javascript : Les variables • Déclaration et affectation • Le mot clé var permet de déclarer une ou plusieurs variables • Après la déclaration de la variable, il est possible de lui affecter une valeur //Déclaration de i, de j et de k. vari, j, k; //Affectation de i. i = 1;  //Déclaration et affectation de prix. var prix = 0;  //Déclaration et affectation de caractere var caractere = ["a", "b", "c"];

9. Syntaxe Javascript : Les variables • Déclaration des variables • On ne peut pas donner qu’on veut à nos variables • Le nom de variable peut contenir des lettres en minuscules et en majuscules, des chiffres ainsi que le underscore • Le nom ne doit pas commencer par un chiffre • Il existe des mots prédéfinies comme : break, case, char…. • Le type d’une variable dépend de la valeur stockée dans cette variable

10. Syntaxe Javascript : Les variables • Déclaration des variables (chaine de caractères) • Caractères spéciaux et échappement // deux chaines de caracteres var message1 = 'Une chaine de caracteres'; var message2 = "C'est une chaine de caracteres "; // maintenant, on les affiche alert(message1); alert(message2); // deux chaines de caracteres var message1 = "Ceci est un \" petit \" test"; var message2 = "Ceci est un \n petit \test"; // maintenant, on les affiche alert(message1); alert(message2);

11. Syntaxe Javascript : Les variables • Les opérations sur les chaînes • La concaténation var chaine = « Salam » + «  alikem »; • Déterminer la longueur d’une chaîne : chaine.length; • Identifier le nième caractère d’une chaîne : chaine.charAt(index); • Extraction d’une chaine de carcatèrechaine.substring(start,end);

12. Syntaxe Javascript : Les variables • Déclaration des variables (Les nombres) • Les nombres entiers • Les nombres à virgule // var nombre = 1.234; alert(nombre); // on demande les nombres var nombre1 = prompt('Premier nombre ?'); var nombre2 = prompt('Deuxieme nombre ?'); // on calcule le quotient et on l'affiche var resultat = nombre1 / nombre2; alert("Le quotient de ces deux nombres est " + resultat);

13. Syntaxe Javascript: Les fonctions • Voici une liste des fonctions prédéfinies • decodeURI() • encodeURI() • eval() • isFinite() • isNaN() • parseFloat() • parseInt() • Prompt() • Alert() • Confirm() • . ….

14. Syntaxe Javascript: Les fonctions • Il est parfois utile de regrouper un certain nombre d’instructions dans un bloc réutilisable plusieurs fois • Une fonction peut renvoyer un résultat et utiliser des paramètres functionnom_de_la_fonction(liste de paramètres) {   instruction 1;   instruction 2;   ......   return résultat; } // Appel de la fonction nom_de_la_fonction();

15. Syntaxe Javascript: Les fonctions • Portée des variables • Variable locale • Variable globale function essai() { var variable = 'Bonjour'; alert(variable ); } essai(); alert(variable); // Erreur variable is not defined var variable ; function essai() { variable = 'Bonjour'; } essai(); alert(variable); // OK

16. Syntaxe Javascript: Les fonctions var MaVar1 = 8; var MaVar2 = 12; functionTesterVar() { MaVar1 = 12 var MaVar2 = 15; document.write("Dans la fonction<BR>"); document.write("MaVar1 = " + MaVar1 + "<BR>"); document.write("MaVar2 = " + MaVar2 + "<BR>"); } document.write("Avant l'appel à la fonction<BR>"); document.write("MaVar1 = " + MaVar1 + "<BR>"); document.write("MaVar2 = " + MaVar2 + "<BR>"); TesterVar(); document.write("Après l'appel à la fonction<BR>"); document.write("MaVar1 = " + MaVar1 + "<BR>"); document.write(" MaVar2 = " + MaVar2 + « <BR>"); • Exemple

17. Syntaxe Javascript: Opérateurs et conditions • Opérateurs de comparaison • Ces deux opérateurs fonctionnent aussi pour les chaines de caractères • == : si les deux valeurs sont égales • != : si les deux valeurs sont différentes • a < b / a > b / a <= b / a >= b ( pour les valeurs numériques) • ET (&&)/ OU (||) • Les conditions if(condition_vrai) // execution d’un bloc d’instructions { alert("La condition est vrai"); } else { alert("la condition est fausse }

18. Syntaxe Javascript: Opérateurs et conditions var nom = prompt("Entrez un nom d'animal"); switch(nom) { case "chat": alert("1"); break; case "pingouin" : alert(« 2"); break; default : alert("Je n'ai rien à te dire..."); } • Les conditions

19. Syntaxe Javascript: Opérateurs et conditions switch(ma_var) { var egal_deux = 2 case 1 : alert("Ma variable vaut 1"); break; case egal_deux : alert("Ma variable vaut 2"); break; default : alert("Ma variable vaut autre chose que 1 ou 2"); } • Les conditions

20. Syntaxe Javascript: Les boucles var i; i = 0; // initialisation while(i < 10) // condition { alert(i); // action i++; // incrementation } • Les boucles for(initialisation ; condition ; incrementation) { instructions } do { instructions } while(condition);

21. TP 1/3 • Créer un fichier html (formation.html) • Mettre une structure html de base • Créer un fichier scripts.js • Faire un appel du fichier à partir de la page HTML • Reprendre les exemples des slides

22. TP 2/3 • Ecrire un programme qui permet d’échanger deux valeurs entiers • Ecrire le même programme sans passer par une variables temporaire • Ecrire une fonction qui demande de taper deux valeurs(largeur et longueur) et affiche la surface du rectangle • Ecrire une fonction qui calcule la somme des entiers de 1 à n, la fonction doit retourner une valeur.

23. TP 3/3 • Ecrire une fonction qui permet de déterminer le jour de la semaine. • Pensez à la classe Date // D = new Date(); • Utiliser des (if…else) • Même programme avec l’utilisation du switch

24. Syntaxe Javascript :Les Tableaux • JavaScript propose une structure de données permettant de stocker l’ensemble de ces données dans une variables commune. • Un tableau est une variable pouvant contenir plusieurs données indépendantes • Tableaux unidimensionnels • Tableaux multidimensionnels • Tableaux associatifs • La première case portera le numéro 0 et la énième case le numéro n-1

25. Syntaxe Javascript :Les Tableaux • Créer un tableau • JavaScript fournit plusieurs façons de créer un tableau // Déclaration et affectation var MonTableau1= ["donnée 1", "donnée 2", "donnée 3", "donnée 4"]; var MonTableau2 = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4"); // Déclaration var tab1 = new Array(); var tab2 = []; // Affectation des valeurs tab1[0] = "Ensao";

26. Syntaxe Javascript :Les Tableaux • Lire et modifier une valeur • Pour accéder à un élément, on utilise tableau[indice] // Déclaration et affectation var table= ["esto", "ensao", "encgo"]; alert("La seconde case vaut : " + table[1]); // on lit l'element d'indice 1 table[1] = "ista"; // on le modifie table[3] = "faculté"; // on cree un nouvel element // Déclaration var tab1 = new Array(); var tab2 = []; // Affectation des valeurs tab1[0] = "Ensao";

27. Syntaxe Javascript :Les Tableaux • Tableau associatif • Pour les tableaux associatif , on crée un tableau vide, et on associe manuellement une par une toutes les valeurs • On utilise une chaîne de caractères en tant qu’indice // Déclaration et affectation var scores = new Array(); scores["Toto"] = 142; scores["Pierre"] = 137;

28. Syntaxe Javascript :Les Tableaux • Quelques fonctions • Pour un tableau nommé tableau: tableau.length • tableau.sort(); • …. • TP sur les tableaux : http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript/exploiter-un-tableau-1

29. Syntaxe Javascript :Les Objets • Se sont soit des entités prédéfinies du langage, soit créé par le programmeur • On trouve deux type d’objets : • Objets du navigateur • Objets créés par le programmeur

30. Syntaxe Javascript :Les Objets • Construction des objets • var objet = new Classe(); • Utilisation des objets • objet.propriete() • objet.methode() • Classes d’objets prédéfinis • Math / String / Date / Image / RegExp / …

31. Syntaxe Javascript :Les Objets • Classes d’objets prédéfinis • x = Math .abs(-3.26); • x = Math.ceil(3.89); • x = Math.round(6.01); • d = new Date(); • d.getDate(); • Plus en détail : http://www.toutjavascript.com/reference/reference.php

32. Syntaxe Javascript :Les Objets • JavaScript traite les éléments qui s’affichent dans votre navigateur comme des objets. • Classés selon une hiérarchie pour pouvoir les désigner • Auxquels des propriétés sont associées • JavaScript divise la page du navigateur en objets, afin de permettre d’accéder à n’importe lequel d’entre eux et de pouvoir les manipuler par leurs propriétés

33. Syntaxe Javascript :Les Objets

34. Syntaxe Javascript :Les Objets • L’objet le plus haut dans la hiérarchie est windowqui correspond à la fenêtre même du navigateur. • L’objet document est un sous-objet de window. Cet objet représente la page HTML affichée dans le navigateur.

35. Syntaxe Javascript :Les Objets • Il est possible d’atteindre tous les éléments de la page HTML avec ces deux méthode de l’objet document • document.getElementById("id") • document.getElementsByTagName("balise") • document.getElementsByName("name")

36. Syntaxe Javascript :Les Evénements • Les événements sont des actions de l’utilisateur, qui vont donner lieu à une interactivité. • Grâce au JavaScript il est possible d’associer des fonctions à des événements tels que le passage de la souris au-dessus d’une zone par exemple • Ce sont les gestionnaires d’événements qui permettent d’associer une action à un événement

37. Syntaxe Javascript :Les Evénements • Événements page et fenêtre • onabort : s’il y a une interruption dans le chargement • onerreur : en cas d’erreur durant le chargement de la page • onload : après la fin du chargement de la page • onresize : quand la fenêtre est redimensionnée • ….. <body onload = "alert('salam')"> <body onresize= " alert('tu es entrain de redimensionner la page' ">

38. Syntaxe Javascript :Les Evénements • Événements souris • onclick : sur un simple click • onmousedown: lorsque le button de la souris est enfoncé • onmousemove: lorsque la souris est déplacée • onmouseover: lorsque la souris est sur l’element • ….. • Événements clavier • onkeydown : lorsqu’une touche est enfoncée • onkeypress : lorqu’une touche est pressé et relâchée • onkeyup : lorsqu’une touche est relâchée

39. Syntaxe Javascript :Les Evénements • Événements formulaire • onchange : à la perte du focus si la valeur a changé • onselect : quand du texte est sélectionné • onsubmit : quand le formulaire est validé (via un button de type « submit ») • onfocus : lorsque l’élément prend le focus (devient actif) • onreset : lors de la remise à zéro du formulaire

40. Syntaxe Javascript :Les Evénements • Il existe un cas où accéder à un élément est simple : c’est lorsque le code se trouve dans la balise HTML. On utilise dans ce cas le mot-clé thisqui désigne cet élément <select name="color" onchange="color(this.value)"> <option value="white">White</option> <option value="black">Black</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="gray">Gray</option> </select>

41. TP 1/3 • Créer un tableau qui contient les éléments suivants : • esto/ensao/encgo • var table = ["esto", "ensao", "encgo"]; • Créer une fonction qui prend en paramètre le tableau crée et affiche sont contenu de cette façon :

42. TP 2/3 • Créer une page HTML contient un formulaire avec une liste déroulante. • La liste contient des couleurs • La couleur du background de la page par défaut est le blan • Le choix d’une valeur de la liste change le background de la page

43. TP 3/3 • Créer un formulaire comme ci-dessous: • Afficher les informations saisies par l’utilisateur dans une boite de dialogue « alert », puis dans une autre page HTML.

44. jQuery : Introduction • jQuery est une bibliothèque JavaScript gratuite, ayant une syntaxe courte et compatible avec tous les navigateurs courants. • jQuery permet de traverser et manipuler très facilement l’arbre DOM des pages web • jQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. • jQuery permet de gérer les événements JavaScript • jQuery permet de faire des requêtes AJAX

45. jQuery : Introduction • jQuery est une simple bibliothèque à importer • Disponible sur le site : http://code.jquery.com/ • <script type="text/javascript" src="jqueryr.js"></script> • Ou Directement sur Google code • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> • jQuery n’est pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à d’autres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Dojo

46. jQuery : Rappel sur le DOM

47. jQuery : Exemple <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#contenu').html('Hello World'); }); </script> </head> <body> <div id="contenu">Salut tout le monde !</div> </body> </html>

48. jQuery : Fonction principale • Toute jQuery repose autour d’une fonction : jQuery() ( abrégée $() car le dollar est un caractère autorisé pour les noms de fonctions en Javascript) qui permettra de sélectionner des éléments dans votre page web. • Cette fonction accepte des paramètres et retourne un objet • jQuery() ou $() • Elle accepte des sélecteurs en argument

49. jQuery : Les sélecteurs • Sélecteurs CSS

50. jQuery : Les sélecteurs