: javascript

Script simple

Voici un script simple qui contient divers éléments importants du langage javascript. Il faut s'habituer à distinguer ces éléments.

var pos;
var speed = 1;
var pos_initial;

function startAnim() {
        var e = document.getElementById('newsbox');
        pos_initial = e.clientHeight + 10;
        pos = pos_initial;
        setInterval(anim, 20);
}

function anim() {
        var e = document.getElementById('newslist');
        e.style.visibility = 'visible';
        e.style.top = Math.floor(pos) + 'px';
        pos = pos - speed;
        if(pos < -e.clientHeight) pos = pos_initial;
}

function setSpeed(n) {
        speed = n;
}

Les fonctions

Le mot clé function marque la déclaration d'une fonction. Les accolades délimitent des blocs. Dans un premier temps, il faut être capable de discerner les instructionsordres élémentaires qui sont dans ou dehors des fonctions.

Les trois premières lignes de ce script sont trois instructions hors fonctions. (Elle appartiennent au contexte global). Les autres instructions de ce script appartiennent à leur fonctions respectives (elle sont a l'intérieur des accolades de fonctions).

Les fonctions portent un nom (ce n'est pas toujours le cas en javscript), celui-ci suit le mot clé function. Ce nom a été inventé par le programmeur qui a réalisé le script. Il permet de différencier les fonctions les unes des autres. Il a généralement un nom qui correspond à ce que fait la fonction. Dans ce script, il y a trois fonctions: startAnim, anim, setSpeed.

La fonction setSpeed attend un paramètre contrairement aux deux autres fonctions. Les paramètres attendus par les fonctions sont décrit par des noms séparés par des virgules (si il y en a plus d'un) et placés entre parenthèses après le nom de la fonction.

Les points virgules

Les points virgules délimitent les instructions. Quand un code est bien écrit, on a généralement une instruction par ligne mais ce n'est pas obligatoire.

Les opérateurs

Les caractères + - / * % = < > sont des opérateurs. Ils ont tous un rôle bien précis. Le plus fréquent d'entre-eux est l'opérateur égal =. Sont rôle est l'affectationNotion de copie d'une valeur dans une mémoire. On copie toujours la valeur à droite du signe = dans la référence mémoireIl s'agit d'un nom représentant une zone de la mémoire de l'ordinateur indiquée à sa gauche.

Certains opérateurs sont des mots clés du langage, comme le mot var. Celui-ci sert à déclarerAssocier un nom à une structure du langage une variable. Les variables sont des zones mémoire pouvant accueillir des valeurs (qui peuvent évoluer au fil du temps).

Le point

Le symbole point est utilisé soit comme virgule pour les nombres soit comme séparateur pour la notation objet. C'est ce second cas qui est le plus fréquent. Par exemple document.getElementById signifie que getElementById est un élément appartenant à document, ou encore e.style.top signifie que top appartient à style qui appartient à e. Le point a un peu le rôle d'un slash / dans les urls. Il indique une forme hiérarchique.

Mot réservés

En javascript il y a un certain nombre de mots réservés. Dans cet exemples ils sont marqués en gras bleu foncé. Ce sont function, var, if. Les mots réservés sont peu nombreux en javascript. Ils ont un rôle bien précis défini par le langage javascript.

Méthodes prédéfinies

Les méthodes sont des fonctions prédéfinies en javascript et attachées (appartenant) à des objets prédéfinis. Par exemple Math.floor, c'est la méthode floor qui appartient à l'objet Math. Ces méthodes et objets prédéfinis sont documentés dans les références javascript.

Propriétés prédéfinies

Ce sont des références mémoire pouvant généralement être consultées ou modifiées (comme des variables), par exemple e.style.visibility. visibility est une propriété de style qui est une propriété de e.

Méthode ou propriété ?

Ce qui permet de différentier une méthode (fonction) d'une propriété (variable), c'est la présence des parenthèses après le nom. getElementById est une méthode, alors que clientHeight est une propriété.

Constantes

Dans ce script on rencontre encore des constantes qui sont soit numérique soit de type texte ici. Par exemple newsbox est une constante texte, parce qu'elle est entourée de guillemets (simple ou double). 1, 10 et 20 sont des constantes numérique dans cet exemple (coloriées en rouge).

Editer