Javascript
ID 298
"Au tableau" : goo.gl/Ro3QbN
<script>
<!DOCTYPE html> <html lang="fr"> <head> {Tête} </head> <body> {Corps} <script></script> </body> </html>
<script>
{code JS}
</script>
<script src="fichier.js"></script>
alert("Bonjour !");
fichier.js
Instruction1; Instruction2;
Instruction1; Instruction2;
console
commentaires
variables
déclaration
assignation
Instruction1; Instruction2;
🐟
var message = "hey"; ... console.log(message);
🐟
🧠
"hey"
message
💡
utilisation
déclaration SANS assignation
déclaration AVEC assignation
Intérêt d'une variable
prompt()
Valeurs
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
3, 0.4, 1e8
"Bonjour !"
true, false
{}, {id: 2}
Numbers
Strings
Boolean
Objects
null
undefined
if (<condition>) {
// instructions executées ssi la <condition> est vraie
}
syntax
if (resultat < 4) {
...
}
if (resultat >= 12) {
...
}
if (vote === "oui") {
...
}
if (vote !== "non") {
...
}
Exercice
Gérer le cas du "Perdu !"
(avec un 2e if)
if (<condition>) {
// instructions executées ssi la <condition> est vraie
} else {
// instructions executées ssi la <condition> est fausse
}
syntax
Exercice
Gérer le cas du "Perdu !"
(cette fois avec un else)
if ( <condition1>) {
// instructions executées ssi la <condition> est vraie
} else if (<condition2>) {
// instructions executées ssi la <condition1> est fausse ET que <condition2> est vraie
} else {
// instructions executées ssi la <condition1> ET <condition2> sont fausses
}
syntax
Exercice
Gérer le cas du "Presque"
("macron" sans majuscule)
Exercice
Gérer en plus le cas spécifique "Hollande"
(et répondre : "Non, Hollande était bien président mais il n'est plus le président actuel")
switch (expression) {
case valeur1 :
// instructions éxécutées ssi: (expression === valeur1)
break;
case valeur2:
// instructions éxécutées ssi: (expression === valeur2)
break;
default:
// instructions éxécutées par défault (si aucun case n'a matché)
break;
}
syntax
switch (monchoix) {
case "poulet":
console.log("Voici votre poulet, bon appétit !");
break;
case "poisson":
console.log("Voici votre poisson, bon appétit !");
break;
default:
console.log("Voici le plat du jour, bon appétit !");
break;
}
Exercice
A l'aide de switch : créer un autre quiz
plage || montagne
a b a || b
0 0 0
0 1 1
1 0 1
1 1 1
a || b
true ssi a ou b est vrai
a || b || c
true ssi a ou b ou c est vrai
Exercice
Gérer avec l'opérateur || différentes orthographes possibles pour la bonne réponse
entrée && dessert
a b a && b
0 0 0
0 1 0
1 0 0
1 1 1
a && b
true ssi a ET b sont vrais
Falsy values
false, null, undefined, "", 0 et NaN
Toutes les autres valeurs sont truthy
(y compris "0" ou "false")
Tableaux
[ ]
var tab = ["a", "b", "c"]
syntax
var tab = ["a", "b", "c"]
tab.length
Exercice
Créez un tableau d'au moins 5 éléments et afficher sa longueur dans la console
var tab = ["a", "b", "c"]
tab[0]
var tab = ["a", "b", "c"]
tab[1]
var tab = ["a", "b", "c"]
tab[2]
Exercice
Afficher le 1er et 3e element de votre tableau dans la console
var tab = ["a", "b", "c"]
tab.indexOf("c")
2
var tab = ["a", "b", "c"]
tab.indexOf("z")
-1
Exercice prompt
Gérer l'ensemble des réponses possibles dans un tableau
(sans else if)
Révisions
- Afficher dans la console le message : "ok ok"
- Demander le prénom de l'utilisateur
- Une fois récupéré, lui dire : "Bonjour prenom" dans la console (avec son vrai prénom bien sur)
- Si c'est le meme que le vôtre, enchaîner maintenant avec une autre boite de dialogue "Très joli prénom 👌 !"
- Créer un tableau menu avec les éléments : "poulet", "blanquette", "salade"
- Demander à l'utilisateur ce qu'il souhaite manger ce midi
- En fonction de sa réponse, lui dire :
- "Et tu vas te régaler 🤗 !" si ce qu'il souhaite est au menu
- ou bien : "Et sinon, tu as pensé à un régime 🍽️ ?" si ce qu'il souhaite n'est pas au menu
Incrémentation
i = i + 1;
Incrémentation
i += 1;
Incrémentation
i ++;
et aussi i-- pour décrémenter
Concaténation de chaines
"a"+"b" donne "ab"
Concaténation de chaines
var str = "a";
str +="b";
Boucle
for (;;) {}
for (<initialisation>; <condition>; <expression-finale>) {
// instructions a exécuter tant que <condition> est vraie
}
syntax
for (var i = 0; i < 5; i = i+1) {
console.log(i);
}
Pour i = 0, Tant que i < 5; affiche i; puis incrémente i
Exercice
faire une boucle qui compte de 0 jusqu'à 100 (compris)
Exercice
faire une boucle qui compte de 2 jusqu'à 18 (compris)
Exercice
faire une boucle qui additionne tous les chiffres de 1 à 10
Exercice
A l'aide d'un tableau, faire une boucle qui liste toutes les lettres de l'alphabet
Exercice
Sans changer le tableau, afficher cette fois les lettres de "z" à "a"
Exercice "maison"
A partir de ce pen et du tableau `motamot`, imprimer dans la console la phrase :
"Salut comment ça va"
optionnel #dur
"Bonjour".split('');
[ 'B', 'o', 'n', 'j', 'o', 'u', 'r' ]
Exercice
Demander le prénom de l'utilisateur et imprimer dans la console chacune de ses lettres (1 ligne par lettre)
Boucles
while () {}
do {} while ()
while (<condition>) {
// instructions executées tant que <condition> est vraie
}
syntax
do {
// instructions executées tant que <condition> est vraie
} while (<condition>)
syntax
Exercice
compter jusqu'à 20 avec une boucle while
Exercice
compter jusqu'à 20 avec une boucle do-while
Exercice
Créer une boucle sans fin.
break
Sortir d'une boucle
var i = 0;
while (true) {
console.log(i);
if (i>3) {
break;
}
i++;
}
continue
Sauter un tour dans une boucle
var resultat = "";
for (var i=0; i<10; i++) {
if (i===3) {
continue;
}
resultat = resultat + i;
}
Astuce
un nombre i est pair
ssi
(i%2 === 0) est vrai
ie: le reste de la division par 2 est nul
Exercice
A l'aide d'une boucle allant de 1 à 9, afficher une chaine contenant tous les nombres pairs, soit :
"2468"
Objet
{ }
var utilisateur = {
id: 12,
nom: 'Paul IRISH',
"Google+": "https://plus.google.com/+PaulIrish"
}
syntax
utilisateur.id
utilisateur["id"]
// 12
// 12
utilisateur["G+"]
Exercice
Ranger dans un objet toutes vos coordonnées personnelles : prénom, nom, mail, téléphone, compte G+
Exercice
Afficher votre nom
Afficher votre compte G+
Exercice
Rajouter l'adresse en tant que sous-objet (rue + numéro) et un champ emails avec 2 mails
Exercice
avec votre objet `moi`, poser la question à l'utilisateur: "Que veux-tu savoir de moi ?"
S'il répond "age", lui retourner l'info.
S'il demande qq chose d'inconnu, lui dire qu'il est trop curieux
for (var clef in objet) {
...
}
syntax
Exercice
A l'aide d'une boucle for..in afficher toutes les clés de l'objet :
{html: 'easy', css: 'it rocks', js: 'wip'}
Fonction
function () {}
function nom(parametre1, ...) {
instructions
}
syntax
function maFunc() {};
var maFunc = function () {};
maFunc();
Exercice
Faire une fonction nestor qui sur 3 appels différents dit (dans la console) :
"Bonjour Mr Durand"
"Bonjour Mme Dupont"
"Bonjour Billy"
function trois() {
return 3;
}
var resultat = trois()*2;
function combien() {
return;
}
console.log(combien());
var a = 2;
function doit() {
return;
a = 4; // pas exécutée
}
doit();
console.log(a);
function double(toto) {
return toto*2;
};
console.log(double(3));
Exercice
Créer une fonction qui renvoie le périmètre d'un cercle
(le rayon sera transmis en parametre)
Exercice
Créer une fonction qui dit "Bonjour" en console
Exercice
Créer une fonction qui calcule et renvoie l'aire d'un rectangle
(les 2 valeurs des côtés seront transmis en paramètres)
Exercice
Créer une fonction qui calcule le volume d'un parallélépipède rectangle
(on pourra réutiliser la fonction précédente)
Exercice
Créer une fonction qui épèle un mot ligne par ligne dans la console
Math.
abs cos sin tan pow PI round ceil floor min max log sqrt
Exercice
Créer une fonction inverse qui retourne l'inverse d'un nombre
Exercice
Créer une fonction carre qui retourne le carré d'un nombre
Exercice
Créer une fonction pythagore qui retourne la longueur de l'hypothénuse d'un triangle rectangle
Exercice
Créer une fonction mrBonjour qui dit à voix haute "Bonjour <prenom>", prenom passé en parametre a la fonction
Exercice
Créer une fonction okGoogle qui prend un ordre 'meteo' et qui dira à voix haute "aujourd'hui il fait beau" et "je n'ai pas compris" autrement"
Exercice
A partir de ce pen, écrire une fonction nbr qui retourne le nombre d'unités en stock d'un produit passé en paramètre.
Exercice
A partir du pen précédent, écrire une fonction boulange qui prend un produit en paramètre et dit "voici votre <produit>" si disponible ou "désolé je n'en ai pas"
Exercice
Créer une fonction recherche qui recherche un élément dans un tableau à l'aide d'une boucle for.
(on passera le tableau et la valeur recherchée en arguments + on retournera true/false en fonction)
Exercice
Créer une fonction liste qui liste toutes les clés d'un objet
(on passera l'objet en paramètre+ on retournera un tableau de clés)
Exercice
En se resservant des 2 fonctions précédentes, créer une fonction qui recherche la présence d'une clé dans un objet
(on passera l'objet et le nom de la clé recherchée en arguments + on retournera true/false)
var me = {
name: 'Antoine',
speak: function () {
var msg = "Bonjour, je suis "+me.name+".";
console.log(msg);
}
};
var me = {
name: 'Antoine',
speak: function () {
var msg = "Bonjour, je suis "+this.name+".";
console.log(msg);
}
};
me.speak();
Exercice
Regrouper les dernières fonctions dans un objet : geom
Portée des variables
function test() {
var toto = 3;
}
test();
console.log(toto); // combien ?
var tata = 2;
function test() {
tata = 3;
}
test();
console.log(tata);
var tata = 2;
function test() {
var tata = 3;
}
test();
console.log(tata);
function test(arg1, arg2) {
// ...
}
test(false, 8);
console.log(arg1); // combien ?
function test(arg1, arg2) {
var arg1= false;
var arg2 = 8;
// ...
}
test(false, 8);
valeurs par défaut des arguments
function test(arg) {
arg = arg || "par defaut";
return arg;
}
test();
test(2);
Exercice
Ecrire une fonction `boulange` qui renvoie l'article demandé en paramètre
(on renverra par défaut "une baguette")
Exercice
Ajout du "bonjour"/"bonsoir"
(par défaut "bonjour")
DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="dom">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<img src="foo.png" alt>
<h1>Lorem</h1>
<p>Lorem ipsum</p>
<div></div>
</div>
<script>alert("ok");</script>
</body>
</html>
document.getElementById('foo')
var el = document.getElementById('foo')
Inclusion de la librairie
jQuery dans la page
jQuery(selecteur)
jQuery === $
$('div')
$('div')
[ div, div ]
Exercice
Dans la page rechercher tous les blockquote et les afficher dans la console
[ p, p, p ]
.length
$('h6').length > 0
Exercice
Dans la page afficher un message en console qui dit si oui ou non, la page contient un h2
Exercice
Dans la page faire une fonction estCeQuiYa qui dit si true/false il y a un élément correspondant au selecteur transmis en paramètre dans la page
$el
var $p = $('p')
.eq()
$p.eq(1)
[ p, p, p].eq(1)
2ème élément de la "liste" jQuery
NB : il reste un élément jQuery
Exercice
Dans la page, afficher en console le 2e élément jQuery blockquote
$p.eq(0) VS. $p[0]
$(selecteur, context)
Exercice
Dans la page, afficher l'élément cite du 2eme commentaire
NB : on pourra enregistrer le 2eme blockquote dans une variable
$(context).find(selecteur)
Exercice
Idem, afficher l'élément cite du 2eme commentaire
NB : mais cette fois avec .find()
Exercice
Afficher l'élément em du 2e commentaire
NB : mais cette fois avec .find()
.attr(attribut)
$('a').attr('href')
Affiche la valeur de l'attribut href de $el
Exercice
Dans la page, afficher en console l'adresse du compte twitter de @simone
$('a').attr('href', 'http://...')
Change la valeur de l'attribut href du lien
Exercice
Dans la page, changer l'adresse twitter de @simone en http
au lieu de https
.text()
$el.text()
Affiche le contenu au format texte de $el
Exercice
Dans la page, afficher en console le texte du premier commentaire
$el.text("Lorem")
Change le texte de $el
Exercice
Dans la page, changer le texte de l'élément h1
Exercice
Dans la page, coder une fonction says qui prend en argument le nom d'une personne et renvoie son commentaire
.html()
$el.html()
Affiche le contenu HTML de $el
$el.html("<div></div>")
Change le contenu HTML de $el
Exercice
Sur ce pen, l'aide de .html(), créer une fonction qui, au chargement de la page, écrit l'heure courante dans la page, ex:
"Il est 10:30:00"
.after()
Exercice
Dans la page, ajouter un cinquième commentaire grâce à la méthode .after()
setInterval
setInterval(f, 1000)
var int = setInterval(f, 1000)
clearInterval(int)
Exercice
Mettre maintenant à jour l'horloge toutes les secondes
.on()
$el.on(event, action)
Déclenche la fonction handler quand l'event se produit sur $el
$('p').on("click", function () {
// $el a été cliqué
})
Exercice
Faire un bouton qui quand on clique dessus affiche une boite de dialogue "kikou"
Exercice
Créer 2 boutons Start et Stop qui permettent respectivement de démarrer et d'arrêter l'horloge créé précédemment
event.preventDefault();
Annule l'action prévue par l'évènement.
$('a[href]').click(function (e) {
e.preventDefault(); // ne change pas de page
});
$('form').submit(function (e) {
e.preventDefault(); // ne soumet pas le formulaire
});
Exercice
Dans la page, quand le bouton vert en bas de page est cliqué, ajouter un nouveau commentaire grâce à la méthode .on()
.addClass()
.removeClass()
<p class="foo">Lorem ipsum.</p>
$('p').addClass('foo')
<p class="">Lorem ipsum.</p>
$('p').removeClass('foo')
Exercice
Dans la page, ajouter la classe 'super' quand on clique sur le bouton
Exercice
Ajouter maintenant un autre bouton "Make me normal" qui retire la classe 'super' à la div
Exercice
Dans la page, quand un tweet est cliqué, ajouter une classe "selected" sur l'élément
Exercice
Faire maintenant en sorte que la classe disparaisse au 2e clic sur l'élément.
.toggleClass(
$('p').toggleClass('foo')
Exercice
Dans le pen, faire apparaitre/disparaitre le menu au click sur le burger-icon
Exercice
Ajout d'un fade
$('li').on('click', function (event) {
$('li').index(event.currentTarget);
});
[ <li>, <li>, <li>, ...]
retourne la position de l'élement dans le tableau jQuery
Exercice
A partir de ce pen, réaliser un menu accordéon
$ / .on / .addClass / .removeClass
Exercice
A partir de ce pen, réaliser un menu à onglets (style bordure simple) pour passer d'un article à l'autre
$ / .on / .index / e.currentTarget / .eq / .addClass / .removeClass
event bubbling
event.preventDefault();
Annule l'action initialement prévue par l´évènement
Exercice
Sur une page avec des liens, au clic sur l'un d'eux, empêcher l'action par défaut d'aller vers ce lien
event.stopPropagation();
Stoppe la propagation de l'évènement.
event.target
L'élément d'origine duquel l'évènement est parti
event.currentTarget
L'élément courant sur lequel l'évènement a lieu
$('*').click(function (e) {
console.log("click on",e.currentTarget, "from",e.target);
});
principaux events
window : "scroll" "resize"
document : "ready"
forms : "change", "focus", "blur", "submit", "reset"
keyboard : "keydown" "keyup" "keypress"
Mouse : "click" "dbclick" "mouseenter" "mouseleave"
Exercice
sur ce pen, quand la souris entre dans la zone interdite, passer le fond de page en rouge et jouer l'alarme. L'arreter qd la souris sort de la zone.
$('input').val();
retourne la valeur du champ input
Exercice
Faire un formulaire avec 2 champs `prenom` et `age`. Si l'utilisateur est jeune (<60ans) lui dire "Salut <prenom>" sinon, lui dire "Bonjour <prenom>"
Exercice
Faire un formulaire de contact. A la soumission, empêcher le submit et vérifier que l'email est valide + le nom rempli : si oui => passer la page en vert sinon en rouge
Champs : Nom, Email, Message
intro aux /regex/.test("chaine")
Exercice
Ajouter un compteur de caractères au message, type : "139 caractères restants"
.on / "keyup" / "chaine".length / .html
Exercice
Avec une seule balise <img> et un <button>, créer un carousel qui passe d'une image a l'autre. Les images seront prise dans un tableau.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus deserunt adipisci rerum. Autem temporibus earum nobis commodi et cum cupiditate enim quisquam veritatis, architecto saepe reiciendis dolore iste asperiores sunt nulla debitis voluptates recusandae. Omnis voluptatum ea laudantium beatae quis nam. Explicabo officia accusantium asperiores est quidem doloribus nisi doloremque reiciendis cumque pariatur sapiente ad dolore excepturi rem non culpa expedita, iusto illo optio? Distinctio nesciunt nam, fugit voluptas deleniti voluptate. Sit, quasi. Perferendis hic, eaque doloremque fugiat alias harum. Ipsam cupiditate voluptatibus in saepe laboriosam a voluptates ipsa dolores mollitia. Necessitatibus earum, repellat.
$(window).scrollTop()
$(document).height()
$(window).height()
Exercice
Dans le pen, afficher en console la position verticale du scroll a chaque évènement "scroll" sur window
Exercice
Afficher maintenant le pourcentage total scrollé en console
Exercice
Avec ce %, réaliser une barre progression de lecture de la page
.animate()
.animate(cssproperties)
.animate({
left: '500px'
})
Exercice
Sur ce pen, animer la position du carré vers 500px vers la droite
Exercice
Sur ce pen, animer la position du carré vers 500px vers la droite et 500px vers le bas
Exercice
Grace a l'évènement keyup sur le document, faire lire a voix haute les mots "gauche", "droite", "haut", "bas" à l'appui d'une des 4 flèches du clavier
Exercice
Grace a l'évènement keyup sur le document, déplacer le carré a chaque appui sur les flèches du clavier
e.which 37,38,39,40
for (var i = 0; i <= tab.length-1; i++) {
tab[i];
}
[ 'a', 'b', 'c', 'd' ]
tab
0
1
2
3
✖stop
i
technique
IFOCOP298 - JS
By Antoine BERNIER
