Java Script 2

JavaScript
JAVASCRIPT, C’EST QUOI ?

26 ans d’histoire et encore de l’avenir
• Le JavaScript est un langage de programmation sous forme
de scripts.
• Le JavaScript est également un langage événementiel.
• Le JavaScript est aussi un langage orienté objet.
• Le JavaScript est principalement employé dans les pages web
pour les rendre interactives et dynamiques.
• Le JavaScript est également de plus en plus utilisé comme
plateforme serveur.
• Le JavaScript, fort logiquement abrégé JS, n’a pas de logo
officiel.
BRÈVE HISTOIRE DU JAVASCRIPT
Brendan Eich, ingénieur informaticien américain, a inventé le
JavaScript en 1995 chez Netscape et l’a intégré dans le
navigateur du même nom.
À l’origine, le nom du langage était LiveScript. Mais Netscape

profite à cette époque de la notoriété grandissante de Java pour
le renommer en JavaScript.
LE STANDARD ECMASCRIPT
Le langage JavaScript a été standardisé à partir de 1997 par

l’organisation ECMA International sous le nom ECMAScript avec
le standard numéro ECMA-262. Aujourd’hui, JavaScript, JS,
ECMAScript et son abréviation ES désignent le même langage.
Tableau récapitulatif des différentes éditions
d’ECMAScript
LE PRINCIPE CLIENT/SERVEUR
schéma des communications entre le navigateur et le serveur
lors de la demande de la page d’accueil d’un site :
L’affichage d’une page se réalise en sept grandes étapes

1. Le navigateur envoie une requête HTTP au serveur
de google.fr.
2. Le serveur fabrique le code HTML de la page
demandée et le compresse.
3. Le serveur envoie le code HTML dans une réponse à
la requête HTTP du navigateur.
4. Le navigateur reçoit en réponse le code HTML et le
décompresse.
5. Le navigateur interprète le code HTML ligne par ligne
et commence l’affichage de la page
6. Le navigateur envoie de nouvelles requêtes vers le
serveur pour chacun des éléments
à charger (images, styles, scripts).
7. Le rendu de la page est terminé.
LES POSSIBILITÉS DU JAVASCRIPT
Le JavaScript utilisé côté client et exécuté par le navigateur dans une
page web est parfaitement adapté pour les traitements suivants
- Assistance de saisie des formulaires - Animations graphiques
• Contrôle et validation de saisie • Menus et éléments de navigation
• Affichage de messages d’aide à la saisie • Animations esthétiques
• Éditeur de texte enrichi • Défilements, diaporamas, zooms
- Sauvegarde de données sur le poste local • Graphiques animés et interactifs
• Via les cookies • Cartographies
• Via une zone disque dédiée • Jeux
- Gestion des nombres, dates et heures - Appels asynchrones vers le serveur pour
• Calculs mathématiques actualiser la page
• Calculs sur les dates • Chat de messagerie
• Affichage dans le format du pays de • Alerte en direct
l’utilisateur • Sauvegarde de saisie automatique en temps
réel
• Mesure d’audience
• Campagne publicitaire
LIMITES ET SÉCURITÉS DU JAVASCRIPT
Il n’est pas possible, sans une action volontaire supplémentaire de

l’utilisateur :
 à un site d’accéder au disque dur de l’utilisateur;

 à un site d’accéder à la zone de stockage ou aux cookies d’un autre
site;
 à un site de lire l’historique de navigation, les mots de passe ou les
favoris de l’utilisateur;
 à un virus ou un logiciel espion de s’installer ou d’effacer des fichiers;
 à un script de faire planter le navigateur, et encore moins le poste
complet;
 à un script de détruire le matériel de l’utilisateur.
Hello World
LES EXEMPLES DE HELLO WORLD
Hello World numéro 1
<html>
<head>
<title>Hello World 1</title>
</head>
<body>
<h1>
<script type="text/javascript">
window.document.write("Hello World");
</script>
</h1>
</body>
</html>
Le résultat équivalent en HTML est exactement ce qu’on
attend :
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Ce premier exemple très simple est finalement riche d’enseignements. Il
nous apprend que :
– Le code JavaScript est intégré au code HTML classique d’une page web.
– Le JavaScript est placé dans le bloc marqué par les balises <script
type="text/javascript"></script>.
– Le JavaScript utilise la notation pointée window.document.write() pour appeler

