Imprimer
Affichages : 6078

Vote utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

NSI - Numérique et Sciences Informatiques


Javascript et HTML


1. Présentation de Javascript

 

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs.

JavaScript a été créé en 1995 par l'américain Brendan Eich. Il a été standardisé sous le nom d'ECMAScript en juin 1997 par Ecma International dans le standard ECMA-262.

Brendan Eich Mozilla Foundation official photoBrendan Eich, né en 1961 à Pittsburgh en Pennsylvanie

 

2. Fonctionnement de Javascript

Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur du World Wide Web.
Le langage JavaScript permet des pages web interactives, et à ce titre est une partie essentielle des applications web. Une grande majorité des sites web l'utilisent, et la majorité des navigateurs web disposent d'un moteur JavaScript dédié pour l'interpréter, on peut donc se passer des serveur pour le faire fonctionner.

<script> </script> 

2a. Un premier exemple, le fameux "Hello, World!"

Recopiez le code suivant sur une page html nommée exemple_javascipt-1.html et ouvrez-le avec votre navigateur.

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

    <script>
        alert('Hello world!');
    </script>

</body>
</html>

 

On obtient le résultat suivant : exemple_javascipt-1.html

Instructions et point virgule

Les fonctions : exemple, la boîte de dialogue alert()

alert('Hello world!'); // c'est une première fonction en Javascript

 

Les commentaires

2b. Le JavaScript externe

Il est possible, d'écrire le code JavaScript dans un fichier externe, portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément <script> et de son attribut src qui contient l'URL du fichier .js.

Par exemple si dans le fichier exemple1.js (dans le même répertoire) on écrit le script :

alert('Hello world!');

 

On peut modifier la page HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

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

</body>
</html>

 

On obtient le résultat suivant : exemple_javascript-2.html


 

Exercice 1

Ecrivez des commentaires sur le script précédent que vous proposerez dans un fichier externe.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice1.html" que vous testerez.
Vous devrez ensuite créer une page web (avec votre nom) et les liens vers les différents exercices JavaScript de ce TD.

 

3. Programmer en Javascript

Un cours de référence de l'université paris Sorbone est ici disponibles  : débuter en JavaScript.
Peu être lu en diagonale une première fois pour servir de source par la suite.

3a. Les variables


Résumé du cours

Un exemple

<script>
var a, b, produit,somme;
a = prompt('Donnez un nombre');
b= prompt('Donnez un autre nombre :');
a=parseFloat(a) ; // On convertit la chaîne de caractère a en flottant
b=parseFloat(b); // On convertit la chaîne de caractère b en flottant
produit = a*b;
somme=a+b;
alert('Le produit est '+ produit+', et la somme est '+ somme);
</script>

 

 On obtient le résultat suivant : Exemple 3 .

Avant de poursuivre vers l'exercice 2

Faire le QCM et le QCM didactiques et les deux petits exercices :

 

Exercice 2

Ecrire un script Javascript qui pour un triangle ABC rectangle en A, demande la longueur AB, la longueur AC et affiche une valeur approchée de l'hypoténuse BC.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice2.html" et devez faire figurer le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

Aide : 

<script>
a = Math.sqrt(2) // a =  la racine carrée de 2 (enfin une valeur approchée)
</script>

 

Programmer en Javascript

3b. Les conditions


Résumé du cours

