Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:introduction

Table des matières

Voir cette page sous forme de diaporama.

Introduction JavaScript

Quel est le programme

  • Notions de base
    • programmation orientée objet
    • programmation événementielle.
    • hiérarchie d’objets existante.
  • Indications de mise en œuvre
    • Apprentissage de langages spécifiques.
    • Étude pratique du modèle objet d’un document HTML.

Traduction du programme

  • Utiliser des Objets
    • JavaScript
  • Utiliser des événements
  • Manipuler le DOM
    • Document Object Model

JavaScript

  • histoire
  • ce qui est acquis
  • les bases
  • la grammaire
  • le futur (et présent)

JavaScript : histoire

Un langage dans la page

JavaScript : à quoi ça sert ?

  • Affiner et animer vos pages WEB
  • Améliorer l’affichage des pages
  • précalcul en fonction du navigateur
  • Réagir aux Réponses de l’Utilisateur
  • choisir différentes pages d’après un formulaire
  • traiter les événements souris
  • faire du commerce électronique

Le Fonctionnement de JavaScript

  • Un langage interprété
  • Écrit directement dans les pages WEB
  • Événementiel
  • À base d’objets
  • Faiblement typé

Le Fonctionnement de JavaScript

  • JavaScript n’est pas JAVA
  • Syntaxe très proche du C
  • Un petit « bidule » ajouté dans les navigateurs
  • Peu rendre les pages plus vivantes

L’historique de JavaScript

  • LiveScript 1.0 inventé par Netscape
  • Sortie de Java ( Le Vrai)
  • LiveScript devient JavaScript
  • Microsoft sort Jscript
  • Le Standard en 1997 : ECMAScript ?

Une Histoire chaotique !

La standardisation a émergé avec :

  • Netscape 6.x MS 5.5
  • Le standard : HTML 4.0 (en entier !)
  • Style + DOM = DHTML
  • Style : changer dynamiquement l’aspect

DOM : Modèle Objet du Document

Il offre à JavaScript l’accès à l’ensemble du code HTML sous forme d’objet qui permet de changer l’aspect d’une page

Le DOM est un standard

Le DOM est un standard de programmation, il n’est pas uniquement lié à JavaScript

Les bases de JavaScript

Un peut de grammaire

Les règles de bases

Pour être complet :

http://www.ecma-international.org/publications/file

188 Pages !
Et en plus les navigateurs ne suivent pas forcément les standards
Il vaut mieux se baser sur l’usage que la théorie !

JavaScript prend place dans la page

<html> 
<head> 
<title>Test</title> 
  <script type="text/javascript">
    alert("Hello monde!");
  </script> 
</head> 
<body> 
</body> 
</html>

Balise : script

<script type="text/javascript">
</script>

Introduis le passage JavaScript

Code simple

alert("Hello monde!"); 

Code à oublier !

  <html> 
  <head><title>Test</title 
  </head> 
  <body> 
  avant le script 
  <script 
  type="text/javascript"> 
  <!-- 
  document.write("<h1>Bonjour, le monde</h1>\n"); 
  //--> 
  </script> 
  Après le script 
  </body> 
  </html>

Code à utiliser

Placer le code JavaScript dans un fichier externe.

calcul.js :

 function carre() {}

externe.html :

<script src="carre.js" 
  type="text/javascript"></script>

fichier externe

  • Permets de réemployer des fonctions
  • Usage semblable aux feuilles de styles

Code à éviter

On peut le placer dans des balises HTML

<input type="button" 
       value="Calculer" 
       onClick="calcul()">

attribut gestionnaire d’événements

  • onClick Désigne un gestionnaire d’événements
  • Il exécute du code JavaScript ici calcul()
  • C’est généralement du code simple :
    • Ici l’appel d’une fonction

attribut gestionnaire d’événements

À n’utiliser que si cela simplifie le code

Appeler une fonction JavaScript dans un lien hypertexte

<a href="javascript:cadre('bas.htm','bas')">

Remarque

L’emploi de guillemets 'SIMPLE' car les “DOUBLES” sont utilisés pour délimiter la valeur de l’attribut.

JavaScript permet l’emploi des deux, il suffit qu’ils soient appairés

Base de programmation

Après l'entrée, le plat principal

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 CONSTANTES

Les constantes un type particulier de variables :

  • On ne peut changer leurs valeurs
  • Noté par convention en MAJUSCULES
const TVA = 19.6;

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 :
    • Entiers
    • Réels (virgules flottantes)
  • Les chaînes de caractères
  • Les booléens

Les entiers

  • Simplement un nombre sans virgule :
var d = 6836; /* en base 10 (non nul devant) */
  • Noter dans une base différente :
var o = 015264; /* en base 8 (0 devant) */
var h = 0X1AB4; /* en base 16 (0x devant) */

Les réels

  • 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 r1 = 3.1415926536; 
var r2 = -54E-12; 
var r3 = .656E46;

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(…)
  • … === …

Les structures de données

  • En JavaScript il existe un seul type de structure : Les tableaux
  • Pour JavaScript :
    • objets = tableaux
    • tableau = objets
  • Et comme si cela ne suffisait pas, les fonctions sont des objets …

Les tableaux

Les tableaux sont un ensemble de variables auxquelles on accède par un indice

Les tableaux

var t=new Array(3);//tableau de 3 éléments 
t[0] = 'a'; // 1er élément indice 0 
t[1] = 'b'; // 2nd élément indice 1 
t[2] = 'c'; // 3iem élément indice 2 

Équivalent à :

var t = new Array('a','b','c');

Les tableaux

L’on n’est pas obligé de déclarer la taille d’un tableau.

On peut utiliser toutes valeurs comme indices et pas seulement un entier.

Les tableaux

var employe=new Array(); 
employe["nom"] = "Descartes"; 
employe["prenom"] = "Jean"; 
employe["residence"]= "Cahors";

Les tableaux, des objets

  • Les tableaux sont en fait des dictionnaires
  • On peut utiliser la notation pointée des objets :
employe.nom = "Descartes";

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.

Les instructions et les blocs

Les instructions :

  • traitements élémentaires exécutés.
  • séparés par un point-virgule ;
  • exécutées dans l’ordre
  • regroupement possible : { }

Exemple de bloc d’instructions

{ 
  var P20 = Math.floor(rendre / 20); 
  rendre = rendre - (P20 * 20); 
  document.formulaire.Nb20.value = P20; 
}

Rq: la notation document.formulaire.Nb20 est à oublier.

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)) {
  alert('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 affecter une valeur à une variable.

Exemple

Exemple : i = (1+2)

L’expression de droite (1+2) est évaluée la valeur retournée est « copier » dans la variable de 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

Fin

Fin

Éléments de Structurations pour plus tard.

cours2007/poo1/cm/introduction.txt · Dernière modification: 2008/04/24 22:00 (modification externe)