algorithmique et javascript

COURS JAVASCRIPT

 

I) REFERENCER UN FICHIER JAVASCRIPT EXTERNE

 

Créer le fichier index.html suivant:

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript dans une page</title>

</head>

<body>

<!—Référencer le fichier de script monScript.js -->

<script src="script/monScript.js"></script>

</body>

</html>

 

creer le dossier script

créer le fichier  ​​​​ monScript.js avec le contenu suivant:

 

alert("coucou");

 

Lorsque vous ouvrez le fichier index.html ​​ le message coucou apparaît donc on s’apercoit que dans le fichier index.html nous avons bien référencé le fichier script.js qui est appelé pour que le code javascript s’execute.

 

II) INCOPORER DU JAVASCRIPT DANS LE FICHIER HTML

créer le fichier index.html suivant:

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript dans une page</title>

</head>

<body>

<!—du script java -->

<script>console.log("Bonjour");</script>

</body>

</html>

 

lorsqu’on ouvre le fichier dans le navigateur rien ne se passe mais lorsqu’on clique sur plus d’outils→outils de developpement web→console on constate que le message bonjour est affiché.

console.log permet d’afficher des messages dans la console javascript.

 

III) DECLARER UNE VARIABLE

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript variable</title>

</head>

<body>

<script>

  var heure = "10:30";

  console.log("Il est " + heure);

</script>

</body>

</html>

 

 

Si on execute le code on obtient le résultat suivant dans la console.

 

Il est 10:30

 

Ici nous déclarons la variable heure et nous l’initialisons avec la valeur 10 h 30

 

 

 

IV) LES FONCTIONS SANS RETOUR DE RESULTAT (PROCEDURE)

 

Créer le fichier index.html suivant:

 

<!DOCTYPE html>

<html>

<head>

<title>fonction sans argument JavaScript</title>

<script>

  function maSimpleFunction() {

   console.log("Bonjour");

  }

  maSimpleFunction();

</script>

</head>

<body>

 

lorsqu’on ouvre le fichier index.html dans le navigateur on constate que le message bonjour s’affiche dans la console du navigateur.

 

Ici nous avons crée une fonction qui est la suivante:

 

  function maSimpleFunction() {

   console.log("Bonjour");

  }

 

Cette fonction renferme un bout de code qui permet d’afficher ici le message bonjour dans la console ​​ pour executer le code renfermé dans la fonction il faut l’appeler avec son nom c’est ce qui est fait avec l’instruction suivante:

 

maSimpleFunction();

 

A quoi servent les fonctions ? Les fonctions servent à définir des bout de code que l’on souhaite réutiliser plusieurs fois dans la fonction . Au lieu de réecrire tout le code contenu dans la fonction lorsqu’on on a besoin ,il suffit juste d’appeler la fonction et tout le code renfermé dans la fonction est utilisé.

 

Prenons un autre exemple:

 

<!DOCTYPE html>

<html>

<head>

<title>fonction sans argument JavaScript</title>

<script>

  function maSimpleFunction() {

   var a=10;

   var b=20;

   var c=a+b;

​​    var d="la somme de : "+a+" avec ​​ "+b+" est egale à "+c

  }

  maSimpleFunction();

  maSimpleFunction();

  maSimpleFunction();

</script>

</head>

<body>

 

l’execution de ce code nous donne l’affichage suivant dans la console:

 

la somme de : 10 avec ​​ 20 est egale à 30

la somme de : 10 avec ​​ 20 est egale à 30

la somme de : 10 avec ​​ 20 est egale à 30

 

Dans ce code nous avons crée une fonction dans laquelle nous définissons trois variables a, b, c, d que nous avons initialisé avec des valeurs puis nous affichons le resultat. Nous faisons ensuite appel àla fonction trois fois, ce qui est la même chose que réecrire 3 fois toutes les lignes.

 

V) LES FONCTIONS AVEC RETOUR DE RESULTAT

 

Réécrivons la premiére fonction de telle maniére qu’elle n’affiche plus de résultat mais qu’elle retourne plutôt le résultat à afficher.

 

