LIFAP5/CM1 : Différence entre versions
(Page créée avec « CM1 : ») |
|||
| (4 révisions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | CM1 : | + | * [[LIFAP5 | Lien vers le sommaire]] |
| + | * [[LIFAP5/CM2 | Lien vers le cours suivant ]] | ||
| + | |||
| + | == CM1 == | ||
| + | - Javascript côté client<br> | ||
| + | - Programmation concurrente = ordre d’exécution non connu à l’avance<br> | ||
| + | - Typage dynamique : | ||
| + | - type des expressions non connu à l’écriture du programme | ||
| + | - le type des valeurs est connu à l’exécution | ||
| + | Fonction : | ||
| + | let maFonction = function (arg1 , arg2 ) { | ||
| + | /* ... */ | ||
| + | return uneValeur ; | ||
| + | }; | ||
| + | Objet : <br> | ||
| + | * Construction via {} : | ||
| + | let monObjet = { a: 5 , b: " toto " }; | ||
| + | let monObjet = { "b": " toto ", "a": 5 }; | ||
| + | * Accès aux objets : | ||
| + | o.x + 3; // dans une expression | ||
| + | o.x = 5; // affectation | ||
| + | o[ champ ] + 3; // dans une expression | ||
| + | o[ champ ] = 5; // affectation | ||
| + | Methode : fonction attachée à un objet : | ||
| + | let o = { | ||
| + | /* ... */ | ||
| + | maMethode : function (y) { /* ... */ } | ||
| + | } | ||
| + | => Son utilisation : | ||
| + | o. maMethode (3) | ||
| + | this : Refère à l'objet courant : | ||
| + | let o = { | ||
| + | x: /* ... */ , | ||
| + | maMethode : function (y) { | ||
| + | return this .x + y; | ||
| + | } | ||
| + | } | ||
| + | Fonction de conversion : | ||
| + | JSON.stringify objet → texte | ||
| + | JSON.parse texte → objet | ||
| + | <nowiki>=== vs == :</nowiki> | ||
| + | == et != convertissent en nombre | ||
| + | * si les deux membres ont des types différents | ||
| + | * == n’est pas transitif | ||
| + | === et !== ne font jamais de conversion implicite | ||
| + | |||
| + | => Préférer === et !== à == et != | ||
| + | Dans une page Web : | ||
| + | * Charger du code dans une page Web | ||
| + | <script src = ’ url / de / mon / script . js ’ type = ’ text / javascript ’/ > | ||
| + | * ou bien, intégré dans le code HTML | ||
| + | <script > /* du code javascript */ </ script > | ||
| + | * Pour programmer dans une page Web | ||
| + | // pour accéder à un élé ment particulier | ||
| + | document . getElementById (" demo ") | ||
| + | // et en changer le contenu | ||
| + | . innerHTML = " Nouveau contenu " | ||
| + | forEach : Array.prototype.forEach() : | ||
| + | function logArrayElements ( element , index ) { | ||
| + | console .log (’[’ + index + ’] = ’ + element ) ; | ||
| + | } | ||
| + | // l’index 2 sera saut é car il est undefined | ||
| + | [2 , 5 , , 9]. forEach ( logArrayElements ) ; | ||
| + | // [0] = 2 | ||
| + | // [1] = 5 | ||
| + | // [3] = 9 | ||
| + | map : Array.prototype.map() : | ||
| + | La méthode map() crée un nouveau tableau composé des images des éléments d’un tableau par une fonction donnée en argument. | ||
| + | var liste = [1 , 5 , 10 , 15]; | ||
| + | var doubles = liste .map( function (x) { | ||
| + | return x * 2; | ||
| + | }) ; | ||
| + | // doubles vaut dé sormais [2 , 10 , 20 , 30] | ||
| + | // liste vaut toujours [1 , 5 , 10 , 15] | ||
| + | filter : Array.prototype.filter() : | ||
| + | La méthode filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d’origine pour lesquels la fonction callback retourne true. | ||
| + | function isBigEnough ( element ) { | ||
| + | return element >= 10; | ||
| + | } | ||
| + | var filtre = [12 , 5 , 8 , 130 , 44]. filter ( isBigEnough ) ; | ||
| + | // filtre vaut [12 , 130 , 44] | ||
| + | reduce : Array.prototype.reduce() : | ||
| + | arr. reduce ( callback ) | ||
| + | arr. reduce ( callback , valeurInitiale ) | ||
| + | La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d’une liste (de la gauche vers la droite) afin de la réduire à une seule valeur. | ||
| + | var somme = [0 , 1 , 2 , 3]. reduce ( function (acc , cur) { | ||
| + | return acc + cur; | ||
| + | } , 0) ; | ||
| + | // somme vaut 6 | ||
| + | |||
| + | => Pour un tableau [v0, v1, v2, v3], reduce(f,z) va calculer f (f (f (f (z, v0), v1), v2), v3) | ||
| + | Flatten : “Aplatir” une liste de liste : | ||
| + | let flatten = function ( tableau , f) { | ||
| + | return tableau . reduce ((acc , sousListe ) = > acc.concat (sousListe), [] | ||
| + | ); | ||
| + | } | ||
| + | flatten([[1,2],[4],[6,7,8]]), renvoie [1, 2, 4, 6, 7, 8] | ||
Version actuelle datée du 9 mai 2019 à 14:37
CM1
- Javascript côté client
- Programmation concurrente = ordre d’exécution non connu à l’avance
- Typage dynamique :
- type des expressions non connu à l’écriture du programme - le type des valeurs est connu à l’exécution
Fonction :
let maFonction = function (arg1 , arg2 ) {
/* ... */
return uneValeur ;
};
Objet :
- Construction via {} :
let monObjet = { a: 5 , b: " toto " };
let monObjet = { "b": " toto ", "a": 5 };
- Accès aux objets :
o.x + 3; // dans une expression o.x = 5; // affectation o[ champ ] + 3; // dans une expression o[ champ ] = 5; // affectation
Methode : fonction attachée à un objet :
let o = {
/* ... */
maMethode : function (y) { /* ... */ }
}
=> Son utilisation :
o. maMethode (3)
this : Refère à l'objet courant :
let o = {
x: /* ... */ ,
maMethode : function (y) {
return this .x + y;
}
}
Fonction de conversion :
JSON.stringify objet → texte JSON.parse texte → objet
=== vs == :
== et != convertissent en nombre * si les deux membres ont des types différents * == n’est pas transitif === et !== ne font jamais de conversion implicite => Préférer === et !== à == et !=
Dans une page Web :
- Charger du code dans une page Web
<script src = ’ url / de / mon / script . js ’ type = ’ text / javascript ’/ >
- ou bien, intégré dans le code HTML
<script > /* du code javascript */ </ script >
- Pour programmer dans une page Web
// pour accéder à un élé ment particulier
document . getElementById (" demo ")
// et en changer le contenu
. innerHTML = " Nouveau contenu "
forEach : Array.prototype.forEach() :
function logArrayElements ( element , index ) {
console .log (’[’ + index + ’] = ’ + element ) ;
}
// l’index 2 sera saut é car il est undefined
[2 , 5 , , 9]. forEach ( logArrayElements ) ;
// [0] = 2
// [1] = 5
// [3] = 9
map : Array.prototype.map() :
La méthode map() crée un nouveau tableau composé des images des éléments d’un tableau par une fonction donnée en argument.
var liste = [1 , 5 , 10 , 15];
var doubles = liste .map( function (x) {
return x * 2;
}) ;
// doubles vaut dé sormais [2 , 10 , 20 , 30]
// liste vaut toujours [1 , 5 , 10 , 15]
filter : Array.prototype.filter() :
La méthode filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d’origine pour lesquels la fonction callback retourne true.
function isBigEnough ( element ) {
return element >= 10;
}
var filtre = [12 , 5 , 8 , 130 , 44]. filter ( isBigEnough ) ;
// filtre vaut [12 , 130 , 44]
reduce : Array.prototype.reduce() :
arr. reduce ( callback )
arr. reduce ( callback , valeurInitiale )
La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d’une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.
var somme = [0 , 1 , 2 , 3]. reduce ( function (acc , cur) {
return acc + cur;
} , 0) ;
// somme vaut 6
=> Pour un tableau [v0, v1, v2, v3], reduce(f,z) va calculer f (f (f (f (z, v0), v1), v2), v3)
Flatten : “Aplatir” une liste de liste :
let flatten = function ( tableau , f) {
return tableau . reduce ((acc , sousListe ) = > acc.concat (sousListe), []
);
}
flatten([[1,2],[4],[6,7,8]]), renvoie [1, 2, 4, 6, 7, 8]