Support de cours / JavaScript – Jquery – Ajax

37 Pages·2016·1.74 MB·French

SUPPORT DE COURS JAVASCRIPT / JQUERY / AJAX

Sommaire
 Sommaire .............................................. 1  Les fonctions ........................................ 16
 Présentation .......................................... 2 Définition .................................................................. 16
Qu’est ce que le Javascript ? ....................................... 2 Les fonctions prédéfinies........................................... 16
Historique ................................................................... 2 les fonctions utilisateur ............................................. 17
Arrivée de JQuery ........................................................ 3 les fonctions et la portée des variables ..................... 18
 Mes premiers mots en Javascript ........... 4  Les tableaux de données (Arrays) ......... 20
Où écrire du code Javascript ? .................................... 4 Définition .................................................................. 20
Les outils pour pratiquer ............................................. 5 Syntaxe et utilisation ................................................ 20
Syntaxe et affichages.................................................. 5  Les Objets ............................................ 23
Les commentaires ....................................................... 6 Définition .................................................................. 23
 Les variables .......................................... 7 syntaxe ...................................................................... 23
Définition .................................................................... 7 le mot clé « this » ...................................................... 24
Déclaration et Affectation .......................................... 7 parcourir un objet avec la boucle for ........................ 25
Les portées des variables ............................................ 8 Ce qu’il faut retenir sur les objets ............................. 25
Les types de variables ................................................. 8  Le DOM (Document Object Model) ....... 27
 Les structures conditionnelles ................ 9 definition ................................................................... 27
Définition .................................................................... 9 utilisation du DOM .................................................... 27
Syntaxe des conditions IF, ELSE IF, ELSE ..................... 9  JQuery : write less do more .................. 29
Les opérateurs de comparaison................................ 10 les selecteurs jquery .................................................. 29
Les opérateurs logiques ............................................ 11 les événements jquery .............................................. 30
Syntaxe des conditions de choix SWITCH ................. 13 les fonctions jquery ................................................... 31
 Structure itérative : les boucles ............ 14  Les Plugins JQuery ................................ 33
Définition .................................................................. 14 documentation ......................................................... 33
La boucle FOR ........................................................... 14 installation ................................................................ 34
La boucle WHILE ....................................................... 15 utilisation et parametrage ........................................ 34
La boucle DO WHILE ................................................. 15  Divers .................................................. 36
les shim et les polyfill ................................................ 36
degradation progressive………………………………...……….36

www.evogue.fr
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

 Présentation
QQUU’’EESSTT CCEE QQUUEE LLEE JJAAVVAASSCCRRIIPPTT ??

Javascript est un langage de programmation qui permet d’animer et de dynamiser des pages Web. A
ne surtout pas confondre avec le Java qui est un autre langage informatique.
Javascript est surtout utilisé côté client, c'est-à-dire que c’est le navigateur qui lit et interprète le
code que l’on écrit en Javascript (voir l’architecture client / serveur pour plus de détails). Même si
Javascript est connu pour le Web, il peut être utilisé pour créer d’autres applications. Tom Tom en
est un exemple.
HHIISSTTOORRIIQQUUEE
1995 est l’année qui marque le début de l'histoire du Javascript.
Il y a 20 ans, le leader sur le monde du Web était la société Netscape Communications avec son
navigateur Web Netscape Navigator qui était utilisé par plus de 90% des internautes. Le tout premier
navigateur Web s'appelait Mosaïc et vient aussi de la société Netscape.
A l’époque, Netscape est partenaire d'une société informatique du nom de Sun Microsystems, un
fabricant d’ordinateurs et éditeur de logiciels dont la réputation n’est plus à faire auprès des
professionnels.

Sun développa un langage informatique performant appelé JAVA. Encore
très utilisé aujourd’hui par de nombreux systèmes, ce langage est
destiné exclusivement à la conception de logiciels. Ce qui le rendait trop
puissant et compliqué pour une utilisation au sein d’applications Web.
Ayant flairé ce nouvel eldorado virtuel, Sun et Netscape décidèrent de
créer un langage exclusivement réservé au Web. Un langage moins
puissant que le JAVA mais beaucoup plus simple d'utilisation, ce qui le
rendrait très accessible à qui veut l'apprendre.
Cette mission fût confiée à Brendan EICH, génie technique qui rejoint
l'équipe de Netscape en avril 1995.

