Réalisation de sites web

Sommaire du site

Présentation
Comment apprendre
L'équipement
La page web
  Styles et CSS
  HTML, structure de la page
  HTML, éléments du corps
Le langage JavaScript
  JavaScript, objets "core"
  JavaScript, DOM, les bases
  JavaScript, DOM, node
  JavaScript, compléments
Le langage PHP, les bases
  PHP, fonctions utiles
  PHP pour le web
  PHP, compléments
SQL, introduction
  MySQL et PHP pour le web
  MySQL, plus loin...
Applications AJAX
Annexes utiles
  Fichier .htaccess
  Sécurité des sites web
  Conception d'un site web
  Référencement, syndication

Sommaire détaillé

Mentions légales.

Chapitres de cette page
Contenu  -> 

Page mise à jour le : 12-08-2015

Haut de la page

Math (mathématiques)
Date (dates et heures)
Array (tableaux)
String (chaînes de caractères)
A suivre...

JavaScript, objets "core"

Cette page décrit les principales possibilités des classes les plus utilisées du coeur (core) de JavaScript. Ce n'est donc pas encore le DOM HTML.

Une description exhaustive sera trouvée sur le site de la fondation Mozilla :
https://developer.mozilla.org/fr/JavaScript/R%C3%A9f%C3%A9rence_JavaScript
(actuellement, août 2011, cette page est en révision et la plupart des articles sont indisponibles).

Ou sur SelfHTML
http://fr.selfhtml.org/index.htm
au chapitre "JavaScript/DOM" -> "Référence objet"

Math (mathématiques)

Il s'agit d'une "classe" un peu particulière car on n'instancie pas d'objets. Il suffit de préfixer ses propriétés et méthodes de "Math.". On le verra dans quelques exemples.

Propriétés

Toutes les propriétés donnent des constantes mathématiques.

E base des logarithmes naturels : e, environ 2.718.
LN2 logarithme naturel de 2.
LN10 logarithme naturel de 10.
LOG2E logarithme en base 2 de e.
LOG10E logarithme décimal de e.
PI rapport de la circonférence au diamètre du cercle, environ 3.1416
SQRT1_2 racine carrée de 0,5, environ 0.707
SQRT2 racine carrée de 2, environ 1.414

Exemple, surface du cercle de rayon "rayon" :

surface= rayon * rayon * Math.PI;

Méthodes

Trigonométriques

Toutes les fonctions trigonométriques considèrent les angles en radians.

On trouve les fonctions directes : sin(a), cos(a), tan(a).

Et les réciproques : asin(v), acos(v),atan(v) et atan2(y, x).
Pour les deux premières, v doit être dans l'intervalle [-1, 1].

La dernière "atan2(y, x)"  renvoie l'arc-tangente du quotient de y par x. elle est intéressante si x vaut 0 et, aussi, pour donner un résultat dans l'intervalle [-PI, +PI] (360°). 

Puissances, logarithme et racine

exp(x); renvoie e à la puissance x.
pow(b, p); renvoie b à la puissance p,
log(x); renvoie le logarithme naturel de x (qui doit être strictement positif),
sqrt(x); renvoie la racine carrée de x.

Arrondis et entiers

Ces fonctions renvoient un nombre entier.

floor(v); l'entier immédiatement inférieur ou égal à v.
round(v); l'arrondi de v.
ceil(v); l'entier immédiatement supérieur ou égal à v.

Et encore....

abs(v); renvoie la valeur absolue de v.
min(v1, v2, v3...); renvoie la valeur du plus petit de ses paramètres.
max(v1, v2, v3...); renvoie la valeur du plus grand de ses paramètres.
random(); renvoie un nombre pseudo aléatoire compris entre 0 (inclus) et 1 (exclus) soit l'intervalle [0, 1[.

Deux exemples :

a=Math.round(x*100)/100; //Pour arrondir à la deuxième décimale.
n=Math.floor(12*Math.random()); //Aléatoire dans l'intervalle [0, 12[.

Date (date et heure)

Ce type nécessite une instanciation (déclaration avec initialisation). Il en existe quatre.

d= new Date();
d contient la date d'aujourd'hui et l'heure de maintenant.

d= new Date(ms);
d contient la date correspondant à 'ms' millisecondes écoulées depuis le 1 janvier 1970 à 0h.