<!DOCTYPE html>

<html>

<head>

<title>fonction sans argument JavaScript</title>

<script>

  function maSimpleFunction() {

   return "Bonjour";

  }

  var resultat=maSimpleFunction();

  console.log(resultat)

</script>

</head>

<body>

 

Dans ce code nous avons crée une fonction qui n’affiche pas un resultat mais qui renvoie un resultat au programme principal.

 

Nous appelons ensuite la fonction qui retourne son resultat et le stocke dans la variable resultat. Puis nous affichons la variable resultat.

 

Exercice: Transformer le deuxiéme exemple de la même maniére ?

 

 

VI) FONCTION AVEC ARGUMENTS

 

<!DOCTYPE html>

<html>

<head>

<title>fonction sans argument JavaScript</title>

<script>

  function maSimpleFunction(a,b) {

   var a1=a;

   var b1=b;

   var c=a1+b1;

​​    var d="la somme de : "+a1+" avec ​​ "+b1+" est egale à "+c

​​    console.log(d);

  }

  maSimpleFunction(10,15);

  maSimpleFunction(12,25);

</script>

</head>

<body>

 

 

 

ici la fonction prend deux arguments a et b qui représentent des valeurs que l’on peut donner à la fonction lorsqu’on l’appelle.

 

On obtient le resultat suivant:

 

la somme de : 10 avec ​​ 15 est egale à 25

​​ la somme de : 12 avec ​​ 25 est egale à 37

 

VII) LES BOOLEENS

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript booleen</title>

<script>

  var vrai = true;

  var faux = false;

  console.log(vrai);

  console.log(faux);

</script>

</head>

<body>

</body>

</html>

 

 

Voici comment on déclare des variables booléennes, les variables booleennes servent enormément lors des tests par exemple:

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript booleen</title>

<script>

  var a=10;

  var b=20;

  var c=30;

  var boolean = (a>b);

  console.log("10>20: "+boolean);

  var boolean = (a<b);

  console.log("10<20: "+boolean);

  var boolean = ((a<b) && (b<c));

  console.log("10<20 et 20<30: "+boolean);

  var boolean = ((a<b) || (b<c));

  console.log("10<20 ou 20<30: "+boolean);

  var boolean = ((a<b) && (b>c));

  console.log("10<20 et 20>30: "+boolean);

  var boolean = ((a<b) || (b>c));

  console.log("10<20 ou 20>30: "+boolean);

</script>

</head>

<body>

</body>

</html>

 

10>20: false

index.html:12 10<20: true

index.html:14 10<20 et 20<30: true

index.html:16 10<20 ou 20<30: true

index.html:18 10<20 et 20>30: false

index.html:20 10<20 ou 20>30: true

 

 

VIII) LES OPERATEURS ARITHMETIQUES ET BOOLEEN

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript operateurs arithemtiques et booleens</title>

</head>

<body>

<script>

  console.log("Affectation de valeur");

  var monNom = "pierre";

  console.log(monNom);

  console.log("Opérations arithmétiques");

  console.log(5 + 5);

  console.log(5 - 5);

  console.log(5 * 5);

  console.log(5 / 5);

  console.log(5 % 5);

  console.log(11 % 10);

  console.log("Faire des comparaisons");

  console.log(11 > 10);

  console.log(11 < 10);

  console.log(10 >= 10);

  console.log(11 <= 10);

  console.log("Opérations de concaténations");

  console.log(monNom + " Grant");

  console.log("Logique booléenne");

  console.log(true && true);

  console.log(true && false);

  console.log(true || true);

  console.log(true || false);

</script>

</body>

</html>

 

 

 

 

IX) EGALITE ET IDENTITE

 

<html>

<head>

<title>JavaScript egalité et identité</title>

</head>

<body>