Brendan EICH

Il avait 10 jours pour créer un langage qui s'adapterait à la nouvelle version du navigateur Netscape.
Ce langage fût baptisé Livescript.
© Tous droits réservés – Ziad JAAGOUB Page 2 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

Le Livescript était un langage révolutionnaire qui donna naissance aux premières pages web
dynamiques.

Par soucis marketing et voulant profiter de la notoriété de son partenaire Sun autour du langage
Java, Netscape décide de renommer Livescript en Javascript durant la même année. Ainsi les clients
feraient le lien entre Java de Sun et Javascript.

Netscape soumet Javascript à ECMA International (European association for standardizing
information and communication systems) pour une standardisation de son langage. ECMA est une
organisation active de standardisation dans le monde informatique, similaire au W3C pour le HTML.
AARRRRIIVVEEEE DDEE JJQQUUEERRYY

JQuery est ce qu'on appel une bibliothèque ou une API (application programming interface)
Javascript, c'est à dire un ensemble de fonctions qui permettent d'écrire de manière condensée, les
lignes de codes les plus utilisées en Javascript.
Exemple : nous allons souvent utiliser les fonctions Javascript qui permettent d'attraper les balises
HTML et les animer, ainsi en Javascript nous allons écrire d'une certaine manière et en JQuery d'une
manière plus condensée.

Javascript : document.getElementsByTagName("LI")[0].innerHTML="Lait";
JQuery : $("LI:first").text("Lait");

Les deux codes font donc la même chose mais ne s’écrivent pas de la même
façon.

La version 1.0 stable de JQuery a été crée en aout 2006 par un jeune
homme de 22 ans du nom de John RESIG. Aujourd’hui nous en sommes à la
John RESIG
1.11.

© Tous droits réservés – Ziad JAAGOUB Page 3 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

 Mes premiers mots en Javascript
OOUU EECCRRIIRREE DDUU CCOODDEE JJAAVVAASSCCRRIIPPTT ??
Il est possible d’écrire du code JS à deux endroits :
Soit dans un fichier .js puis en l’appelant dans notre fichier HTML comme on le ferait avec un fichier
style.css

Soit directement dans notre fichier HTML entre deux balises <script></script>

Il n’est plus nécessaire d’indiquer le « type = ‘text/javascript’ » sous HTML 5. Mais cet attribut est
obligatoire pour HTML 4 et versions antérieures.

© Tous droits réservés – Ziad JAAGOUB Page 4 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

LLEESS OOUUTTIILLSS PPOOUURR PPRRAATTIIQQUUEERR
Pour commencer à coder en JS, les seules applications dont nous avons besoin sont :
- Un éditeur de texte (Notepad ++ fera l’affaire)
- Un navigateur (Firefox est recommandé)
- Le module Firebug pour Firefox (pour voir notre code source dans le navigateur)
- Le module Web Developer pour Firefox (nous indique les erreurs JS)
SSYYNNTTAAXXEE EETT AAFFFFIICCHHAAGGEESS
Note importante : Le Javascript est sensible à la casse

Exemples :
<script type= « text/javascript »> alert(‘Bonjour’);</script>

La fonction d’affichage alert(), permet d’écrire dans une boîte de dialogue,
Ouverture de la balise <script> pour écrire du JS,
Message affiché en QUOTES ou GUILLEMETS
Une instruction JS se terminera TOUJOURS par un point virgule,
Fermeture de la balise </script>

<script type="text/javascript"> confirm('Tu commences le JS');</script>
Cette fonction affiche une boîte de dialogue avec le bouton « OK »

<script type="text/javascript"> prompt('Quel âge as-tu ?');</script>
Affiche une boîte de dialogue avec une question et un champ pour remplir la réponse

<script type="text/javascript"> console.log('Voici la console');</script>
Affiche le message dans une console

© Tous droits réservés – Ziad JAAGOUB Page 5 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

