Outils pour utilisateurs

Outils du site


cours_2008:bases_de_la_programmation_orientee_objets_et_evenementielle:cm:bases_de_javascript

Table des matières

Voir cette page sous forme de diaporama.

Base de Javascript

La grammaire

Comme beaucoup de langage, JavaScript se base sur des fondamentaux.

Les fondamentaux de tout langage

  • Variables et données
    • Types de bases (Primitifs)
    • Structures de données
  • Instructions et Bloc d’instructions
    • Expressions
      • (composées d’Opérateurs et Opérandes)
  • Contrôle de Flux
  • Éléments de Structurations
  • Sans oublier les commentaires !

Les commentaires

  • Un programme est principalement constitué d’instructions.
    • Ce qu’on lui dit de faire.
  • Mais il est important de noter pourquoi.
    • On lui a dit de faire cela.
  • Ainsi si l’on doit être relu,
    • Il sera possible de comprendre le pourquoi.

Les commentaires

var i=0; // un commentaire 
i=1; 
/* tout 
cela est un 
commentaire */ 
i=2;

Les Variables

  • Elles se déclarent par le mot clé var
  • Elles sont référencées par un nom
  • Ce nom doit débuter une lettre ou _ ou $
    • ne comporter que des lettres ou chiffres ou _ ou $

Les Variables

  • Exemple : var coupureDe10Euros
  • Exemple : var coupure_de_10_$
  • JavaScript est sensible à la case
    • c.-à-d. aux majuscules/minuscules

Les Variables

Convention :

  • Commence toujours par une minuscule
    • On débute par une majuscule pour les Clesses
  • ilEstDUsageDeNoterLesMotsCollésEtAvecLaPremiereLettreEnMajucule

Les données

  • C’est ce que stockent les variables
  • La forme la plus visible : une constante littérale
var somme = 0 ; // 0 est littéralement zéro

Les données sont typées

  • Les données ont toujours un type
  • En JavaScript les variables n’ont pas de type !!!
  • Elles référencent une donnée qui elle à toujours un type.

Les Variables : Déclaration

  • Les variables peuvent être déclarées implicitement
  • Si la variable Somme n’existe pas, une variable Somme est créée automatiquement
    • À éviter
      • somme = 0
    • Toujours
      • var somme = 0;

Les Types primitifs

  • Les nombres
  • Les chaînes de caractères
  • Les booléens

Les nombres

  • Un signe + ou -
  • Une Partie entière
  • Un point et une partie décimale
  • Une lettre e ou E suivie d’un exposant
Exemples : 
var d = 6836; /* en base 10 (non nul devant) */
var r1 = 3.1415926536; 
var r2 = -54E-12; 
var r3 = .656E46;

Les nombres (attention)

  • Noter dans une base différente :
var o = 015264; /* en base 8 (0 devant) */
var h = 0X1AB4; /* en base 16 (0x devant) */

Les chaînes de caractères

Une suite de caractères encadrés de guillemets

  • 'simple'
  • ou double.

Caractère d’échappement

\ sers de caractère d’échappement

Exemple :

var c="012'abcd\nefgh\\ijkl\'mnop\"rstu'345"; 

Représente :

012'abcd 
efgh\ijkl'mnop"rstu'345

Les booléens

Ne prennent que deux valeurs :

  • true (vrai)
  • false (faux)

Exemple :

  var b = true; 
  b = false;

Les constantes particulières

Représentent des conditions particulières

  • Infinity nombre infini
  • NaN nombre impossible ex : 0/0
  • null type et valeur inexistants, vides
  • undefined variable non initialisée

Deux fonctions importantes

>>> 0/0
NaN
>>> 5/0
Infinity
>>> isFinite(5/0)
false
>>> isNumber(5/0)
true
>>> NaN == NaN
false

La vérité sur Javascript

Je vous le dis Javascript est un sale type

petits exemples :

>>> '2'+1
"21"
>>> '2'-21
-19
>>> 1+"2"
"12"
>>> 1-"2"
-1
>>> "2"*2
4
>>> true==1
true
>>> true==0
false

