JavaScript⚓︎

Premiers pas en JavaScript⚓︎

JavaScript

Si nous voulons aller plus loin dans l'interactivité ou le dynamisme des pages, il faut utiliser le langage JavaScript. Il a été créé en 1995 par Brendan Eich qui travaille chez Netscape Communication Corporation. Le navigateur Netscape est alors le principal concurrent de Internet Explorer. Dès 1996, JavaScript est adopté par tous les navigateurs, ce qui permet d'en faire un standard incontournable. Le nom est une référence au langage Java, de Sun Microsystems, mais n'a rien à voir au niveau de la syntaxe. JavaScript est directement interprété par le navigateur, le rendant très réactif.

Le code JavaScript se met entre balises <script>, comme dans le fichier alerte.html :

alerte.html

<!DOCTYPE HTML>
<html>
  <body>
    <script>
       alert("Hello world!")
    </script>
  </body>
</html>

Exercice 4

Créez le fichier alerte.html et ouvrez-le avec Firefox.

Explication

Ce script afiche le message "Hello world!" dans le navigateur.

Modification en temps réel d'une page⚓︎

Utilisation de la console développeur

Afin d'explorer quelques possibilités de JavaScript, il est possible d'utiliser directement Firefox pour modifier l'aspect d'une page.

Parmi les outils de développement, il y a la console développeur qui permet d'exécuter des commandes JavaScript et de modifier la page en temps réel.

Exercice 5

On considère la page suivante :

basique.html

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="mondiv">Bonjour !</div>
    </body>
</html>

Créez le fichier basique.html et recopiez le code ci-dessus.
Ouvrez la page dans Firefox.
Ouvrez la console JavaScript en faisant Ctrl＋Shift＋K ou en faisant F12 puis en allant sur console.

Changez le fond de la page en tapant :

document.body.style.backgroundColor = "red";

Remettez le fond initial en tapant :

document.body.style.backgroundColor = "";

Changez le titre en tapant :
```
document.title = "Bonjour !";}
```
Nous allons travailler sur le texte dans la page. Pour cela, nous allons créer une variable qui correspondra à ce texte.
1. Tapez let d = document.getElementById("mondiv");.
2. Changez la couleur du texte en tapant :
```
d.style.color = "blue";
```
3. Changez la texte en gras avec :
```
d.style.fontWeight = "bold";
```
4. Rajoutez un cadre avec :
```
d.style.border = "1pt dashed green";
```
5. Changez le contenu avec :
```
d.innerHTML = "Wao, on peut aussi faire <i>ça</i> ?"
```

Explications

On remarque la structure arborescente, où chaque sous-élément est séparé de l'élément précédent par un point. Ainsi d.style.border correspond à l'élément border de l'élément style de l'élément d. Pour voir les sous-éléments, il suffit de taper cet élément dans la console et ensuite de cliquer sur le petit triangle à gauche pour déplier l'arbre des sous-éléments, certains ayant eux-même des sous-éléments. Ainsi en tapant d.style, on voit tous les éléments de style qui peuvent être modifiés.

On peut remarquer qu'il y a 2 façons de changer les attributs. Par exemple, pour le fond, on peut utiliser d.style.backgroundColor ou d.style["background-color"].

Exercice 6

Reprenez l'exemple précédent et en utilisant la console, mettez le fond du texte en noir et centrez-le horizontalement.