d= new Date(chaine_date_eng);
d contient la date définie par le paramètre texte (mois abrégé anglais)  tels que :
"Feb 14, 2010" pour le 14 février 2010 à 0h ou
"21 Jun 2005 17:30:00 GMT-0100", le 25 juin 2005 à 17h30 avec décalage horaire de moins une heure au méridien de Greenwich.

d= new Date(année, mois, jour , heure, min, sec, ms);
d contient la date indiquée par les paramètres numériques. 'ms' peut être omis, l'ensemble " heure, min, sec, ms" peut être omis,. Dans ces cas ils seront considérés valoir 0.
Attention pour l'année utilisez de préférence 4 chiffres, les mois sont numérotés à partir de 0 (0=janvier, 11=décembre).

L'objet Date ne dispose pas de propriétés. En revanche, il a un grand nombre de méthodes, en voici quelques unes.

Quelques méthodes

Obtenir les informations de date.

Voici un exemple :

d= new Date();
alert(d.getDate()+'-'+d.getMonth()+'-'+d.getFullYear());
alert(d.getHours()+':'+ d.getMinutes()+':'+ d.getSeconds()
    +'.'+ d. getMilliseconds());

La première ligne 'alert()' donne les informations numériques sur la date actuelle, les mois sont décalés de 1 (0 pour janvier).
La seconde les informations horaires.

Il existe aussi une méthode 'getDay()' qui renvoie le numéro du jour de la semaine avec 0 pour dimanche et 6 pour samedi.

Fixer des informations de date

On utilise les mêmes en changeant le 'get' par 'set'. Mais setDay() n'existe évidement pas.

Il existe aussi les méthodes 'getYear()' et 'setYear()' qui traitent l'année sur deux chiffres, elles sont à éviter depuis l'an 2000.

Opérations sur les dates

Les objets dates sont des nombres (millisecondes) on peut les traiter comme tels.

Par exemple, nombre de jours depuis le 10 mars 2010 :

d0= new Date("20 Mar 2010");
d1= new Date();
nj= Math.floor( (d1 - d0) / (24*3600000) );

Array (tableaux)

Ce type nécessite une instanciation (déclaration avec initialisation). Il en existe trois.

table= new Array();
Tableau non initialisé de taille indéterminée.

table= new Array(12);
Tableau de 12 éléments : indices de 0 à 11.

table= new Array(12785, "Dupont", "Jean"); ou
table = [14956, "Dupont", "Jean"];
tableau de trois éléments d'indices 0, 1 et 2.

Il est toujours possible quelle que soit la forme de déclaration d'augmenter la taille d'un tableau en fixant un de ses éléments :
table[19]= 1789;
Les éléments éventuellement manquants sont à 'undefined'.

De plus et quelle que soit la forme de déclaration, on peut construire par initialisation des tableaux associatifs (dont les indices sont textuels).
table['second']= 12;

Une alternative conseillée aux tableaux associatifs est la création d'objets. Cela n'est pas abordé ici.

Enfin, le contenu d'une case de tableau peut être un tableau, on y accède alors par deux indices :

elt= new Array("jean", "Dupont");
tab= new Array(elt);
alert(tab[0][1]); //Affiche 'Dupont'
 
Certaines méthodes d'objet renvoient des tableaux c'est aussi une façon (indirecte) d'en créer. Nous en verrons des exemples dans la page sur le DOM HTML

Propriété

Une seule propriété : length qui renvoie le nombre d'éléments du tableau.
tab= new Array();
tab[10]= 2010;
alert(tab.length); //Evidement '11' (ne pas oublier l'indice 0).

Méthodes

Insertions

Mis à part l'insertion directe d'un élément à un indice donné que l'on a vu :
table[19]= 1789;
deux méthodes sont disponibles :

unshift(e1  ...); insére l'élément 'e1', éventuellement les paramètres suivants, en début du tableau, les indices des autres sont augmentés en conséquence comme la taille du tableau.

push(e1 ...); insére l'élément 'e1', éventuellement les paramètres suivants, en fin du tableau,  la taille du tableau est augmentée en conséquence.

Suppressions

On a les symétriques :

shift(); retire le premier élément du tableau, les indices des autres sont diminués de 1 comme la taille du tableau. Renvoie l'élément retiré.

