WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB

Transcription

1 WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB Algorithmique programmation internet niveau 2 NFA054 (6 ECTS) Chapitre 1 Introduction à Javascript

2 Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs propriétaires respectifs. Ce support pédagogique a été rédigé par Olivier FLAUZAC, Professeur des Universités à l Université de Reims Champagne-Ardenne, enseignant vacataire au Cnam Champagne-Ardenne. Copyright Centre d'enseignement A Distance du Cnam Champagne-Ardenne. Tous droits réservés. Toute reproduction, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable du Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.

3 INTRODUCTION A JAVASCRIPT Table des matières INTRODUCTION A JAVASCRIPT introduction Javascript? Inclusion de scripts Test Des scripts premieres Génération de textes et balises une boite Des variables Structures de contrôle structure itératives (boucles) structures alternatives (conditionnelles)... 8 Exercices INTRODUCTION 1.1. JAVASCRIPT? Javascript est un langage permettant la mise en place d exécutions sur le client, c est à dire le navigateur WEB. Un script javascript est inclus directement au sein d une page HTML. Il est donc téléchargé sur le client en même temps que la page, et s exécute à la réception de celle-ci. Etant donné que javascript s exécute sur le poste client, on peut légitimement se poser des questions sur le degré de sécurité d une telle technologie. L exécution d un script javascript se fait de manière confinée. C est à dire que le script s exécute dans un environnement spécifique depuis lequel il n a pas accès aux différents éléments sensibles du système que sont : le disque dur et les fichiers de l utilisateur ; les connexions réseau qu elles soient à établir ou établies ; les processus en mémoire. Par contre, il est tout à fait possible de saturer le processeur par des exécutions d javascript, ce qui peut mener au «plantage» du navigateur voir du système d exploitation. Dans cette introduction, il est important de préciser une chose : javascript n est pas java. Souvent la confusion est faîte entre les deux langages. L objectif de javascript est la mise en place de calculs, d exécutions, au sein d une page WEB, java quant à lui est en mesure de s exécuter dans le cadre d une page WEB, sous la forme d une applet, mais ne se limite pas au WEB et permet le développement d applications autres que des applications WEB. Enfin, javascript offre donc la possibilité de manipuler l ensemble des éléments relatifs à une page WEB et au navigateur : les formulaires, images, pop-ups Ce langage de script est aussi capable de gérer des interventions de l utilisateur comme la sélection dans une liste ou le click sur un bouton, par l intermédiaire de la gestion des événements. Algorithmique programmation internet niveau 2 1

4 1.2. INCLUSION DE SCRIPTS Les scripts javascript sont directement inclus au sein du code HTML. Afin de réaliser cette inclusion, on utilise les balises spécifiques de scripts. Cette inclusion se fait comme le montre le fragment de code suivant : *********** CODE HTML *********** *********** SUITE DU CODE HTML *********** On pourra noter qu il est possible de définir autant de «zones» de script que voulues. Nous verrons par la suite qu il est possible d utiliser des inclusions de fichiers externes afin d importer des scripts Javscripts dans une page HTML TEST DES SCRIPTS Enfin le test des scripts ainsi écrits ne nécessite que l utilisation d un navigateur WEB. En effet, le langage javascript n est évalué que sur le client et non sur le serveur. Il ne nécessite donc aucune opération ni exécution préalable sur le serveur WEB. Pour tester si un script javascript fonctionne, on peut donc se contenter d ouvrir la page HTML le contenant avec un simple «fichier ouvrir» ou d un «double-click» sur le fichier. Nous verrons par la suite que le test de scripts PHP nécessite quant à lui l utilisation d une plate-forme WEB utilisant un serveur WEB, Apache par exemple. 2. PREMIERES INSTRUCTIONS Dans ce premier chapitre, nous allons utiliser des qui permettent l insertion de texte, balisé ou non, soit directement dans la page HTML, soit dans une boîte de dialogue (une pop up). Les que nous allons maintenant présenter sont write et alert. Avant de donner des exemples de code qui «génère» du texte ou des balises, voici comment insérer des commentaires dans son code Javascript. L insertion d un commentaire sur une seule ligne se fait à l aide des caractères : «//». Le prototype d un commentaire sur une seule ligne est donc : ********* CODE JAVASCRIPT ******** // ceci est un commentaire ********* SUITE DU CODE JAVASCRIPT ******** Il est aussi possible de générer des commentaires sur plusieurs lignes, on utilisera alors la forme suivante : ********* CODE JAVASCRIPT ******** /* ceci est un commentaire sur plusieurs lignes */ ********* SUITE DU CODE JAVASCRIPT ******** Remarque : l utilisation de commentaires javascript ne peut évidemment se faire que dans les zones de script javascript! Il est évidemment primordial de commenter son code, afin d être capable de le reprendre et de le corriger par la suite. Dans bien des cas, sans de tels commentaires, il est très difficile de modifier le code ou de le corriger. Introduction à Javascript 2

