Javascript 01 : AFFICHER DES MESSAGES

1 - Script

2 - alert()

3 - Commentaires

4 - log()

5 - innerHTML

6 - querySelector

7 - Variable et FOR

8 - FAQ

Prerequis : Pour comprendre cette activité, il faudra avoir les connaissances utilisées dans les activités HTML-CSS 01 à 03.

Encodage et choix du langage : Pensez bien à indiquer le langage utilisé dans Notepad++ dès la création du fichier et choississez l'encodage UTF-8 avant de commencer à taper quoi que ce soit. Sinon, pensez à convertir en UTF-8 avant d'enregistrer. Pensez également à utiliser EDITION-LIGNES-Enlever les lignes vides.

1 - Intégration du javascript dans le code HTML

Pour programmer en Javascript, il vous faudra comme pour HTML et CSS un simple éditeur de texte.

Notepad++ va ainsi être très utile, mais pas indispensable.

Pour intégrer votre code javascript, nous allons utiliser la balise <script>. A l'aide de cette balise, nous allons donner le nom et la position du script à lancer.

Trois possibiiltés pour utiliser un script javascript :

Option A : le placer directement dans la page html (mais nous perdons alors la possibilité de l'utiliser sur plusieurs pages, à moins de faire du copier/coller),
Option B : indiquer la localisation du code via une balise <script> en fin de code HTML .
Option C : indiquer la localisation du code via via une balise <script> insérée comme pour le CSS dans la balise <head>.

Option A : directement dans le html

Elle ne va nous servir ici qu'à vérifier que le navigateur interprète bien le javascript.

Il suffit de placer votre code entre la balise d'ouverture <script> et de fermeture </script>.

01° Créer une page HTML en utilisant le code suivant. En le lançant, vous devriez constater l'apparition d'une fenêtre pop-up dès l'activation de la fenêtre.

<!DOCTYPE html>

<html>

<head>

<title>Intégration js</title>

</head>

<body>

<h1>Premiers tests avec javascript</h1>

</section>

alert("Hello World !");

</script>

</body>

</html>

On sait maintenant (normalement !) que votre navigateur reconnait le javascript. Passons à la gestion du code dans un fichier indépendant. Passons à l'option suivante.

Option B : un fichier à part et une balise script en fin de code html

Nous allons donc créer un fichier .js que nous allons placer dans le même répertoire que le fichier .html. Comme avec le CSS.

mon_site

index.html

mes_scripts.js

Il suffit alors de donner à la balise script les indications du type de script (javascript ici) et le nom du fichier (mes_scripts.js).

On place la balise <script> juste avant la balise de fermeture </body> : le script ne se lancera qu'une fois que la page sera presque totalement chargée.

02° Créer le fichier HTML et le fichier JS à l'aide des codes ci-dessous. Tester pour vérifier que votre HTML détecte bien le javascript. Si ça ne marche pas :

Vérifier le nom de votre fichier js : il doit se nommer mes_scripts.js.
Vérifier l'extension de votre fichier js : .js et pas .txt
Vérifier l'arborescence de vos deux fichiers : le HTML et le JS doivent être situés dans le même répertoire.

Le fichier HTML : son nom n'a pas d'importance.

<!DOCTYPE html>

<html>

<head>

<title>Intégration js</title>

</head>

<body>

<h1>Premiers tests avec javascript</h1>

</section>

</body>

</html>

Le fichier JS : il faut l'enregistrer en le nommmant mes_scripts.js"

alert("Hello World !");

Option C : un fichier à part et une balise script dans la balise head

La balise script se place normalement dans la balise head.

Le problème que le script va s'activer dès qu'on rencontrera la balise. Donc avant que la page ne soit entièrement chargée. Le problème ? Le script tente parfois d'agir sur des balises html qui ne sont pas encore apparues ! Et donc le script va planter.

Lorsqu'on place cette balise ici, on doit donc rajouter quelques lignes de code pour indiquer au script d'attendre le chargement de la page.

Je n'explique pas cette méthode dans cette activité. Il faudra attendre un peu. Voici néanmoins le code a utilisé dans le cas de cette méthode C.

Le fichier HTML : son nom n'a pas d'importance.

<!DOCTYPE html>

<html>

<head>

<title>Intégration js</title>

</head>

<body>

<h1>Premiers tests avec javascript</h1>

</section>

</body>

</html>

Le fichier JS : il faut l'enregistrer en le nommmant mes_scripts.js"

function demarrage() {

alert("Hello World !");

}

window.addEventListener("load",demarrage);

2 - La méthode alert

Nous avons afficher Hello World ! dans une boîte d'alerte.

Voilà le contenu du fichier mes_scripts.js

alert("Hello World !");

Que fait le code ? Il utilise la méthode alert et on fournit en argument la chaîne de caractères à afficher.

On notera qu'en javascript, on retrouve la nomenclature du java ou de C++ : chaque instruction se termine par un point-virgule.

C'est quoi une méthode ?

Un peu de vocabulaire :

Une fonction est un ensemble d'instructions qu'on peut utiliser en l'appelant à l'aide de son nom.

Une méthode est une fonction qui est stockée dans un ensemble de données qu'on nomme un objet. Pour utiliser une méthode, on doit fournir le nom de l'objet, mettre un point et donner le nom de la méthode à utiliser :

monObjet.saMethode;

Pourquoi parler de méthode plutôt que de fonction pour alert ? A priori, elle ne s'applique pas à un objet...

En réalité, si. Javascript est un langage qui parvient à s'adapter un peu : nous aurions dû noter le code suivant:

window.alert("Bonjour le monde !");

On dit donc bien qu'on veut appliquer la méthode alert sur l'objet nommé window.

Néanmoins, javascript parvient à s'adapter à l'absence de window., et parvient à comprendre qu'on veut appliquer alert sur window. même si on ne lui dit pas. Pourquoi ? Le langage est ainsi fait de base : il tente d'appliquer la méthode à l'objet qui lui semble correspondre à la demande de l'utilisateur.

Voyons voir si Javascript parvient à additionner (on dira plutôt concatener) deux chaînes de caractères. Par exemple "ab"+"cd" = "abcd".

03° Recopier le code (il contient une erreur, c'est volontaire).

window.alert("Bonjour" + " " + "le + " " + "monde !");

Bon, ça ne marche pas... A moins qu'une erreur n'ai fait planter l'instruction. Comment le savoir ? Et bien, tout navigateur digne de ce nom possède une console de développement web qui va nous permettre de savoir si un problème est apparu.

Pour Firefox, c'est dans OUTILS - DEVELOPPEMENT WEB - CONSOLE WEB. Pensez bien à sélectionner le journal js et le tour est joué.

Pensez à réactiver la page pour voir le journal d'erreur.

Pour Chrome, il faut utiliser le menu qui s'ouvre à droite:

Ensuite, passez de Elements à Console.

Pour Edge, c'est dans le menu plus à droite :

Et ensuite, on observe la console:

Et voilà. Dans tous les cas, on remarque qu'il y a une erreur : il manque un " après le.

04° Modifier le script en utilisant bien

window.alert("Bonjour" + " " + "le " + " " + "monde !");

BILAN : on peut faire de la concaténation dans une boîte d'alerte.

05° Et les calculs ? Ca fonctionne ou non ? Voyons ce que donne les tests suivants :

window.alert(5+2);

06° Utiliser le script suivant pour tenter de trouver ce que font les opérateurs utilisés :

window.alert(9*9+2);

window.alert(12-2*0.8888);

window.alert(3**2);

window.alert(14/3);

window.alert(14%3);

...CORRECTION...

(9*9+2) affiche simplement 83 : (9*9)+2.

(12-2*0.8888) affiche simplement 10.22224. On notera que javascript utilise la notation anglosaxonne pour la virgule, à savoir le point et pas la virgule.

(3**2) affiche 3 à la puissance 2, soit 9.

(14/3) affiche le résultat de la division, soit forme d'un nombre réel : 4.666666666666667. On notera que javascript renvoie une valeur approximative des réels.

(14%3) affiche 2... Il s'agit du reste de la division entière. 14/3 = 4 en division entière. On a donc 14 = 4*3 +2. L'opérateur % permet donc de ne renvoyer que le reste.

On retiendra que javascript sait travailler avec plusieurs types de données :

Les chaînes de caractères ou strings.
Les nombres entiers ou integers.
Les nombres réels (à virgule) ou floats.

07° Et le mélange de calcul et de chaîne de caractères ? Ca fonctionne ou non ? Voyons ce que donne les tests suivants :

window.alert("5+2="+5+2);

Nous obtenons donc 5+2 = ... 52.

Zut, ça ne marche pas comme prévu ! Pourquoi ? Simplement car Javascript comme Python possède un typage dynamique.

Typage dynamique

Typage fait référence au type d'une variable : integer, float, boolean ...

Dynamique veut dire que Javascript choisit de lui même le type d'une variable (integer, string ...). il peut même changer le type d'une variable lors d'une nouvelle affectation : vous pouvez commencer avec une variable test qui est un de type integer en début de script et un string en fin de script.

Alors, où est le problème, il aurait dû se débrouiller, non ? Pas vraiment. C'est un peu comme en Physique : on ne peut additionner que des grandeurs de même type. Et là, c'est exactement ce qu'il faut.

Lorsqu'on tape window.alert("5+2="...), il comprend bien qu'on va devoir afficher des strings.

Et donc, lorsqu'on rajoute window.alert("5+2="+5+2), il transforme le 5 puis le 2 en string. Et c'est comme ça qu'on se retrouve avec 5+2=52...

Comment régler le problème ? Il suffit d'aider javascript à typer correctement. Pour cela, on peut utiliser la notion d'opération prioritaire.

window.alert("5+2="+(5+2));

Pourquoi deux pauvres parenthèses vont-elles règler le problème ?

"5+2=" désigne un string. Pas de problème.
5 désigne un integer. 2 désigne un integer.
(5+2) désigne donc un integer aussi. Ca donne 7.
Lorsqu'on fait "5+2="+(5+2), il transforme (5+2) en 7 integer puis en "7" string.

08° Modifier le code pour qu'il puisse afficher "5*2=10" en lui faisant calculer 5*2 plutôt que de taper 10 dans le script.

Cela fonctionne aussi avec les nombres à virgules (nommé float en informatique) : on peut convertir en dynamique en float puis en string en partant de (5/3):

window.alert("5/3="+(5/3));

On peut également obtenir le reste d'une division, à l'aide du modulo. En gros, si vous divisez 5 par 3, on peut écrire que 5 = 3*1+2. Le modulo de 5 par 3 donne donc le reste, 2.

Vous l'avez certainement rencontré en trigonométrie avec l'angle en degré : il est défini modulo 360° : un angle de 370° équivaut à un angle de 10° car 370°=360°*1+10°.

En javascript, on code cela avec

window.alert("5 modulo 3 (ou le reste de la division entière de 5 par 3) vaut 5%3="+(5%3));

Peut-on faire des tabulations dans une alerte ? Essayons le même code que Python : \t dans la chaîne de caractère.

09° Modifier le code pour obtenir ceci :

...CORRECTION...

alert("Bonjour\tle\tmonde !");

On peut même passer à la ligne avec \n, n pour new line.

10° Modifier le code passer à la ligne à chaque nouveau mot.

...CORRECTION...

alert("Bonjour\nle\nmonde !");

Nous venons de voir que javascript peut gérer "5+2="+5+2 en affichant "5+2=52".

Mais on ne sait pas encore sa réponse à "Bonjour"*2. Avec Python, on obtient par exemple "BonjourBonjour".

11° Javascript sait-il faire de même ?

...CORRECTION...

Non, on obtient "NaN", not a number. C'est un type particulier de type de réponse : string, integer, float et NaN pour l'instant.

Comme vous le voyez, chaque langage a ses spécificités et c'est parfois délicat de passer de l'un à l'autre car ce qui fonctionne dans l'un ne fonctionne pas forcément de la même façon chez l'autre.

3 - Les commentaires

Comme pour Python, HTML ou CSS, on doit annoter son code de remarques qui vont permettre de comprendre son fonctionnement. Pour les autres, mais également pour vous même. Après plusieurs semaines, on ne sait plus nécessairement comment fonctionne tel ou tel bout de code.

Pour faire un commentaire qui tient sur une ligne, il suffit de placer // : tout ce qui sera derrière ne sera pas interprété par le navigateur.

Pour faire un commentaire sur plusieurs lignes, il faut placer /* au début du commentaire et */ à la fin.

window.alert("Bonjour"); // Affiche Bonjour

window.alert("à tous !")

/* A partir d'ici,

je crée un commentaire

window.alert("Bonjour");

sur plusieurs lignes */

window.alert("Et voilà !")

12° Lancer le code pour vérifier que les commentaires (en vert dans Notepad++) sont bien ignorés lors de l'exécution.

CLIQUEZ ICI POUR VOIR LE DEROULEMENT :

4 - La console : la méthode log

On peut également afficher des messages dans la console web que vous aviez ouvert pour détecter les erreurs dans vos scripts.

A quoi ça sert ? Et bien par exemple à comprendre pourquoi votre script ne fonctionne pas. On peut ainsi afficher différents messages et comprendre à partir de quand le script plante. L'intérêt de la console est qu'il fait l'ouvrir pour voir le message. Le message ne perturbe donc pas le visuel de votre site.

Comment lancer un affichage ? Avec la méthode log sur l'objet console et le code suivant console.log(MA_CHAINE_A_AFFICHER).

console.log("Mon message s'affiche sur la console");

13° Tester l'affichage. Attention, il faut aller dans le journal (log) et non pas juste dans l'affichage javascript.

Comme la console ne s'affiche pas, elle est en réalité utilisée pour afficher des données lors de l'élaboration d'un script. En utilisant un log, on peut ainsi fournir des indications sur le fonctionnement du programme.

5 - La méthode getElementById et la propriété innerHTML

Il s'agit d'une propriété permettant de modifier le contenu d'une balise html : innerHTML.

Exemple :

<h1>Premiers tests avec javascript</h1>

Si on met en valeur ce qu'il y a entre la balise d'ouverture et de fermeture, on obtient le innerHTML :

<h1>Premiers tests avec javascript</h1>

Le innerHTML de la balise est donc Premiers tests avec javascript.

Si on veut chercher un contenu particulier dans la page, il va falloir l'identifier : nous allons retrouver les identifiants id vus en CSS pour créer des liens internes à l'intérieur de la page.

On peut la résumer ainsi :

On crée une balise dans le fichier html en lui donnant un attribut id
On fait pointer le javascript vers cette balise avec cet identifiant avec la méthode getElementById.
On modifie le contenu de la balise à l'aide du javascript : innerHTML

Un exemple court mais explicite (on donne le HTML suivi du JS):

<!DOCTYPE html>

<html>

<head>

<title>Intégration js</title>

</head>

<body>

<h1 id="mon_titre" >Premiers tests avec javascript</h1>

</header>

<p id="premier_paragraphe" >Premier paragraphe de la balise section.</p>

</section>

<p>Voilà le footer</p>

</footer>

</body>

</html>

Pour le js, à nommmer "mes_scripts.js" vu les indications dans le HTML :

document.getElementById("mon_titre").innerHTML = "J'ai modifié le titre";

document.getElementById("premier_paragraphe").innerHTML = "5*3="+(5*3);

CLIQUEZ :

14° Tester.

Le résultat en image :

Nous avons donc bien modifié le contenu affiché de la balise (le innerHTML) :

Pour la balise d'id="mon_titre", le contenu Premiers tests avec javascript devient J'ai modifié le titre

Pour la balise d'id="premier_paragraphe", le contenu Premier paragraphe de la balise section. devient 5*3=15

15° Créer trois pages différentes utilisant toutes les trois le même script. Modifier le titre sur les trois pages à l'aide d'un script.

Bon, en réalité, pour faire cela, on utilise plutôt un langage côté serveur. Du PHP ou du Django. Mais, vous avez vu qu'on peut faire cela avec Javascript également.

6 - La méthode querySelector

On peut faire mieux que getElementById qui n'affecte finalement que les éléments ayant un Id.

On peut sélectionner un élément spécifique comme dans CSS :

à l'aide de la classe : uniquement un paragraphe possèdant une classe particulière,
de la position : uniquement le premier paragraphe qui suit un titre h1 donne
de la localisation (les paragraphes inclus dans la balise header uniquement)...

Pour cela, on doit utiliser la méthode querySelector. Cette méthode renvoie le premier élément qui correspond aux critères. S'il y en a plusieurs, seule la première référence sera renvoyée. Attention donc.

La synthaxe est la suivante sur l'objet document :

document.querySelector("Comme dans CSS");

En gros, on peut remplacer

document.getElementById("mon_titre")

par :

par document.querySelector("#mon_titre") si "mon_titre" est un Id dans le HTML.
par document.querySelector(".mon_titre") si "mon_titre" est une classe définie dans le HTML et que la première balise rencontrée avec cette classe et bien celle qui vous intéresse.
par document.querySelector("h3") si la première balise h3 rencontrée est bien la balise voulue.

Bref, c'est une méthode de sélection aussi fine que le CSS. Par contre, j'insiste : la méthode renvoie la première balise qui correspond. Pas les autres.

16° Utiliser cette nouvelle méthode sur l'un de vos scripts précédents.

Remarque : Nous verrons par la suite les méthodes querySelectorAll, getElementsByName avec un s ou encore getElementsByClassName. Elles permettent de sélectionner un ensemble de balises. Mais l'utilisation d'un tel ensemble nécessite de savoir naviguer dans une telle liste. Nous verons donc cela dans quelques temps, vous avez déjà bien assez de nouvelles connaissances à assimiler

7 - Variable et boucle FOR

Nous allons voir comment parvenir à afficher plusieurs fois le même message sans pour autant avoir à taper plusieurs fois ce message.

Imaginons qu'on désire afficher 5 fois le message ATTENTION (pour indiquer que c'est vraiment très important) :

alert("Hello World !");

Néanmoins, c'est un peu répétitif : on doit noter 5 fois le même mot. Nous allons faire mieux : vous pouvez mettre le terme voulu en mémoire et demander ensuite à Javascript d'aller lire le contenu que vous avez mis en mémoire.

On place un contenu en mémoire en utilisant un mot-clé qui permettra d'aller retrouver ce contenu en mémoire. Cela s'appelle une variable. Ici, on précède toujours le nom de la variable par le mot-clé var, nous verrons dans une autre activité à quoi sert ce mot-clé lors de la déclaration d'une variable.

Pour placer quelque chose en mémoire, on donne le nom de la variable (ici mis en valeur en gras et en bleu), on place un signe égal et on place le contenu voulu de l'autre côté :

var monTexte = "Attention";

Pour aller lire le contenu de la variable, il suffit de taper le nom de celle-ci :

alert(monTexte);

17° Lire le programme ci-dessous sans le lancer. Que va-t-il afficher sur la console ? Que va contenir la variable monTexte ?

alert("On commence le programme");

var monTexte = "Attention";

alert(monTexte);

alert("C'est bientôt terminé");

CLIQUEZ POUR VOIR L'ANIMATION :

monTexte :

18° Modifier le programme pour qu'il affiche 5 fois "Attention" en utilisant une variable.

Nous en verrons plus sur les variables dans l'activité suivante. Passons maintenant à un autre problème : et si nous voulions afficher le message 200 fois. Il faudrait taper 200 lignes ? C'est un peu gros.

Et justement, il existe une instruction qui permet de faire cela : la boucle FOR (POUR en français). Cette instruction va permettre de faire les mêmes instructions plusieurs fois.

alert("On commence le programme");

alert("La variable monTexte n'existe pas encore.");

var monTexte = "Attention";

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

alert(i + " " +monTexte);

}

alert("C'est bientôt terminé");

Pour décaler le texte, on peut utiliser la tabulation (touche TAB à gauche de A) ou utiliser 4 espaces.

19° Utiliser le programme. Combien de fois effectue-t-on la boucle ? Enumérer les valeurs prises par la variable x de la boucle FOR. Combien de valeurs y a-t-il ?

CLIQUEZ POUR VOIR L'ANIMATION :

monTexte :

i :

...CORRECTION...

Les instructions sont réalisées 5 fois. La boucle est donc réalisée 5 fois.

La variable x prend les valeurs 0, 1, 2, 3 et 4.

La variable x prend donc bien 5 valeurs mais comme on commence à 0, on ne va dans la boucle que jusqu'à 4.

Lors du dernier retour en haut, i passe à 5 mais on ne rentre pas dans la boucle.

Si on analyse le code ci-dessous et qu'on le décompose en bloc, on voit que cela ressemble à ceci :

var monTexte = "Attention";

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

alert(i + " " +monTexte);

}

