La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Javascript Présenté par : M. BETARI Amine Blog Personnel : www.abetari.com Année Scolaire: 2013 - 2014.

Présentations similaires


Présentation au sujet: "1 Javascript Présenté par : M. BETARI Amine Blog Personnel : www.abetari.com Année Scolaire: 2013 - 2014."— Transcription de la présentation:

1 1 Javascript Présenté par : M. BETARI Amine Blog Personnel : Année Scolaire:

2 Sommaire Javascript : Vue densemble Syntaxe Javascript Les fonctions Les tableaux Les objets Les événements Introduction jQuery 2

3 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 3 Javascript: Vue densemble

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

5 Dans une utilisation web, lexécution du code PHP se déroule comme suit : 5 Javascript : Vue densemble

6 Le code Javascript est placé dans une page HTML Un minimum dune page HTML 6 Javascript : Vue densemble

7 Il y a deux méthodes pour insérer du Javascript dans une page web : 1. Directement dans les balises HTML (événements) 2. Directement dans le code HTML ( ) 3. Placer le code dans un fichier séparé 7 Javascript : Vue densemble

8 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 8 Syntaxe Javascript : Les variables //Déclaration de i, de j et de k. var i, 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 Déclaration des variables On ne peut pas donner quon 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 dune variable dépend de la valeur stockée dans cette variable 9 Syntaxe Javascript : Les variables

10 Déclaration des variables (chaine de caractères) Caractères spéciaux et échappement 10 Syntaxe Javascript : Les variables // 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 Les opérations sur les chaînes La concaténation var chaine = « Salam » + « alikem »; Déterminer la longueur dune chaîne : chaine.length; Identifier le nième caractère dune chaîne : chaine.charAt(index); Extraction dune chaine de carcatère chaine.substring(start,end); 11 Syntaxe Javascript : Les variables

12 Déclaration des variables (Les nombres) Les nombres entiers Les nombres à virgule 12 Syntaxe Javascript : Les variables // 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); // var nombre = 1.234; alert(nombre);

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

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

