Introduction au langage§

&

Département Informatique, IUT Lyon 1

Creative Commons License

Ce travail est sous licence Creative Commons Attribution-ShareAlike 3.0 France.

1

Rappels§

2

Architecture Client-Serveur§

3

Rôles du serveur§

4

Rôles du client§

5

Rôles du client§

6

Syntaxe§

7

Inspiration§

8

Condition§

if (i < 10) {
    j = j+1;
    k += i;
} else {
    j = 0;
}
9

Boucles§

while (i < 10) {
    j = j*i;
    i += 1;
}
for(i=0; i<10; i+=1) {
    j = j*i;
}
10

Exceptions§

if (i < 0) {
    throw new Error("negative value");
}
try {
    i = riskyFunction();
}
catch (err) {
    i = -1;
}
11

Tableaux§

a = [1,2,3,5,8,13];
for (i=0; i < a.length ; i+=1) {
    console.log(a[i]);
}
// affiche tous les éléments du tableau

Indication

Comme en Python et contrairement à Java, les tableaux en JS peuvent changer de taille (voir leur documentation pour plus de détails)

Avertissement

Contrairement à Python, un tableau vide (de longueur 0) est équivalent à true dans une condition.

12

Différences§

Il existe cependant des différences importantes que vous devez connaître.

13

Langage interprété§

Indication

JSHint peut être installé sur votre machine, mais peut également être utilisé directement en ligne.

14

Chaînes de caractères§

Remarque

Ces particularités sont partagées avec d'autres langage dynamiquement typés, comme par exemple Python.

15

Typage dynamique§

En Java (comme en C), les variables et les fonctions ont un type fixé :

int fact(int n) {
    int r = 1;
    for(int i=1; i<=n; i+=1) {
        r *= i;
    }
    return r;
}
16

Typage dynamique§

En Javascript (comme en Python), on ne spécifie pas le type des variables ou des fonctions :

function fact(n) {
    let r = 1;
    for(let i=1; i<=n; i+=1) {
        r *= i;
    }
    return r;
}

Indication

Remarquez le mot-clé let devant les premières utilisations des variables r et i.

17

Typage dynamique§

Vocabulaire

On parle de typage dynamique, car cela permet à une variable de contenir (par exemple) un entier à un moment, et une chaîne de caractères à un autre moment. De la même manière, une fonction pourra retourner (par exemple) tantôt un flottant, tantôt un entier.

Cette flexibilité est utile dans certains cas, même si bien sûr il ne faut pas l'utiliser pour faire n'importe quoi...

18

Déclaration des variables locales§

Contrairement aux autres langages dynamiquement typés, Javascript demande que les variables locales soient déclarées, avec un mot-clé let, const ou var (ce dernier est de moins en moins utilisé). Lorsqu'une variable est déclarée avec le mot-clef const, elle doit être immédiatement initialisée et ne peut être réaffectée.

Indication

Les paramètres des fonctions font exception à cette règle, puisqu'ils sont déclarés par leur présence dans l'en-tête de la fonction.

19

Déclaration des variables locales§

Avertissement

Un oubli du mot-clé est dangereux, car il ne constitue pas une erreur. Mais, dans ce cas, la variable est considérée comme globale, ce qui peut créer des bugs difficiles à détecter, comme le montre cet exemple.

Indication

JSHint détecte ce type d'erreur dans la plupart des cas, à condition d'activer le contrôle ainsi :

// jshint undef:true
20

Tests d'égalité§

En JS, on teste l'égalité avec l'opérateur ===, et l'inégalité avec l'opérateur !== :

if (i === j  &&  i !== k) // ...

Avertissement

Les opérateurs habituels == et != existent aussi, mais ils ont une sémantique très inhabituelle, et sont donc généralement évités.

Indication

JSHint détecte toute utilisation de == ou != à condition d'activer le contrôle ainsi :

// jshint eqeqeq:true
21

Tests d'égalité§

Avertissement

En fait, l'opérateur == considère que deux valeurs de types différents sont égales si on peut passer de l'une à l'autre par conversion de type.

Par exemple :

"42" == 42 // est vrai

C'est un problème, car cela conduit à des choses contre-intuitives :

if (a == b  &&  b == c) {
    a == c; // peut être faux
    // par exemple : a = "0", b = 0, c = "" ;
    // en effet, 0 et "" sont tous deux équivalents à false
}
22

Tests d'égalité§

Avertissement

ou encore :

if (a == b) {
    a+1 == b+1; // peut être faux
    // par exemple : a = "42" (a+1 == "421") et b = 42 (b+1 == 43)
}
23

null et undefined§

Indication

Les deux sont équivalentes à false dans une condition.

24

Éléments inexistants§

En Javascript, l'accès à un élément inexistant dans un tableau ou un objet ne déclenche pas d'erreur, mais retourne simplement undefined.

Ceci cause en général une erreur ailleurs dans le code, ce qui le rend plus difficile à déboguer :

let a = ["Alice", "Bob", "Charlie"];
let n = a[5];  // n reçoit undefined
if (n.length > 32) { // erreur : undefined n'a pas de longueur
  // ...
}
25

À vous de jouer§

26

À vous de jouer§

Avertissement