20° Créer un programme utilisant une variable contenant un texte et une boucle FOR pour afficher 500 fois le message Hello World !. Bon courage pour fermer toutes les fenêtres d'alerte !

8 - FAQ

Question : On est obligé de mettre le script au même endroit que le fichier HTML ?

Non !

Il est même conseillé de les mettre dans un sous-dossier. Imaginons la structure suivante :

Premier exemple : le fichier mes_scripts.js est dans un sous-dossier

mon_site

index.html

mes_scripts.js

css

Dans ce cas, il faudrait placer la balise script suivante :

On doit donc indiquer le chemin à suivre en plaçant / entre chaque dossier à parcourir depuis la localisation du fichier HTML. Ici, on doit descendre dans le dossier js.

Deuxième exemple : le fichier mes_scripts.js est dans un autre dossier

mon_site

mes_pages

index.html

mes_scripts

mes_scripts.js

Dans ce cas, il faudrait placer la balise script suivante :

Cette fois, il a fallu remonter l'arborescence pour atteindre le dossier mon_site.

Cela se fait avec le double point. Ensuite, on redescend dans le dossier mes_scripts.

Question : on m'a parlé de la méthode write. C'est pratique ?

Elle permet d'afficher des choses directement sur la page. Nous pouvons utiliser la méthode write sur l'objet document.