La vérité sur Javascript

A retenir pour plus tard :

  • parseInt(…,10)
  • parseFloat(…)
  • Number(…)
  • … === …

Expressions

  • Une instruction est l’ordre d’évaluer des Expressions
  • Une expression est simplement l’écriture de plusieurs Opérateurs et Opérandes

Expressions

Exemple : ( 1 + 2 ) * b

  • +
    • Opérateur addition.
    • Utilise les valeurs des opérandes 1 et 2
    • Retourne la valeur : 3
  • *
    • Opérateur multiplication
    • Utilise les valeurs des Opérandes 3 et b
    • Retourne une valeur

Expressions

Le résultat de l’évaluation d’une expression peut-être :

  • Un booléen pour servir de condition à un test
  • Un nombre pour le résultat d’un calcul
  • Une chaîne de caractères pour afficher un message
  • Une donnée de type structuré pour des traitements ultérieurs …

Les types d’opérateurs

Les opérateurs peuvent être :

  • Unaire
  • Binaire
  • voir Ternaire

Cela désigne le nombre d’opérandes

v=!a; 
v=a+b; 
v=a?b:c;

Les catégories d’opérateurs

  • Arithmétiques
  • De comparaisons (ou relationnels)
  • Logiques (ou booléens)
  • Binaires (ou bit à bit)
  • D’affectation
  • Et d’autre plus difficile à classer

Les Opérateurs arithmétiques

  • Opérateurs binaires :
    • 1 + 2 Somme
    • 1 - 2 Soustraction
    • 1 * 2 Multiplucation
    • 1 / 2 Division
    • 1 % 2 Modulo
  • Opérateur unaire :
    • - 1 négation numérique (le signe)
    • + 1 ne fait rien (mais converti en nombre)

Les Opérateurs de comparaisons

retourne un booléen (destiné à un test)

  • == égalité
  • != différence
  • < inférieur strict
  • <= inférieur ou égale
  • > supérieur strict
  • >= supérieure ou égale

Les tests d’égalités

  • Les Opérateurs d’égalité == et != comparent les valeurs des Opérandes.
  • ATTENTION : ces valeurs sont converties si nécessaire

Types structurés et égalité

  • Sur des ensembles de données structurées (Tableau, Objet), ils testent si l’on fait référence au même ensemble de données.
  • On ne peut tester l’égalité des données de deux ensembles qu’en faisant les comparaisons une à une.

Égalité stricte

Il existe également les opérateurs : === et !==
qui testent l’égalité des données ET de leurs types

Utiliser === et non ==

Exemple

  >>> 1 == "1"
  true
  >>> 1 === "1"
  false

Leurs usages sont recommandés !

Les Opérateurs booléens

Comme leurs noms l’indiquent, ils opèrent sur des booléens. Ils servent à concevoir des expressions logiques.

Ils sont principalement employés avec les Opérateurs de comparaison.

Ils appartiennent à l’algèbre booléenne.

Exemple

if ((1<a)&&(a<5)) {
  console.log('a et un Nbr de 2 à 4');
} 

Les Opérateurs booléens

Binaire :

  • && le « et » logique
  • || le « ou » logique

Unaire :

  • ! la négation logique (retourne vrai si c’est faux)

Rq : le caractère | s’obtient par AltGr + 6

Les Opérateurs binaires (bit à bit)

Ils traitent toutes les données dans leurs formats « informatique » : Les bits.

Ils ont peu d’utilité en JavaScript, c’est surtout un risque de confusion avec les opérateurs de comparaison et booléens.

Les Opérateurs binaires (bit à bit)

Binaire :
& « et », | « ou », ^ « ou exclusif »,
<< « décalage à gauche »,
>> « décalage à droite »,
>>> « décalage à droite non signé »

Unaire : ~ « négation binaire »

Les Opérateurs d’affectation =

En JavaScript l’affectation est un opérateur, on l’emploie pour référencer une valeur par un identifiant.

Exemple

Exemple : i = (1+2)