LLEESS CCOOMMMMEENNTTAAIIRREESS
Il est possible d’écrire des commentaires dans notre code JS, les commentaires sont des lignes qui ne
seront pas interprétées. Elles servent uniquement à aider le développeur à se repérez et
éventuellement informer ses collègues de ce qu’il a fait. Autrement dit, documenter le code.

// mon commentaire
Le double slash permet d’écrire des commentaires sur une seule ligne

/* mes commentaires
sur plusieurs lignes */
Les commentaires sur plusieurs lignes s’écrivent entre slash étoiles. Comme en CSS

© Tous droits réservés – Ziad JAAGOUB Page 6 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

 Les variables
DDEEFFIINNIITTIIOONN
« Emplacement de stockage nommé qui peut contenir des données pouvant être modifiées pendant
l'exécution du script. Chaque variable a un nom qui l'identifie de façon unique à l'intérieur de son
niveau de portée. »
Plus simplement, une variable est une zone en mémoire du système, qui sert à conserver une valeur.

Les variables sont des sortes de boîtes dans lesquelles on stock des données.
Une fois les données stockées dans cette variable, nous pouvons manipuler le contenu de cette
variable, le contenu est appelé la « valeur ».
DDEECCLLAARRAATTIIOONN EETT AAFFFFEECCTTAATTIIOONN
Exemple :
var maBoite = 'Salut toi !';
alert(maBoite); // Affichera son contenu DONC 'Salut toi !'

Pour déclarer une variable on utilise le mot clé « var ».
Le signe « = » permet d’affecter la variable d’une valeur. Ainsi chaque fois que l’on manipulera une
variable cela veut dire que l’on manipule son contenu, donc sa valeur.
Pour faire comprendre à notre machine que l’on utilise une variable et non du texte brut on écrit la
variable sans quottes ni guillemets.
Exemple :
var monMessage= 'Coucou !';
alert(monMessage); // Affichera son contenu DONC 'Coucou !'
alert('monMessage'); // Affichera 'monMessage' car se trouve entre quottes

Nous pouvons stocker plusieurs sortes de données dans les variables
var monPrenom = "Pierre";
alert(monPrenom) ; // affichera Pierre
var monAge = 27; //les chiffres ne prennent pas de quottes
var monAge = prompt('Quel âge as-tu ?'); // Ici j’affecte la valeur que
l’internaute rentrera dans le champ généré par prompt
var monPrenom = "Marie"; // Ici Marie prendra la place de Pierre dans la
variable
alert(monPrenom) ; // affichera Marie

© Tous droits réservés – Ziad JAAGOUB Page 7 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

LLEESS PPOORRTTEEEESS DDEESS VVAARRIIAABBLLEESS
Lorsqu’on affecte une variable, nous pouvons manipuler la valeur affectée à cette variable.
Elle nous est donc accessible. Cependant, cette accessibilité dépend de l’endroit où la variable a été
affectée. On parle donc de la portée de la variable.
- Une variable déclarée en dehors de toute fonction peut être utilisée n’importe où dans le
script. On parle alors de VARIABLE GLOBALE.
- Une variable déclarée dans une fonction aura une portée limitée à cette seule fonction, c’est-
à-dire quelle est inutilisable ailleurs. On parle alors de VARIABLE LOCALE.
Pour déclarer une variable à l’intérieur d’une fonction et la rendre GLOBALE donc accessible de
partout dans le script, celle-ci doit être déclarée sans le mot clé var. Exemple :
monMessage = 'Salut' ;

Pour bien comprendre l’utilité de la portée des variables ainsi que leur utilisation, se reporter au
chapitre des fonctions.
LLEESS TTYYPPEESS DDEE VVAARRIIAABBLLEESS
En Javascript comme dans tous les langages de programmation il existe plusieurs types de données.
La fonction typeof() permet d’obtenir le type d’une donnée
Les nombres :
var a = 36 ;
alert(typeof(a)) ; // Affichera « number »
Les nombres simples sont dits « integer » et les nombres à virgule sont dits « float » ou « double ».
On remarquera que lorsqu’on affecte un nombre, on ne met pas de quottes ni de guillemets.