<script>

  var valeur1 = 3;

  var valeur2 = "3";

  if (valeur1 == valeur2) {

   console.log("baleur1 et valeur2 sont identique");

  } else {

   console.log("valeur1 et valeur2 ne sont pas les mêmes");

  }

  if (valeur1 === valeur2) {

   console.log("baleur1 et valeur2 sont identique");

  } else {

   console.log("valeur1 et valeur2 ne sont pas les mêmes");

  }

</script>

</body>

</html>

 

 

On obtient le résultat suivant:

 

valeur1 et valeur2 sont identique

​​ valeur1 et valeur2 ne sont pas les mêmes

 

Ainsi si les variables ont des valeurs identiques elles sont egales avec le symbole == par contre si les types sont différents elles sont différentes avec ===

 

XI) OPERATIONS SUR LES TYPES

 

 

<html>

<head>

<title>JavaScript egalité et identité</title>

</head>

<body>

<script>

  console.log("renvoie le type d'une variable");

  var chaine="bonjour";

  var numerique=10;

  var booleen=true;

  var personne=new Object();

  var nondefini;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(typeof(chaine))

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(typeof(numerique));

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(typeof(booleen));

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(personne);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(nondefini);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log("convertit une chaine en entier");

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a="10";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var b="20";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var c=a+b;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a=parseInt(a);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var b=parseInt(b);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var c=a+b;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log("convertit une valeur en chaine");

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a=10;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var b=20;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var c=a+b;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a=a.toString();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var b=b.toString();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var c=a+b;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log("indique si une valeur n'est pas un nombre");

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a=10;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(isNaN(a));

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var a="bbb";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(isNaN(a));

 ​​ ​​ ​​​​ </script>

</body>

</html>

 

 

XIII) OPERATEURS DE POST ET DE PRE INCREMENTATIONS

 

 

<html>

<head>

<title>JavaScript egalité et identité</title>

</head>

<body>

