Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet

Module Internet (3) 2 Département Technologie de l’Information et de la Communication Sommaire Javascript

Module Internet (3) 3 Département Technologie de l’Information et de la Communication Javascript

Module Internet (3) 4 Département Technologie de l’Information et de la Communication Javascript (1/3) Au début: –LiveScript, –développé par Netscape. Le 4 décembre 1995, suite à une association avec Sun, Netscape rebaptise son langage Javascript : –clin d'oeil au langage Java.

Module Internet (3) 5 Département Technologie de l’Information et de la Communication Javascript (2/3) Permet de rendre un site interactif de manière simple (pour les non développeurs), –réagir aux actions de l'utilisateur.

Module Internet (3) 6 Département Technologie de l’Information et de la Communication Javascript (3/3) Javascript n’est pas Java : JavascriptJava (applet) langage interprétélangage pseudo-compilé code intégré au HTML code à part du document HTML, appelé à partir de la page langage peu typé langage fortement typé accessibilité du code confidentialité du code pas d’écriture sur le disque dur

Module Internet (3) 7 Département Technologie de l’Information et de la Communication Où placer le code? Dans la page HTML: –entre les balises: … –language="javascript" est facultatif: javascript est (actuellement…) le language de script par défaut. Les fonctions sont déclarés dans l'en-tête de la page html: –entre et.

Module Internet (3) 8 Département Technologie de l’Information et de la Communication Les Commentaires // sera en commentaire /* ceci sera aussi un commentaire sur plusieurs lignes */

Module Internet (3) 9 Département Technologie de l’Information et de la Communication Pour les anciens navigateurs Pour résoudre le problème des anciens navigateurs qui ne supportent pas javascript : <!-- // code javascript -->

Module Internet (3) 10 Département Technologie de l’Information et de la Communication Exemple (1/2) Ma première page avec javascript <!-- //partie cachée aux anciens navigateurs document.write("Bonjour tout le monde"); -->

Module Internet (3) 11 Département Technologie de l’Information et de la Communication Exemple (2/2)

