Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Le langage JavaScript Présenté par: Mr.Ben Harrath Walid Classe:4ème SI 1 Prof:

Le langage JavaScript Présenté par: Mr.Ben Harrath Walid Classe:4ème SI 1 Prof:Mr.Walid Ben Harrath 1- Les limites du langage HTML • Le langage HTML présente les limites suivantes : • Absence des structures de contrôle algorithmiques (conditionnelles et itératives). • Un langage sans aucune logique de programmation procédurale (notion de sous programmes, variables, opérateurs prédéfinies …). • Absence de prise en charge d’événements, à l’exception de l’événement clic. • Aucune communication avec la plate forme d'exécution (date système, type du navigateur utilisé, etc.) • Absence de possibilité d'interfaçage avec les bases de données. • Absence de mécanisme permettant de rendre le code source inaccessible pour l'utilisateur final (en HTML, pour pouvoir visualiser le code, il suffit d'utiliser l'option affichage code source du navigateur). Prof:Mr.Walid Ben Harrath 2- Les solutions proposées • Pour pallier à ses limites, deux solutions sont utilisées : 1- L'utilisation des langages côté client (JavaScript ou VbScript) : ce sont des langages qui permettent d'ajouter des fonctionnalités omises par le langage HTML, (les fonctionnalités qui concernent la connexion aux bases de données et l’accessibilité au code ne sont pas supportées par ces langages). • L'avantage majeur de cette solution est le fait de pouvoir • exécuter le code écrit avec ces langages (JavaScript ou VbScript) sans avoir besoin d'une installation particulière ; il suffit d'avoir un navigateur web. • Le JavaScript est le plus utilisé vu sa compatibilité avec les différents navigateurs. Prof:Mr.Walid Ben Harrath 2- L'utilisation des langages côté serveur tels que ASP, PHP, Cold Fusion. Ces langages permettent d'avoir les mêmes fonctionnalités que les langages côté client plus la possibilité de se connecter à des bases de données et le verrouillage du code source. • Pour pouvoir tester un code écrit avec un langage côté serveur, il faut utiliser un serveur d'hébergement compatible avec la technologie choisie, tel que Apache, IIS (Internet Information Server), Netscape Server, Domino, etc. Prof:Mr.Walid Ben Harrath 2- Historique du langage JavaScript • JavaScript a été initialement développé par Netscape et s'appelait alors LiveScript. Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il prit alors son nom de • JavaScript. JavaScript n'est pas propre au navigateur de Netscape. • Microsoft l'a d'ailleurs aussi adopté à partir de la version 3 du navigateur Internet Explorer. Prof:Mr.Walid Ben Harrath II. le formalisme de base du JavaScript Prof:Mr.Walid Ben Harrath 1- Les délimiteurs du JavaScript • Dans la logique du langage HTML, il faut signaler au navigateur par une balise, que ce qui suit est un script et que c'est du JavaScript. C'est la balise • <SCRIPT LANGUAGE="JavaScript">. • De même, il faudra informer le navigateur de la fin du script. • C'est la balise </SCRIPT>. Prof:Mr.Walid Ben Harrath 2- Les commentaires • Tout ce qui est écrit entre le // et la fin de la ligne, représente un commentaire et il sera ignoré pendant l’exécution. • // commentaire • Il est aussi possible d'inclure des commentaires sur plusieurs lignes avec le code • /* commentaire sur plusieurs lignes */ Prof:Mr.Walid Ben Harrath III. les objets JavaScript : • 1- Les objets JavaScript et leurs hiérarchies • Les différentes fonctionnalités offertes par JavaScript sont accessibles à travers un ensemble d'objets intrinsèques prédéfinis. Les objets JavaScript peuvent être répartis en deux catégories : - Les objets d'interface : Ils permettent de gérer les aspects visuels des différents contrôles graphiques pouvant se trouver au niveau d'une interface. • On peut citer comme exemple : l'objet window, document, button, radio, checkbox…etc. - Les objets des propriétés et des fonctions prédéfinies : Ils permettent de fournir les différentes ressources requises pour la programmation. Ces objets sont : L'objet string, math, date, navigator, array, et object. Prof:Mr.Walid Ben Harrath a- La hiérarchie des objets d'interface • JavaScript divise une page web en objets. Il permet d'accéder à ces objets, d'en retirer des informations et de les manipuler. • Chaque page Web s'affiche dans une fenêtre, c'est l'objet fenêtre (window). • Dans chaque fenêtre, il y a un document HTML, c'est l'objet document. Autrement dit l'objet window contient l'objet document, qui lui même peut contenir d'autres objets. Schématiquement, on peut représenter une partie de la hiérarchie des objets d'interface JavaScript comme suit : Prof:Mr.Walid Ben Harrath Prof:Mr.Walid Ben Harrath Prof:Mr.Walid Ben Harrath b- Les propriétés des objets • Les objets JavaScript ont des propriétés qui permettent de décrire des caractéristiques rattachées à ces objets. • Pour accéder à une propriété, il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur de l'objet à l'objet référencé. • En JavaScript, pour accéder aux propriétés, on utilise la syntaxe : • nom_de_l'objet.nom_de_la_propriété Prof:Mr.Walid Ben Harrath Exemple : • Dans le cas des boutons radio, une des propriétés est la sélection (checked=TRUE) ou la non-sélection (checked=FALSE). • Pour tester la propriété de sélection, on peut écrire : • if(window.document.form.radio[0].checked) Prof:Mr.Walid Ben Harrath ☛L'objet window occupe la première place dans la hiérarchie, il est repris par défaut par JavaScript et devient donc facultatif. ☛Pour la syntaxe radio[0], 0 désigne qu'il s'agit de la première case d'option retrouvée dans la page Web. Prof:Mr.Walid Ben Harrath c- Les méthodes des objets • A chaque objet JavaScript, le langage a prévu un ensemble de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. • Par exemple, à l'objet document, JavaScript a dédié la méthode "écrire dans le document", c'est la méthode write(). Prof:Mr.Walid Ben Harrath Application1 • 1- Créez un fichier HTML, où vous tapez, entre <BODY> et </BODY>, le code suivant : document.write("votre texte"); x=2 ; document.write(x); document.write("le contenu de la variable x est : " + x); document.write("<br><b> le contenu de la variable x est : </b> "); document.write("<font color='red'>" + x + "</font>"); Prof:Mr.Walid Ben Harrath ❖L'opérateur "+" : joue le rôle de concaténation lorsqu'il est utilisé avec la méthode write. ❖Il est possible de générer du code HTML lors de l'utilisation de la méthode write, dans ce cas le code sera exécuté et non pas affiché. ❖Dans le cas où le code HTML contient des guillemets ("), et pour ne pas risquer de les confondre avec les guillemets (") de write, il sera judicieux de transformer les " du HTML par apostrophes ('). Prof:Mr.Walid Ben Harrath III. les Variables : ❖La déclaration de variables Les variables peuvent se déclarer de deux façons : • soit de façon explicite. On indique à JavaScript que ceci est une variable. • La commande qui permet de déclarer une variable est le mot var. Par exemple : • var Numero = 1 • var Prenom = "Yassemine" • soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue et JavaScript s'en accommode. Par exemple : • Numero = 1 • Prenom = "Yassemine" Prof:Mr.Walid Ben Harrath Prof:Mr.Walid Ben Harrath ❖Conversion de types: ♦La fonction isNaN (is Not a Number) est une fonction booléenne permettant de vérifier si le contenu d'une variable donnée en paramètre est numérique ou non ; elle retourne la valeur FALSE si la conversion est possible ou la valeur TRUE dans le cas contraire. ♦Alert et Prompt sont deux méthodes de l'objet window permettant respectivement l'affichage et la saisie dans des boites de dialogue. Prof:Mr.Walid Ben Harrath ☛Il existe des fonctions de conversion de type : String et Number, qui permettent de spécifier explicitement la conversion à effectuer. • var a = String(21.34); ⇒a = "21.34" • var b = Number ("12.56") ⇒b = 12.56 ☛la fonction eval : x=eval(variable) évalue une chaîne de caractère sous forme de valeur numérique. On peut stocker dans la chaîne des opérations numériques, des opérations de comparaison, des instructions et même des fonctions. • Exemple: ch='5 + 10' ; x=eval(ch); ⇒x=15; ☛Il est préférable, de précéder toute conversion avec la fonction number, par un test de validité avec la fonction IsNaN. Prof:Mr.Walid Ben Harrath V. les opérateurs prédéfinis : Prof:Mr.Walid Ben Harrath Prof:Mr.Walid Ben Harrath Les Entrées/Sorties en JavaScript : • Syntaxes : • L'entrée : nom_variable = prompt("texte de la boite d'invite ","valeur par défaut") ; • La sortie : document.write("message" + nom_variable) ; • Alert("message" + nom_variable) ; Prof:Mr.Walid Ben Harrath VII. Les Structures de contrôle : • 1- Les structures conditionnelles • La forme réduite : if (condition vraie) {une ou plusieurs instructions;} • La forme complète : if (condition vraie) {instructions1;} else {instructions2;} Prof:Mr.Walid Ben Harrath Application 2 • Ecrire un programme qui permet d’afficher le maximum de 3 entiers Prof:Mr.Walid Ben Harrath <HTML> <HEAD> <TITLE>la structure IF</TITLE> </HEAD> <BODY> <script language="javascript"> var a= window.prompt("Entrez un premier entier :",""); var b= window.prompt("Entrez un deuxième entier :",""); var c= window.prompt("Entrez un troisième entier :",""); if (Number(a)>Number(b)) m=a; else m=b; if (Number(c)>Number(m)) m=c; alert("le maximum de "+a +" , "+b +" et "+c +" est = "+m); </script> </BODY> </HTML> Prof:Mr.Walid Ben Harrath b- La structure switch switch(expression) { case v1: Bloc1; break ; case v2 : Bloc2; break;..... default : Bloc_n; break;} Prof:Mr.Walid Ben Harrath ☛L'instruction break permet de quitter la uploads/S4/ le-langage-javascript 2 .pdf