<script>

  i=10;

  //on affiche d'abord l'incrementation se fait ensuite

  console.log(i++);

  console.log(i);

  //on incrémente d'abord l'affichage se fait ensuite

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(++i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //on affiche d'abord la décrementation se fait ensuite

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(i--);

  console.log(i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //on décremente d'abord l'affichage se fait ensuite

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(--i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(i);

 ​​ ​​ ​​​​ </script>

</body>

</html>

 

Exercice: Expliquez les resultats avec le code suivant:

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ i=10;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ a=2

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ c=(2*i++);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ c=(2*++i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ c=(2*i--);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(i);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log(c);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ c=(2*--i);

 

 

XIV) LA BOUCLE

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript la boucle</title>

</head>

<body>

<script>

  console.log("Demarrage de la boucle");

  for (i = 0; i < 5; i++) {

   console.log("La valeur actuelle de i est " + i + ". on boucle encore une fois car " + i + "est plus petit que 5");

  }

  console.log("fin de la boucle");

</script>

</body>

</html>

 

On obtient le résultat suivant dans la console:

 

 

Demarrage de la boucle

La valeur actuelle de i est 0. on boucle encore une fois car 0est plus petit que 5

La valeur actuelle de i est 1. on boucle encore une fois car 1est plus petit que 5

La valeur actuelle de i est 2. on boucle encore une fois car 2est plus petit que 5

La valeur actuelle de i est 3. on boucle encore une fois car 3est plus petit que 5

La valeur actuelle de i est 4. on boucle encore une fois car 4est plus petit que 5

fin de la boucle

 

comment fonctionne le for:

nous avons le bloc suivant dans le programme :

 

for (i = 0; i < 5; i++) {

 ​​ ​​ ​​ ​​ ​​​​ instruction a executer jusqu’a ce que i>=

}

Ce bloc signifie que :

​​ au depart la variable I prend la valeur 0 et on verifie que i<5 si oui alos

les instructions de la boucle sont executés

on revient vers le for I est incrémenté de 1 et on teste si I<5 si oui alors

les instructions de la boucle sont executés

on revient vers le for I est incrémenté de 1 on teste si I<5 si oui alors

……………..

quand I>=5 les on sort de la boucle.

 

 

XVI) LE SI

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript le si</title>

</head>

<body>

<script>

  var login = false;

  if(login){

   console.log("rebonjour - redirection vers des données privées");

  }else{

   console.log("desole - acces refuse");

  }

</script>

</body>

</html>

 

Nous obtenons le résultat suivant dans la console

 

desole - acces refuse

 

Comment fonctionne le si?

Dans un premier temps la variable login est initialisé à false : var login = false;

Puis on teste si login est vrai: if(login)

si c’est le cas alors on execute: console.log("rebonjour - redirection vers des données privées");

si ce n’est pas le cas alors on execute: console.log("desole - acces refuse");

 

XVII) La boucle avec le while

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript la boucle</title>

</head>

<body>

<script>

  console.log("Demarrage de la boucle");

  var i=0;

  while (i<5) {

   console.log("La valeur actuelle de i est " + i + ". on boucle encore une fois car " + i + "est plus petit que 5");

    ​​ ​​ ​​​​ i++;

  }

  console.log("fin de la boucle");

</script>

</body>

</html>

 

Le while fonctionne d’une façon légérement différente par rapport au for en effet

La boucle fonctionne ​​ comme suit:

 

var i=0

while (i<5) {

 ​​​​ instruction a executer jusqu’a ce que i>=5

​​ i++

}

 

Dans un premier temps I prend la valeur 0

On teste si I<5

Si oui on execute les instruction de la boucle

On revient au while on teste si I<5

si oui on execute les instructions de la boucle

…………………………

lorsque I>=5 on sort de la boucle.

 

 

Demarrage de la boucle

index.html:11 La valeur actuelle de i est 0. on boucle encore une fois car 0est plus petit que 5

index.html:11 La valeur actuelle de i est 1. on boucle encore une fois car 1est plus petit que 5

index.html:11 La valeur actuelle de i est 2. on boucle encore une fois car 2est plus petit que 5

index.html:11 La valeur actuelle de i est 3. on boucle encore une fois car 3est plus petit que 5

index.html:11 La valeur actuelle de i est 4. on boucle encore une fois car 4est plus petit que 5

index.html:14 fin de la boucle

 

Exercice: ​​ Faire un programme javascript pour calculer les sommes suivantes:

 

1+2+3…..+100

1*2*3*…..*100

1/2+1/3+1/4+…...+1/100

1+(1+2)/(1*2)+(1+2+3)/(1*2*3)+….+(1+2+...+6)/(1*2*3*….*6)

 

 

 

XVIII) JAVASCRIPT ET LE DOM

 

1) Creation du fichier index.html

Creer le fichier index.html suivant:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Elements du DOM</title>

<link rel="stylesheet" href="Sample.css" />

 

</head>

<body>

<p id="par">cherche par id</p>

<p><strong>Hello</strong> World!</p>

<p class="par">recherche par classe!</p>

<p class="par">recherche par classe</p>

<p class="par"><span>recherche</span><span> par</span><span> classe</span></p>

<p id="par1">a remplacer par un lien hypertexte</p>

<a href="#">texte1</a>

<a class="lien1" href="#">texte2</a>

</body>

</html>

 

Lancez le fichier dans le navigateur on obtient la page web suivante:

 

 

 

 

 

 

 

 

2) ajout d’un paragraphe a la page web

 

Creons le fichier SampleScript.js

ajoutons le code suivant dans les tags <head> et </head>

<script src="SampleScript.js" defer></script>

 

Ce code signifie que nous faisons reference au fichier javascript mais que les instructions compris dans ce dernier ne s’executeront que lorsque la page web index.html aura été entiérement chargé.

 

Ajouter le code suivant dans  ​​​​ SampleScript.js et lancez index.html dans le navigateur

ce code permet d’ajouter un paragraphe au contenu du body et il est commenté:

 

//recuperation de l’element de tag body, l’instruction getElementsByTagName renvoie un tableau //contenant tous les éléments de tag body comme il y en a qu’un seul on le récupére c’est l’élément d’indice 0.

var body = document.getElementsByTagName("body")[0];

//on cree un element de paragraphe <p>

