1 / 55

Internet

Internet. Sommaire. Javascript. Javascript. 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. Javascript (2/3).

bo-hartman
Download Presentation

Internet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet Département Technologie de l’Information et de la Communication

  2. Sommaire • Javascript Département Technologie de l’Information et de la Communication

  3. Javascript Département Technologie de l’Information et de la Communication

  4. 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. Département Technologie de l’Information et de la Communication

  5. 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. Département Technologie de l’Information et de la Communication

  6. Javascript (3/3) • Javascript n’est pas Java: Département Technologie de l’Information et de la Communication

  7. Où placer le code? • Dans la page HTML: • entre les balises: <script language="javascript"> … </script> • 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 <head> et </head>. Département Technologie de l’Information et de la Communication

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

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

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

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

  12. 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) Département Technologie de l’Information et de la Communication

  13. 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; Département Technologie de l’Information et de la Communication

  14. Exercice 1 • Écrire un script qui affiche la page suivante: Département Technologie de l’Information et de la Communication

  15. 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"]; Département Technologie de l’Information et de la Communication

  16. 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"]); Département Technologie de l’Information et de la Communication

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

  18. 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. Département Technologie de l’Information et de la Communication

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

  20. 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"); Département Technologie de l’Information et de la Communication

  21. 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. Département Technologie de l’Information et de la Communication

  22. 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. Département Technologie de l’Information et de la Communication

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

  24. 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: Département Technologie de l’Information et de la Communication

  25. 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 <head>: • exemple: <head> <script type="text/javascript" src="fichier.js"></script> </head> Département Technologie de l’Information et de la Communication

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

  27. 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, ...). Département Technologie de l’Information et de la Communication

  28. 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. Département Technologie de l’Information et de la Communication

  29. 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. Département Technologie de l’Information et de la Communication

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

  31. Exemple • Objet navigator: <script language="javascript"><!--Navigateur = navigator.appName;if (Navigateur == "Netscape"){ document.write("Netscape"); }if (Navigateur == "Microsoft Internet Explorer"){document.write("Internet Explorer");}//--></script> Département Technologie de l’Information et de la Communication

  32. Propriétés (1/6) • Zone de texte: Département Technologie de l’Information et de la Communication

  33. Propriétés (2/6) <html> <body> <form name="monFormulaire"> <input type="text" name="leNom" value="valeur par défaut"><br /> </form> <script> document.write(" name="+document.monFormulaire.leNom.name+"<br />"); document.write("defaultvalue="+document.monFormulaire.leNom.defaultValue+"<br />"); document.write("value="+document.monFormulaire.leNom.value+"<br />"); </script> </body> </html> Département Technologie de l’Information et de la Communication

  34. Propriétés (3/6) • Case à cocher: Département Technologie de l’Information et de la Communication

  35. Propriétés (4/6) • Boutons radio: Département Technologie de l’Information et de la Communication

  36. Propriétés (5/6) • Liste de sélection: Département Technologie de l’Information et de la Communication

  37. Propriétés (6/6) • Zone de texte (TextArea): Département Technologie de l’Information et de la Communication

  38. 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. Département Technologie de l’Information et de la Communication

  39. 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. Département Technologie de l’Information et de la Communication

  40. 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. Département Technologie de l’Information et de la Communication

  41. 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. Département Technologie de l’Information et de la Communication

  42. 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. Département Technologie de l’Information et de la Communication

  43. 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');" Département Technologie de l’Information et de la Communication

  44. Exemple <html> <body> <form> <a href="page.html" onClick="alert('Vous avez cliqué sur le lien');"> lien</a> </form> </body> </html> Département Technologie de l’Information et de la Communication

  45. Exemple <html> <head> <script language="Javascript"> function bienvenue(){ alert("bienvenue sur ma page"); } function auRevoir(){ alert("Au revoir"); } </script> </head> <body onLoad="bienvenue() " onUnload="auRevoir() "> <h1>voici ma page</h1> </body> </html> Département Technologie de l’Information et de la Communication

  46. Exemple • À la fermeture: Département Technologie de l’Information et de la Communication

  47. Les boutons • 3 types: • bouton submit (déjà vu), • bouton reset (déjà vu), • bouton normal: <input type="button" name="nom" value="cliquez ici"> Département Technologie de l’Information et de la Communication

  48. 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. Département Technologie de l’Information et de la Communication

  49. 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</a> Département Technologie de l’Information et de la Communication

  50. 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). Département Technologie de l’Information et de la Communication

More Related