Javascript
◼Qu’est-ce que c’est
• Extension du langage HTML incluse dans le code
• Langage de programmation apportant améliorations au
langage HTML en permettant l’exécution de commandes
• Utilisé en complément des pages HTML pour :
✓ Afficher les informations variables telles que date, heure, etc.
✓ Interagir avec les utilisateurs par le biais de boite de dialogue
✓ Créer des menus dynamiques
✓ Etc.
• Javascript est :
ASSALE Adjé Louis JavaScript 1
Javascript
◼Qu’est-ce que c’est
• C’est :
✓ Un langage orienté objet
✓ Destiné à créer de « petits programmes » appelés scripts
✓ Intégré aux pages HTML
✓ Directement exécuté par un programme navigateur
✓ Sans relation directe avec le langage Java
✓ Crée par NestScape et intégré à NetScape Navigator pour la 1ère
fois en 1996
✓ Standardisé par l’ECMA= organisme de standardisation suisse,
en 1997 ➔ Norme ECMAScript
ASSALE Adjé Louis JavaScript 2
Javascript
◼Qu’est-ce qu’un script
• Portion de code inséré dans une page HTML
✓ Balises annonçant code Javascript :
◼ <SCRIPT LANGUAGE=Javascript>
placer ici le code du script
</SCRIPT>
• 3 façons d’inclure du script dans une page HTML
✓ Grâce à la balise <SCRIPT> contenant le code, placée dans la
balise d’entête (<HEAD> </HEAD>)
✓ En mettant le code dans un fichier et en utilisant la balise
◼ <SCRIPT LANGUAGE=Javascript src=url/fichier.js> </SCRIPT>
✓ Grâce aux évènements dans une balise dont attribut est un nom
d’évènement : <balise nom_évène=code script à insérer>
ASSALE Adjé Louis JavaScript 3
Javascript
◼Éléments du langage
• Lecture et affichage de données
✓ Fonction alert() sert à afficher une valeur dans une boite de
message. Exemple : alert(Bonjour toto)
✓ Fonction prompt() sert à lire une valeur à travers une boite de
saisie. Exemple : prompt(Entrer une valeur)
• Les variables
✓ Elles n’ont pas besoin d’être déclarées. Mais la déclaration est
conseillée et s’effectue à l’aide du mot clé « var »
✓ 4 types de données :
◼ Nombres : entier ou à virgules flottantes. Exemples : var i; i=0;
var PI=3.1415; k=5;
ASSALE Adjé Louis JavaScript 4
Javascript
◼Éléments du langage
• Les variables
✓ 4 types de données :
◼ Booléens : false ou true. Exemple : reponse=false;
◼ Chaines de caractères : suite de caractères délimitée par des guillemets
simples ou doubles. Caractères spéciaux : \b, \n, \r, \t, …
Exemple : chaine=‘bonjour les amis’;
◼ Variable de type null : mot clé pour indiquer qu’il n’y a pas de données
✓ Opérations sur les variables
◼ Opérateurs arithmétiques : +, -, /, %
◼ Opérateurs de comparaison : ==, !=, >, >=, <, <=
◼ Opérateurs logiques : &&, ||, !
ASSALE Adjé Louis JavaScript 5
Javascript
◼Éléments du langage
• Les instructions
✓ 2 types de commentaires :
◼ Symbole // définit un commentaire sur une ligne
◼ Symboles /* et */ définissent un commentaire sur plusieurs lignes
✓ Affectation
◼ Symbole = pour l’affectation
◼ Symbole op= pour raccourci d’affectation op {+, -, /, *, %, <<, …}
Exemple : i+=2; i=i+2;
◼ Incrémentation/décrémentation : symboles ++/--
Exemple : i++; i=i+1;
ASSALE Adjé Louis JavaScript 6
Javascript
◼Éléments du langage
• Les instructions
✓ Conditionnelles switch(expression)
{
if(expression) case val1 : instructions; break;
{instructions;} case val2 : instructions; break;
else …
{instructions;} case valn : instructions; break;
default : instructions;
}
✓ répétitions
while(expression) do for(expr1;expr2;expr3) for(variable in objet)
{ { { {
instructions; instructions; instructions; instructions;
} } while(expression); } }
ASSALE Adjé Louis JavaScript 7
Javascript
◼Éléments du langage
• 2 types de sous-programmes
✓ Les procédures qui ne retournent pas de valeurs
◼ Déclaration : function nom_procedure (para1, para2, …){
Instructions; }
✓ Les fonctions qui retournent une valeur, donc contiennent
l’instruction return(expression);
◼ Déclaration : function nom_fonction(para1, para2, …){
Instructions + au moins une instruction de la forme
return(expression);}
✓ Voir plus loin, chapitre « les fonctions »
✓ Il existe des fonctions prédéfinies:
◼ eval(chaine) – parseFloat(chaine) – parseInt(chaine) …
ASSALE Adjé Louis JavaScript 8
Javascript
◼Éléments du langage
• Les objets
✓ les chaines de caractères
◼ définissent un objet String implicitement.
◼ var machaine = new String('toto') var machaine = 'toto'
◼ L’objet String dispose de propriétés et méthodes: la propriété length
donne le nombre de caractères n = machaine.length;
quelques méthodes : charAt(position) – indexOf(sous-chaine, position)
✓ Les tableaux
◼ Déclaration s’effectue à l’aide de la fonction Array()
var montableau = new Array(); // tableau dont la taille n’est pas définie
var tab = new Array(10); // tableau de 10 éléments
var letableau = new Array(val1, val2, … valn);
◼ Les indices commencent à 0, les vali peuvent être de types différents
◼ La taille du tableau est dynamique, propriété length retourne la taille
Javascript
◼Éléments du langage
• Les objets
✓ Les tableaux
◼ Tableau associatif dont l’index n’est pas un entier mais chaine de
caractères : var Tab = new Array();
Tab['num']=1; // le 1er index est la chaine num
Tab['nom'] = "Assalé"; // le 2nd index est la chaine nom
Tab['prénom'] = "Louis"; //le 3ème index est la chaine prénom
◼ Un tableau est un objet prédéfini possédant des propriétés et des
méthodes. Ainsi, un tableau associatif est considéré comme un objet
avec des propriétés : Tab['nom’] Tab.nom
◼ De même un objet est considéré comme un tableau associatif, on peut
parcourir les propriétés d’un objet window par :
for(lapropriété in window)
ASSALE Adjé Louis JavaScript 10
Javascript
◼Éléments du langage
• Les objets
✓ La classe Date()
◼ Le constructeur sans paramètre crée un objet référençant la date actuelle
var aujourd’hui = new Date();
◼ On peut créer des variables en spécifiant des dates
var ladate = new Date(année, mois, jour);
var ladate = new Date(année, mois, jour, heure, minute, seconde);
mois entier compris entre 0 et 1
◼ Quelques méthodes : getDate() – getDay() – getMonth(), …
✓ La classe Image()
◼ Déclaration : var mon_image = new Image();
◼ Dispose de 4 propriétés : src (url image) – height (haute image) – width
(largeur image) – complete (retourne true quand image chargée)
ASSALE Adjé Louis JavaScript 11
Javascript
◼Éléments du langage
• Les objets
✓ La classe statique Math()
◼ Possède des propriétés qui sont des constantes et des méthodes qui sont
les principales fonctions mathématiques
◼ Quelques propriétés : E – PI – LN10 – LN2
◼ Quelques méthodes : ab(nombre) – acos(nombre) – pow(base,
exposant) …
✓ Les objets prédéfinis du navigateur
◼ Le navigateur dispose d’un ensemble d’objets hiérarchisés, on a au:
◼ Niveau 1 on a : navigator – window
◼ Niveau 2 : document – history – frames – parent – location
◼ Niveau 3 tous les autres objets : images – forms – links – anchors …
ASSALE Adjé Louis JavaScript 12
Javascript
◼Éléments du langage
• Les évènements
✓ Action de l’utilisateur donnant lieu à une interactivité
✓ 2 façons d’associer une action à un couple(objet, évènement)
◼ Utilisation d’attributs de balises spécifiques associés aux évènements :
<a href="index.html" onMouseOver="alert('bonjour') ;">cliquez ici
</a>
◼ Indication pour un élément et un évènement donnés la fonction qui
devrait être exécutée :
<body><a id="Lien1" href="index.html">cliquez ici</a></body>
<script language="Javascript">
function bonjour() {alert('bonjour');};
document.links[0].onMouseOver=bonjour;
</script>
ASSALE Adjé Louis JavaScript 13
Javascript
◼Travaux pratiques Nº1
• Exercices 1 à 9 du poly JScript
ASSALE Adjé Louis JavaScript 14