var paragraph = document.createElement("p");

//on défini le contenu du paragraphe

paragraph.innerHTML = "<strong>ajout d'un </strong> paragraphe";

//on ajoute le paragraphe au body

body.appendChild(paragraph);

 

on constate que le paragraphe ci-dessous s’est rajouté au contenu dans le body.

 

ajout d'un paragraphe

 

3) affichage du contenu d’un element HTML

 

Mettez le code précédent entre commentaire et ajoutez le code suivant:

ce code permet de récupérer le tag d’id par et d’afficher son contenu dans la console :

 

//récupération de l’élément d’id par

var element = document.getElementById("par");

//affichage du contenu de cet élément dans la console

console.log(element.innerHTML);

 

dans la console on obtient

 

cherche par id

 

4) affichage de tous les tags p de la page web

Mettez le code précédent entre commentaire et ajouter le code suivant:

ce code permet de récupérer les tags p du document et d’afficher leurs contenu dans la console.

 

//On récupére tous les tags p de la page que l’on met dans un tableau

var elementArray = document.getElementsByTagName("p");

//on parcours toute le tableau et on affiche le contenu dans la console

for(var i= 0; i < elementArray.length; i++)

{

 ​​ ​​ ​​ ​​​​ console.log(elementArray[i].innerHTML);

}

 

Dans la console on obtient:

 

cherche par id

<strong>Hello</strong> World!

recherche par classe!

recherche par classe

<span>recherche</span><span> par</span><span> classe</span>

a remplacer par un lien hypertexte

 

5) recherche de tous les tags par class

mettre entre commentaire le code precedent et ecrire le code suivant dans le fichier javascript, ce code permet de récupérer tous les tags ayant la class par du document et affiche leur contenu dans la console.

 

 

//On récupére tous les éléments de class par dans un tableau

var elementArray = document.getElementsByClassName("par");

//on parcours le tableau et on affiche le contenu de chaque element recupere dans

//la console.

for(var i= 0; i < elementArray.length; i++)

​​ {

 ​​ ​​ ​​ ​​ ​​​​ console.log(elementArray[i].innerHTML);

​​ }

 

on obtient:

 

recherche par classe!

recherche par classe

<span>recherche</span><span> par</span><span> classe</span>

 

mettre le code précédent entre commentaire et ecrire le code suivant dans le fichier javascript.Ce code permet de récupérer tous les tag p et a du document et affiche le contenu dans la console.

 

//on récupére dans un tableau tous les éléments de tags p et a

var elementArray = document.querySelectorAll("p, a");

​​ //on parcours le tableau et on affiche tous les éléments du tableau dans la console

for(var i= 0; i < elementArray.length; i++)

{

 ​​ ​​ ​​ ​​​​ console.log(elementArray[i].innerHTML);

}

 

on obtient alors:

 

cherche par id

<strong>Hello</strong> World!

recherche par classe!

recherche par classe

<span>recherche</span><span> par</span><span> classe</span>

a remplacer par un lien hypertexte

texte1

texte2

 

mettre entre commentaire le code précédent et copier les instructions suivantes. Ce code permet de créer deux paragraphes et de les integrer dans le document HTML.

 

//récupérer l’élément de tag body

var body = document.getElementsByTagName("body")[0];

//créer un tag de paragraphe

var p = document.createElement("p");

//créer un element de texte

var text = document.createTextNode("voici un nouveau texte");

//ajouter l’élément de texte au paragraphe

p.appendChild(text);

//ajouter le paragraphe au body

body.appendChild(p);

//créer un élément de paragraphe

var p = document.createElement("p");

//ajouter un texte au paragraphe (autre méthode)

p.textContent = "voici un autre texte";

//ajouter le paragraphe au body

body.appendChild(p);

 

Les 2 paragraphes suivants se rajoutent à la page web

 

voici un nouveau texte

voici un autre texte

Mettre entre commentaires les codes precedents et copier coller le code suivant:

ce code va placer le paragraphe avant le paragraphe qui a pour id ​​ par

 