L’expression de droite (1+2) est évaluée la valeur retournée est « référencée » par l'identifiant à gauche : i.

Opérateurs d’affectation combinés

Il est possible de combiner une affection et une opération
Ce sont des raccourcis d’écriture

  • i+=1 équivalent à i=i+1
  • i-=1 équivalent à i=i-1
  • i*=1 équivalent à i=i*1
  • i/=1 équivalent à i=i/1

Les Opérateurs dunaires spéciaux

  • Ils s’appliquent à des variables.
  • Ils font trois choses à la foi,
    • une opération d’incrémentation ou décrémentation
    • ET une affectation à leur opérande,
    • tout en retournant un résultat.

Préfixé / Postfixé

Ils peuvent être :

  • Préfixé : le résultat est retourné après l’opération
  • Postfixé : le résultat retourné est le contenu de la variable avant l’opération.

Les Opérateurs unaires spéciaux

  • a++
    • retourne la valeur de a
    • puis incrémente a
  • ++a
    • incrémente a
    • puis retourne le résultat
  • a--
    • retourne la valeur de a
    • puis décrémente a
  • --a
    • décrémente a
    • puis retourne le résultat

L’opérateur conditionnel ternaire

  • Il évalue un test et en fonction du résultat.
  • Il retourne l’une ou l’autre des autres opérandes.
a=1;b=2;c=3;d=4; 
x=(a>b)?c:d; // x prend la valeur 4

Les conversions implicites

JavaScript est un langage faiblement typé.

Quand un opérateur doit faire une opération avec des opérateurs, ceux-ci ne sont pas nécessairement adéquats.

Il va alors les convertir de manière automatique.

Important : Toujours utiliser parseInt(…,10), parseFloat(…) ou Number(…)

Exemple

“3”<25
“3” est converti en nombre 3 avant d’effectuer la comparaison

C’est une source fréquente d’erreur et comme les variables ne sont pas typé, il n’existe pas de solution automatique.

Contrôle de flux

Par défaut un programme exécute les instructions dans l’ordre de leurs écritures, cela offre des possibilités très limitées.

Par contrôle de flux on entend la possibilité de modifier la séquence et l’ordre d’exécution.

IF…ELSE... / Si … Alors …

if (condition){ 
// exécuté si condition est vraie 
}else{ 
// exécuté si condition est fausse 
} 

l’un ou l’autre, jamais les deux.

FOR … / Pour … variant de … à …

for(initialisation; condition; pas){ 
// exécuté à chaque tour de boucle 
} 
  • initialisation : mettre le compteur à zéro
  • condition : vérifier le compteur
  • pas : incrémenter le compteur

WHILE ... / Tant que …

while (condition){ 
// répété tant que condition est vraie 
action 
} 

“action” doit, à terme, modifier condition sinon la boucle est infinie.

DO … WHILE / Répéter …Tant que

do {// répété tant que condition est vraie 
action // exécuté au moins une fois
} while (condition) 

“action” doit, à terme, modifier condition sinon la boucle est infinie

SWITCH ... CASE / Selon la valeur

switch ( ... )  { // Valeur à tester
  case ... : //cas possible
    code_pour_ce_cas;
    break; // important !
  case ... : // autre cas possible
    code_pour_ce_cas_la;
    break; // important !
  default :
    code_pour_aucun_cas_trouves;
    break;
} // fin du switch

Les objets

Attention

  • Il y a les objets que l'on définit en javascript
  • Et les objets fournis par le navigateur (DOM)

Les deux ne sont pas nécessairement équivalents.

Éléments de Structurations : Fonctions et Objets

Objets : POO

Paradigme ?

Paradigme
est une représentation du monde, une manière de voir les choses, un modèle cohérent de vision du monde qui repose sur une base définie

JavaScript et POO

Attention !

JavaScript se base sur le concept de programmation orientée prototype.

En général les autres langages utilisent des objets qui sont des instances d'une Classe.

  • ActionScript 3.0 ; évolue vers la programmation basée sur des Classes.
  • ECMAScript 4 est avorté.
  • ECMAScript 5, Harmony : à suivre