5 2.1. GENERATION DE TEXTES ET BALISES La génération d éléments de type texte dans un document, que ce soit du texte brut ou du texte balisé se fait à l aide de la fonction write que l on applique à l élément (plus exactement l objet) document. Le prototype de cette fonction est : document.write(chaîne de caractères) ; Remarque : dans le prototype précédent, la chaîne de caractères est comprise entre des guillemets. Voici donc quelques exemples de génération de chaînes de caractères. Dans un premier cas, nous générons du texte brut, dans le second, vous pouvez constater qu il est possible de générer la totalité d un texte balisé, ou de mixer la génération du texte et / ou des balises entre du HTML pur et du Javascript.  <title> Hello world </title> <h1> le célèbre "hello world" </h1> // génération d un simple texte document.write("hello world!"); Donc pour visualiser le résultat de cette page, et du script qui y est inclus, il suffit d ouvrir le fichier HTML avec un navigateur WEB. Vous pouvez remarquer lors de la visualisation que l on est bien incapable de reconnaître ce qui est généré en HTML «pur» ou en javascript. Par contre, si vous demandez à visualiser le code source, vous pourrez retrouver votre script javascript. D ailleurs vous pouvez remarquer que vous visualisez le code que vous avez créé, et non le code HTML total généré pour l affichage!  <title> Génération de texte et de balises </title> <h1> Génération de texte </h1> <h2> Du texte non balisé </h2> document.write("ce texte en javascript mais non balisé"); <h2> Du texte balisé </h2> document.write("<p> un paragraphe généré en une seule instruction </p>"); document.write("<p>"); document.write("un paragraphe généré en plusieurs "); document.write("</p>"); <h2> Génération "mixte" </h2> <ul> <li> la première puce générée en HTML pur </li> document.write("<li> la seconde ligne générée en javascript </li>"); <li> la troisième puce générée en HTML pur </li> </ul> Algorithmique programmation internet niveau 2 3

6 2.2. UNE BOITE Nous avons précédemment généré du texte dans le corps de notre document, texte qui, comme nous l avons vu peut être balisé ou non. Il est aussi possible de générer non pas du texte, mais une boîte d alerte, c est à dire un pop-up simple permettant d informer l utilisateur. Cette boîte est constituée d un message et juste d un bouton OK. L instruction permettant de générer une telle boîte est : alert(chaîne de caractères) ; Dans l exemple suivant, nous présentons l utilisation d une boîte alert. <title> Une boîte alert </title> <h1> Utilisation d'un pop-up </h1> alert("salut à tous!"); Nous verrons dans la suite du cours, que d autres boîtes existent, notamment 3. DES VARIABLES Comme dans tous les langages, il est possible de stocker des informations dans des variables, afin de pouvoir manipuler ces informations dans la suite du script. Il est possible de stocker toute sorte d informations : valeurs numériques, chaines de caractère Une fois une variable créée, il faut l initialiser, c est à dire lui affecter une valeur. Une fois ceci fait, on peut alors manipuler cette variable : en l affichant, en la combinant avec d autres variables ou éléments, ou en la modifiant. En javascript, les variables peuvent être utilisée comme bon nous semble, nous en sommes pas obligés de définir à l avance le type d information que va détenir une variable, ni de la déclarer à l avance, on l utilise quand on en a besoin. Toutefois, afin de rendre le code plus lisible et plus simple à maintenir, il est conseillé de définir ses variables principales toutes au même endroit du code. Pour définir une variable on utilise le mot clé var et la forme suivante : var ma_variable ; var ma_variable2 = 12 ; Dans le premier cas, la variable est juste créée, mais aucune valeur spécifique ne lui est associée, dans le second, la variable est créée et la valeur 12 lui est affectée. Remarque : il est toujours préférable d initialiser les variables que l on crée. Introduction à Javascript 4