la fonction write() de l’objet document, lui-même rattaché à l’objet racine
window.
– Le JavaScript est interprété et exécuté de manière synchrone, c’est-à-dire

séquentiellement et ligne à ligne par le navigateur.
– Une instruction JavaScript se termine par un point-virgule.

L’exemple hello1.html affichait du texte dans le corps du HTML, alors que la page
n’était pas encore finalisée. L’exemple hello2.html fonctionne différemment, car le
script repère la balise H1 avec son identifiant et lui affecte un nouveau contenu :
<html>
<head>
</head>
<body>
<h1 id="monH1"></h1>
</body>
document.getElementById("monH1").innerHTML="Hello World";
</script>
</html>
Voyons encore une autre façon d’afficher notre message de bienvenue dans
hello3.html :
<html>
<head>
</head>
<body id="monBody"></body>
var monH1=document.createElement("h1");
monH1.innerHTML="Hello World";
document.getElementById("monBody").appendChild(monH1);
</script>
</html>
Les possibilités d’afficher notre message de bienvenue par programmation

JavaScript ne sont pas encore épuisées. Voici un nouvel exemple d’affichage de
message par boîte de dialogue :
<html>
<head>
</head>
<body></body>
alert("Hello World");
</script>
</html>
Voyons maintenant un dernier exemple d’affichage de notre message de

bienvenue dans le fichier hello5.html :
<html>
<head>
</head>
<body></body>
var message="Hello World";
console.log(message);
</script>
</html>
JAVASCRIPT NON ACTIVÉ
<html>
<head>
<title>Script et NoScript</title>
</head>
<body>
document.write("<h1>Hello World</h1>");
</script>
<noscript>
Votre navigateur n'accepte pas le JavaScript.
<strong>La navigation sur ce site sera impossible !</strong>
</noscript>
</body>
</html>
Structure d’un script
INTÉGRER DU JAVASCRIP
Dans une page HTML
<html>
<head>
</head>
<body id="monBody"></body>
var monH1=document.createElement("h1");
monH1.innerHTML="Hello World";
document.getElementById("monBody").appendChild(monH1);
</script>
</html>
Dans un tag HTML
<div onclick="compteur=compteur+1; console.log(compteur);">

Cliquez-moi
</div>
Grâce à un fichier externe
La création du fichier .js
Un fichier externe de code JavaScript n’est qu’un fichier texte contenant
l’intégralité du code placé entre les balises <script> et </script>, mais pas les
balises <script>.
L’utilisation de l’extension .js n’est qu’une convention, non obligatoire. Elle

a néanmoins le double avantage d’être intuitive à la lecture du code et force
votre éditeur de texte à lui appliquer la coloration syntaxique dédiée au
JavaScript.
La création du fichier .js
- Le fichier hello.js contient simplement cette ligne :

alert("Hello World via un fichier JS");
- Le code de notre page Hello World qui fait appel au fichier hello.js
devient :
<html>
<body>
<script type="text/javascript" src="hello.js"></script>
</body>
</html>
L’appel en mode synchrone
L’utilisation d’un fichier externe oblige le navigateur à faire un nouvel appel
HTTP pour récupérer le contenu du fichier.
Cet appel génère un délai pour envoyer la requête et récupérer le résultat.
L’appel asynchrone
Le mode asynchrone accélère grandement le rendu de la page. Mais il est
impossible de prévoir à quel moment le fichier sera effectivement chargé et
quand les fonctionnalités JavaScript présentes seront disponibles.
Pour forcer l’appel en mode asynchrone, il suffit d’ajouter l’attribut async dans
la balise <script> :
<script async type="text/javascript" src="fichier.js"></script>

