Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 14
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