Introduction à JavaScript

Extraits de réintroduction à JavaScript par MOZILLA DEVELOPER NETWORK

Les outils vraiment utiles pour les développeurs JavaScript sur Developpez.com

JavaScript a été créé en 1995 par Brendan Eich, ingénieur chez Netscape.

Microsoft a lancé une version globalement compatible, appelée JScript peu après. 

Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte qui fournit des mécanismes de communication avec le monde extérieur.

Les types JavaScript:

•Number
•String (ce sont des objets avec des méthodes)
•Boolean
•Object

     ◦Function
     ◦Array
     ◦Date
     ◦RegExp
•Null
•Undefined
il y a également quelques types d'erreurs

Nombres en JavaScript

0.1 + 0.2 = 0.30000000000000004

Math.sin(3.5);
d = Math.PI * r * r;

Convertir une chaîne en un nombre entier à l'aide de la fonction intégrée patseInt() Elle reçoit la base de conversion comme second paramètre, que vous devez toujours fournir :

parseInt("123", 10)   ->  123
parseInt("010", 10)   ->    10

Si vous désirez convertir un nombre binaire en un entier, changez simplement la base :
parseInt("11", 2)      ->   3

utiliser l'opérateur unaire + pour convertir des valeurs en nombres :  + "42"  -> 42

 ! additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en chaîne :  "3" + 4 + 5  -> 345 (!)

+"3"+4+5  -> 12   (+"3" a converti la chaine "3" en nombre  : 3)

Not a Number = NaN :

parseInt("hello", 10)  -> NaN
 

NaN n'est pas un nombre, la preuve :

isNaN(NaN)  -> true

1 / 0   ->   Infinity
-1 / 0  -> -Infinity
tester les valeurs Infinity, -Infinity et NaN à l'aide de la fonction intégrée isFinite() :
   isFinite(1/0)         -> false
   isFinite(-Infinity) -> false
   isFinite(NaN)       -> false

Les chaînes

longueur d'une chaîne  "hello".length -> 5

"hello, world".replace("hello", "goodbye") -> goodbye, world

"HeLLO".toUpperCase() -> HELLO

"HELLO".toLowerCase() -> hello

Les codes Unicode d'une chaine de caractères

"hello".charAt(0)  -> h

"hello".charAt(2)  -> l     

var myString = String.fromCharCode(74, 97, 118, 97, 83, 99, 114, 105, 112, 116);

Les sous chaines

var date = "15/08/2000";

var jour = date.substring(0,2);

var mois = date.substring(3,5);  // date.substring(p1,p2); position du 1er et du dernier c à afficher+1(?)

var annee = date.substring(6,10);

Extraire des sous chaines

chaine.indexOf(souschaine,debut) retourne l'indice de la première occurrence de souschaine

ex : url="http://www.toutjavascript.com/magicmenu/index.html;

p2=url.substring(7,url.indexOf("/",7)); recherche le premier / après la 7eme position

domaine=url.substring(7,url.indexOf("/",7));

domaine="www.toutjavascript.com";

p1=domaine.substring(domaine.lastIndexOf(".")); recherche de la dernière occurrence de '.'

Les variables

var  nom="Brendan Eich"

si x=3  x+=5 -> 8 (c'est x = x+ 5)

concaténer des chaînes : "Hello" + "World" -> "Hello World"

Structures de contrôle

var name = "des chatons";
if (name == "des chiots") {
     name += " ?!";
} else if (name == "des chatons") {
    name += " Ok";

}
->  name -> "des chatons Ok"

while (true) {
    // une boucle infinie !
}

do {
    var input = get_input();
} while (inputIsNotValid(input))

for (var i = 0; i < 5; i++) {
    // Sera exécutée cinq fois
}

Opérateurs && et ¦¦ exécutent leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à null avant d'essayer d'accéder à ses attributs :
var name = o && o.getName();

Ou pour définir des valeurs par défaut :
var name = otherName ¦¦ "default";


JavaScript propose également un opérateur ternaire conditionnelle en une ligne :
var permis = (age > 18) ? "oui" : "non";


Instruction switch
switch(action) {
    case 'dessiner':
        dessine();
        break;
    case 'manger':
        mange();
        break;
    default:
        nerienfaire();
}
L'instruction break stoppe l'exécution, son absence permet d'enchainer au niveau suivant. C'est rarement utilisé, préciser dans un commentaire si c'est délibérée.
 

Les objets

créer un objet vide :  var obj = new Object();  ou  mieux var obj = {};

Puis lui affecter des propriétés :

obj.name = "Simon";    ou   obj["name"] = "Simon";
var name = obj.name;   ou   var name = obj["name"];

On peut créer l'objet et ses propriétés d'un coup :

var obj = {
    name: "Carotte",
    "for": "Max",
    details: {
        color: "orange",   size: 12
    }
}
Les accès auxattributs peuvent aussi être chaînés :
obj.details.color  ->  orange
obj["details"]["size"]  ->  12

Les tableaux

var a = new Array();

  a[0] = "chien";
  a[1] = "chat";
  a[2] = "poule";

a.length  ->  3

Mieux :

var a = ["chien", "chat", "poule", "canard"];  //ne pas terminer par une virgule !
a.length -> 4

Nota : a[100] = "renard";   ->   a.length  -> 101

(mais de 3 à 99 il n'y a rien): typeof(a[90])  ->  undefined

len = a.length;

for (var i = 0; i < len; i++) {
    // Faire quelque chose avec a[i]
}

il est possible d'exprimer cela encore mieux :
for (var i = 0, item; item = a[i]; i++) {
    // Faire quelque chose avec item
}

Une autre manière de parcourir un tableau est d'utiliser une boucle for...in. Notez que si quelqu'un ajoute d'autres propriétés à Array.prototype, elles seront également parcourues par cette boucle :
for (var i in a) {
  // faire quelque chose avec a[i]
}

Ajouter un élément à un tableau : a[a.length] = item;     

(a.length est toujours un de plus que l'index le plus grand)       // identique à a.push(item);

Les tableaux ont aussi un certain nombre de méthodes :
a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep),
a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end),
a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..)

