Cours pour Apprendre JavaScript

> a=3

> a

> b=a+a

> b

> ("b = "+b)

> alert("b = ", b)

> document.write("

bonjour

")

> document.write("

resultat = "+b+"

")

> document.querySelector("h1").style.backgroundColor="aqua";

 etc.

v1 = 5; v2 = 10; resultat = v1+v2;

alert(v1 + ' + ' + v2 + ' = ' + resultat);

texte1 = 'Le double du résultat est : ' + resultat*2; alert(texte1);

// on n'est pas obligé de mettre var var v3, v4, resultat2, texte2;

v3 = prompt('Entrez le premier chiffre :'); v4 = prompt('Entrez le second chiffre :'); var resultat2 = parseInt(v3) + parseInt(v4); alert(v3 + ' + ' + v4 + ' = ' + resultat2);

texte2 = 'Le double du résultat est : ' + resultat2*2;

function fonction_v1(){

 let v1 = 5;  let v2 = 10;  let resultat = v1+v2;

 alert(v1 + ' + ' + v2 + ' = ' + resultat);  let texte = 'Le double du résultat est : ' + resultat*2;  alert(texte);

}

fonction_v1(); // appel à la fonction

function fonction_v2(v1, v2){  let resultat = v1+v2;

 alert(v1 + ' + ' + v2 + ' = ' + resultat);  texte = 'Le double du résultat est : ' + resultat*2; // sans let  alert(texte);

} 

v1 = prompt('Entrez le premier chiffre :'); v2 = prompt('Entrez le second chiffre :');

fonction_v2(parseInt(v2), parseInt(v2)); // appel à la fonction (texte) // affichage de la variable globale de f_v2

document.write('

Partie JavaScript : document.write écrit à la fin de la page

');

var prenom = prompt('Entrez votre prénom :'); var age = prompt('Entrez votre age :');

age = parseInt(age);

if(age>25){

 document.write('Désolé '+prenom+'
');  document.write('Vous n\'avez pas droit à la carte Jeune');

} else{

 document.write('Bonjour '+prenom+'
');  document.write('Vous pouvez bénéficier de la carte Jeune'); }

Début de la page

Zone de démonstration

     Cliquez moi 1!!! 

     Cliquez moi 2 !!! 

Fin de la page

Début de la page

Premier paragraphe de test : cliquez moi pour changer la couleur de fond

Deuxième paragraphe de test : passez sur moi pour changer la couleur de fond

onclick="document.getElementById('p3').style.backgroundColor='yel low';"> 

  Troisième paragraphe de test : cliquez moi pour changer la couleur de fond

Fin de la page

➢  JavaScript              

•  Dans le HTML, dans le premier

est repris en JavaScript.

•  Dans le JavaScritpt : on récupère la balise p1.

•  Sur cette balise on met dans l’attribut « onclick » une fonction qui définit l’action à réaliser.

•  L’action à réaliser consiste à modifier le style.backgroundColor de la balise.

•  Notez que le nom reprend celui du CSS : background-color, mais en « Camel Case » (pas de tiret, majuscule sur le deuxième mot).

•  On fait la même chose sur la balise p2, mais cette fois sur les événements « onmouseover » et « onmouseout »

•  Dans le code HTML, sur un paragraphe p3, on fait directement ce qu’on a fait sur le paragraphe p1.

10 – console– A tester

➢  HTML :

➢  JavaScript :

permet d’écrire dans la console de log. C’est utile pour déboguer son programme.

11 – Paramètres en sortie : fonction d’inversion – A tester

Les paramètres de type number, string, boolean sont toujours en entrée, jamais en sortie. Ils sont passés par valeur.

Les paramètres de type object toujours en entrée et en  sortie. Ils sont passés par référence.

➢  HTML :

➢  JavaScript :

JS - 2 : BASES DU CODE

Bases du code - 1

Ré-introduction

•     Pourquoi une réintroduction ? Parce que JavaScript :le langage de programmation le plusincompris au monde

•     Souvent raillé comme étant un simple jouet mais langage très puissant. 

•     Nombreuses applications JavaScript de premier plan :

•     Une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web.

•     Créé en 1995 par Brendan Eich, un ingénieur de Netscape.

•     Rapidement soumis à Ecma International organisation de normalisation européenne =>première édition du standarden 1997 (ES1 = ES1997).

•     ES6=ES2015 : sixième édition qui apporte des nouveautés majeures, publié en juin 2015.

•     Conçu pour s'exécuter comme un langage de script dans un environnement hôte : c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur.

•     L'environnement hôte le plus commun est un navigateur, mais il en existe bien d’autres.

•     D’autres interpréteurs JS existent: dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, des environnements côté serveur tels que les bases de données NoSQL telles queApache CouchDB, les ordinateurs embarqués ou encore des environnements de bureaux commeGNOME(interface graphique très populaire des systèmes d'exploitation GNU/Linux).

•     Le développement d’application s’est développé avec JS. On pense à React ou Angular. Mais aussi au développemnt mobile avec Cordovaqui permet la programmation hybride en HTMLCSS-JS (toutefois, composant UIWebView  interdit sur iOSen septembre 2019).

Principes

•     JavaScript est un langage dynamique multi-paradigmes : procédural, objet, événementiel. Cf :

•     Il dispose de différents types, opérateurs, objets natifs et méthodes. 

•     Sa syntaxe s'inspire des langages Java et C.

•     JavaScript n’a pas de classes. La fonctionnalité des classes est reprise par les prototypes d'objet et le « sucre syntaxique pour les Classes » apparu avec ES6/ES2015. 

•     Spécificité du JavaScript : les fonctions sont des objets. On peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.

Référence complète

Les 3 + 1 types

3 types simples :number, string, boolean

Le type d'une valeur détermine son rôle et les opérations qui lui sont applicables. 

Les principaux types de bases du JS sont : nombre, chaîne de caractères, booléen

Type : entier ou réel. Les réels s’écrivent avec un « . »

Type : chaîne de caractère : entre guillemets ou apostrophes Type boolean: true et false, en minuscules

1 type complexe : object

JS permet de définir des tableaux et des objets (= structure) Tous les types complexes sont des « object ».

➢ Les tableaux

•     var tab = ["chien", "chat", "poule"];

•     a.length; // 3

➢ Les objets

•        var obj = {};

opérateur typeof

typeof de number, de string, de booleantypeof 1 ; typeof(1) // number typeof 1.1 ; typeof(1.1) // number a=5 ; typeof a ; typeof (a) // number typeof ‘hello’ ; // string typeof true ; // boolean typeof (1==1) ; // boolean

typeof d’ « object »les structures, les tableaux et les objets sont de type « object »

➢  tableau

typeof [1, 2] // object // tableau de 2 entiers tab=[1, 2] ; typeof tab // object // tableau de 2 entiers typeof tab[0]  // number

➢  objet ( = structure) typeof {nom :'toto', age :15} // object // structure à 2 attributs personne= {nom :'toto', age :15} ; typeof personne // object // structure à 2 attributs typeof   // string

Opérations de base

Principe

Chaque type permet d’accéder à des opérateurs et à des méthodes.

Exemple

4*3 : affiche le résultat la division par 0 renvoie « Infinity »

« bonjour » ou ‘bonjour’ : affiche « bonjour »

« bonjour \n tout le monde » : le \n est un passage à la ligne

« bon »+  «jour » : affiche « bonjour »

« bonjour »[0] : vaut « b »

« bonjour »[3] : vaut « j »

« bonjour ».length : vaut 7

« bonjour ».toUpperCase : vaut « BONJOUR »

Type NumbertoFixed(x)      Formats a number with x numbers of digits after the decimal point toString()           Converts a number to a string a.toFixed(2) etc.

Type String substr()              Extracts the characters from a string, beginning at a specified start position, and through the specified number of character concat()     Joins two or more strings, and returns a new joined strings etc.

Type Boolean toString()       Converts a boolean value to a string, and returns the result

Affichage :

(3) (a) : affiche a  (a, b)  (st1, st2) (st1+st2) : concaténation a=5 ; b=3 ; (a + ‘ x ‘ +b + ‘ = ‘ + a*b) ; etc.

Commentaires

//

/* */

Variable

Présentation

Nom, valeur, type, adresse, signification

Le nom de la variable est constitué de maj, min, chiffre, $, _ (underscore) Le type est défini à l’usage

Déclarer une variable

On n’est pas obligé de déclarer les variables. Elles le sont automatiquement quand on fait une affectation.

On peut initialiser la variable en même temps qu’on la déclare.

Variable globale : var a=3;

L'instruction var permet de déclarer une variable qui sera visible partout dans le code à partir de sa déclaration (variable globale, dans le tas).

Variable locale : let a=3;

L'instruction let permet de déclarer une variable qui ne sera visible que dans le bloc où elle est déclarée (variable locale, dans la pile).

Constante

const a = 3

Une constante ne pourra pas être modifiée.

Mais on peut déclarer un let a=5 dans un bloc qui cachera donc la constante.

On pourra modifier le contenu d’un tableau ou d’un objet déclaré en constante.

Utilisation d’une variable

Affectation a=5 ;

Incrémentationa=a+1 ; a+=1 ; ++a ; a++ ; // post incrémentation : si on affiche en même temps, c’est la valeur de a avant l’incrémentation qui s’affiche. a=10 ; (a++) ; // affiche 10 (a) ; // affiche 11

Cas d’erreursi on utilise une variable déclarée mais sans valeur : undefined si on utilise une variable non déclarée : reference error, can’t find variable

Conversions de types

On peut changer le type d’une variable en lui donnant une nouvelle valeur.

a=5 ; …  a=«texte » 

Expression et évaluation d’une expression

Principes d’évaluation a=expression ;

L’expression est évaluée : elle produit une valeur qui a un certain type. Ici ce quelque chose est affectée à « a ».

(expression) ;

L’expression la plus simple, c’est une valeur ou une simple variable.

Les expressions peuvent être complexes en intégrant des opérateurs, des parenthèses, des fonctions.

Evaluation en fonction du contexte

Les expressions sont évaluées en fonction du type. 

Le type est donné en fonction du contexte :

a=3;

b=a+2 // b vaut 5 : a est un entier

c="resultat="+a+2 // c vaut : "resultat=32" : a est une string

Ici c vaut :  "resultat = 32"

En effet, le + est un + de concaténation : a est alors considéré comme une string

Tests

Type et expression booléenne

&&, ||, true, false ==, !=,  <, <=, >, >= érents_tests_d_égalité

===, !==

L’égalité faible == fait une conversion de type. L’égalité forte === n’en fait pas.

« 17 » == 17 est true

« 17 » === 17 est false

switch (variable) { case valeur :  instructions ; break ;

default :

instructions ;

Boucle

while

while(condition){     instructions ;

}

for

for (i = 1; i <= 5; i++) {     (i);

}

Fonction

Déclaration d’une fonction

Une fonction est un regroupement d'instructions qui réalisent une tâche donnée.

Une fonction rend le code plus modulaire.

Une fonction est constituée d’une en-tête et d’un corps.

Une fois écrite, une fonction peut être appelée depuis n'importe quel emplacement du programme.

Une fonction peut recevoir des informations sous la forme de paramètres.

Une fonction peut renvoyer ou non une valeur de retour.

Variables dans les fonctions

Toutes les variables déclarées avec un « let » (ou un « var ») dans les fonctions sont locales aux fonctions : elles ne sont pas utilisables en dehors des fonctions.

Les variables non déclarées avec un et ou un var sont globales. Elles seront utilisables en dehors de la fonction : c’est à éviter.

Variables globales

Les variables globales (var ou rien) déclarées en dehors des fonctions sont utilisables dans les fonctions.

Les variables locales (let) déclarées en dehors des fonctions sont dans les fonctions si l’appel de la fonction se fait dans le bloc de déclaration de la variable.

Si une fonction déclare une variable locale qui existait déjà comme variable globale, la variable globale n’est plus visible dans la fonction. Elle ne sera pas affectée par les modifications qu’on fera sur la variable locale.

➢ Le bon usage

N’utiliser que des variables locales dans les fonctions : il faut donc toutes les déclarer avec un let.

Eviter de déclarer les variables locales avec un var.

Eviter de déclarer des variables globales dans les fonctions autant que possible.

Eviter d’utiliser des variables globales dans les fonctions autant que possible.

Paramètres en sortie des fonctions : exemple 11

Principes

Une fonction retourne une valeur de n’importe quel type : number, string, boolean ou object (tableau, structure, objet et composés)

Les paramètres de type number, string, boolean sont toujours en entrée, jamais en sortie. Ils sont passés par valeur.

Les paramètres de type object toujours en entrée et en  sortie. Ils sont passés par référence.

exemple

La fonction ci-dessous à 2 entiers en sortie.

C’est impossible. Donc l’inversion n’est pas effective après l’appel de la fonction.

function inverser(a, b){

 var tmp=a;  a=b;  b=tmp; } a=5;b=10; inverser(a,b); // ne fait rien !

(a) // vaut 5 (b) // vaut 10

La fonction ci-dessous à une structure à 2 entier en paramètre : c’est une structure, donc un objet donc il est en entrée-sortie.

function inverserCouple(couple){

 tmp=couple.a;  couple.a=couple.b;  couple.b=tmp;

} couple={a:5,b:10}; inverserCouple(couple); (couple.a) // vaut 10 (couple.b) // vaut 5

Tester l’exemple : 11-parametres en sortie

Fonctions prédéfinies

JavaScript output

Toutes les possibilités d’affichage dans la page sont présentées :

➢  Affichage de log ()

➢  Affichage d’une fenêtre avec texte et champs de saisie prompt()

➢  Affichage d’une fenêtre d’alerte, avec ou sans confirmation alert()  ou window.alert() sont équivalent : pas de confirmation confirm() : permet d’annuler

➢  Affichage dans la page HTML : 

(5 + 6); 

➢  Affichage dans une page HTML vierge sur clic d’un bouton

Try it

A noter qu’entre les guillemets du onclick on peut mettre plusieurs instructions séparées par des ;

button onclick="resultat=5+6 ; document.write(resultat)">Try it

➢  Affichage dans un élément HTML  d’un « id » css donné :  document.getElementById("demo").innerHTML = 5 + 6;

fonctions mathématiques

➢  Exemples

((4.5, 5)); // Affiche 4.5

(Math.random()); // Affiche un nombre aléatoire entre 0 et 1

➢  Toutes les méthodes

manipulation de chaînes : String

➢ Présentation de toutes les méthodes : 

•     

➢ Exemples

mot= « test » ; mot.length ; mot.toLowerCase() ; mot.toUpperCase() ; mot.charAt(0) ; mot[0] ; mot.indexOf(«A ») etc.

manipulation de dates

➢  Présentation de toutes les méthodes : 

• d = new Date();

d.getDate() : retourne le jour du mois

d.getDay() : retourne le jour de la semaine : 0 pour dimanche, 1 pour lundi getHour setDate, setHours,  etc.

➢  Exemples

Exercices – Série 1

Écrire une page qui permet de saisir la largeur et la longueur d’un rectangle puis qui affiche son périmètre et sa surface et qui qui permette de saisir le rayon d’un cercle et qui affiche le périmètre du cercle. Le résultat doit avoir 2 chiffres après la virgule.

On fournit 2 boutons à l’utilisateur. Il peut saisir les valeurs. Le résultat s’affiche en dernière ligne de la page, dans une fenêtre d’alerte et dans la console de log.

Vous devez vous appuyer sur les exemples.

Sur le même principe que l’exercice précédent, écrire une fonction qui affiche le jour de la semaine.

Regardez ici le fonctionnement de la fonction getDay : 

Le retour d’un getDay sur une date vaut 0 pour dimanche, 1 pour lundi, etc.

Pour cela, on se dotera d’une fonction qui renvoie le jour de la semaine à partir du chiffre correspondant au résultat du getDay().

3 – Table de multiplication

1. Ecrire une page HTML avec du JS qui permet d’obtenir le résultat suivant en cliquant sur le bouton : 

On pourra saisir la valeur 7 ou bien n’importe quelle autre valeur.

Principe de résolution : 

On va construire le code HTML à produire dans une variable appelée : innerHTML

Quand elle est entièrement construite :

• etc.

on écrira une instruction du type de :

balise.innerHTML=innerHTML;

Objectif

Avec l’interface ci-dessous, on peut compter les clics et modifier l’affichage chaque fois qu’on clique sur « cliquez-moi  pour compter ».

On peut remettre le compteur à zéro.

JS - 3 : TABLEAUX ET OBJETS

Installation des fichiers de tests

Dans le cours : 

Les exemples sont présentés dans un chapitre en vert.

Les exercices à faire sont présentés dans un chapitre en jaune.

Les exemples du cours sont dans un fichier zip fournis avec l’article du cours.

•           Chargez ces fichiers et mettez-les : 

Soit dans un dossier « Partie_1 » que vous aurez mis dans un dossier JavaScript.

Ce dossier JavaScript peut être mis soit où vous voulez sur votre machine, soit dans le répertoire web « www » du serveur WAMP.

Bases du code – 2 – tableaux et objets (ou structures) 

Présentation

•  Les tableaux permettent de regrouper des données

•  On peut mettre tout ce qu’on veut dans un tableau : number, string, booléen, objet

•  On peut mélanger toutes sortes de types de données dans un même tableau.

Déclaration

•  var tab = []; // Création d'un tableau vide

•  var tab = [5, 10, 12]; // Création d'un tableau plein

•  tab=new Array()

•  tab=new Array(5, 10, 12) ; // Création d'un tableau plein

•  tab=new Array(10) ; // Création d'un tableau de 10 cases vides

Accès aux éléments

•  Comme les caractères d'une chaîne, les éléments d'un tableau sont identifiés par un indice débutant à zéro : tab[0], tab[1]

•  tab[4] =10 ;

•  On ne peut pas écrire tab[0]=5 si le tableau n’a pas préalablement été déclaré.

•  On peut mettre des indices négatifs dans le tableau.

length

• tab.length : retourne la position + 1 du dernier élément : le nombre d’éléments. Les éléments d’indice négatifs ne sont pas pris en compte.

Tous les éléments du tableau

•  tab : liste toutes les valeurs, sauf les éléments d’indice négatif.

•  for(i=0 ; i< tab.length ; i++) (tab[i]) ;

•  for( key in tab) (tab[key]) ;

Trous dans le tableau !

•  On peut mettre l’index qu’on veut : on n’est pas obligé de tout remplir. Par exemple si le contenu de tab s’affiche ainsi : [5, 3, 5: 9, 8 :2], c’est que tab[0]=5, tab[1]=3, tab[5]=9, tab[8]=2.

•  var tab=[5, 3] ; tab[5]=9 ; tab[8]=2 ; produit le tableau précédent.

•  Attention : tab.length, ne donne pas le nombre d’éléments. Dans le tableau précédent, c’est 9.

Fonctions de manipulation du tableau

•  tab.includes(5) // true

•  tab.indexOf(5) // 0 : la position de 5 dans le tableau

•  delete tab[0];  // supprime l’élément 0 qui est alors undefined.

•  (valeur) : ajoute un élément après celui de l’index le plus élevé.

•  elt = () : sort du tableau l’élément ayant l’index le plus élevé. Sa valeur passe dans elt.

•  () : attention, c’est un tri alphabétique : 10 est avant 2 ! 

Type

•  typeof tab : retourne « object » : un tableau est un objet (au sens POO)

•  Array.isArray(tab) : retourne « true » si c’est un tableau

•  tab instanceof(Array) : retourne « true » si c’est un tableau

Application

Testez l’exemple 1

2 Structure ou Objet en JS : exemple 2

Présentation

•  Une structure, c’est une variable qui contient des champs (ou propriétés ou attributs) qui peuvent contenir toute sorte de valeurs.

•  Les structures sont utiles pour décrire des objets avec leurs caractéristiques.

•  On accède au champs avec l’opérateur « . »

Tous les éléments du tableau

•  eleve : liste tous les champs de la structure, avec les valeurs

•  for( key in eleve) (eleve[key]) ;

Méthodes applicables

•  typeof eleve retourne object

•  eleve.hasOwnProperty("nom") retourne true : pour savoir si une propriété appartient à une structure.

Application

Testez l’exemple 2

Affichez la structure dans la page HTML

3 Boucles spéciales : exemples 1 et 2

méthode forEach

La méthode forEach() permet d'exécuter une fonction sur chaque élément du tableau.

Exemple : 

On peut aussi coder la fonction dans le foreach : on a alors une fonction anonyme (qui n’a pas de nom).

var a = ['a', 'b', 'c'];

a.forEach(function(element) {   (element);

});

boucle for / in

La boucle for / in permet de récupérer chaque élément d’une structure ou d’un tableau dans une variable.

Exemple avec une structure :  

4 Tableau de structures : exemple 3

Présentation

On peut mettre des structures dans des tableaux : 

Accès aux donnéestabEleves[1].nom vaut « tata ».

Format JSON : JavaScript Object Notation

On peut aussi déclarer directement un tableau de structures : 

var tabEleves = [

  {      id:1,     nom: "toto",     note: 15

  },   {      id:2,     nom: "tata",     note: 16

  } ]

Ou bien, compacté :

var tabEleves = [

  { "id":1, "nom": "toto", "note": 15 },

  { "id":2, "nom": "tata", "note": 16 } ]

Le format [ ] et {} avec les attributs entre guillemets, c’est du JSON.

Lecture d’un format JSON dans Firefox

Le fichier contient : 

[{"id":1 ,"nom":"toto", "note": 15}, {"id":2, "nom":"tata", "note": 16}]

Quand on ouvre un fichier directement dans Firefox, on obtient :

Exemple

exemple 3 – Tableau de structures Affichez la structure dans la page HTML

Ouvrez le fichier JSON dans Firefox

5 - Structure avec fonctions : exemple 4

Présentation

On peut déclarer une ou plusieurs fonctions en même temps qu’une structure.

C’est une première approche de la programmation objet.

Exemple

Usages

Exemple

exemple 4 – Tableau de structures Affichez la structure dans la page HTML

Exercices – Série 2

Définir en JavaScript un tableau contenant des notes d'étudiants comprises entre 0 et 20. 

•  Implémenter en JavaScript les fonctions qui permettent de :

✓  afficher un tel tableau de façon standard HTML

✓  savoir combien d'étudiants ont eu plus de 10

✓  calculer la moyenne des notes

✓  connaître la note maximale

✓  rechercher une note particulière

✓  trier le tableau

•  Remarque de méthode : 

✓  Vous pouvez vous aider de : . Pour par exemple : indexOf ou la fonction de tri.

✓  dans les fonctions, on ne fera aucun affichage.

✓  On utilise document.write pour afficher dans la page HTML

✓  On utilise un fichier HTML et un fichier JavaScript. On peut ajouter un peu de CSS pour le tableau.

✓  Dans le fichier JavaScript, à la fin, on a d’abord les fonctions, puis la création du tableau, puis les appels aux document.write. Le fichier JS est comme un contrôleur qui include le modèle (les fonctions), puis « met la colle du contrôleur » (définit le tableau), puis include la vue (les document.write).

➢ Objectifs à atteindre en terme de présentation :

2 - Tableau d’élèves avec des notes – Tri d’une structure

Dupliquer le travail de l’exercice précédent.

Dans l’exercice précédent, ajouter un prénom pour chaque note. On utilise forcément une fonction.

•  Mettez à jour toutes les fonctions.

•  Ajoutez une fonction de tri par nom et une fonction de tri par note (googler trier un tableau json). Afficher le tableau trié par nom puis trié par note.

➢ Objectifs à atteindre en terme de présentation :

 etc.

3 - Tableau d’élèves avec des notes – creerEleve

Dupliquer le travail de l’exercice précédent

•  Créer une fonction qui permet de créer un élève : creerEleve(nom, note, photo)

•  Remplir désormais le tableau complet en utilisant cette fonction.

•  Créer une fonction qui permet d’afficher un élève de telle sorte qu’elle puisse être utilisée dans la fonction qui affiche tout le tableau (afficher veut dire : retourner un texte avec le code HTML). Mettez à jour la fonction.

•  Afficher un élève au choix après les tris.

•  Le but est de gérer chaque fonctionnalité avec un bouton.

➢ Objectifs à atteindre en terme de présentation :

4 – Jeu de grammaire

Etape 1

•  Mettez votre travail dans un dossier appelé : JS_bases_exo10_1

•  Définir une variable contenant le verbe chanter.

•  Créer une variable qui contient le « nom d’agent » du verbe chanter. Le nom d’agent, c’est celui qui fait l’action. Pour chanter, il s’agit de « chanteur » : le chanteur chante. Pour créer cette variable, supprimer les deux dernières lettres de ce mot et les remplacer par les lettres eur. • Produire le texte suivant :  « chanter : le chanteur chante »

Etape 2

Dupliquer le travail de l’exercice précédent dans un dossier appelé : JS_bases_exo10_2

•  Généraliser le code précédent en écrivant une fonction traitant n'importe quel verbe du premier groupe.

•  Créer un tableau avec des verbes du premier groupe.

•  Appliquer la fonction à tous les verbes du tableau.

Etape 3

Dupliquer le travail de l’exercice précédent dans un dossier appelé : JS_bases_exo10_3

•  Mettez des verbes du premier et du deuxième groupe dans le tableau (deuxième groupe : verbe finissant en « ir » à l’infinitif et en « issons » à la première personne du pluriel au présent.

•  Définir un tableau à six cases contenant les pronoms personnels.

•  Définir un tableau contenant les marques de conjugaison au présent de l'indicatif pour les verbes du premier groupe, et un autre pour les terminaisons des verbes du deuxième groupe.

•  Écrire une fonction qui décide si le verbe appartient au premier ou au deuxième groupe.

•  Mettre un verbe du tableau dans une variable appelée : « verbe »

•  Afficher les formes conjuguées de « verbe » au présent de l'indicatif, chaque forme étant précédée du ou des pronom(s) personnel(s) adéquat(s).

•  Produire une fonction qui affichage les formes conjuguées de n’importe quel verbe au présent de l'indicatif, chaque forme étant précédée du ou des pronom(s) personnel(s) adéquat(s).

✓  On affichera au début : le nom du verbe et son groupe.

✓  Si ce n’est pas un verbe du premier ou du deuxième groupe, on n’affiche pas la conjugaison.

✓  Si c’est un verbe du premier groupe, on affiche, par exemple : le mangeur mange.

✓  Pour les verbes du premier et du deuxième groupe, on affiche la conjugaison.

5 –

Pipotron :

Poétron : ?pos=4&

Dupliquer le travail du jeu de grammaire dans un dossier appelé : JS_bases_exo10

•  Créer un tableau de noms avec un article. Par exemple : le chat, les feuilles, l’arbre, un animal, Bertrand, etc.

•  Avec le tableau de verbe, fabriquez une phrase aléatoirement en choisissant un nom pour le sujet, un verbe et un nom pour le complément.

•  Attention à la conjugaison !

JS - 4 : POO AVANT ES6/2015

Installation des fichiers de tests

Dans le cours : 

Les exemples sont présentés dans un chapitre en vert.

Les exercices à faire sont présentés dans un chapitre en jaune.

Les exemples du cours sont dans un fichier zip fournis avec l’article du cours.

•           Chargez ces fichiers et mettez-les : 

Soit dans un dossier « Partie_1 » que vous aurez mis dans un dossier JavaScript.

Ce dossier JavaScript peut être mis soit où vous voulez sur votre machine, soit dans le répertoire web « www » du serveur WAMP.

Programmation objet

Principes

JavaScript permet de faire de la programmation objet.

Il y a plusieurs façon de faire de la POO en JavaScript classique. à_JavaScript_orienté_objet

Bases : structure-objet avec méthode – exemple 1

Structure avec méthode

Une structure ressemble à : 

var eleve = {   id:1,  nom: "toto",  note: 15

};

Pour un attribut, à la place d’une valeur on peut mettre une méthode : 

A partir de là, la structure ressemble à une classe de la programmation objet.

On va se doter d’une variable de type structure qui servira de prototype pour créer d’autres objets grâce à une fonction spéciale de JS.

Utilisation

Limitation

Avec ette technique, on doit redéfinir les attributs à chaque fois qu’on crée une nouvelle variable de structure identique

POO - Version 1

                •     Défaut : chaque objet porte les fonctions. Elles ne sont pas partagées.

POO - Version 2 : avec attribut prototype

•     à_JavaScript_orienté_ objet

•     Le prototype permet d’ajouter la fonction et qu’elle soit partagée.

ajout d’une fonction avec prototype en cours de code

ajout d’une fonction avec prototype sur des classes natives

•      On pourrait aussi redéfinir la méthode « toString » qui est déjà présente sur les chaines de caractères.

Array.prototype – méthodes filter, every, some

•     Array        utilise la         technique         du        prototype : ototype

•     Associé au prototype on trouve de nombreuses méthodes qu’on peut redéfinir, comme par exemple filter(), every() et some()

•     filter() : ter

•     every() : ery

•     some()      : me

                •      

POO – Version 3 : avec un objet prototype et Object.create() – exemple 2

Création de Classe : notion de prototype – technique 1

➢  Classe : création d’une variable de type structure qui sert de prototype

Le prototype est l’équivalent de la classe.

Toutefois, c’est en réalité une variable de type structure : c’est donc un type «object» variable est appelée  « prototype » : elle servira de référence pour la création des objets.

A noter qu’on écrit la variable avec une majuscule : Personnage. C’est pour dire que c’est le prototype, l’équivalent de la Classe.

➢  Objet : création d’une variable à partir d’un prototype :  fonction static utilise la fonction static Object.create pour créer un nouvel objet à partir du prototype.

Ensuite, on peut donner des valeurs à chaque attribut.

var perso1 = Object.create(Personnage); = "Aurora"; perso1.sante = 150; perso1.force = 25;

var perso2 = Object.create(Personnage); = "Glacius"; perso2.sante = 130; perso2.force = 35;

Création de Classe : fonction d’initialisation – technique 2

➢ Ajout de méthodes dans le prototype

On définit une fonction d’initialisation dans la structure. Cette fonction va initialiser les attributs de la structure. 

De ce fait, il n’est plus nécessaire de les déclarer dans le prototype.

On peut aussi ajouter d’autres fonctions.

Notez le mot clé « this ».

Utilisation du new

On peut aussi créer des objets avec un new. Mais il vaut mieux éviter.

POO – Version 3 : Héritage - exemple 2

Principes

On peut simuler l’héritage avec les prototypes.

Une classe dérivée sera créée à partir d’un prototype. Ensuite, on ajoute à la variable créée des attributs et des méthodes. Elle devient un prototype pour des objets.

Application

Joueurs et Adversaires sont des Personnages. Seuls les joueurs ont de l’expérience. Les adversaires ont une race et une valeur.

Le modèle des classes est le suivant :

Bien noter que le modèle est très utile pour comprendre l’organisation des classes. Sans lui, on se perd rapidement dans le code.

➢ Code

A partir du Personnage, on crée un Joueur et on met à jour la fonction d’initialisation.

Idem pour l’adversaire.

A noter la syntaxe de la création de la fonction initJoueur

Exercice 1 : une IHM pour l’exemple 2

L’exemple 2 travaille uniquement en console.

Produisez une IHM qui permette d’afficher les personnages et d’exécuter des méthodes.

Tableau d’objets

On peut ranger les objets dans un tableau.

Exercice 2 : une IHM pour l’exemple 3

L’exemple 3 travaille uniquement en console.

Produisez une IHM qui permette d’afficher les personnages et d’exécuter des méthodes.

Exercice 3 : tableau d’élèves avec notes et photos en POO

A partir de l’exercice 3 de l’étape 2 : 03-exercice-creer-eleve-correction (tableau d’élève avec photo), faites une version en POO : 

• Coder l’étape 3 en programmation objet :

✓  On se dote d’un prototype Classe pour le tableau complet et d’un prototype Eleve pour les élèves. 

✓  On se dotera aussi d’une fonction qui permette d’ajouter un nouvel élève.