Objectif: Programmer et intégrer des scripts dans une page Web

Sous la direction de : Mr. Soudane Med Salem Animateur : Mr. Ben Fekih Hassen Salem Date : 24/10/2008 et 25/10/2008 Module : Javasciprt Objectif: Programmer et intégrer des scripts dans une page Web

PLAN • I- Introduction au langage JavaScript : 1. Les limites du langage HTML 2. Les solutions proposées 3. Historique du langage JavaScript • II- Le formalisme de base du JavaScript: • III- Les Objets JavaScript : 1. Les objets JavScript et leurs hiérarchies 2. Les différents emplacements du code JavaScript • IV- Les Variables : • V- Les opérateurs prédéfinis : • VI- Les Entrées/Sorties en JavaScript : • VII- Les Structures de contrôle : • VIII- Les Fonctions en JavaScript : • IX- La Gestion des événements en JavaScript : • X- Les Formulaires en JavaScript:

I- Introduction au langage JavaScript : Activité 1: • I-1.Les limites du langage HTML  Absence des structures de contrôle  Un langage sans aucune logique de programmation procédurale (sous programmes, variables, opérateurs…)  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, 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 (pour visualiser le code, il suffit d’utiliser l’option affichage code source du navigateur). Limites Solutions Historique

I- Introduction au langage JavaScript : • I-2. Les Solutions proposées : Deux Solutions (utilisé un langage coté Client ou langage coté Serveur) • Langage coté client (JavaScript ou VbScript) : ce sont deux langages qui permettent d’ajouter des fonctionnalités omises par le langage HTML, (Les fonctionnalité qui concernent la connexion aux BD et l’accessibilité au code source ne sont pas supportées par ces langages). • Langage coté Serveur (ASP, PHP) : ces langages permettent d’avoir les mêmes fonctionnalités que les langages coté client plus la possibilité de se connecter à la bases de données et le verrouillage du code source. Limites Solutions Historique

I- Introduction au langage JavaScript : • I-3. Historique du langage JavaScript : JavaScript a été initialement développé par Netscape et s’appelait LiveScript. Adopté à la fin de l’année 1995, par la firme Sun (qui à aussi développé Java), il prit alors son nom de JavaScript. Microsoft l’a aussi adopté à partir de la version 3 du navigateur Internet Explorer. JavaScript est un langage de Scripts qui, incorporé aux balises HTML, permet d’améliorer la présentation et l’interactivité des pages Web. Ces scripts sont gérés et exécutés par le navigateur lui-même sans faire appel aux ressources du serveur. Les instructions seront traitées en direct et surtout sans retard par le navigateur. Limites Solutions Historique

II- Le formalisme de base du JavaScript : Balises HTML Activité 2 : <hTML> <HEAD> <TITLE> Mon premier code Javascript </TITLE> </HEAD> <BODY> .....Texte en HTML... <SCRIPTlanguage="Javascript"> alert("Bienvenue"); //alert permet d'afficher une fenêtre message. </SCRIPT> ....un autre texte en HTML.... </BODY> </HTML> Début de Script Script Fin du Script Balises HTML

III- Les Objets JavaScript : Activité : Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose la hiérarchie d'objets est définie comme ceci: Le nid sur l'arbre est donc désigné comme suit: jardin.arbre.branche.nid Contrairement au nid situé sur la balançoire: Jardin.balançoire.nid Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert, il suffirait de taper une commande du genre: jardin.arbre.branche.nid.couleur= vert; C'est donc ainsi que l'on représente les objets en Javascript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur (Window). Suivant :

III- Les Objets JavaScript : • III-1. Les objets JavaScript et leurs hiérarchies : Deux types d’objets : • Les objets d’interface : Exemple : window, document, bouton, radio, chekbox …etc. • Les objets des propriétés et des fonctions prédéfinies : ils permettent de fournir des ressources pour la programmation. Exemple : L’objet String, math, date… • III-1-a. La hiérarchie des objets d’interface : On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu! • L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window) • Dans la fenêtre s'affiche une page, c'est l'objet document • Cette page peut contenir plusieurs objets, comme des formulaires, des images, ... Précédent Suivant :

III- Les Objets JavaScript : objet window objet document Deux objets Radio • III-1-b. Les propriétés des objets : Pour accéder aux propriétés des objets on utilise la syntaxe : Nom_De_L’Objet.Nom_de_la_propriété Exemple : Pour tester la propriété de sélection d’un bouton radio If (window.document.form.radio[0].Checked = = True ) { ….} Form et Radio sont les nom du formulaire et du radio l’objet window est facultatif : If (document.form.radio[0].Checked ) Radio[0] pour désigner le 1er radio (Masculin) objet Texte Deux objets Bouton Précédent Suivant :

