TP2 - JS

Objectifs

Comprendre la structure des pages web ;
Écrire des scripts modifiant des pages.

L'ensemble du TP se fait sur le logiciel Notepad++ (téléchargeable ici) OU BIEN avec l'éditeur VisualStudio Code (téléchargable ici).

Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

Memento CSS

Un mémento des propriétés CSS est disponible sur ce lien.

Memento JS

Un mémento de l'utilisation du JS est disponible sur ce lien

De python à JS

La logique de la programmation en JS est la même qu'en python, cependant l'écriture va différer :

On met des ";" à la fin de chaque ligne de code ;
On écrit "var" devant le nom d’une variable pour déclarer la variable ;
On met des ( ) pour écrire des conditions et des boucles ;
On met des { } pour écrire des blocs d’instructions ;
On écrit function pour définir des fonctions :

function test(parametre){
    var variable = "chaine";
    for(var i = 0; i < 10; i++){
        console.log(i);
    }
    console.log(chaine);
}

Prise en main de JS

Recopier le code ci-dessous dans une page HTML. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <h1 id="titre">Titre</h1>
        <p id="para">Paragraphe</p>
        <script>
            document.getElementById("titre").innerHTML = "JavaScript";
        </script>
    </body>
</html>

Modifier l’intérieur de la balise script par le code ci-dessous :
```
var element = document.getElementById("titre");
element.style.color = "green";
```
Que font ces 2 lignes ?
Rajouter une instruction dans ce script pour mettre le fond du titre en bleu.
Rajouter les instructions nécessaires pour remplacer "Paragraphe" de la balise p par "NSI".

Recopier le code ci-dessous dans une page HTML. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <h1 id="titre">Titre</h1>
        <div id="zone">
        </div>
        <script>
            var z = document.getElementById("zone");
            var element = document.createElement("div");
            element.setAttribute("id","creation");
            element.innerHTML = "test";
            z.appendChild(element);
        </script>
    </body>
</html>

A quoi servent les lignes dans le script ?

Recopier et compléter le code ci-dessous dans une page HTML. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <script>
        var b = document.getElementsByTagName("body")[0];
        b.innerHTML += "<h1>Titre</h1>";
        </script>
    </body>
</html>

A quoi servent les lignes dans le script ?

Les boucles

Pour rappel, les boucles for s’écrivent de cette façon :

for(var nomVariable = debut ; nomVariable < fin ; nomVariable += incrément){
//exécuter code
}

Recopier le code suivant. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <h1 id="titre">Titre</h1>
        <script>
        console.log("C chiant de copier/coller");
        </script>
    </body>
</html>

Pour l’observer, faire un clic droit sur la page => Inspecter l’élément, et dans le menu, cliquer sur "console".

Dans la console, écrire
```
alert("test");
```
Que se passe-t-il ? Que permet de faire cet endroit ?
Dans le script de la question 7. remplacer la ligne par
```
for(var i = 0; i < 10; i++){
alert(i);
}
```
Que se passe-t-il ?
En vous servant d’une des questions précédentes, écrire un script avec une boucle permettant de créer 9 titres h1 dont le titre est la valeur du variant de boucle.

Les événements

Les événements permettent d’exécuter du code / des fonctions sur des éléments, en fonction du type de l’événement.

Recopier le code suivant. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
        <body>
        <input type="button" value="Cliquer sur moi !"
        onclick="alert('Pk t as cliqué ?!')">
    </body>
</html>

2.Recopier le code suivant. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <input type="button" value="Cliquer sur moi !"
        onclick="clic()">
        <script>
        function clic(){
        alert("faut pas cliquer n'importe où");
        }
        </script>
    </body>
</html>

Recopier le code suivant. Que fait le script ?

<html>
    <head>
        <title>Exemple JS</title>
    </head>
    <body>
        <h1 id="titre" onmouseover="sourisOn()" onmouseout="sourisOff()"
        onclick="clic()">NSI</h1>
        <script>
        function sourisOn(){
        var titre = document.getElementById("titre");
        titre.style.color = "blue";
        }
        function sourisOff(){
        var titre = document.getElementById("titre");
        titre.style.color = "black";
        }
        function clic(){
        var titre = document.getElementById("titre");
        titre.style.color = "red";
        }
        </script>
    </body>
</html>

Écrire une page HTML qui comporte un bouton qui, lorsque l’on clique dessus, exécute une fonction qui génère 9 titres h1.

De python à JS​

Prise en main de JS​

Les boucles​

Les événements​

De python à JS

Prise en main de JS

Les boucles

Les événements