LES VARIABLES
Déclaration de variables
La phase de création d’une variable est appelée déclaration. Elle se fait avec
l’opérateur bien nommé var.
Par exemple, cette instruction déclare une variable compteur et l’initialise à 0 :
var compteur=0;
Il est possible aussi de déclarer plusieurs variables avec un seul appel à var, en
séparant les variables par une virgule :
var compteur=0, texte="Hello", maxi=100;
Sensibilité à la casse
La casse est la distinction entre majuscule et minuscule. Le JavaScript est
sensible à la casse, c’est-à-dire que les variables nom, Nom et NOM sont trois
variables différentes, contenant des données différentes.
LES VARIABLES
Les types de variables
Une variable JavaScript peut contenir une grande variété de types de

données, comme des nombres, des chaînes de caractères, des dates, des
tableaux ou un objet complexe. Le langage JavaScript est « faiblement typé »,
c’est-à-dire qu’il autorise une variable à contenir n’importe quel type de
données et à en changer en cours d’exécution,
Exemple :
var n1=10, n2=20, n3="5";
console.log(n1+n2);
console.log(n3+n1);
LES VARIABLES
L’opérateur typeof
Le JavaScript propose l’opérateur typeof, qui retourne une chaîne de caractères avec le type du contenu
d’une variable. Ce script définit des variables et affiche leur type JavaScript :
<html>
<head>
<title>Programmation</title>
</head>
<body>
var a;
var n1=10;
var msg="Hello World";
var h1=document.getElementById("monH1");
console.log(typeof a); // retourne undefined
console.log(typeof n1); // retourne number
console.log(typeof msg); // retourne string
console.log(typeof h1); // retourne object
</script>
</body>
</html>
LES FONCTIONS
Les fonctions natives
La fonction de conversion d’une chaîne en nombre entier
Le JavaScript possède quelques fonctions natives qui vont nous servir
d’exemple d’introduction à la notion de fonction. La fonction parseInt() convertit
une chaîne de caractères en un nombre entier. Il est composé du verbe parse («
analyser ») et de Int pour Integer (« nombre entier »).
La fonction parseInt() attend jusqu’à deux paramètres :

• chaine, paramètre obligatoire de type string qui sera analysé et converti en
entier.
• base, paramètre facultatif de type number qui définit la base de conversion.
Par défaut, la base sera décimale.
La fonction parseInt() retourne le nombre entier correspondant à la chaîne

analysée ou la valeur NaN, pour Not a Number, si la chaîne n’est pas
convertible en nombre.
LES FONCTIONS
Voici quelques résultats d’appel à la fonction parseInt() :
console.log(parseInt("150")); // retourne 150

console.log(parseInt("150.45")); // retourne 150
console.log(parseInt("150xxx")); // retourne 150
console.log(parseInt("xxx150")); // retourne NaN
console.log(parseInt("FF", 16)) ; // retourne 255 = FF en hexadécimal
LES FONCTIONS
Les fonctions personnalisées
Le JavaScript permet au développeur de créer ses propres fonctions, selon ses
besoins.
Les syntaxes pour déclarer une fonction
l existe plusieurs façons de créer une fonction. La plus courante utilise l’instruction
function sous la forme :
function nomFonction(param1, … paramN) {

// Instruction de la fonction
}
La fonction peut aussi se créer avec le constructeur function() :
nomFonction=function(param1, … paramN) {
// Instruction de la fonction
}
Dans les deux cas, nomFonction() est une fonction qui peut être appelée dans le reste
du script.
Une fonction qui ne possède pas de paramètre est déclarée avec les parenthèses vides.
LES FONCTIONS
Retourner un résultat
Pour retourner un résultat à la fonction, on utilise l’instruction return suivie de la

valeur. Cette instruction, dont le nom est explicite, retourne non seulement la
valeur mais stoppe l’exécution de la fonction.
Notez que return peut aussi être utilisée sans valeur de retour. Dans ce cas, la
fonction se termine simplement.
Une fonction peut aussi se terminer sans aucune utilisation de l’instruction

return quand l’enchaînement des traitements parvient à l’accolade fermante de
la fonction.
LES FONCTIONS
Variables globales et locales
• Une variable globale, déclarée en dehors d’une fonction, est visible et manipulable dans
l’ensemble du script d’une page.
• Une variable locale, déclarée à l’intérieur du corps d’une fonction, n’est visible que localement, à
l’intérieur de cette fonction.
var nb=10, msg="Hello World";