7 Voici maintenant quelques exemples de manipulation : <title> variables </title> var i = 22; var j = 45; var k = i + j; var l = i * j; document.write("valeurs de i = " + i + " j = " + j + " k = " + k + " l =" +l); Comme vous pouvez le remarquer l ensemble des opérations mathématiques sont utilisables sur les variables de type numériques. Vous remarquerez aussi l utilisation de variables et de chaines de caractères dans l instruction document.write : les valeurs des variables sont ajoutées à la chaine à l aide de l opérateur «+». Les caractères dans les guillemets sont restitués tel quel, ceux à l extérieur des guillemets sont remplacées par les valeurs des variables. <title> variables </title> var i = 22; var j = 45; <p> il est possible de mettre plusieurs zones de script </p> var k = i + j; var l = i * j; document.write("valeurs de i = " + i + " j = " + j + " k = " + k + " l =" +l); 4. STRUCTURES DE CONTROLE 4.1. STRUCTURE ITERATIVES (BOUCLES) Javascript, comme tous les langages de programmation, permet la mise en place d exécutions répétées d une série d instruction. Cette exécution répétée se fait à l aide de structures de contrôle spécifiques : les boucles. Les boucles sont au nombre de 3 : La boucle pour (for) La boucle tant que faire (while) La boucle faire tant que (do while) Ces structures de boucles permettent toutes les trois de répéter des fragments de code de manière conditionnelle. S il est possible de réaliser les mêmes opérations avec ces trois structures, on tente toutefois de les utiliser dans des cas précis. Les boucles de type for sont utilisées lorsque l ensemble des informations relatives aux itérations sont connues : le point d départ, le point d arrivée et la manière de se déplacer. Par exemple, lorsque l on souhaite compte de 1 à 10, le point de départ est 1, le point d arrivée est 10 et la manière de se déplacer est de 1 en 1. On utilisera donc une boucle de type for. Algorithmique programmation internet niveau 2 5

