Catégorie : Javascript

L’affichage des différents éléments peut se faire grâce aux class :
– ciblage.className affichera le nom des class
– ciblage.classList affichera un tableau. Cela permet alors d’utiliser  contains( ) qui va récupérer ce qui est contenu dans le tableau. Ce qui permettra ensuite de vérifier si oui ou non il possède déjà la class.
Par exemple :

<h1> </h1>

const titre = document.querySelector('h1');

titre.className = "text-right color-primary";
console.log(titre.className);
console.log(titre.classList);

if(titre.classList.contains("text-right")){
    console.log("oui");
} else {
    console.log("non);
}

L’ajout va se faire en 2 temps :
– création de l’élément avec document.createElement( )
– ajout de l’élément comme enfant avec .appendChild( )

const nouveauTitre = document.createElement('h1');
const conteneur = document.getElementById('conteneur');
conteneur.appendChild(nouveauTitre);

Il est aussi possible de modifier l’attribut d’une balise HTML directement depuis le fichier JS.
On utilisera le ciblage suivant :

setAttribute('attribute', 'value')

Par exemple, pour changer l’attribut défini sur une image voici le type de code que l’on pourrait alors trouver :

<img id="image" src="img/image.jpg" data-test="test">

const monImage = document.getElementById('image');
monImage.setAttribute('data-test', 'Nouveau texte alternatif');

Lorsque l’on souhaite ajouter un événement, on dit alors que l’on ajoute un événement d’écoute. En effet, la page va « écouter » ce que l’utilisateur fait avec .addEventListener.
Pour cela, on va indiquer quel événement doit être « écouté » (un clic de souris, un scroll, etc.) et on indiquera ensuite dans une fonction quelle sera l’action à exécuter lors de cet événement.

maVariable.addEventListener('click', maFonction);

Pour faciliter la lecture, on va privilégier l’écriture de la fonction en fonction fléchée. Ce choix est d’autant plus pertinent que la fonction n’inclue aucun paramètre et qu’elle ne sera pas forcément utilisée ailleurs.

maVariable.addEventListener('click', () => {
    //instructions de la fonction
})

Il est enfin possible de supprimer l’écoute d’un événement avec .removeEventListener. Dans ce cas, il faudra donc bien penser à externaliser la fonction !

maVariable.removeEventListener('click', maFonction);

2. Clavier
– keydown : lorsque l’utilisateur appuie sur une touche
– keyup : lorsque l’utilisateur relâche la touche
Pour les événements clavier, chaque touche du clavier doit porter un numéro. Pour retrouver le numéro de la touche, il faut d’abord le chercher avec un événement d’écoute :

document.addEventListener('keydown', clavier);

function clavier(e) {
    console.log(e.which);
}

3. Fenêtre
L’écoute de l’événement doit donc cibler la fenêtre (window)
– scroll : apparition d’un élément lors du scroll par exemple

window.addEventListener('scroll', maFonction);

4. Formulaire
– change : dédié aux input, select ou textarea, il est relié à une value. Cet événement est pris en compte uniquement lorsque l’utilisateur change de champs (dès qu’on est plus focus sur ce champs)
– submit : relié à la balise <form> (donc au formulaire dans son ensemble). Il se déclenche au moment où l’on envoie le formulaire.

ciblage.addEventListener('submit', e => {
    e.preventDefault( );
})

Cette méthode est équivalente à un délai.
L’inconvénient de cette méthode est qu’elle ne permet pas de faire un affichage/non affichage continuel car cela ferait alors une énorme boucle.

setTimeout(maFonction, temps);

Cette méthode permet les répétitions jusqu’à ce qu’on lui dise d’arrêter (c’est une boucle). Le temps est aussi exprimé en ms.

const repet = setInterval(maFonction, 1000);

Pour arrêter la boucle, on utilise alors clearInterval()

clearInterval(repet);

Cette classe permet de récupérer des informations sur les dates, des informations générales sur le jour.

const maintenant = new Date();

maintenant.getDay(); // affiche le numéro du jour (Dimanche = 0)
maintenant.getDate(); // affiche le jour
maintenant.getMonth(); // affiche le numéro du mois (Janvier = 0)
maintenant.getFullYear(); // affiche toute l'année (2020 par exemple)

const nombre = 4.328;
nombre.toFixed(2); // affiche 4.33

Math.floor(Math.random() * (max + 1))

const numbers = [1, 2, 3, 4];
Math.max(..numbers); //donnera 4
Math.min(..numbers); //donnera 1

document.write('Text');

document permet de cibler le document (page HTML) dans son ensemble.

Depuis le fichier JS, on peut aussi modifier ou récupérer du texte avec la propriété .innerText :

document.innerText; //permet de récupérer de l'information
document.innerText = 'Un texte'; //permet de modifier l'information

L’id est unique dans une page HTML. Il est donc facile de le cibler pour modifier le contenu de la balise identifiée. Pour cela, on utilisera la propriété getElementById( ) :

<p id="txt"> </p>

document.getElementById('txt').innerText = 'Texte à insérer';

Lorsque l’on code, il est possible que l’on répète plusieurs fois le même ciblage. Dans ce cas il est possible de créer une variable const. Cela permet de simplifier le code, de le rendre plus lisible. De plus, si l’id change, il sera plus facile de le modifier (on n’aura pas à parcourir toutes les lignes de code pour le changer !) :

const txt = document.getElementById('txt');

Le ciblage peut se faire en fonction des class ajoutées aux balises.

<p class="rouge"> </p>

document.getElementsByClassName('rouge');

Le ciblage peut se faire en fonction des balises.

const NumDeux = document.getElementsByTagName('p');

NumDeux[1].innerText = 'Nouveau Texte';

Il est possible de cibler plus généralement un élément. On utilisera querySelector :

querySelector('element') // ciblera le 1er élément désigné
querySelectorAll('element') // ciblera tous les éléments désignés (=> tableau)

Avec JavaScript, il est possible de modifier la source d’une image, d’un lien, etc.
Pour cela, on va utiliser la propriété .src pour une image, .href pour un lien, etc.
Par exemple, pour modifier la source d’une image :

<img id="IdImg" src="">
<p> Texte </p>

document.getElementById('IdImg').src = 'image.jpg';

JavaScript interprète le CSS comme un objet (alors qu’il considère le HTML comme un tableau). Lorsque l’on modifie le CSS en JS, on ne modifie pas le fichier CSS source. On vient juste inscrire les nouvelles règles de style dans le HTML (les modifications seront visibles uniquement depuis l’inspecteur !).
Il faut alors écrire les propriétés CSS en camelCase.
Par exemple :

document.getElementsByClassName('rouge')[1].style.backgroundColor = 'blue';

Il est possible d’écrire plusieurs propriétés CSS (s’il y a de nombreuses modifications, il sera préférable de passer directement par le fichier CSS !) :

document.getElementsByClassName('rouge')[0].style.cssText = 'font-family: Arial, sans-serif ; color: red ;' ;

<button onclick = 'codeJS'> OK </button>

ici, onclick indique que le code JS sera actif uniquement lorsqu’il y aura un clic que le bouton.

• Soit à l’aide des balises <script> </script> que l’on ajoute juste avant la fermeture du <body> .
  Ici deux cas de figure se présentent :

– Soit en écrivant complètement le code JS dans le fichier HTML

<script> CodeJS à écrire </script>

<script scr = "js/scripts.js"> </script>

C’est cette dernière méthode que nous favoriserons.

window.alert('...');

window sert à cibler la fenêtre,
.alert donne l’action à réaliser, c’est à dire afficher un message dans une fenêtre « popup ». On ajoute ensuite le contenu du message (ou de la variable) à récupérer.
Le point virgule permet de passer à l’instruction suivante.

Attention : le message d’alerte est spécifique à window. Il est donc possible d’écrire le message d’alerte sans cibler la fenêtre :

alert('...');

La communication avec la console se fait directement en intégrant dans le code JS :

console.log('test');   // affiche un texte
console.log(test);   // affiche une variable

Bien qu’on utilise la plupart du temps console.log pour vérifier notre code, il est aussi possible de simuler des problèmes.
On peut alors utiliser différentes lignes de code dans le fichier JavaScript :

console.info('...');
console.warn('...');   // avertissement qu’il serait mieux de corriger
console.error('...');   // erreur réelle (non simulée), la suite du code ne sera pas lue

La déclaration des variables se fait uniquement avec des caractères alphanumériques (majuscules ou minuscules), le underscore et le tiret. On ne met pas de caractères spéciaux, ni de chiffre seul et on ne
commence jamais avec un chiffre.
Caractères autorisés : a -> z A -> Z 0 -> 9 _ et –

let numero1 = 'un';   // variable qui sera modifiée
const numero2 = 'deux';   // constante 'string'
const vrai = true;   // booleen
const numeroTrois = 3;   // constante numérique

Enfin, on peut définir une variable let en début de document et lui attribuer une valeur plus tard dans le code.

let numero1;
//
// déroulé du code
//
numéro1 = 'un';
// suite du code et utilisation de la variable

La définition sur Wikipédia nous indique que la concaténation désigne l’action de mettre bout à bout au moins deux chaines de caractères.
Il y a différentes façons de concaténer plusieurs valeurs entre-elles :
– Le plus simple est d’utiliser le + car il permet d’associer les valeurs. Attention : si les variables ne sont que des chiffres, alors c’est une addition qui s’effectuera.
– On peut aussi utiliser une virgule. Dans ce cas, les chiffres s’ajoutent les uns à côté des autres. La virgule créé alors un espace entre les deux.
– Toutefois, on privilégiera la méthode mise en place depuis ES6 qui permet d’écrire à la fois du texte et des variables. Tout est écrit entre des ‘faux-accents’ : `` , et les variables sont écrites avec ${ } (tout le
reste est alors considéré comme du texte).

console.log(variable1 + variable2);   // variable1variable2
console.log(variable1 , variable2);   // variable1 variable2
console.log(`${variable1} + ${variable2}`);   // variable1 + variable2

Les tableaux sont des listes qui permettent de stocker des valeurs. L’écriture des tableaux se fait avec des crochets :

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

Pour appeler une valeur dans un tableau, on utilise son index. IMPORTANT : les index d’un tableau commencent toujours par 0 !

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides[1]);   // affichera image2.jpg