console.log("nb après l'initialisation = " + nb)
console.log("msg après l'initialisation = " + msg);
function getMessage() { nb après l'initialisation = 10
var msg="Bonjour dans la fonction"; msg après l'initialisation = Hello World
nb++;
nb dans la fonction = 11
console.log("nb dans la fonction = " + nb)
console.log("msg dans la fonction = " + msg); msg dans la fonction = Bonjour dans la fonction
} nb après appel de la fonction = 11
// Appel de la fonction msg après appel de la fonction = Hello World
getMessage();
console.log("nb après appel de la fonction = " + nb);
console.log("msg après appel de la fonction = " + msg);
LES FONCTIONS
Les paramètres de fonctions
Il faut également comprendre que les paramètres déclarés dans une fonction
sont aussi des variables locales. Modifier leur valeur dans le traitement de la
fonction n’a aucun impact sur les variables utilisées pour l’appel à la fonction,
même si les noms sont identiques :
var nb=10;
function calculNb(nb) {
nb=nb*2;
console.log("nb dans la fonction = " + nb); nb avant appel de la fonction = 10
} nb dans la fonction = 20
console.log("nb avant appel de la fonction = " + nb); nb après appel de la fonction = 10
calculNb(nb);
console.log("nb après appel de la fonction = " + nb);
LES FONCTIONS
L’ensemble des paramètres passés à une fonction est contenu dans le tableau
arguments[] accessible à l’intérieur de la fonction. Ce tableau permet de traiter
tous les paramètres sans
avoir à les déclarer à la création de la fonction.
Imaginons la fonction getMoyenne(), qui calcule la moyenne de tous les
nombres passés en paramètres :
function getMoyenne() {
console.log(arguments);
var somme=0;
for (var i=0; i<arguments.length; i++) {
// Boucle sur l'ensemble des éléments du tableau
somme=somme+arguments[i];
}
// La moyenne est la somme des éléments divisée par le nombre d'éléments
return somme/arguments.length;
}
console.log(getMoyenne(10,20,30,28)); // retourne 22
LES FONCTIONS
Les fonctions anonymes
Il n’est pas utile de nommer une fonction qui ne sera pas appelée et réutilisée
ailleurs dans le code JavaScript. On peut donc déclarer des fonctions
anonymes, littéralement « qui n’ont pas de nom ».
var nb=0;
function timer() {
nb++;
document.getElementById("monH1").innerHTML=nb;
}
setInterval("timer()", 250);
</script>

Java Script 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Script 2

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

JAVASCRIPT, C’EST QUOI ?

À l’origine, le nom du langage était LiveScript. Mais Netscape

Le langage JavaScript a été standardisé à partir de 1997 par

L’afﬁchage d’une page se réalise en sept grandes étapes

Il n’est pas possible, sans une action volontaire supplémentaire de

 à un site d’accéder au disque dur de l’utilisateur;

– Le JavaScript utilise la notation pointée window.document.write() pour appeler

– Le JavaScript est interprété et exécuté de manière synchrone, c’est-à-dire

– Une instruction JavaScript se termine par un point-virgule.

Les possibilités d’afﬁcher notre message de bienvenue par programmation

Voyons maintenant un dernier exemple d’afﬁchage de notre message de

<div onclick="compteur=compteur+1; console.log(compteur);">

L’utilisation de l’extension .js n’est qu’une convention, non obligatoire. Elle

- Le ﬁchier hello.js contient simplement cette ligne :

<script async type="text/javascript" src="fichier.js"></script>

Une variable JavaScript peut contenir une grande variété de types de

La fonction parseInt() attend jusqu’à deux paramètres :

La fonction parseInt() retourne le nombre entier correspondant à la chaîne

console.log(parseInt("150")); // retourne 150

function nomFonction(param1, … paramN) {

Pour retourner un résultat à la fonction, on utilise l’instruction return suivie de la

Une fonction peut aussi se terminer sans aucune utilisation de l’instruction

var nb=10, msg="Hello World";

Vous aimerez peut-être aussi