Programmation Web Javascript et JQuery

Dimension: px

Commencer à balayer dès la page:

Download "Programmation Web Javascript et JQuery"

Roland Alarie
il y a 7 ans
Total affichages :

1 Programmation Web Javascript et JQuery Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) / 26

2 Présentation Générale Langage Javascript : Langage de script, interprété par le navigateur. permet de rendre les pages webs plus dynamiques. permet de modifier le code HTML et le code CSS d une page. permet un gestion des événements plus fine que CSS. JQuery : bibliothèque javascript permettant de simplifier la syntaxe. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

3 Présentation Générale Citation (d un illustre inconnu) : Javascript is to Java as Hamster is to Ham. (le javascript est au java ce que le hamster est au jambon). Julien David (A101 - david@lipn.univ-paris13.fr) / 26

4 Écrire du code Javascript Code Javascript Compris entre les balises <script> et </script> à l intérieur du HTML. Les instructions terminent par ; Commentaires : // Commentaire uniligne /* Commentaire multiligne */ Julien David (A101 - david@lipn.univ-paris13.fr) / 26

5 Inclure du code Javascript Trois méthodes : 1 écrire le code directement dans le fichier HTML. 2 écrire le code dans un fichier à part et inclure le code. Dans les deux cas, on utilise la balise script 3 associer une balise à un événement. Jquery Pour inclure la bibliothèque Jquery, on ajoute dans l en-tête du HTML la commande : <script src= jquery min.js > </script> Julien David (A101 - david@lipn.univ-paris13.fr) / 26

6 Affichage avec Javascript Plusieurs instructions alert write innerhtml (on ne l utilisera pas) log Julien David (A101 - david@lipn.univ-paris13.fr) / 26

7 Variables Les variables Déclaration : on ajoute var devant le nom de la variable. le type d une variable : est implicite (pas besoin de déclarer une variable). dépend de la valeur qu on lui affecte (peut varier dans le temps). si une variable n est pas initialisée, elle est égale à undefined Julien David (A101 - david@lipn.univ-paris13.fr) / 26

8 Variables Les types de variables nombres booléens, chaînes de caractères, objet, fonction. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

9 Variables Pour bien coder, on garde les règles habituelles toujours déclarer les variables, avec var, au début du code. toujours initialiser les variables. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

10 Chaînes de caractères La concaténation Il est possible de concaténer des chaînes de caractères entre elles, ou avec des variables. Opérateur : + Attention : symboles et conversion automatique Le symbole + signifie donc addition pour les nombres et concaténation pour les chaînes de caractères. Les symboles -, * et / signifient soustraction, multiplication et division pour les nombres ET pour les chaînes de caractères. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

11 Tableaux Les tableaux en Javascript un tableau associe un entier à une valeur de n importe quel type. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

12 Boucles et conditions Boucles for et while Le principe et la syntaxe sont les même qu en C. if, else if, else, switch Le principe est le même qu en C/C++. La différence (qu on retrouve en PHP) Opérateur supplémentaire : === teste si la valeur et le type sont égaux. On préfèrera utiliser cet opérateur plutôt que ==. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

13 Fonctions Syntaxe function nomfonction(paramètres){ } Particularités on peut définir une fonction sans lui donner de nom, on peut définir une fonction sans déclarer le nombre exact de paramètres. On utilise alors l objet arguments pour récupérer les arguments de la fonction. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

14 Objets Objets En javascript, les objets sont des variables contenant plusieurs valeurs. On ne peut pas définir un objet et réutiliser cette définition. On peut déclarer une variable de type objet et initialiser ses champs. On peut à tout moment ajouter un champ dans un objet. On peut définir une fonction qui joue le rôle de constructeur (qui joue alors le rôle d une définition). Julien David (A101 - david@lipn.univ-paris13.fr) / 26