•concat renvoie un nouveau tableau auxquels les éléments fournis ont été ajoutés.
•pop retire et renvoie le dernier élément
•push ajoute un ou plusieurs éléments à la fin du tableau
•slice renvoie un sous-tableau
•sort peut recevoir une fonction de comparaison optionnelle
•splice permet de modifier un tableau en supprimant une partie et en la remplaçant par d'autres éléments
•unshift insère des éléments en tête de tableau

Les fonctions

 function add(x, y) {
    var total = x + y;
    return total;
}

Attention : add(2, 3, 4) -> 5   // les deux premiers sont additionnés ; 4 est ignoré sans message d'erreur!!!

Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée arguments. Ce sont des objets semblables à un tableau qui conservent toutes les valeurs reçues par la fonction. Réécrivons la fonction add pour recevoir autant de valeurs qu'on veut :

function add() {
    var somme = 0;

    for (var i = 0,  j = arguments.length;  i < j;  i++) {
          somme += arguments[i];
    }
    return somme;
}

add(2, 3, 4, 5)  ->  14

function moyenne() {
    var somme = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        somme += arguments[i];
    }
    return somme / arguments.length;
}

moyenne(2, 3, 4, 5);  -> 3.5
La fonction moyenne() reçoit une liste de valeurs séparées par des virgules, mais si ce qu'on veut c'est trouver la moyenne des valeurs d'un tableau ? 

function moyenneTableau(arr) {
    var somme = 0;
    for (var i = 0, j = arr.length; i < j; i++) {
        somme += arr[i];
    }
    return somme / arr.length;
}

var Ta=[2, 3, 4, 5];

moyenneTableau(Ta);   ->   3.5

On peurt utiliser la premièrfe fonction moyenne en lui annonçant l'arrivée d'un tableau avec la méthode apply (les fonction sont aussi des objets)

moyenne.apply(null,Ta);

JavaScript permet également de créer des fonctions anonymes.

var moyenne = function() {
    var somme = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        somme += arguments[i];
    }
    return somme / arguments.length;
}

JavaScript permet d'appeler des fonctions récursivement
function countChars(elm) {
    if (elm.nodeType == 3) { // TEXT_NODE
        return elm.nodeValue.length;
    }
    var count = 0;
    for (var i = 0, child; child = elm.childNodes[i]; i++) {
        count += countChars(child);
    }
    return count;
}
...

Objets personnalisés

Attacher des fonction  à un objet. Comme les fonctions sont des objets, c'est facile :

function makePersonne(prenom, nom) {
    return {
           prenom: prenom,
           nom: nom,
           nomComplet: function() {
               return this.prenom + ' ' + this.nom;
           },
           nomCompletInverse: function() {
               return this.nom + ', ' + this.prenom;
          }
    }
}
s = makePerson("Simon", "Willison")
s.nomComplet()  ->  Simon Willison
s.nomCompletInverse()  ->   Willison, Simon

 Informations sur le document original
•Auteur : Simon Willison
•Date de dernière mise à jour : 7 mars 2006
•Copyright : © 2006 Simon Willison, fourni sous la licence Creative Commons: Attribute-Sharealike 2.0.
•Informations complémentaires : Pour plus d'informations à propos de ce tutoriel (et pour des liens vers les slides de la présentation originale), consultez le billet Etech du blog de Simon Willison.