Module Internet (3) 12 Département Technologie de l’Information et de la Communication Syntaxe Les instructions se terminent par " ; ". Casse: –majuscule != minuscule. Opérateurs: ==, !=, = =,, &&, ||, Boucle: for(i = 0; i<5; i++){ // instructions } while(a<b){ // instructions } do{ // instructions } < while(a<b)

Module Internet (3) 13 Département Technologie de l’Information et de la Communication Déclaration des variables Deux façons: –explicite (avec le mot clé var ): var st_chaine= "bonjour"; –implicite (sans mot clé): st_chaine= "bonjour"; // st_chaine est globale –exemples: var MaVariable1; MaVariable2 = 56; MaVariable1 = 32;

Module Internet (3) 14 Département Technologie de l’Information et de la Communication Exercice 1 Écrire un script qui affiche la page suivante:

Module Internet (3) 15 Département Technologie de l’Information et de la Communication Les tableaux (1/2) 3 manières de déclarer un tableau: var Tab = new Array(); // déclaration d'un tableau vide –déclaration et initialisation en même temps: première méthode: var Tab = new Array("donnée 1", "donnée 2", "donnée 3"); seconde méthode: var Tab = ["donnée 1", "donnée 2", "donnée 3"];

Module Internet (3) 16 Département Technologie de l’Information et de la Communication Les tableaux (2/2) Utilisation: Tab[0] = "Bonjour à tous"; Tab[1] = "Rebonjour à tous"; Tableaux associatifs: Tab["Jean"] = 16; Tab["Paul"] = 14; –exemple: document.write("Le second élément du tableau vaut "+Tab[1]); document.write("La note de Paul est : "+Tab["Paul"]);

Module Internet (3) 17 Département Technologie de l’Information et de la Communication Les fonctions (1/3) Définition: function nom_fonction(paramètres) { // instructions }

Module Internet (3) 18 Département Technologie de l’Information et de la Communication Les fonctions (2/3) Appel: nomDeLaFonction(arguments) La fonction doit être définie avant l'appel: –la définition sera placée dans l'en-tête de la page html.

Module Internet (3) 19 Département Technologie de l’Information et de la Communication Les fonctions (3/3) Valeur de retour: –mot clé: return –exemple: function carre(nombre) { var resultat = nombre*nombre; return resultat; }

Module Internet (3) 20 Département Technologie de l’Information et de la Communication La fonction Alert Permet d'afficher un message: –une fenêtre avec du texte et un bouton OK. Syntaxe: alert("texte"); alert(variable); –exemple: alert("bonjour");

Module Internet (3) 21 Département Technologie de l’Information et de la Communication La fonction prompt Affiche une fenêtre avec du texte, une zone de saisie, un bouton OK et un bouton annuler : –permet la saisie de l'utilisateur. –exemple: var reponse = prompt("Texte de la boîte","valeur par défaut"); –retourne: la valeur de la zone de saisie, null si l'utilisateur clique sur annuler.

Module Internet (3) 22 Département Technologie de l’Information et de la Communication La fonction confirm Affiche une fenêtre avec du texte, un bouton OK et un bouton annuler : –permet de demander confirmation. –exemple: var continuer = confirm("Voulez-vous continuer?"); –retourne: true si l'utilisateur clique sur OK, false sinon.

Module Internet (3) 23 Département Technologie de l’Information et de la Communication Fonctions et boîtes de dialogue Déclaration: function fonctionTest(monTexte) { alert(monTexte); } Appel : fonctionTest("bonjour"); –affichera une fenêtre avec le texte " bonjour "

Module Internet (3) 24 Département Technologie de l’Information et de la Communication Exercice Écrire une page qui demande la saisie de 2 valeurs (à l'ouverture) et qui en affiche la somme: –vous utiliserez la fonction parseFloat(chaine) pour convertir une chaîne de caractères en réel:

Module Internet (3) 25 Département Technologie de l’Information et de la Communication Scripts externe Le script peut être enregistré dans un fichier indépendant de la page Web: –réutilisation du script dans une autre page. Le fichier est précisé dans : –exemple:

Module Internet (3) 26 Département Technologie de l’Information et de la Communication Les objets (1/5) objet window objet document objet champ texte objet bouton radio objet formulaire objet bouton

Module Internet (3) 27 Département Technologie de l’Information et de la Communication Les objets (2/5) Les objets de base du navigateur sont les suivants: navigator contient des informations sur le navigateur de celui qui visite la page. window c'est l'objet où s'affiche la page, il contient donc des propriétés concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci. location contient des informations relatives à l'adresse de la page à l'écran. history liste de liens visités précédemment. document propriétés sur le contenu du document (couleur arrière plan, titre,...).

Module Internet (3) 28 Département Technologie de l’Information et de la Communication Les objets (3/5) Pour accéder à un objet: –commencer par l'objet le plus élevé, puis descendre dans la hiérarchie, –exemple: pour accéder au bouton semaine placé dans le formulaire test : window.document.test.semaine –remarque: window est facultatif.

Module Internet (3) 29 Département Technologie de l’Information et de la Communication Les objets (4/5) Pour accéder aux propriétés des objets: –opérateur ". " nom_de_objet.nom_propriété –exemple: document.nom_form.nom_radio.checked permet de savoir si le bouton radio est coché ( ON ) ou NULL.

Module Internet (3) 30 Département Technologie de l’Information et de la Communication Les objets (5/5) Navigator AppName retourne le nom du navigateur. AppVersion retourne la version.

Module Internet (3) 31 Département Technologie de l’Information et de la Communication Exemple Objet navigator :

Module Internet (3) 32 Département Technologie de l’Information et de la Communication Propriétés (1/6) Zone de texte: PropriétéDescription name nom du contrôle defaultValue valeur par défaut du contrôle value valeur en cours du contrôle

Module Internet (3) 33 Département Technologie de l’Information et de la Communication Propriétés (2/6) document.write(" name="+document.monFormulaire.leNo m.name+" "); document.write("defaultvalue="+document.monFormulaire.leNom.defaultValue+" "); document.write("value="+document.monFormulaire.leNom.value+" ");

Module Internet (3) 34 Département Technologie de l’Information et de la Communication Propriétés (3/6) Case à cocher: PropriétéDescription name nom du contrôle checked état en cours defaultChecked bouton sélectionné par défaut ? value valeur du bouton

Module Internet (3) 35 Département Technologie de l’Information et de la Communication Propriétés (4/6) Boutons radio: PropriétéDescription name nom du contrôle checked état en cours defaultChecked bouton sélectionné par défaut value valeur de l'élément case à cocher

Module Internet (3) 36 Département Technologie de l’Information et de la Communication Propriétés (5/6) Liste de sélection: PropriétéDescription id nom de la liste déroulante length nombre d'éléments de la liste selectedIndex rang de l'élément sélectionné (à partir de 0) value valeur de l'élément sélectionné

Module Internet (3) 37 Département Technologie de l’Information et de la Communication Propriétés (6/6) Zone de texte ( TextArea ): PropriétéDescription name nom du champ textArea defaultValue valeur par défaut du champ value valeur courante du champ texte

Module Internet (3) 38 Département Technologie de l’Information et de la Communication Les évènements (1/6) Avec HTML : –un seul événement: le click souris (assez limité...). Javascript ajoute les événements suivants qui peuvent être insérés dans les balises HTML du document: Click lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Load lorsque la page HTML est chargée par le navigateur. Unload lorsque l'utilisateur quitte ou change de page HTML.

Module Internet (3) 39 Département Technologie de l’Information et de la Communication Les évènements (2/6) Javascript : MouseOver lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément. MouseOut lorsque le pointeur de la souris quitte un lien ou tout autre élément.

Module Internet (3) 40 Département Technologie de l’Information et de la Communication Les événements (3/6) Javascript: Focus lorsqu'un élément de formulaire a le focus (i.e. devient la zone d'entrée active). Blur lorsqu'un élément de formulaire perd le focus ( i.e. lorsque l'utilisateur clique hors du champ et que la zone entrée n'est plus active). Change lorsque la valeur d'un champ de formulaire est modifiée. Select lorsque l'utilisateur sélectionne un champ dans un élément de formulaire. Submit lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire.

Module Internet (3) 41 Département Technologie de l’Information et de la Communication Les événements (4/6) Javascript: Abort lorsque l'utilisateur interrompt le chargement de l'image. Dblclick lorsque l'utilisateur double-clique sur l'élément (un lien hypertexte ou un élément de formulaire). Dragdrop lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur. Error lorsqu'une erreur apparaît durant le chargement de la page.

Module Internet (3) 42 Département Technologie de l’Information et de la Communication Les évènements (5/6) Javascript: Keydown lorsque l'utilisateur appuie sur une touche de clavier. Keypress lorsque l'utilisateur maintient une touche de clavier enfoncée Keyup lorsque l'utilisateur relâche une touche de clavier. Reset lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset. Resize lorsque l'utilisateur redimensionne la fenêtre du navigateur.

Module Internet (3) 43 Département Technologie de l’Information et de la Communication Les évènements (6/6) Récupération d'un événement et appel de fonction: onNom_événement="nom_fonction();" –exemple: onClick="alert('Vous avez cliqué sur cet élément');"

Module Internet (3) 44 Département Technologie de l’Information et de la Communication Exemple lien

Module Internet (3) 45 Département Technologie de l’Information et de la Communication Exemple function bienvenue(){ alert("bienvenue sur ma page"); } function auRevoir(){ alert("Au revoir"); } voici ma page

Module Internet (3) 46 Département Technologie de l’Information et de la Communication Exemple À la fermeture:

Module Internet (3) 47 Département Technologie de l’Information et de la Communication Les boutons 3 types: –bouton submit (déjà vu), –bouton reset (déjà vu), –bouton normal:

Module Internet (3) 48 Département Technologie de l’Information et de la Communication Exercice Écrire le code de la page suivante, permettant de sélectionner son système d'exploitation: –après chaque changement, la nouvelle valeur de la liste sera affichée: –remarque: créer une fonction permettant l'affichage de la valeur de la liste.

Module Internet (3) 49 Département Technologie de l’Information et de la Communication La méthode open() (1/3) La méthode open() (de l'objet window ) permet d'ouvrir une fenêtre: window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); –exemple d'utilisation dans un lien hypertexte: <a href=# onClick="window.open('URL', 'nom_de_la_fenetre', 'options_de_la_fenetre');return(false)">Lien

Module Internet (3) 50 Département Technologie de l’Information et de la Communication La méthode open() (2/3) Les options de la fenêtre sont les suivantes: directories = yes/no affiche ou non les boutons de navigation. location = yes/no affiche ou non la barre d'adresse. menubar = yes/no affiche ou non la barre de menu (fichier, edition,...). resizable = yes/no définit si la taille de la fenêtre est modifiable ou non. scrollbars = yes/no affiche ou non les ascenseurs (barres de défilement).

Module Internet (3) 51 Département Technologie de l’Information et de la Communication La méthode open() (3/3) Options de la fenêtre: status = yes/no affiche ou non la barre d'état. toolbar = yes/no affiche ou non la barre d'outils. width = largeur (en pixels) définit la largeur. height = hauteur (en pixels) définit la hauteur.

Module Internet (3) 52 Département Technologie de l’Information et de la Communication Exercice Écrire un lien permettant d'afficher la page suivante:

Module Internet (3) 53 Département Technologie de l’Information et de la Communication Exercice Écrire un script de telle sorte que lorsque la souris passe sur une image celle-ci est modifiée:

Module Internet (3) 54 Département Technologie de l’Information et de la Communication Exercice Écrire une mini calculatrice:

Module Internet (3) 55 Département Technologie de l’Information et de la Communication Références