15 Portée des variables Variable locale Variable globale 15 Syntaxe Javascript: Les fonctions 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 Exemple 16 Syntaxe Javascript: Les fonctions var MaVar1 = 8; var MaVar2 = 12; function TesterVar() { MaVar1 = 12 var MaVar2 = 15; document.write("Dans la fonction "); document.write("MaVar1 = " + MaVar1 + " "); document.write("MaVar2 = " + MaVar2 + " "); } document.write("Avant l'appel à la fonction "); document.write("MaVar1 = " + MaVar1 + " "); document.write("MaVar2 = " + MaVar2 + " "); TesterVar(); document.write("Après l'appel à la fonction "); document.write("MaVar1 = " + MaVar1 + " "); document.write(" MaVar2 = " + MaVar2 + « ");

17 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 ( pour les valeurs numériques) ET (&&)/ OU (||) Les conditions 17 Syntaxe Javascript: Opérateurs et conditions if(condition_vrai) // execution dun bloc dinstructions { alert("La condition est vrai"); } else { alert("la condition est fausse }

18 Les conditions 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..."); }

19 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"); }

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

21 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 21 TP 1/3

22 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. 22 TP 2/3

23 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 lutilisation du switch 23 TP 3/3

24 JavaScript propose une structure de données permettant de stocker lensemble 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 24 Syntaxe Javascript :Les Tableaux

25 Créer un tableau JavaScript fournit plusieurs façons de créer un tableau 25 Syntaxe Javascript :Les Tableaux // 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 Lire et modifier une valeur Pour accéder à un élément, on utilise tableau[indice] 26 Syntaxe Javascript :Les Tableaux // 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 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 quindice 27 Syntaxe Javascript :Les Tableaux // Déclaration et affectation var scores = new Array(); scores["Toto"] = 142; scores["Pierre"] = 137;

28 Quelques fonctions Pour un tableau nommé tableau: tableau.length tableau.sort(); …. TP sur les tableaux : le-javascript/exploiter-un-tableau-1 28 Syntaxe Javascript :Les Tableaux

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

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

31 Classes dobjets 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 : 31 Syntaxe Javascript :Les Objets

32 JavaScript traite les éléments qui saffichent 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 daccéder à nimporte lequel dentre eux et de pouvoir les manipuler par leurs propriétés 32 Syntaxe Javascript :Les Objets

33 33 Syntaxe Javascript :Les Objets

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

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

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

37 Événements page et fenêtre onabort : sil y a une interruption dans le chargement onerreur : en cas derreur durant le chargement de la page onload : après la fin du chargement de la page onresize : quand la fenêtre est redimensionnée ….. 37 Syntaxe Javascript :Les Evénements

38 É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 lelement ….. Événements clavier onkeydown : lorsquune touche est enfoncée onkeypress : lorquune touche est pressé et relâchée onkeyup : lorsquune touche est relâchée 38 Syntaxe Javascript :Les Evénements

39 É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 39 Syntaxe Javascript :Les Evénements

40 Il existe un cas où accéder à un élément est simple : cest lorsque le code se trouve dans la balise HTML. On utilise dans ce cas le mot-clé this qui désigne cet élément 40 Syntaxe Javascript :Les Evénements White Black Red Orange Yellow Gray

41 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 : 41 TP 1/3

42 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 dune valeur de la liste change le background de la page 42 TP 2/3

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

44 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 larbre 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 44 jQuery : Introduction

45 jQuery est une simple bibliothèque à importer Disponible sur le site : Ou Directement sur Google code jQuery nest pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à dautres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Dojo 45 jQuery : Introduction

46 46 jQuery : Rappel sur le DOM

47 47 jQuery : Exemple Titre de la page $(function(){ $('#contenu').html('Hello World'); }); Salut tout le monde !

48 Toute jQuery repose autour dune 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 48 jQuery : Fonction principale

49 Sélecteurs CSS 49 jQuery : Les sélecteurs ExpressionRetour #titreLa balise ayant pour id « titre » h1Les balises h1.classLes balises qui ont la classe « class » a, h1, h2Les balises a,h1 et h2 *Toutes les balises elem[attr]Balises elem dont lattribut « attr » est spécifié elem[attr="val"] Balises elem dont l'attribut "attr" est à la valeur val. elem bal Balises bal contenues dans une balise elem.

50 50 jQuery : Les sélecteurs ExpressionRetour elem > bal Balises bal directement descendantes de balises elem. elem + bal Balises bal immédiatement précédées d'une balise elem.

51 Sélecteurs spécifiques jQuery 51 jQuery : Les sélecteurs ExpressionRetour :hidden Éléments invisibles, cachés. :visibleÉléments visibles. :parent Éléments qui ont des éléments enfants. :header Balises de titres : h1, h2, h3, h4, h5 et h6. :contains(t) Éléments qui contiennent du texte t. :empty Éléments dont le contenu est vide.

52 52 jQuery : Les sélecteurs ExpressionRetour :first Le premier élément (équivaut à :eq(0)). :lastLe dernier élément

53 53 jQuery : Les sélecteurs Titre de la page 1: 2: Salam Alikem 3: 4: 5: 6: Genie Informatique 7:

54 54 jQuery : Les sélecteurs ExpressionNuméros des éléments sélectionés #premier_text 1 #premier_texte.texte2 span + img3 p1 et 4 p[class]rien p[id]1 img:visible3 et 5 :hidden7 p:contains('Salam')1

55 Les méthodes sappliquent généralement à tous les éléments sélectionnés $(.classe).hide() $(.classe).show() Parcourir le DOM : $(.classe).parent(), $(.classe).next() $(.classe).children(), $(.classe).parents() Ajouter ou retirer des classes CSS : addClass, removeClass Manipuler : append, wrap, prepend 55 jQuery : Fonctions utiles

56 Exemples 56 jQuery : Fonctions utiles Titre de la page $(function(){ alert($('#div').html()); $('#div').html('Salam'); }); Bonjour

57 Exemples 57 jQuery : Fonctions utiles Titre de la page $(function(){ $('#div').append(' les ingénieurs ') }); Bonjour Disparition

58 58 jQuery : Fonctions utiles Titre de la page $(function(){ $('p').before('Avant la balise p '); $('textarea').after(' Veuillez ne pas poster de commentaires '); }); First paragraphe Second paragraphe

59 La méthode css() : permet dobtenir la valeur dune propriété de style, il est aussi possible avec cette méthode de définir ou modifier un propriété de style, il suffit de passer un 2eme paramètre à la méthode.css(propertyName).css(propertyName, value).css(properties) 59 jQuery : Fonctions utiles

60 La méthode html() : permet de remplacer le contenu dun élément ou le récupérer La méthode text() : permet de manipuler le contenu comme du texte La méthode wrap() permet denvelopper nimporte quel élément entre deux balises. 60 jQuery : Fonctions utiles Salut tout le monde $('#premier').text(); // Renvoie salut tout le monde $('#premier').html(); // Renvoie la balise $(.texte').wrap( );

61 La méthode wrapAll() est pareille à wrap() sauf que wrap() enveloppe chaque élément un par un, alors que wrapAll() enveloppe tous les éléments dun coup 61 jQuery : Fonctions utiles

62 Il est possible dans jQuery de créer sa propre fonction : 62 jQuery : créer sa propre fonction Titre de la page $(function(){ fonctionJs = function() { alert(fonction'); }; });

63 63 jQuery : Les événements Titre de la page $(function(){ $("select").change(function(){ alert(text); }); }); A B

64 64 jQuery : Les événements Titre de la page $(function(){ $("a").click(function(){ alert($(this).attr('href'));return false; }); Blog

65 65 jQuery : Les événements Titre de la page $(document).keyup(function(touche){ // on écoute l'évènement keyup() var appui = touche.which || touche.keyCode; if(appui == 13){ alert('Vous venez d\'appuyer sur la touche Entrée !'); } });

66 Mettre le code du dernier slide dans une page HTML Ajouter un button/lien, après le clique : Enlever les liens; Voir le code dans une boite de dialogue Transformer les liens en buttons Regrouper les buttons dans un bloc (div) Colorer le texte ( se baser sur les classe existent déjà) Vider la page HTML 66 jQuery : Tp 1/3

67 Reprendre les exemples des slides Reprendre le TP de la création dune page HTML qui contient une liste déroulante et à chaque changement dune valeur de la liste, la couleur de la page se change. Utilisez jQuery !! 67 jQuery : Tp 2/3

68 68 jQuery : Tp 3/3 Créer une page HTML qui a comme affichage : Au clic sur un div, on affiche : Pensez à.css()

69 69 jQuery : Annexe Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam facilisis ultrices dolor, eu fermentum eros aliquet ac. Aenean varius ultrices nisi vel aliquet. Nam eu viverra sem. Fusce facilisis eros ac elit scelerisque molestie. Morbi lacus orci, interdum ac faucibus hendrerit, facilisis vel nunc. Sed in mauris lorem. Integer facilisis, augue et suscipit molestie, lectus lectus pellentesque mi, at condimentum nulla nibh ut turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis nisl metus. Phasellus ullamcorper posuere augue quis placerat. Duis sed quam odio. Donec aliquam metus a ligula lacinia a tempor leo imperdiet. Cras augue purus, lobortis eu scelerisque sed, venenatis ut turpis. Donec quis magna sapien. Ut ut diam arcu. Suspendisse nec risus id lacus venenatis rhoncus. In vitae justo tellus, vitae lacinia nunc. Aliquam erat volutpat.


Télécharger ppt "1 Javascript Présenté par : M. BETARI Amine Blog Personnel : www.abetari.com Année Scolaire: 2013 - 2014."

Présentations similaires


Annonces Google