8 Voici le prototype d une boucle de type for : for(initialisation ; test ; incrément){ Et maintenant un exemple d utilisation : <title> Une boucle for </title> <h1> Une boucle for </h1> <ul> var i = 0; for(i = 0; i<10 ; i++){ document.write("<li> la valeur de i : " + i + "</li>"); </ul> La structure itérative while, la boucle while, est quand à elle généralement utilisée dans les cas ou l on ne connaît pas à l avance l ensemble des information. Dans le cas de la boucle while, seul le test d arrêt est compris dans la boucle, c est à la charge du programmeur d initialiser la variable de boucle avant, et de faire évoluer cette variable à «chaque tour» de boucle. Le prototype d une boucle while est le suivant : while(condition){ Voici un exemple de script qui utilise la structure WHILE. <title Une boucle while </title> <ul> // déclaration de la variable var i = 0; while(i<10){ // test de la variable document.write("<li> la valeur de i : " + i + "</li>"); // incrémentation de la variable i++; </ul> Introduction à Javascript 6

9 Remarque : dans le code précédent, vous pouvez remarquer que si vous oubliez d incrémenter la valeur de la variable i dans la boucle, vous obtenez ce que l on appelle une boucle infinie, c est à dire dont le programme ne sort jamais. Selon les navigateurs et les systèmes, ceci peut mener à une augmentation déraisonnable de l activité du processeur, au «plantage» du navigateur, voir dans le pire des cas, au plantage général du système d exploitation! Enfin la structure itérative do while permet, contrairement à la structure while vue précédemment, d assurer l exécution d au moins un «tour» de boucle. Pour se faire, le test est réalisé après le fragment de code et non avant. Voici le prototype de la structure do while : do{ while(condition); Remarque : Si vous rapprochez le prototype précédent de celui de la boucle while, vous remarquerez que dans le cas de la structure do while, la condition se termine par le caractère «;», ce qui n est pas le cas dans les autres cas! Voici maintenant un exemple d utilisation de la boucle do while : <title> Une boucle do while </title> <ul> var i = 0; do{ document.write("<li> la valeur de i : " + i + "</li>"); i++; while(i<10); </ul> Afin de bien appréhender la différence entre les boucle while et do while, voici un nouvel exemple dans lequel on retrouve les même, valeurs d initialisation et incrément, mais dont les résultats diffèrent en fonction du type de boucle que l on va utiliser. <title> Une boîte alert </title> <h1> Pour le while </h1> var i = 10; document.write("<p> avant le while i = " + i + "</p>" ); while(i<10){ document.write("<p> dans le while </p>"); i++; document.write("<p> après le while i = " + i + "</p>" ); <h1> Pour le do... while </h1> var i = 10; Algorithmique programmation internet niveau 2 7

10 document.write("<p> avant le do... while i = " + i + "</p>" ); do{ document.write("<li> la valeur de i : " + i + "</li>"); i++; while(i<10); document.write("<p> après le do... while i = " + i + "</p>" ); 4.2. STRUCTURES ALTERNATIVES (CONDITIONNELLES) La création de programmes informatiques, et les scripts javascript n échappent pas à cette règle, nécessite l utilisation d spécifiques, de structures itératives, mais aussi de structures alternatives qui vont nous permettre de mettre des choix en place. Dans cette partie, nous allons nous pencher sur les structures alternatives. Les structures alternatives sont au nombre de 2 : la structure if que l on connaît aussi déclinée sous sa forme if else et la structure switch. Ces structures nous permettent de faire de choix, et de mettre en place des exécutions dépendantes des situations, et plus exactement dépendantes de l état (la valeur) de certaines variables. La première de ses structures est la structure IF. Avec cette structure, on effectue un test (la condition) et si ce test s avère vrai, on effectue le code associé, sinon on n exécute rien. Le prototype d une telle structure est le suivant : if (condition){ Voici un exemple de code javascript qui utilise une structure IF. Vous pourrez remarquer lors de l exécution de ce code, que rien ne s affiche dans le navigateur. Aucun texte ou élément balisé n est généré par du HTML «pur». Le code associé à la structure IF n est exécuté que si la variable i est inférieure à 15, ce qui n est pas le cas, donc rien n est généré. <title> Condition IF </title> var i = 15; if(i<10){ document.write("<p> i est inférieur à 10! </p>"); La structure IF peut être «étendue» pour donner la structure IF ELSE. Dans ce cas, et contrairement à la forme IF «simple», quelle que soit la condition un fragment de code est exécuté. Si la condition se trouve vérifiée, le code qui se trouve associé sera exécuté. Dans le cas contraire, le code associé à la partie ELSE sera exécuté. Le prototype de la structure IF ELSE est le suivant : if(condition){ 1 else{ 2 Introduction à Javascript 8

11 L exemple suivant nous présente l utilisation de la structure IF ELSE. <title> Condition IF... ELSE </title> var i = 15; if(i<10){ document.write("<p> i est inférieur à 10! </p>"); else{ document.write("<p> i est supérieur ou égal à 10!</p>"); Remarque : comme vous pouvez le vérifier si vous effectuez des tests, le contraire de i est inférieur à 10 (i<10) est i est supérieur ou égal à 10 (i >= 10). Enfin la dernière structure de contrôle conditionnelle est la structure SWITCH. Son principe est de proposer différentes possibilités associées à une variable numérique. A chaque valeur définie est associée un fragment de code à exécuter. Enfin, il est possible, mais pas obligatoire, d utiliser un cas par défaut (default) qui sera exécuté si aucun des cas défini n est «sélectionné». Voici le prototype de la structure SWITCH : switch(variable){ case valeur1 : break ; case valeur2 : break ; case valeurn : break ; default : L exemple suivant présente l utilisation de la structure conditionnelle SWITCH. <title> Condition SWITCH </title> var i = 3; switch(i){ case 0 : document.write("<p>i est égal à 0</p>"); break; case 1 : document.write("<p>i est égal à 1</p>"); break; case 2 : document.write("<p>i est égal à 2</p>"); break; case 3 : document.write("<p>i est égal à 3</p>"); break; Algorithmique programmation internet niveau 2 9

12 default : document.write("<p>i est différent de 0, 1, 2, 3</p>"); break; Introduction à Javascript 10

13 5. EXERCICES 5.1. QUIZZ Question 1 : la mise en place d un script javascript nécessite l utilisation d un serveur WEB Vrai Faux Question 2 : un script javascript n est exécuté que sur le client (le navigateur) Vrai Faux Question 3 : javascript est en mesure de générer du texte et des balises dans un document HTML Vrai Faux Question 4 : il ne peut y avoir qu un seul script javascript dans une page WEB Vrai Faux Question 5 : l instruction qui permet de générer un élément de texte dans une page HTML est : document.write(«bonjour») ; print(«hello») ; écho(«salut») ; 5.2. QUELQUES AFFICHAGES Réalisez les affichages et insertion d éléments suivants à l aide de scripts javascript : La phrase non balisée : bonjour à tous Un tableau HTLM de 2 lignes et 2 colonnes L insertion d une image dans le document HTML 5.3. «SWAP» DE 2 VARIABLES L objectif de cet exercice est de réaliser l échange du contenu de deux variables. Au début du script, on déclare deux variables i et j qui ont respectivement les valeurs 10 et 20, et à la fin du script i vaut 20 et j vaut 10. Vous réaliserez cet exercice de deux manières : la première en utilisant une troisième variable, et la seconde sans utiliser de troisième variable DE 1 A 10 A l aide successivement de structures WHILE et FOR, réalisez l affichage d une liste à puce non ordonnée (<ul>) dont les textes des puces sont les nombres de 1 à LES TABLES DE MULTIPLICATION Ecrivez un script javascript qui affiche les tables de multiplication dans un tableau HTML. Le résultat obtenu devra avoir la forme suivante : Algorithmique programmation internet niveau 2 11

14 5.6. LES NOMBRES PREMIERS (EXERCICE DIFFICILE) Un nombre premier est un nombre divisible uniquement par 1 et par lui-même. On remarquera que 0 n est pas premier : il n est pas divisible par lui-même. En javascript, on peut obtenir le reste de la division entière d un nombre par un autre en utilisant l expression : $a % $b. Si le résultat est égal à 0, $a est divisible par $b, sinon $a n est pas divisible par $b En utilisant une boucle tester si un nombre est premier. Indication on testera les restes des divisions entières successives. Introduction à Javascript 12