Comme son nom l'indique, la console développeur est déstinée au développeur, pas à l'utilisateur final (qui n'ouvre pas la console). L'utilisation de console.log doit donc être réservée aux messages de debug.

27

Notion d'événement HTML§

28

Programmation événementielle§

29

Intégration directe au HTML§

<p>Hello <span onmouseover="console.log('haha, tickles');">world</span></p>
<button onclick="console.log('click');">Click me</button>

Essayez cet exemple.

Indication

Pour voir ce qui s'affiche sur la console, pressez CTRL+SHIFT+J (sous Chrome) ou CTRL+SHIFT+K (sous Firefox).

30

Définition des fonctions dans une balise script§

 1<p>Hello <span onmouseover="f1();">world</span></p>
 2<button onclick="f2();">Click me</button>
 3
 4<script>
 5  function f1() {
 6      console.log('haha, tickles');
 7  }
 8  function f2() {
 9      console.log('click');
10  }
11</script>

Essayez cet exemple.

31

Définition des fonctions dans un script externe§

<p>Hello <span onmouseover="f1();">world</span></p>
<button onclick="f2();">Click me</button>

<script src="s1_script_externe.js"></script>

Essayez cet exemple, ou modifiez-le.

32

Événements§

Le standard HTML5 définit un large éventail d'événements que le code Javascript peut intercepter :

Indication

Dans le code HTML, les attributs correspondants ont toujours la forme onXX est le nom de l'événement.

33

Manipulation du HTML§

34

L'objet document§

La variable globale document contient un objet représentant le document HTML. Elle permet d'accéder aux éléments du document :

getElementsByTagName(tagname):
retourne un tableau des éléments définis par une balise tagname
getElementById(id):
retourne l'élément ayant pour identifiant id
querySelector(cssSelector):
retourne le premier élément vérifiant un sélecteur CSS
querySelectorAll(cssSelector):
retourne tous les élément vérifiant un sélecteur CSS
35

L'objet document§

Remarque

On définira la notion d'élément plus en détail la semaine suivante, dans la partie sur L'arbre DOM.

Indication

Il est plus efficace d'utiliser les méthodes getElement* que d'utiliser querySelector* avec les sélecteurs correspondants (tagname ou #identifier).

36

Attributs et méthodes d'un élément§

addEventListener(eventname, func):
abonne func à l'événement eventname sur cet élément
textContent:
permet de consulter et modifier le contenu textuel de l'élément
style:

permet de consulter et modifier l'attribut style de l'élément, sous forme d'un objet ayant un attribut pour chaque propriété CSS. (e.g. e.style.fontSize pour la propriété font-size)

Syntaxe

Pour faciliter l'utilisation en Javascript, la typographie des attributs de style n'est pas la même que celle des propriétés CSS correspondantes. Les tirets (-) sont remplacés par une mise en majuscule de la lettre suivante (CamelCase).

37

Attributs et méthodes d'un élément§

classList:

permet de consulter et modifier l'attribut class de l'élément, grâce aux méthodes suivantes :

  • add(cls): ajoute la classe cls a l'élément.
  • remove(cls): retire la classe cls a l'élément.
  • contains(cls): indique si l'élément possède actuellement la classe cls.
  • toggle(cls): inverse l'état de la classe cls (présente/absente) sur l'élément.
38

Attributs et méthodes d'un élément§

Bonne pratique

Comme en HTML+CSS, il est préférable de spécifier la mise en forme à l'aide de classes dans le CSS, et de modifier ces classes dans le code Javascript, plutôt que la spécifier directement dans le code Javascript à travers l'attribut style.

39

Attributs et méthodes d'un élément§

Les éléments possèdent de nombreux autres attributs; en particulier, chaque attribut HTML a une contrepartie en Javascript.

On peut notamment citer :

40

Expérimentez§

... sur cet exemple.

41

Définition des fonctions et des abonnements dans un script externe§

<p>Hello <span>world</span></p>
<button id="b1">Click me</button>

<script src="s1_script_externe.js"></script>
// définition de f1 et f2 comme précédemment, puis...

document.getElementsByTagName('span')[0]
  .addEventListener('mouseover', f1);

document.getElementById('b1')
  .addEventListener('click', f2);

Voir et modifier cet exemple.

42

Définition des fonctions et des abonnements dans un script externe§

Avertissement

Le nom de l'événement, passé à addEventListener, ne doit pas comporter le préfixe on. On écrira donc addEventListener('click', ...), et non addEventListener('onclick', ...).

43

Définition des fonctions et des abonnements dans un script externe§

Bonne pratique

Ceci est la bonne manière d'abonner une (ou plusieurs) fonctions(s) à des événements, notamment parce qu'elle permet de séparer l'aspect structurel (HTML) de l'aspect dynamique (Javascript).

Les manières présentées précédemment vous ont été présentées

  • pour des raisons pédagogiques (elles permettent de présenter plus simplement la notion d'événement), et
  • pour des raisons historiques (vous rencontrerez peut-être du code ancien qui les utilise).

Mais il vous est fortement déconseillé de les utiliser dans du code que vous écrivez vous-mêmes.

44

Événement de chargement de la page§

Indication

Contrairement aux éléments HTML, l'objet window existe forcément dès l'exécution du Javascript, donc on peut sans risque s'abonner à ses événements.

45

Événement de chargement de la page§

 1// définition des fonctions f1 et f2, puis...
 2
 3function cree_abonnements() {
 4  document.getElementsByTagName('span')[0]
 5    .addEventListener('mouseover', f1);
 6  document.getElementById('b1')
 7    .addEventListener('click', f2);
 8}
 9
10window.addEventListener("load", cree_abonnements);

Voir et modifier cet exemple.

46

TP : Formulaires avec différents contrôles§

47

Sujet§

48

Sujet§

NB : Vous pourriez trouver utile l'annexe ci-après.

49

Liens utiles§

Liens utiles

50

Annexe : les expressions régulières§

51

Définition§

Une expression régulière (ou regexp) décrit dans une syntaxe spécialisée une famille de chaînes de caractères.

Par exemple :

Indication

Les expressions régulières sont utilisables dans tous les langages de programmation, mais elles sont particulièrement bien intégrées à Javascript.

52

Pour en savoir plus§

53