document.write("5+3=" + (5+3));

document.write("5*3=" + (5*3));

Si vous testez, vous verrez que cette méthode a de sérieuses limitations. La plus grosse semble être qu'on affiche uniquement une ligne après le code initial. C'est donc assez limité.

Mais il y a pire : si vous activez la méthode write après que la page soit complément chargée, vous allez avoir une drôle de surprise : la méthode supprime tout le reste !

Voilà le résultat :

N'utilisez donc cette méthode que pour faire des tests de valeur, un peu comme la console. Il permet de vérifier le contenu d'une variable ou autre.

Question : j'ai entendu parler de langage côté serveur et de langage côté client. Javascript se range dans quelle catégorie ?

Script coté Serveur ou Script côté Client

Peut-être avez-vous entendu ces expressions. Que veulent-elles dire ?

Il existe tout simplement deux façons de rendre une page interactive.

Prenons le cas d'une page qui veut afficher la date.

1er méthode : Langage côté serveur

Le client demande à accéder à une page.
Le serveur reçoit la demande (via son port 80, vous vous souvenez ?) et va chercher la date dans sa base de données ou plus simplement dans sa propre mémoire.
Le programme serveur génére alors une page HTML sur laquelle la bonne date apparait et il l'envoie au client.
Le client reçoit directement la date et peut l'afficher sur son écran.