III- Les Objets JavaScript : • III-1-c. Les méthodes objets : A chaque objet JavaScript correspond des méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. Exemple : la méthode write() de l’objet document. Activité 3 : Page 82  Constatations III-2. Les différents emplacements du code JavaScript: Activité 4 : Page 83 Il y a plusieurs façon d'inclure du JavaScript dans une page HTML: • Grâce à la balise <SCRIPT> • En mettant le code dans un fichier • Grâce aux événements Précédent

IV- Variables : Activité 5:  Les variables peuvent se déclarer de deux façons : • Soit de façon explicite : exemple : Var n =1; var nom="Yasmine "; • Soit de façon implicite : exemple : n =1; nom="Yasmine "; • un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_" • un nom de variables peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés!) • Les noms de variables ne peuvent pas être réservés): • Les noms de variables sont sensibles à la casse (le Javascript fait la différence entre un nom en majuscule et un nom en minuscules),  La visibilité des variables : NB : Variable implicite  Variable globale Variable explicite  variable globale sauf si elle est déclaré dans une fonction (donc c’est une variable locale) Suivant :

IV- Variables :  Type des variables : Activité : En fait le Javascript n'autorise la manipulation que de 4 types de données: • des nombres: entiers ou à virgules • des chaînes de caractères (string): une suite de caractères • des booléens: des variables à deux états permettant de vérifier une condition • true: si le résultat est vrai • false: lors d'un résultat faux • des variables de type null: un mot caractéristique pour indiquer qu'il n'y a pas de données Précédent

V- Les opérateurs prédéfinis :  Les opérateurs de calcul : (+,-,*, /,%,=) %  Opérateur Modulo x=18%4 donne 2 =  Opérateur d’affectation y =2.3;  Les opérateurs de comparaison : (==,<,<=,>,>=,!=)  if (x==3) {…….}  if (x!=3) {…….}  Les opérateurs logiques : (&&, ||, !)  ET , OU et NON logique.  Les opérateurs associatifs : (+= , -= , *= , /= )  (x+=y sig x=x+y) (x-=2 sig x=x-2) (x*=3 sig x=x*3) (x/=a sig x=x/a)  Les opérateurs d’incrémentation : (++ , -- )  ( x++ sig x=x+1 y-- sig y=y-1)

VI- Les entrées/sorties en JavaScript : Activité 6 : • L’entrée (Lecture) : soit avec la méthode prompt de l’objet window, soit à l’aide des objets graphiques du formulaire HTML. nom_var=prompt("texte de la boite d’invite", "Valeur par défaut");  La sortie : soit avec la méthode write de l’objet document, ou la méthode alert de l’objet window, soit à l’aide des objets graphiques du formulaire HTML. document.write("message"+nom_var); alert("message"+nom_var);

VII- Les structures de contrôle :

VIII- Les Fonctions : Activité 12 : On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal.  Déclaration d’une fonction : function Nom_De_La_Fonction(argument1, argument2, ...) { liste d'instructions ; [return nomvariable] }  Veillez toujours à ce qu'une fonction soit déclarée avant d'être appelée, sachant que le navigateur traite la page de haut en bas

IX- Gestions des événements en JavaScript : Activité 13: Les évènements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité Syntaxe : <nombalise OnEvénement="fonction()"> OnEvénement représente un attribut, associé à une balise HTML (nombalise), destiné à la gestion des événements. Exemples :

X- Les Formulaires : Rappel :  Les attributs d’un formulaire : Action : permet d’indiquer l’action à entreprendre lorsque le bouton de validation est activé. Name : Le nom attribué au formulaire. Method : Permet de spécifier la méthode d’envoi des données au serveur (POST ou GET)  Contenu du Formulaire : (Trois types d’éléments) textarea : Pour définir une zone de texte select : pour sélectionner une information dans une liste input : pour tous les autres types d’entrées (Champ texte, champ texte mot de passe, bouton simple, bouton radio, le bouton d’envoi, bouton de réinitialisation, la case à cochet

Recommandations pédagogiques pour l’année scolaire 2008-2009 : • Langage JavaScript : (12h) • Étude des entrées, des sorties, de l’affectation et des opérations arithmétiques, logiques et relationnels (2h). • Étude des constantes, des variables et des structures de contrôle (4h) • Contrôle sur les formulaires et leurs données (4h) • Étude des objets chaîne et math (2h). • Recommandation : • Les tableaux ne seront pas enseignés. • Les méthodes et les propriétés de l’objet chaîne à enseigner sont : length, charAt, indexOf, substr. • Les méthodes de l’objet math à enseigner sont : abs, round, random, sqrt, eval. • Les évèvements sur les formulaires sont : OnClick, OnFocus, OnChange.

Les méthodes de l’objet Math et chaîne :

Objectif: Programmer et intégrer des scripts dans une page Web