I- Introduction au langage II- Le formalisme de base III- Les Objets JavaScript IV- Les Variables V-...

I- Introduction au langageI- Introduction au langage

II- Le formalisme de baseII- Le formalisme de base

III- Les Objets JavaScriptIII- Les Objets JavaScript

IV- Les VariablesIV- Les Variables

V- Opérateurs prédéfinisV- Opérateurs prédéfinis

VI- Les Entrées/SortiesVI- Les Entrées/Sorties

VII- Struc. de contrôleVII- Struc. de contrôle

VIII- Les FonctionsVIII- Les Fonctions

IX-Gestion des événementsIX-Gestion des événements

X- Les FormulairesX- Les Formulaires

RecommandationRecommandation

Objectif: Programmer et intégrer

des scripts dans une page Web

Objectif: Programmer et intégrer

des scripts dans une page Web

Module : JavasciprtModule : Javasciprt












I- Introduction au langage JavaScript :1. Les limites du langage HTML2. 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érarchies2. 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 :1. Les limites du langage HTML2. 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érarchies2. 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:

PLAN PLAN












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).

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).

I- Introduction au langage JavaScript :


LimitesLimites Solutions

Solutions

Historique

Historique












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.

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.




Solutions

Historique

Historique












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.

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.




Solutions

Historique

Historique












Activité 2 :<hTML><HEAD><TITLE> Mon premier code Javascript </TITLE></HEAD><BODY>

.....Texte en HTML...

<SCRIPT language="Javascript"> alert("Bienvenue");//alert permet d'afficher une fenêtre message.</SCRIPT>

....un autre texte en HTML....

</BODY></HTML>

Activité 2 :<hTML><HEAD><TITLE> Mon premier code Javascript </TITLE></HEAD><BODY>

.....Texte en HTML...

<SCRIPT language="Javascript"> alert("Bienvenue");//alert permet d'afficher une fenêtre message.</SCRIPT>

....un autre texte en HTML....

</BODY></HTML>

II- Le formalisme de base du JavaScript :

II- Le formalisme de base du JavaScript :

Début de Script

Balises HTML

Script

Fin du Script

Balises HTML












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).

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).

III- Les Objets JavaScript :III- Les Objets JavaScript :

Suivant :













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…o 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, ...

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…o 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, ...

Suivant :Précédent













Deux objets Radio

objet Texte

Deux objets Bouton

o 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)

o 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)

Suivant :Précédent

objet window

objet document













o 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: oGrâce à la balise <SCRIPT> oEn mettant le code dans un fichier oGrâce aux événements

o 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: oGrâce à la balise <SCRIPT> oEn mettant le code dans un fichier oGrâce aux événements

Précédent












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)

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)

IV- Variables :IV- Variables :

Suivant :












IV- Variables :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

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












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)

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)

V- Les opérateurs prédéfinis :V- Les opérateurs prédéfinis :












VI- Les entrées/sorties en JavaScript :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);

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-1- Structures Conditionnelles

L’instruction if :

If (condition)

{expression vrai;}

Else

{expression faux;} Activités 7:

VII-2- Structures itératives :

La boucle For :

For (init;cond;progression)

{

Instructions;

} Activités 9:

Les struc. de branchement : Switch (expression){ Case v1 : //instruction à exécuter si l’expression vaut v1 break; Case v2 : //instruction à exécuter si l’expression vaut v2 break; …. default ://inst. à exécuter dernier recours } Activités 8:

La boucle do …While :

Do

{

Instructions;

} While (Condition);

La boucle While :

While (Condition)

{

Instructions;

}

Activités 11:

VII- Les structures de contrôle :VII- Les structures de contrôle :












VIII- Les Fonctions :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

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 :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 :

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 :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

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 :

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).

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.

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 :Les méthodes de l’objet Math et chaîne :

I- Introduction au langage II- Le formalisme de base III- Les Objets JavaScript IV- Les Variables V-...

Documents

Transcript of I- Introduction au langage II- Le formalisme de base III- Les Objets JavaScript IV- Les Variables V-...