Lorsque l’on ne connait pas la taille d’un tableau, il est possible de l’afficher. On utilise alors .length. On peut alors utiliser cette propriété pour afficher un élément d’un tableau.

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides.length);   // affichera 3
console.log(slides[slides.length - 1]);   // affichera image3.png

• ajouter un élément à la fin d’un tableau avec .push

nomVariable.push('nouvelleValeur')

• modifier la valeur d’un élément du tableau grâce à son index.

table[0] = 'nouvelleValeur'    // modifie l'élément situé à l'index 0

• supprimer ou ajouter un élément à l’endroit que l’on souhaite avec .slice . Il faut alors ajouter 3 paramètres :
  – l’index où se situer pour commencer
  – le nombre d’index à supprimer (si on souhaite ajouter un élément cette valeur sera égale à zéro)
  – la nouvelle valeur à ajouter

array.splice(index, combien);   // suppression
array.splice(index, combien, valeur);   // ajout

Les objets sont stockés sous forme de tableaux et sont définis par leurs déférentes clés. L’écriture d’objets se fait avec des accolades :

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};

Pour parcourir un tableau d’objet, on utilise un point (index textuel).

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};

console.log(etudiant.prenom);   // affichera Jean

Un tableau peut contenir différents objets. Pour améliorer la lisibilité, il est alors possible d’écrire les tableaux et les objets sur plusieurs lignes.

const etudiant1 = {prenom: 'Jean', nom: 'Dupont', note:'15'};
const etudiant2 = {prenom: 'Piere', nom: 'Dupond', note:'16'};
// const etudiants = [etudiant1, etudiant2];
const etudiants = [
   {
      prenom: 'Jean',
      nom: 'Dupont',
      note:'15'
   }, {
      prenom: 'Piere',
      nom: 'Dupond',
      note:'16'
   }
];

console.log(etudiants);   // affichera le détail des 2 objets etudiant1 et etudiant2

Il est aussi possible qu’un objet ait pour valeur des tableaux :

const frigo = {
   fruit: ["banane", "mangue", "cerise"],
   legume: ["courgette", "tomate", "poireau"]
};

console.log(frigo.fruit[0]);   // affichera banane