Objet ?

Objet [INFORMATIQUE]
Module structuré et limité constitué d’un ensemble de données et de procédures qui décrivent leur manipulation.
Ensemble unitaire d’informations, créé à l’aide d’une application, qu’on peut manipuler au moyen de ses propriétés et insérer dans un autre document.

POO et JavaScript

Classe en JavaScript

Il est possible d'émuler la création d'objet basé sur des Classes en utilisant des librairies en JavaScript :

exemple avec MooTools

var Cat = new Class({
    initialize: function(name){
        this.name = name;
    }
});
var myCat = new Cat('Micia');
console.log(myCat.name); //alerts 'Micia'

Éléments de Structurations

Rappel, il existe plusieurs niveaux de structures :

  • les éléments de base
  • les éléments d'assemblage
    • (permettre de composer des éléments de base)
  • les éléments d'abstraction
    • (permettre de globaliser un concept)

Les niveaux de structures du code

Les éléments d'assemblage :

  • Block d'instruction
  • Structure de contrôle

Les éléments d'abstraction :

  • Fonction
  • Objets

Les Fonctions

JavaScript est un langage de programmation fonctionnelle.

Une fonction est un ensemble d'instructions :

  • réalisant une certaine tâche.
  • prends zéro, un ou plusieurs paramètres et retourne une valeur.

Déclaration de fonctions

function nomFonction(param,autreParam,...){
  // corps de la fonction
  return resultat;
};
var nomFonction = function (param,autreParam,...){
  //corps de la fonction
  return resultat;
};

Les deux formes sont équivalentes.

Déclaration de fonctions

function nomFonct(param,autreParam,..){
// corps de la fonction
return resultat;
};

function : mots-clefs déclarant une fonction.
nomFonct : nom de la variables à qui est affecté la fonction (optionnel).
param,autreParam,… : paramètres de la fonction (optionnel).
// corps de la fonction : bloc de code exécuter par la fonction.

Paramètres d'une fonction

  • Un paramètre de fonction et une donnée fournie au code de la fonction.
  • Une fonction permet de réemployer un comportement.
    • Les paramètres permettent d'adapter ce comportement.
  • Les paramètres sont passé par références en JavaScript.

Une fonction peut avoir :

nombre de paramètres :

  • zéro : function uneFonction(){};
  • un : function uneFonction(unParametre){};
  • deux : function uneFonction(premierParam,secondParam){};;
  • plein : function uneFonction(a,b,c,d,e,f){};;

une fonction est un objet

function uneFonction(){};
var autreVariable = uneFonction;
console.log(autreVariable===uneFonction); // true

L'invocation (exécution) d'une fonction se fait en ajoutant des parenthèses au nom de variable qui la référence.

uneFonction(); // exécute la fonction
autreVariable(); // exécute la même fonction

zéro paramètre

function uneFonction(){ 
  console.log("dans une fonction");
};
>>> uneFonction();
"dans une fonction"

un paramètre

function uneFonction_1(unParametre){ 
  console.log("dans une fonction avec : "+unParametre);
};
>>> uneFonction_1("une valeur");
"dans une fonction avec : une valeur"

deux paramètres

function uneFonction_2(premierParam,secondParam){ 
  console.log("dans une fonction avec : \n"+
               premierParam+" et "+secondParam);
};
>>> uneFonction_2("une valeur","une autre valeur");
"dans une fonction avec :\n
 une valeur et une autre valeur"

pleins de paramètres

function uneFonction_6(a,b,c,d,e,f){ 
  console.log("dans une fonction avec : \n"+
              a+","+b+","+c+","+d+","+e+","+f);
};
>>> uneFonction_6(6,5,4,3,2,1);
"dans une fonction avec :\n
 6,5,4,3,2,1""

Nombre de paramètres variables

function uneFonction_1(unParametre){ 
  console.log("dans une fonction avec : "+unParametre);
};
>>> uneFonction_1("une valeur","sera ignoré")
"dans une fonction avec : une valeur"

