JavaScript & JQuery

JavaScript & JQuery

Javascript/Jquery
●
Javascript vanilla
– Définition
– Syntaxe
– Objets
– Boites de dialogue
– Evénements
– Accès aux éléments d'une page
●
Utilisation de Jquery
– Définition
– Fonctions anonymes
– Le point d’entrée d’un script
– Accès aux éléments d'une page
– Association élément/événement
●
Conclusion

JavaScript & JQuery 2 / 38

 1 ère
partie JavaScript vanilla

JavaScript & JQuery 3 / 38

Définition

JavaScript langage de programmation

orienté objet développé par NETSCAPE
dans les années 90. Il s'appelait à l'origine
LiveScript.

Il fut adopté par la firme SUN (qui est à

l'origine du langage JAVA) en 1995.

Le JavaScript est une extension du

langage HTML.

JavaScript & JQuery 4 / 38

Syntaxe : Inclusion d’un fichier JavaScript

Le code JavaScript se trouve dans un fichier

ayant pour extension .js

L'inclusion de ce fichier se fait généralement

dans l’entête de la page HTML grâce à la balise
script. Le type n’est plus nécessairement à
préciser (type="text/javascript")
<script src="url/nomdufichier.js"></script>

JavaScript & JQuery 5 / 38

Syntaxe : structure du langage
Les structures conditionnelles ou itératives
(boucles) ont la même syntaxe qu'en langage C.
if(a == 5)
{ var arr = ["a", "b", "c"];
console.log("a vaut 5"); for(x in arr)
} {
else console.log(arr[x]);
{ }
console.log("a différent de 5");
} switch(expression)
{
for(var = initialisation; condition; incrémentation) case valeur:
{ ... instructions ...
...instructions... break;
} case valeur:
...instructions...
var i = 0; var i = 0; break;
while(i < 3) do default:
{ { ....
console.log(arr[i]); console.log(arr[i]); }
i++; i++;
} } while(i < 3);

JavaScript & JQuery 6 / 38

Syntaxe : Les variables

JavaScript est un langage faiblement typé.

Portée des variables:

●
Une variable déclarée en début de script sera
considérée comme étant globale.

●
Les variables utilisées/déclarées dans une
fonction restent locales à la fonction.

JavaScript & JQuery 7 / 38

Syntaxe : Les fonctions

La syntaxe de définition d'une fonction est:

function nomFonction(arg1,arg2,...)

Contrairement au langage C, on ne donne pas le

type des arguments ni celui de la valeur de
retour éventuelle.

JavaScript & JQuery 8 / 38

objets

L'utilisation principale de JavaScript est la

manipulation des objets d'une page et plus
particulièrement des objets des
formulaires.

Il est possible d'interagir à deux niveaux:

●
Au niveau du navigateur internet
●
Au niveau de la page affichée dans le
navigateur

JavaScript & JQuery 9 / 38

Les chaines de caractères 1/3

Une chaîne de caractères est délimitée par des

guillemets simples ou doubles.
Exemple :
texte = "un beau texte"
Ou
texte = 'un beau texte'

Pour manipuler des chaînes de caractères, il existe de

nombreuses fonctions.
Contrairement au langage C, il est possible de
comparer deux chaînes de caractères à l'aide de
l'opérateur ==.

JavaScript & JQuery 10 / 38

Les chaines de caractères 2/3

●
Accès aux caractères
let str = `Bonjour`;
// le premier caractère // le dernier caractère
alert( str[0] ); // B alert( str[str.length - 1] ); // r
alert( str.at(0) ); // B alert( str.at(-1) ); // r
la méthode .at(pos) autorise une position négative pour
compté à partir de la fin de la chaîne de caractères.
●
Longueur d’une chaîne de caractères
La propriété length indique la longueur de la chaîne de
caractères : alert( `Ok\n`.length ) ; // 3

JavaScript & JQuery 11 / 38

Les chaines de caractères 3/3
●
Rechercher une partie de la chaîne
– Première méthode : str.indexOf(substr, pos).
Cherche le substr dans str, en partant de la position donnée pos, et retourne la
position où la correspondance a été trouvée ou -1 si rien ne peut être trouvé.
– autres méthodes : includes, startsWith, endsWith
Ces méthodes retourne true/false en fonction de si str contient substr.

●
Obtenir une sous chaîne de caractères
Il existe 3 méthodes en JavaScript pour obtenir une sous-chaîne : substring,
substr et slice.
Exemple : str.slice(start [, end]) ;
Renvoie la partie de la chaîne de caractères de start jusqu’à (sans l’inclure) end.
Idem pour les autres méthodes.

méthodes séléction … valeurs negatives

slice(start, end) de start à end (n’inclue pas end) permet les négatifs
substring(start, end) entre start et end valeurs négatives = 0
substr(start, length) de start obtient length caractères permet un start negatif

JavaScript & JQuery 12 / 38

Windows

Une page est

composée de façon
hiérarchique.

Objet fenêtre

JavaScript & JQuery 13 / 38

Document

Objet document

JavaScript & JQuery 14 / 38

objets forms

Objet formulaire

JavaScript & JQuery 15 / 38

objets

Objets radio

Objet bouton

JavaScript & JQuery 16 / 38

objets
L'accès se fait de façon hiérarchique.
window.document.forms["nomDuformulaire"].nomDeLélément

Exemple:
<html>
<body>
<form name="monForm">
<label for="idLogin">Votre login :</label>
<input type="text" name="login" id="idLogin" />
</form>
</body>
</html>

Pour chaque niveau il existe des méthodes et des attributs.

Si je souhaite avoir la valeur contenue dans le champ login du formulaire, j'utiliserai
le code JavaScript suivant :
leLogin=window.document.forms["monForm"].login.value;

JavaScript & JQuery 17 / 38

Les évènements
L'action sur un élément de la page se fait lors d'un
événement particulier (clique de souris, changement de la
valeur d'un champ, etc).

Voici quelques évènements possibles pour une page WEB :

Click (onClick)
Load (onLoad)
Unload (onUnload)
MouseOver (onMouseOver)
MouseOut (onMouseOut)
Focus (onFocus)
Change (onChange)
Select (onSelect)
Submit (onSubmit)

JavaScript & JQuery 18 / 38

 Les évènements
Pour qu'un objet réagisse à un événement, il faut lui associer une fonction de traitement.
Exemple :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="mesFonctions.js"></script>
</head>
<body>
<form name="monForm">
<label for="idLogin">Votre login :</label>
<input type="text" name="login" id="idLogin" onchange="afficher();"/>
<input type="text" name="loginBis" id="idLoginBis"/>
</form>
</body>
</html>
Le fichier mesFonctions.js contient le code suivant :
function afficher()
{
window.document.forms["monForm"].loginBis.value =
window.document.forms["monForm"].login.value;
}

JavaScript & JQuery 19 / 38

Les boîtes de dialogue

Il existe 3 types de boîtes de dialogue :

●
alert :
Affiche un message et un
bouton ok
●
confirm :
Affiche un message et un
bouton ok et annuler
●
prompt :
Affiche une zone de saisie et
un bouton ok.

confirm retourne true ou false selon la réponse (ok ou annuler).

prompt retourne le message contenu dans la zone de saisie.

JavaScript & JQuery 20 / 38

 Les boîtes de dialogue
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="mesFonctions.js"></script>
</head>
<body onload="demanderNom();">
<form name="monForm">
<label for="idLogin">Votre login :</label>
<input type="text" name="login" id="idLogin" onchange="afficher();"/>
<input type="button" value="envoyer" onclick="confirmer();"/>
</form>
</body>
</html> function demanderNom() {
nom = prompt("Quel est votre nom ? ");
alert("Salut : " + nom);
}

function confirmer() {
envoyer = confirm("Etes vous certain de vouloir envoyer les données ? ") ;
if(envoyer === true) {
document.forms["monForm"].submit();
}
}

JavaScript & JQuery 21 / 38

Accès aux éléments
La manière la plus simple pour avoir accès à un élément quelconque
d'une page est d'utiliser son identifiant pour y accéder syntaxe
var obj = document.getElementById("idElement") ;

Il est possible d'avoir des informations et d'agir sur l'élément :

●
innerHTML : va recupérer/modifier le contenu HTML de l'élément
●
textContent : va recupérer/modifier le contenu de l'élément
●
nodeName : va recupérer le nom de l'élément
●
nodeType : va recupérer le type de l'élément
– 1 : Element
– 2 : Attribute
– 3 : Text
– ...

JavaScript & JQuery 22 / 38

Accès aux élements

Index.html

<html>
<head>
<script src="mesFonctions.js"></script>
</head>
<body>
<div onclick="afficherInfo()" id="divClique">Cliquez sur moi</div>
</body>
</html>

MesFonctions.js

function afficherInfo()
{
var texteDeLaDiv = document.getElementById("divClique").textContent;
alert("Texte dans la div : " + texteDeLaDiv);
}

JavaScript & JQuery 23 / 38

 2 ème
partie JQuery

JavaScript & JQuery 24 / 38

Définition

JQuery est une Bibliothèque javascript open-source et multiplateforme (cross-

browser) dont la première version est sortie en janvier 2006.
●
Le principal auteur de cette bibliothèque est John Resig ( développeur d’outils
JavaScript pour Mozilla Corporation).

Utilisation :
Après téléchargement :
<script src="/chemin/vers/jQuery.js"></script>

A partir de Netbeans

Directement en ligne :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

JavaScript & JQuery 25 / 38

Définition

JQuery permet de parcourir et

manipuler très facilement l'arbre
DOM des pages web.
Exemple :
●
Changer/ajouter les classes, les attributs
du CSS...
●
créer des animations,
●
Gérer les événements javascript,
●
Faire des requêtes AJAX.

JavaScript & JQuery 26 / 38

Fonctions anonymes

●
Les fonctions anonymes en JavaScript sont des fonctions
qui n'ont pas de nom. Elles peuvent être utilisées partout
où une fonction est attendue.
●
Ces fonctions sont souvent passées comme arguments à
d'autres fonctions ou utilisées comme fonctions de rappel
(callbacks).

const exemple = function()

{
console.log("Bonjour du monde des fonctions anonymes !");
};

exemple(); // Affiche : Bonjour du monde des fonctions anonymes !

JavaScript & JQuery 27 / 38

Le point d’entrée d’un script

●
$(document).ready() est une méthode qui permet de s'assurer
que la structure HTML du document est prête et que le DOM
(Document Object Model) peut être manipulé.
●
C’est une manière sûre de s'assurer que votre code JavaScript
ne s'exécute qu'après le chargement complet du DOM

$(document).ready(function()
{
// Ce code s'exécutera une fois que le DOM est prêt à être manipulé.
alert("Le document est prêt !");
});

JavaScript & JQuery 28 / 38

 Accès aux éléments d'une page

●
Accès via l'id de l'élément : $('#nomID')
●
Accès via la classe css de l'élément : $
('.nomClasse')
●
Accès via le nom de la balise : $('nomDeLaBalise')
Exemple :
$(this).hide() Cache l’élément courant

$("p").hide() Cache tous les éléments de type <p>

$("#test").hide() Cache l’élément dont l’id est test

$(".test").hide() Cache tous les éléments de type class="test"

JavaScript & JQuery 29 / 38

 Accès aux éléments d'une page

●
Des sélecteurs spécifiques :
– $(':radio'), $(':header'), $(':first-child')

●
Des sélecteurs de filtrages :
– $(':checked'), $(':odd'), $(':visible')
– $(':contains(du texte)')

●
Des attributs
– $('a[href]'), $('a[href^=http://'), $('img[src$=.png]')

JavaScript & JQuery 30 / 38

 Accès aux éléments d'une page

●
Selon le sélecteur, les méthodes des manipulations sont disponible
avec éventuellement des arguments:
– css
– attr
accesJQuerry.js
– empty $(document).ready(function()
– prop {
// l'élément ayant pou id "duTexte" prendra comme texte "un autre texte"
– position $("#duTexte").text("un autre texte");
// tous les boutons auront pour intitulé "un bouton"
– val $(":button").val("un bouton");
});
– text
– ...

JavaScript & JQuery 31 / 38

 Accès aux éléments d'une page
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.min.js"></script>
<script src="accesJQuerry.js"></script>
</head>
<body>
<div id="duTexte">du texte</div>
<form>
<input type="button" value="1"/>
<input type="button" value="2"/>
</form>
</body>
</html>

JavaScript & JQuery 32 / 38

 Association élément/événement

●
Contrairement à la version javascript, on ne fait pas
apparaître les événements géré dans le HTML.
●
On fait une association entre un élément et une
fonction appelée dans le fichier .js.
●
Il existe 2 façons de procéder:
– Association statique
(les éléments doivent exister "en dur" dans la page HTML).
– Association dynamique
(Les éléments peuvent être générées au fur et à mesure de
l'utilisation de la page HTML).

JavaScript & JQuery 33 / 38

 Association élément/événement

●
Association statique.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.min.js"></script>
<script src="accesJQuerry.js"></script>
</head>
<body>
<div id="duTexte">du texte</div>
<form>
<input type="button" value="1"/>
<input type="button" value="2"/>
</form>
</body>
</html>

JavaScript & JQuery 34 / 38

 Association élément/événement
●
Association statique.
function changerCouleur()
{ accesjquery.js
$(this).css("background-color","red");
$("form").append("<input type=\"button\" value=\"3\"/>");
}

function afficherValeur()
{
var valBouton = $(this).val();
$("#duTexte").css("background-color","white");
$("#duTexte").css("color","red");
$("#duTexte").text(valBouton);
console.log(valBouton);
}

$(document).ready(function ()
{
$("#duTexte").click(changerCouleur) ;
$(":button").mouseover(afficherValeur);
});

JavaScript & JQuery 35 / 38

 Association élément/événement
●
Association dynamique.
la méthode $(document).on() dans jQuery est
utilisé pour attacher un ou plusieurs gestionnaires
d'événements à l'élément sélectionné.
$(document).on(event, selector, data, function) ;
event : Chaîne contenant un ou plusieurs types d'événements, comme
"click" ou "submit", séparés par des espaces.
selector : (Optionnel) Chaîne contenant un sélecteur pour filtrer les
éléments descendants qui déclenchent l'événement.
data : (Optionnel) Données supplémentaires à passer à la fonction
gestionnaire d'événements
function : Fonction à exécuter quand l'événement est déclenché.
$(document).ready(function ()
{
$("#duTexte").click(changerCouleur) ;
$(document).on("mouseover", ":button", afficherValeur);
});

JavaScript & JQuery 36 / 38

Javascript "pur" vs JQuery

Tout ce que permet la bibliothèque JQuery est

faisable en Javascript "pur", Aussi appelé
Vanilla JS
Vanilla JS JQuery
document.addEventListener("DOMContentLoaded", function() $(document).ready(function()
{ {
// code // code
}); });
[ ].forEach.call(document.querySelectorAll('a'), function(el) $('a').click(function()
{ {
el.addEventListener('click', function() { // code…
// code… })
})
})
var divs = document.querySelectorAll("div"); var divs = $("div");

JavaScript & JQuery 37 / 38

Conclusion

●
jQuery est un framework complet et facile à utiliser
●
Bibliothèque légère à charger
●
Simplifie la syntaxe d’accès au DOM
●
UI et nombreux plug-ins complémentaires
Liens utiles :
●
http://www.w3schools.com/jquery/default.asp
●
http://jquery.com/
●
http://api.jquery.com/
●
http://jqueryui.com/
●
http://plugins.jquery.com/

JavaScript & JQuery 38 / 38