Les chaines de caractères (textes) :
var a = ‘Salut !’ ;
alert(typeof(a)) ; // Affichera « string »
Les chaines de caractères ou textes sont appelés « string ».

Les booléens :
var a = true ;
var b = false ;
Une donnée a toujours une valeur, c'est-à-dire qu’elle est soit VRAIE soit FAUSSE (true ou false).
Si var = 0, sa valeur est considérée comme FALSE,
Si var = 1, ou n’importe quelle autre valeur (‘salut’ ou autre..), sa valeur est considérée comme TRUE.
© Tous droits réservés – Ziad JAAGOUB Page 8 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

 Les structures conditionnelles
DDEEFFIINNIITTIIOONN
Nous appelons structure conditionnelle, la structure qui permet de réaliser une (ou plusieurs)
instruction(s) sous certaines conditions. Elle nécessite l'utilisation des opérateurs de comparaisons et
parfois des opérateurs logiques.
En Javascript, comme dans tout langage de programmation, nous utilisons des conditions.
Mettre une condition consiste à écrire du code Javascript, qui ne sera exécuté que si la personne
rempli la condition.

Par exemple, à l’aide du code JS, je demande à l’internaute quel est son sexe. Celui-ci me répond
« féminin » ou « masculin ».
S’il répond « féminin », j’affiche un background rose.
Sinon, s’il répond « masculin », j’affiche un background bleu.
Sinon s’il répond autre chose, ou ne répond pas, je lui écris « tu ne réponds pas à la question ».

SSYYNNTTAAXXEE DDEESS CCOONNDDIITTIIOONNSS IIFF,, EELLSSEE IIFF,, EELLSSEE
if (ma condition) // voir les opérateurs de comparaisons, sous-chapitre suivant.
{ // Ne pas oublier l’ouverture d’accolade
alert("Mon message"); // Ce code ne sera exécuté QUE si la
condition est remplie, NE PAS OUBLIER LE POINT VIRGULE
} // IMPORTANT : Ne pas oublier les ACCOLADES, JAMAIS de POINT VIRGULE
à la fermeture d’accolades
else if (mon autre condition)
{
alert("mon autre message");
}
else
{
alert("mon dernier message");
}

© Tous droits réservés – Ziad JAAGOUB Page 9 sur 37
Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation

var question = prompt(‘De quel sexe es-tu ?’) ; // Ici la réponse de l’internaute
sera stockée dans la variable « question ».
if(question == ‘masculin’) //Si la valeur de la variable est « masculin »
{
alert("Tu es un homme"); // Ce code ne sera exécuté QUE si la réponse
est « masculin »
}
else if(question == ‘feminin’) // Sinon si la valeur de la variable est
« feminin »
{
alert("mon autre message"); // Le code précédent ne sera pas exécuté
et CE code ci ne sera exécuté QUE si la réponse est « féminin »
}
else // Sinon, c'est-à-dire dans tous les autres cas.
{
alert("Ah .. Tu n’es ni l’un ni l’autre ?");
}

LLEESS OOPPEERRAATTEEUURRSS DDEE CCOOMMPPAARRAAIISSOONN
Lorsqu’on pose une condition, pour que l’ordinateur comprenne que la condition est valide ou
invalide. Le résultat de cette condition est forcément true ou false.
Exemple dans le cas précédent, notre condition était if(question == 'masculin') ;
Si la condition est remplie, le résultat sera true.
Si la condition n’est pas remplie, le résultat sera false.
Le résultat est donc un booléen.
Les opérateurs de comparaison permettent de tester, l’égalité ou la différence entre deux données.
Tous les tests sont à placer dans la condition if entre les deux parenthèses.
Égal (==) Renvoie true si les valeurs des données sont égales.
if(3 == var1)
if("3" == var1)
if(3 == '3')

Différent (!=) Renvoie true si les valeurs des données ne sont PAS égales.
if(var1 != 4)
if(var2 != "3")

Strictement égal (===) Renvoie true si les valeurs des données sont égales ET du même type.
if(3 === var1)

© Tous droits réservés – Ziad JAAGOUB Page 10 sur 37