Les paramètres surnuméraires sont tout simplement ignorés (pas de message d'erreur)

Nombre de paramètres variables

function uneFonction_2(premierParam,secondParam){ 
  console.log("dans une fonction avec : \n"+
               premierParam+" et "+secondParam);
};
>>> uneFonction_2("une seule valeur");
"dans une fonction avec :\n
 une valeur et undefined"

La variable vaut alors undefined, qui peut provoquer une erreur si on l'utilise.

Idiome : Valeur par défaut

function uneFonction_1_1(premierParametre,optionnel){ 
  optionnel = optionnel || "valeur par défaut";
  console.log("dans une fonction avec : \n"+
               premierParametre+" et "+secondParametre);
};

optionnel valant undefined, le “ou” retourne “valeur par défaut”.

>>> uneFonction_1_1("une valeur");
"dans une fonction avec :\n
 une valeur et valeur par défaut"

Pour information

Nombre de paramètres variables :

function utiliseArguments () {
   console.log("dans une fonction applée avec "+
                arguments.length+" argument(s) :\n"+
                arguments[0]+","+arguments[1]+","+arguments[2]);
}
>>> utiliseArguments("un seul");
"dans une fonction applée avec 1 argument(s) :\n
 un seul,undefined,undefined"
>>> utiliseArguments(6,5,4,3,2,1);
"dans une fonction applée avec 1 argument(s) :\n
 6,5,4"

Résumé

  • Une fonction est un Objet.
    • Variable pointant vers une fonction.
    • Exécution de la fonction du fait des parenthèses.
  • Le nombre d'arguments est variable.
    • Une source d'erreurs potentielles.
    • Utilisé par les librairies JavaScript (+souple).

Valeur de retour

function nomFonct(Orange>param,autreParam,..){
// corps de la fonction
return resultat;
};

retourne la valeur résultant de l'évaluation de l'expression.

Retour au point d'appel

function nomFonct(Orange>param,autreParam,..){
// corps de la fonction
return;
// Jamais exécuté };

Stop l'exécution de la fonction, retourne au point d'appel, le reste du bloc n'est pas exécuté.

Retourne undefined par défaut sauf dans le cas d'un constructeur qui retourne this (voir après).

Exemple

function somme(a,b) {
  return a+b;
};
console.log("2 et 5 donnent : "+somme(2,5));

Fonction Salutation

function salutation (sexe,statut,age) {
  if( sexe=="M" ) {
    if ( age<18)  { 
      return "Salut p'tit mec"; 
    } else { 
      return "Bonjour monseigneur"; 
    }
  } else {
    if (statut=="mariée") { 
      return "Bonjour madame"; 
    } else {
      if ( age<25 ) {
        return "Salut poupée"; 
      } else { 
        return "Bonjour madame"; 
      }
    }
  }
}

Fonction Salutation

function salutation (sexe,statut,age) {
  ...
}
 
window.addEvent('domready', function(){
  $('salutation').addEvent('click',function() {
    var champSexe = $('sexe').value;
    var champStatut = $('statut').value;
    var champAge = parseInt($('age').value,10);
 
    $('message').setText(
      salutation(champSexe,champStatut,champAge));
  });
});

Porté des variables

Idiome Javascript :
(function (){
// codes
})();

On définit une fonction anonyme et on exécute immédiatement son code.

Porté des variables

Les fonctions (et elles seules) définissent un nouvel espace de nom.

var variable = "dehors";
console.log(variable); // dehors
(function(){
  var variable = "dedans";
  console.log(variable); // dedans
})();
console.log(variable); // dehors

Porté des variables

Les fonctions capturent les variables de l'espace où elles sont déclarées.

var variable = "avant";
function fun(){
  console.log("fun : "+variable);
}
console.log(variable); // avant
fun(); // fun : avant
variable = "après";
console.log(variable); // aprés
fun(); // fun : après

JavaScript = fonctionnel

  • Les fonctions sont des valeurs
  • Les déclarations de fonction sont des expressions
  • Les fonctions capturent les variables

JavaScript à plus de caractéristiques de programmation fonctionnelle que de particularité de POO !

Maux de tête

function generateur (base) {
  var valeur = 1;
  function iterateur() {
    valeur = valeur * base;
    return valeur;
  }
  return iterateur;
}
iterateur2 = generateur(2);
iterateur2(); // 2
iterateur2(); // 4
iterateur2(); // 8
iterateur2(); // 16

exemple

Les objets

Objet (JavaScript)
Module structuré et limité constitué d’un ensemble de données
Un Objet en javascript n'a pas à proprement parler de méthodes, mais il à des propriétés qui sont peuvent contenir des fonctions.

Notation littérale

var p = {'sexe':'M','age':18,'status-marital':'marié'};
var p = {sexe:'M',age:18,'status-marital':'marié'};

Notation équivalente, les clefs peuvent être des identifiants si cela est possible (caractères autorisés)

Notation littérale

Une notation sur plusieurs lignes est plus claire :

var p = {
  sexe:'M',
  age:18,
  'status-marital':'marié'
  };

Notation littérale

{
sexe:'M',
age:18,
'status-marital':'marié'
}

{ } : Délimiteur de la déclaration de l'objet.
, : séparateur des couples nom/valeur.

Notation littérale

{
sexe:'M',
age:18,
'status-marital':'marié'
}

nom de la propriété,

        un identifiant ou une chaîne de caractères. \\

: : séparateur de nom/valeur.
“valeur” : expression donnant la valeur à affecter à la propriété.

Accès aux propriétés

p.sexe; // 'M'
p['sexe'] // 'M' (idem)
p.sexe = 'F';
p['sexe'] = 'F'; // (idem)

Attention : p.status-maritalerreur

Création dynamique de propriétés

var p = {};
p.nom = 'dupont'; // {nom:'dupont'}
p['status-marital'] = 'marié';
    // {nom:'dupont', 'status-marital':'marié'}

Déclaration complexe

var p = {
  age:(6*7),
  adresse:{
    rue:'du sôt',
    ville:'age'
  }
};
p.age; // 42
p.adresse.ville = 'Montbéliarde';

Relation Tableau / Objet

  • Un tableau est un objet qui reçoit une propriété length
  • N'utiliser que des clefs numériques avec un tableau.
  • Dans le cas de clefs non numérique, utiliser un objet comme tableau associatif.

Exemple Tableau

var a = [];
a[3] = 3; // [undefined, undefined, undefined, 3]
a.length; // 4
a[6] = 'six'
//  [undefined, undefined, undefined, 3,
//                  undefined, undefined, "six"]
a.length; // 7
 
var b = new Array(2); // [undefined, undefined]

Utilisation d'objet

function salutation (personne) {
  ...
}
 
window.addEvent('domready', function(){
  $('salutation').addEvent('click',function() {
    var personne = {
      sexe: $('sexe').value,
      statut: $('statut').value,
      age: parseInt($('age').value,10)
    };
 
    $('message').set('text',salutation(personne));
  });
});

Exemple menu HTML

<ul id="menu">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
</ul>
#menu li a {
   display:block;
   margin: 0;
   font-size:20px;
   background-color:#5E994C;
}

Exemple menu JS

window.addEvent('domready', function(){
  var menuElements = $$('#menu li a');
  menuElements.setStyles({'font-size':'20px','color':'#0000FF'});
  menuElements.each(function(element) {
    var fx = new Fx.Morph(element,{duration: 500,transition: Fx.Transitions.Quad.easeInOut,wait:false});
    element.addEvent('mouseenter',function() {
      fx.start({'font-size':'60px','color':'#FF0000'});
    });
    element.addEvent('mouseleave',function() {
      fx.start({'font-size':'20px','color':'#0000FF'});
    });
  });
});
cours_2008/bases_de_la_programmation_orientee_objets_et_evenementielle/cm/bases_de_javascript.txt · Dernière modification: 2009/05/02 22:00 (modification externe)