pop(); retire le dernier élément du tableau,  la taille du tableau est diminuée de 1. Renvoie l'élément retiré.

Modifications d'ordre

reverse(); inverse l'ordre des éléments du tableau. Le premier devient le dernier, vice-versa, etc.

sort(); classe (trie) alphabétiquement les éléments du tableau.

sort(fct); classe (trie) selon la fonction 'fct' les éléments du tableau, utile pour les nombres. La fonction 'fct' à définir doit accepter deux paramètres et renvoyer un nombre positif si le premier est plus grand que le second, négatif si le premier est plus petit que le second.
Un exemple sera certainement plus clair :

function tri(n, m) {
    return n-m;
}

valeurs = new Array(147, 15, 16, 152, 15);

valeurs.sort();
for (i in valeurs)
    document.write(valeurs[i]+" ");
//Affiche : 147 15 15 152 16 (alphabétique)

document.writeln();

valeurs.sort(tri);
for (i in valeurs)
    document.write(valeurs[i]+" ");
//Affiche : 15 15 16 147 152 (numérique)

Remplacement d'éléments

splice(idx, nbr, e1, ...); remplace à partir de l'indice 'idx", 'nbr' éléments à partir du paramètre 'e1' et suivants. En cas de débordement du tableau,  augmente la taille du tableau.

Génération de tableaux

slice(deb, fin); renvoie un tableau composé des éléments d'indice 'deb' à 'fin"-1 du tableau d'origine. 'fin' peut être une valeur négative auquel cas il indique un indice en partant de la fin du tableau (0 étant le dernier élément)..
Exemple :

valeurs = new Array(147, 15, 16, 152, 15);

tab= valeurs.slice(1, 3);
for (i in tab)
    document.write(tab[i]+" ");
document.writeln();
//Affiche 15 16

tab= valeurs.slice(1, -1);
for (i in tab)
    document.write(tab[i]+" ");
//Affiche 15 16 152

concat(tab); renvoie le tableau objet de la méthode augmenté des éléments du tableau 'tab'.
Exemple :

valeurs = new Array('a', 'b');

tab= valeurs.concat(new Array('C', 'D'));
//tab contient 'a', 'b', 'C', 'D'

 Génération de chaîne

join(delim); Crée une chaîne de caractères à partir des éléments du tableau, chacun sera séparé du suivant par la chaîne 'delim'.

String (chaînes de caractères)

Ce type nécessite une instanciation (déclaration avec initialisation). Il en existe deux.

chaine= new String();
Crée une chaîne de caractères vide.

chaine= new String(texte);
Crée une chaîne de caractères identique au paramètre  'texte'.

En pratique on utilise rarement ces instanciations car on préfère les raccourcis :

chaine= "";
Crée une chaîne de caractères vide.

chaine= "Bonjour";
Crée une chaîne de caractères contenant "Bonjour";.

(On peut utiliser indifféremment les guillemets ou les apostrophes).

Propriété

Une seule propriété : length qui renvoie le nombre de caractères de la chaîne.

Méthodes

Il y en a beaucoup, voici les plus utiles.

Accès au caractère composant

charAt(rang); renvoie le caractère de rang 'rang'. (Le premier caractère de la chaîne est au rang 0).

Recherche

indexOf(chaine); renvoie le rang de la première occurence de la chaîne 'chaine'. Renvoie -1 si non trouvé.

lastIndexOf(chaine); renvoie le rang de la dernière occurence de la chaîne 'chaine'. Renvoie -1 si non trouvé.

Génération de chaînes

concat(chaine); renvoie la chaîne objet de la méthode à laquelle est ajouté 'chaine'. 
a= b.concat(c) est équivalent à a= b + c;

substr(deb, nbr); renvoie la sous-chaîne à partir du rang 'deb' et sur 'nbr" caractères.

substring(deb, fin); renvoie la sous-chaîne à partir du rang 'deb' et jusqu'au rang 'fin'-1.

Extraction vers tableau

split(delim); partage la chaîne en sous-chaînes chaque fois que la séquence de caractères 'delim' est trouvée. Renvoie le tableau de ces sous-chaînes.

A suivre...

Mais le JavaScript est surtout utilisé dans les pages HTML où il intervient sur les éléments de la page. Il nous reste à découvrir l'interface avec l'HTML défini par le DOM (Document Object Model).

DOM, les bases