C'est à l'aide d'un langage de ce genre qu'on peut vérifier qu'un mot de passe correspond bien à l'utilisateur. Vous imaginez bien que le mot de passe n'est pas codé directement dans la page HTML sinon une simple lecture du code source permettrait de connaitre le code.

C'est également ce type de langage qui permet de modifier une page en fonction des attentes supposées du client : vous n'avez jamais reçu par hasard des pubs ciblées juste après avoir fait une recherche sur un objet ? C'est parfois flagrant : les prix des billets d'avion ont tendance à avoir augmenté lorsque vous revenez sur un site quelques minutes à peine après y être venu vous renseigner.

En gros, ce type de langage tourne sur le serveur du site et pas sur la machine du client.

Il en existe beaucoup : PHP, ASP, Python, Ruby ...

Retenons qu'avec un langage serveur, le script tourne du côté serveur et le client reçoit un code HTML-CSS qui a été créé par un programme et non pas tapé par quelqu'un.

2e méthode : Langage côté client

Et si on veut afficher la date avec un langage côté client ?

Déjà, il faut que le navigateur du client puisse interpréter le code. Devinez le nom du langage qui s'est imposé au fil des ans sur tous les navigateurs ? Et oui : Javascript est intégré à tous les navigateurs aujourd'hui. Le langage a des défauts mais il a le mérite de pouvoir être utilisé sans trop de problèmes. Pour qu'un client ne puisse pas l'utiliser, c'est qu'il a décidé de le désactiver. C'est possible mais pas courant.

D'ailleurs, l'une des forces qui a permis son essort est aussi son principal défaut en terme de programmation : il ne peut pas directement transformer les données sur le disque dur du client : javascript ne peut pas simplement effacer le disque dur par exemple. C'est plutôt rassurant sachant que le navigateur ne vous demande pas l'autorisation de lancer les scripts javascript !

Alors, comment se passe l'affichage de la date en javascript (le langage client de référence sur les navigateurs) :

Le client envoie une demande pour accéder à une page au serveur.
Le serveur renvoie la page HTML-CSS et Javascript correspondant à l'adresse demandée sans la modifier.
Le client recoit les fichiers, le navigateur interpréte le HTML et le CSS et applique le code javascript : il va lire la date sur le disque dur du client. Javascript modifie alors le code HTML pour placer la date au bon endroit.
Finalement, la date s'affiche sur l'écran.

J'ai pris volontairement un exemple qu'on peut traiter avec les deux langages, mais c'est souvent l'un ou l'autre.

Impossible d'accéder directement à la base de données d'un site pour un client (et tant mieux pour la sécurité des données du site) : c'est un programme serveur qui fait l'interface entre la demande client et les données du site.

Impossible pour un programme serveur de surveiller en permanence un client (et tant mieux pour la sécurité du client) : si vous voulez créer un script qui réagit aux mouvements de souris du client (je m'approche du bouton "VALIDER LA COMMANDE" et je renonce), il faut le traiter en local, en javascript.

En effet, le client ne va renvoyer d'informations au serveur du site que lorsqu'il va réactualiser la page ou changer de page.

On est alors obligé de faire tourner un script sur l'ordinateur du client lui-même : c'est ce que fait javascript.