if ( /* condition */ ) 
{ // Du code… } else { // Du code… }

 

 

 

Exercice 3

Ecrire un script Javascript qui pour un triangle ABC, demande la longueur AB, la longueur AC et la longueur BC et affiche si ce triangle est rectangle (et en quel sommet) ou si il ne l'est pas.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice3.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).
Vous devrez tester votre script avec :

  1. ABC tel que AB = 3, AC = 4 et BC = 5 qui drevrait afficher : "ABC est rectangle en A" ;
  2. ABC tel que AB = 50, AC = 30 et BC = 40 qui drevrait afficher : "ABC est rectangle en C" ;
  3. ABC tel que AB = 6, AC = 10 et BC = 8 qui drevrait afficher : "ABC est rectangle en B" ;
  4. ABC tel que AB = 3, AC = 4 et BC = 6 qui drevrait afficher : "ABC n'est pas rectangle".

 

3. Programmer en Javascript

3c. Les structures itératives (boucles)


 

 

Résumé du cours

var x = 0;

x = x+1 ; // on ajoute 1 à x
alert(x); // Affiche : « 1 »

x++;      // on ajoute 1 à x
alert(x); // Affiche : « 2 »

x--;     // on enlève 1 à x
alert(number); // Affiche : « 1 »

 

<script>
var N = 0,somme=0;

while (N < 5) 
{ N=N+1; // ou N++ somme=somme+N } alert('somme= ' + somme + ' et N=' + N ); // Affiche « somme = 15 et N = 5 » </script>

Un test avec ce script : exemple 1

 

<script>
var somme=0;

for (var N=1 ; N<=5 ; N=N+1 ) // syntaxe (var compteur=valeur départ ; compteur<= valeur fin ; incrément)
{   
    somme=somme+N
}

alert('somme= ' + somme + ' et N=' + N ); // Affiche « somme = 15 et N = 6 » , la dernière valeur de N est 6 ce qui invalide la condition
</script>

 Un test avec ce script : exemple 2.

 

Exercice 4

Ecrire un script Javascript qui tente de faire deviner un entier de votre choix et affiche, plus petit, ou plus grand jusqu'à la victoire.
Commencer par fixer votre nombre à deviner puis essayer de le générer aléatoirement dans un deuxième temps.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice4.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

Exemple attendu en vidéo :

3. Programmer en Javascript

3d. Les fonctions


 

Résumé du cours

<script>
function DireBonjour(x)
{
    return ('Bonjour  ' + x); // L'instruction « return » suivie de la concaténation de 'Bonjour' et de la variable chaîne x
}
nom=prompt('Quel est votre prénom svp ?'); // On demande le prénom à l'utilisateur
alert(DireBonjour(nom)); // Ici on affiche la valeur retournée par la fonction DireBonjour()
</script>

 

 

Exercice 5

Ecrire une fonction Javascript qui teste la présence de la lettre "e" minuscule dans une chaîne de caractères passée en paramètre. Cette fonction doit renvoyer vrai ou faux. Utilisez votre fonction après avoir demandé une chaîne de caractères via la fonction prompt().
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice5.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).


Aide : La fonction .length renvoie la longueur d'une chaine C et la fonction .charAt(position) le caractère à la position précisée dans la chaîne C.
Voici un exemple d'utilisation : lien exemple 2.

 

<script>
var C='abcdefg'; // C est une chaine de caracteres
long=C.length;   // long est la longueur de la chaine, ici 7 
lettre=C.charAt(0); // lettre est le caractere de la chaine en position 0 (le 1er caractere)
alert('Chaine=' + C + ' , longueur = '+ long + ', premier caractere = ' + lettre );

</script>

 

4. Les évènements en HTML


JavaScript permet de réagir à un évènement lié à la page HTM :

Pour réagir à un évènement de ce type, il faut commencer par agir au niveau HTML en ajoutant un attribut à la balise à laquelle on souhaite ajouter une interaction. La syntaxe est toujours la même :

onEvénement = "Fonction"

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.
Par exemple, on peut faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une page Web, clique sur un texte...

 Voici une liste de quelques évènements :

 

EventHandler : Gestionnaire d'évènement (avec exemple)Evènement
onclick Clic de la souris sur l'élément sur l'élément
ondblclick Double-clic de la souris sur l'élément sur l'élément
onkeypress Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
onkeydown Appuyer (sans relâcher) sur une touche de clavier sur l'élément
onmouseover Faire entrer le curseur sur l'élément
onsubmit Envoi d'un formulaire
input Taper un caractère dans un champ de texte
select Sélectionner le contenu d'un champ de texte (input,textarea, etc.)

 

On trouve de nombreux exemples sur cette page : https://www.w3schools.com/js/js_htmldom_events.asp

 

4.1. Réponse à un click sur un élément en HTML

Déclencher une fonction javaScriptau click - Ouvrir une fenêtre alert() au click

Voici un premier exemple : évènements exemple 1.

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">

<html>
<head>
    <title>Les évènements en javaScript : Exemple 1</title>
</head>
<body>
<input type ="button" value="Ouvrir une fenêtre alerte" onclick="fenetre('Bonjour')"/>
<script>
function fenetre(x)
{
alert(x + ' Madame ou Monsieur');
}
</script>
</body>

 

Créer un affichage dans à un endroit précis de la page au click

<body>
<h2> Des  boutons </h2>
<h3>1. Un premier bouton qui affiche la date</h3>

<!--un premier bouton--> 
<button  type="button"   onclick="document.getElementById('demo').innerHTML=Date()" >
Cliquez sur le bouton 1 </button>
<!--  --> 

<!--La balise id="demo" permet d'identifier un élément de la page--> 
<p id="demo">C'est ici</p>
<!--  --> 

<h3>2. Un autre bouton qui modifie du contenu HTML</h3>

<p> On va modifier le contenu de la balise HTML de paragraphe nommée "ICI" (grâce à l'identifiant id="ICI"). Il change sous vos yeux. 
</p>

<!--La balise id="ICI" permet d'identifier un autre élément de la page-->
<p id="ICI" >  Ici la balise HTML nommée ICI : On va changer ce texte. </p>
<!--  -->

<!--un autre bouton--> 
<button  type="button"   onclick="document.getElementById('ICI').innerHTML= 'On change' " >
Cliquez sur le bouton 2</button>
<!--  --> 
</body>

 

<body>
<input type ="button" value="Changer de couleur" onclick="ChangementCouleur()"/>
<script>
function ChangementCouleur()
{  
   const couleur=document.body.style.backgroundColor; // on charge la couleur du fond, const pour déclarer variables (avec let) remplace var
   alert("Vous m'avez cliqué ! On change de couleur = " + couleur);
   if (couleur=='ivory')
      {document.body.style.backgroundColor = 'orange';}
   else 
      {document.body.style.backgroundColor = 'ivory';}
   
}
</script>
</body>

 

4.2. Choix dans une liste déroulante 

On va décrire l'exemple 3 qui suit.

 

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">

<html>
<head>
    <title>Les évènements en javaScript : Exemple 3</title>
</head>
<body>
<select id="choix" name="lang" onchange="selection()">
<option value="fr"> Français </option>
<option value="zh"> Chinois </option>
<option value="it"> Italien </option>
</select>

<script>
 function selection()
 {
    const selecteur = document.getElementById("choix");
const monChoix=selecteur[selecteur.selectedIndex]; alert('Vous avez choisi la valeur = ' + monChoix.value + ' , soit le choix = ' + monChoix.text); } </script> </body>

 

4.3. Un petit formulaire

On présente ici comment récupérer une valeur entrée dans une case à l'aide d'un formulaire après validation d'un bouton.

<body>
<!------------------------------------------------->
<h2> Les évènement en HTML/JavaScript : Un petit formulaire</h2> 
<!------------------------------------------------->
 
<!------------------------------------------------->
Donnez un entier entre 1 et 4, je vais vous le traduire en anglais : 
<FORM>
 <input type="text" name="Valeur_Reponse" id="Id_Reponse" value="" />
 <input type="button" value="Valider" onclick="MaFonction();" />
</FORM>

<!--------On affichera le réslutat ici------------->
<p id='resultat'>S'écrit en anglais :</p>
<!------------------------------------------------->

<script>
function MaFonction()
{
    var reponse = document.getElementById("Id_Reponse").value; // Pour récupérer la valeur entrée
    
    if (reponse=='1')
            {document.getElementById('resultat').innerHTML= 'one';}
    else if  (reponse=='2')
	    {document.getElementById('resultat').innerHTML= 'two';}
    else if  (reponse=='3')
	    {document.getElementById('resultat').innerHTML= 'three';}
    else if  (reponse=='4')
	    {document.getElementById('resultat').innerHTML= 'four';}	
    else 
	    {document.getElementById('resultat').innerHTML= 'Je ne comprend pas';}
 
}
</script>
<!------------------------------------------------->
</body>

 Lien vers l'exemple 4.

 

Exercice 6

Concevoir une page avec un Quiz  avec 3 questions :
- 1 questions Vrai/Faux avec avec deux boutons ou un QCM ;
- 1 question avec une liste déroulante (QCM) ;
- 1 question ouverte avec un texte ou une valeur à donner.
Vous devez aussi afficher le score final. 
Toute ammélioration est la bienvenue.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice6.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

 

 

Compléments

 

Compléments : Des cours progressifs à suivre


Voici quelques cours que vous pouvez suivre en compléments :

  1. Javascript sur Pixees : https://pixees.fr
    HTML, CSS et javascript. Pour se familiariser avec ces notions.
     
  2. Openclassroom : https://openclassrooms.com
    Les premiers pas en javascipt.
     
  3. Lyceum : https://lyceum.fr
    Gestion des évènements en Javascript.

 

Articles Connexes