//on recupere le tag body

var body = document.getElementsByTagName("body")[0];

//on crée un element de type paragraphe

var p = document.createElement("p");

//on ajoute du texte au paragraphe

p.textContent = "ce texte se place avant le paragraphe d'id par";

//on récupére l’element d’id par

sibling=document.getElementById("par");

//on crée le paragraphe avant le paragraphe d’id par

body.insertBefore(p, sibling);

 

le paragraphe s’affiche alors juste au dessus du paragraphe qui a pour id par comme dans la figure ci-dessous.

ce texte se place avant le paragraphe d'id par

cherche par id

Mettez entre commentaire le code précédent et ajoutez le code suivant dans le fichier javascript.Ce code recherche tout les éléments ayant une certaine propriété class et les supprime du document.

//On récupére le tag body

var body = document.getElementsByTagName("body")[0];

//On récupére dans un tableau tous les tags qui ont pour classe lien1

var elementArray = document.getElementsByClassName("lien1");

//on supprime les tags qui ont pour classe lien1

body.removeChild(elementArray[0]);

 

mettez entre commentaire le code precedent et ajouter le code suivant:

ce code va recupérer le paragraphe qui a pour id par1 et va le remplacer par un nouveau paragraphe.

​​ var body = document.getElementsByTagName("body")[0];

//on récupére l’élément qui a pour id par1

var existingElement=document.getElementById("par1");

//on crée un paragraphe

var newElement= document.createElement("p");

//on ajoute du texte a ce paragraphe

newElement.textContent = "element remplacant l'ancien element";

//on remplace le paragraphe d’id par1 par le nouveau paragraphe

var removedElement = body.replaceChild(newElement, existingElement);

 

nous aurons sur la page web le nouveau paragraphe qui remplace l’ancien.

element remplacant l'ancien element

mettre l’ancien code entre commentaire et saisir le code ci dessous dont l’objectif est de récupérer tous les tag link de la page et de recupérer les attributs de ces tags pour les afficher dans la console.

 

//on récupére tous les éléments qui ont pour tag link

var link = document.getElementsByTagName("link")[0];

//on recupére les attributs de ces éléments dans un tableau

var attr = link.attributes;

//on parcours le tableau pour récupérer le nom des attributs et leur valeur

//et on affiche le tout dans la console

for (var i=0; i < attr.length; i++) {

 ​​ ​​ ​​​​ console.log(attr[i].name + "='" + attr[i].value + "'");

}

 

dans la console on obtient:

rel='stylesheet'

SampleScript.js:63 href='Sample.css'

 

XIX) Les evenements javascript

 

Créons le fichier index.html suivant:

 

<!DOCTYPE html>

<html lang="en">

 ​​ ​​ ​​​​ <head>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <meta charset="utf-8" />

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <title>Les evenements</title>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <link rel="stylesheet" href="Sample.css" />

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <script src="SampleScript.js" defer></script>

 ​​ ​​ ​​​​ </head>

 ​​ ​​ ​​​​ <body>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <section>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div id="div1">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div id="div2">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <p>un texte</p>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <p>un deuxiéme texte</p>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </section>

 ​​ ​​ ​​​​ </body>

</html>

 

 

Créons le fichier Sample.css suivant:

 

div {

 ​​ ​​​​ border: 1px solid black;

 ​​ ​​​​ padding: 10px;

}

p {

 ​​ ​​ ​​​​ margin: 5px;

 ​​ ​​ ​​​​ background-color: yellow;

}

 

Créons le fichier SampleScript.js

 

Ouvrons le fichier index.html dans le navigateur nous avons la page web suivante:

 

 

1) Affectation d’un listener à un élément HTML

 

Ajoutons le code suivant dans le fichier javascript, on défini une fonction qui affiche une popup avec un message. On récupére une référence vers la div qui a pour id div2. On affecte un listener à la div qui ​​ 

ecoute le click sur la div et qui appelle alors la fonction someAction.

 

"use strict";

function someAction() {

 ​​ ​​ ​​​​ alert("affichage aprés click...");

}

 

var div = document.getElementById("div2");

div.addEventListener("click", someAction);

 

Lorsqu’on clique sur la div2 le message suivant s’affiche:

 

 

 

 

 

 

 

 

 

 

 

 

si nous supprimons la ligne:

 

div.addEventListener("click", someAction);

 

et que nous la remplacions par:

 

div.onclick = someAction;

 

nous obtenons exactement le même effet.

 

2) Récupérer les paramétres de l’écouteur

Mettre le code précédent entre commentaire et ecrire le code suivant:

 

function someAction(e) {

 ​​ ​​ ​​​​ //L'evenement

 ​​ ​​ ​​​​ console.log(e.type);

 ​​ ​​ ​​​​ //l'élément sur lequel on clique

 ​​ ​​ ​​​​ console.log(e.target);

 ​​ ​​ ​​​​ //l'element auquel est associé l'écouteur

 ​​ ​​ ​​​​ console.log(e.currentTarget);

}

 

var div = document.getElementById("div2");

div.onclick = someAction;

 

Lorsqu’on clique sur un texte on obtient dans la console:

 

click  ​​ ​​ ​​ ​​​​ 

<p>​un texte​</p>​

​​ <div id=​"div2">​…​</div>

 

lorsqu’on clique sur un deuxiéme texte on obtient dans la console:

click

<p>​un deuxiéme texte​</p>​

<div id=​"div2">​…​</div>

 

XX) LES CANVAS

 

Créer le fichier index.html suivant:

 

<!DOCTYPE html>

<html lang="en">

 ​​ ​​ ​​​​ <head>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <meta charset="utf-8" />

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <title>canvas</title>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <script src="SampleScript.js" defer></script>

 ​​ ​​ ​​​​ </head>

 ​​ ​​ ​​​​ <body>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <canvas id="board" width ="600" height ="600">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </canvas>

 ​​ ​​ ​​​​ </body>

</html>

 

saisir le code javascript suivant dans le fichier SampleScript.js

 

 

 

 

// Récupérer le contexte 2D du canvas

var Canvas = document.getElementById("canvas");

var Context = Canvas.getContext("2d");

 

 

XXI) Les tableaux

 

tableaux a une dimension et affichage

 

var colors = ["rouge", "vert", "bleu", "jaune", "marron", "orange"];

for (var i=0 ; i<colors.length ; i++) {

console.log(colors[i]) ;

}

 

tableaux a une dimension et affichage

var colors1 = [];

colors1[0]="rouge" ;

colors1[1]="vert" ;

colors1[2]="bleu" ;

colors1[3]="jaune" ;

colors1[4]="marron" ;

colors1[5]="orange" ;

colors1[6]="cyan" ;

for (var i=0 ; i<colors1.length ; i++) {

console.log(colors1[i]) ;

}

 

Les tableaux a 2 dimensions

 

tab2=[ ["rouge", "vert", "bleu"], [ "jaune", "marron", "orange"],[, "blanc", "noir", "gris"]]

for (var i=0 ; i<tab2.length;i++){

chaine= ""

for (var j=0;j<tab2[i].length;j++){

chaine=chaine+" "+tab2[i][j] ;

}

console.log(chaine);

}

 

Tableau a deux dimensions et affichage

tab3=[]

tab3[0]=[]

tab3[1]=[]

tab3[2]=[]

tab3[0][0]="rouge"

tab3[0][1]="vert"

tab3[0][2]= "bleu"

tab3[1][0]="jaune"

tab3[1][1]="marron"

tab3[1][2]= "orange"

tab3[2][0]="blanc"

tab3[2][1]="gris"

tab3[2][2]="blanc"

for (var i=0 ; i<tab3.length;i++){

chaine= ""

for (var j=0;j<tab3[i].length;j++){

chaine=chaine+" "+tab3[i][j] ;

}

console.log(chaine);

}

 

XXII) Operation sur les chaines de caractere

 

mot.substr(i,1): extraire un caractére d’une chaine

mot.length: taille d’un mot