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

  1. Afficher dans la console le message : "ok ok"
  2. Demander le prénom de l'utilisateur
  3. Une fois récupéré, lui dire : "Bonjour prenom" dans la console (avec son vrai prénom bien sur)
  4. Si c'est le meme que le vôtre, enchaîner maintenant avec une autre boite de dialogue "Très joli prénom 👌 !"
  5. Créer un tableau menu avec les éléments : "poulet", "blanquette", "salade"
  6. Demander à l'utilisateur ce qu'il souhaite manger ce midi
  7. 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

IFOCOP298 - JS

  • 924
Loading comments...

More from Antoine BERNIER