15 Objets prédéfinis Les objets prédéfinis Window, Screen, Location, History, Navigator, Timing, Cookies. Des objets dépréciés Ne pas utiliser Number, String, Boolean et Object. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

16 Les sélecteurs Accéder à une balise HTML Javascript permet de modifier dynamiquement des zones d une page HTML, Pour cela, on veut pouvoir accéder à des zones spécifiques de la page afin de pouvoir les modifier. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

17 JQuery : les sélecteurs <p id= idpar class= classpar >Je suis un paragraphe.</p> Sélecteurs JQuery La syntaxe est la même qu en css pour désigner les balises, les classes et les identifiants. $( p ) Accède à toutes les balises de type p $(.classpar ) Accède à toutes les balises de classe classpar $( #idpar ) Accède à la balise identifiée par idpar Julien David (A101 - david@lipn.univ-paris13.fr) / 26

18 JQuery : les sélecteurs <p id= idpar class= classpar >Je suis un paragraphe.</p> Accéder à des balises en Javascript document.getelementsbytagname( p ) document.getelementsbyclassname( classpar ) document.getelementbyid( idpar ) Accéder aux même balises en JQuery $( p ) $(.classpar ) $( #idpar ) Julien David (A101 - david@lipn.univ-paris13.fr) / 26

19 JQuery : Getters et Setters Fonctions de Jquery Certaines fonctions en JQuery peuvent : Permettre d accéder à une valeur (la fonction ne prend pas de paramètres) De modifier une valeur (la fonction prend un ou plusieurs paramètres) Julien David (A101 - david@lipn.univ-paris13.fr) / 26

20 JQuery : Getters et Setters Fonctions de Jquery text() Lire/Initialiser le contenu texte d une balise html() Lire/Initialiser le code HTML d une balise css() Lire/Initialiser le code CSS associé à une balise attr() Lire/Initialiser la vleur de l attirbut d une balise Julien David (A101 - david@lipn.univ-paris13.fr) / 26

21 JQuery : Ajout et Suppression Fonctions de Jquery : ajout append() Ajoute du contenu après le contenu d une balise prepend() Ajoute du contenu avant le contenu d une balise after() Ajoute du contenu après une balise before() Ajoute du contenu avant une balise addclass() Ajoute une class à une balise Julien David (A101 - david@lipn.univ-paris13.fr) / 26

22 JQuery : Ajout et Suppressions de balises Fonctions de Jquery : suppression remove() Supprime une balise et son contenu empty() Supprime le contenu d une balise removeclass() Supprime une classe d une balise remove() removeclass() empty() Julien David (A101 - david@lipn.univ-paris13.fr) / 26

23 JQuery : les événements Les événements Pour chaque balise du code HTML, il est possible : de lui associer une fonction à exécuter (callback) pour un évênement donné, mais aussi d associer un callback à exécuter une fois l évênement terminé. Enfin, il est possible de supprimer un callback associé à un évênement (méthode off). Julien David (A101 - david@lipn.univ-paris13.fr) / 26

24 JQuery : les événements Souris Clavier Formulaire Document/Fenêtre click keypress submit ready dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur hover Cette liste n est pas exhaustive. Julien David (A101 - david@lipn.univ-paris13.fr) / 26

25 JQuery : le DOM Fonctions de Jquery : déplacement dans le DOM (non exhaustif) parent() accède à la balise parent de celle selectionnée children() accède aux balises inclues dans celle selectionnée find() accès ciblé aux balises inclues dans celle selectionnée siblings() accède aux balises ayant le même parent que celle selectionnée next() accède aux sibling suivant prev() accède aux sibling précédent Julien David (A101 - david@lipn.univ-paris13.fr) / 26

26 JQuery : les effets Fonctions de Jquery : les effets show() hide() toggle() fadein() fadeout() fadetoggle() slideup() slidedown() slidetoggle() Julien David (A101 - david@lipn.univ-paris13.fr) / 26

Documents pareils

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance