NOM Prénom : ……………………………………….

S.N.T Sciences Numériques Classe : …………… Groupe : …….

et Technologie ………………………………….
2nde

INTRODUCTION AU LANGAGE JAVASCRIPT Intro JS- P 1/5

I – Définition

Le JavaScript est un langage de programmation créé en 1995.

Le JavaScript va nous permettre de créer des pages interactives et « vivantes » à l’aide de scripts.

Un script, c’est tout simplement une suite d’instructions qui vont être interprétées par un programme.
Ainsi, pour lire du code JavaScript, il va nous falloir un interpréteur. Heureusement, tous les
navigateurs (Google Chrome, Safari, etc.) possèdent leur propre interpréteur JavaScript.

II – Introduction

Le JavaScript est un langage de programmation dit « client-side ».

Il existe deux grands types de langages de programmation : les langages « client-side » et les langages
« server-side ».

Les langages client-side : vont s’exécuter du côté du client, c’est-à-dire sur l’ordinateur de la personne
qui va demander la page web.

Les langages server-side : au contraire, vont s’exécuter côté serveur.

Un serveur, c’est une sorte d’ordinateur très puissant qui va stocker des pages web puis les envoyer au
client lorsque celui-ci les demande.

Par exemple, lorsque vous faîtes une recherche sur Google, vous êtes le client et vous demandez via
votre navigateur à accéder à une page web. Cette page web est stockée sur un serveur qui va se
charger de vous l’envoyer.
Les langages client-side et server-side n’ont pas la même finalité.
En effet, le client n’interagit que très rarement directement avec les langages server-side (comme le
PHP par exemple) car ces derniers sont souvent là pour effectuer des calculs et traiter des données en
arrière-plan.
L’important pour le moment est que vous reteniez le schéma suivant :
Vous demandez à accéder à une page web via votre navigateur.
Vous êtes le client et la page web est stockée sur le serveur ;
Le serveur reçoit votre demande. Les langages server-side vont s’exécuter côté serveur (calculs, etc.) ;
Une fois l’exécution terminée, le serveur renvoie la page web qui ne contient plus que du code client-
side (les langages server-side effectuent leurs opérations et renvoient du code client-side), dont du
JavaScript éventuellement ;
L’exécution des langages client-side se fait lorsque vous recevez la page demandée, dans votre
navigateur.

Ce qui fait toute la puissance du JavaScript, c’est qu’on va pouvoir l’utiliser pour manipuler
dynamiquement le code HTML d’une page.
Ainsi, nous allons pouvoir créer des effets intéressants et ajouter de l’interaction sur nos pages web.

Faites cependant bien attention à ne pas confondre JavaScript et Java ! Ces deux langages, bien que
syntaxiquement assez proches à la base, reposent sur des concepts fondamentaux complétement
différents et servent à effectuer des tâches totalement différentes.
 NOM Prénom : ……………………………………….
S.N.T Sciences Numériques Classe : …………… Groupe : …….
et Technologie ………………………………….
2nde

INTRODUCTION AU LANGAGE JAVASCRIPT Intro JS- P 2/5

III – Où écrire le code Javascript ?

1) Ecrire le code JS dans un fichier HTML :

Dans l’élément « head ».
Ou dans l’élément « body ».

Exemple 1 :

Ouvrir le fichier HTML ci-dessus dans un navigateur et répondre aux questions :

1) Que permet de faire ce code javascript ?
…………………………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………………………..

2) Dans quelles lignes du programme se trouve le code javascript ?

…………………………………………………………………………………………………………………………………………………………..

3) Dans quel élément, du fichier HTML, le code Javascript a été inséré ?

…………………………………………………………………………………………………………………………………………………………..

Modifier le fichier pour afficher les deux messages consécutifs suivants (2 alertes) :
1) Bonjour Javascript
2) On va travailler ensemble… !
 NOM Prénom : ……………………………………….
S.N.T Sciences Numériques Classe : …………… Groupe : …….
et Technologie ………………………………….
2nde

INTRODUCTION AU LANGAGE JAVASCRIPT Intro JS- P 3/5

Exemple 2 :

Ouvrir le fichier HTML ci-dessus dans un navigateur et répondre aux questions :

4) Que permet de faire ce code javascript ?
…………………………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………………………..

5) Dans quelles lignes du programme se trouve le code javascript ?

…………………………………………………………………………………………………………………………………………………………..

6) A quoi sert la commande « onclick » ?

…………………………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………………………..

Modifier le fichier comme suit :

1) Corriger la faute d’orthographe.
2) Modifier le titre de la page et la couleur du fond de l’écran.
 NOM Prénom : ……………………………………….
S.N.T Sciences Numériques Classe : …………… Groupe : …….
et Technologie ………………………………….
2nde

INTRODUCTION AU LANGAGE JAVASCRIPT Intro JS- P 4/5

Exemple 3 :

Ouvrir le fichier HTML ci-dessus dans un navigateur et répondre aux questions :

1) A quoi sert la ligne 7 du programme, peut-on la supprimer ?

…………………………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………………………..

2) Quel est le nom de la fonction utilisée ? quelle(s) est (sont) la (les) ligne(s) affectée(s) ?
……………………………………………………………………………………………………………………………………………………

3) Pourquoi la ligne 9 est en vert ?

……………………………………………………………………………………………………………………………………………………
 NOM Prénom : ……………………………………….
S.N.T Sciences Numériques Classe : …………… Groupe : …….
et Technologie ………………………………….
2nde

INTRODUCTION AU LANGAGE JAVASCRIPT Intro JS- P 5/5

2) Ecrire le code JS dans un autre fichier .js :

Fichier .html Fichier .js

Ouvrir le fichier HTML ci-dessus dans un navigateur et répondre aux questions :

1) Que se passe-t-il lors de l’ouverture du fichier html ?

……………………………………………………………………………………………………………………………………………………

2) Que peut-on observer à la ligne 12 ?

……………………………………………………………………………………………………………………………………………………

3) Que signifie SRC= …………………………………. ? quelle est la cible ?

……………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………

4) Où se trouve le fichier script_ext.js ?

……………………………………………………………………………………………………………………………………………………

A présent tu dois savoir pourquoi le programme (script) ci-dessus ne fonctionne pas.

A toi de trouver la solution.

Ma démarche est la suivante :

………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………