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

Présentation
Intégration dans la page
Structure de base du langage
Les types et variables
Les opérateurs
Les structures de contrôle
Les déclarations de fonctions
A suivre...

Le langage Javascript

Présentation

Le JavaScript est un langage de programmation.

Cela signifie qu'il dispose :

Le JavaScript n'a que peu de rapport avec JAVA qui est un autre langage de programmation.

Le JavaScript est un langage interprété. Cela signifie qu'une fois les instructions écrites, le programme peut être lancé. Il n'y a pas contrairement à d'autres langages (C, Java...) d'opération de traduction en langage machine à faire (compilation, édition des liens).
Les programmes interprétés sont nommés "scripts".

Le JavaScript est presque toujours utilisé à l'intérieur de pages HTML afin de produire des effets "dynamiques" : réactions aux clics de souris, animations.

Les instructions JavaScript des pages sont exécutées par le navigateur de l'utilisateur. Cela a deux conséquences importantes.

Pour la petite histoire, JavaScript à été développé pour le navigateur de la société Netscape. Ecma International (European association for standardizing information and communication systems) a normalisé ce langage en 1997 sous le nom de ECMAScript. La version la plus "courante" est JavaScript 1.5 basé sur les spécifications ECMA-262 3°édition. Mais la version la plus récente est JavaScript 2.0 basé sur les spécifications ECMA-262 5°édition de décembre 2009.

Pour éviter toute confusion, il faut distinguer le langage JavaScript du modèle de document HTML (DOM).

Habituellement, on utilise le JavaScript pour gérer les éléments HTML et pour cela on utilise les fonctionnalités du DOM HTML.

Saufs exceptions pour exemples, cette page ne décrit que le JavaScript, le DOM sera présenté dans une autre page de ce site.

Intégration du JavaScript dans la page HTML

Les passages en JavaScript peuvent être placés n'importe où dans la page, de préférences là où ils sont utiles. Cependant il faut prendre en compte deux aspects.

Les instructions JavaScript qui utilisent des éléments HTML (par le DOM) doivent être placées afin que leur exécution ne se produise que lorsque ces éléments ont été créés par le navigateur. Celui-ci "exécute" les instructions HTML du haut en bas de la page.

Souvent, pour s'assurer que tous les éléments HTML sont bien chargés, on utilise l'attribut 'onload' de l'élément 'body' pour appeler une fonction JavaScript (d'intitialisation) qui utilise les éléments HTML de la page.
Cet attribut 'onload' sera vu au chapitre traitrant des événements dans la page "JavaScript, DOM, les bases".

La tradition veut que les autres instructions, en particulier les définitions de fonctions soient placées dans l'en-tête (<head>) de la page.

JavaScript "en ligne"

On peut écrire du code JavaScript directement dans la page en la plaçant dans l'élément "script" donc entre les balises :
<script type="text/javascript">
et </script>

On note que la balise d'ouverture contient un attribut indiquant le langage utilisé.

Voici un exemple de page complète :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="fr">
<head>
    <title>Test</title>
</head>
<body>
    <script type="text/javascript">
    <!--
     alert("Bonjour");
    //-->
    </script>
</body>
</html>

On remarque les lignes "<!--" et "//-->" qui évitent aux navigateurs ne gérant pas le JavaScript d'afficher le contenu du passage [ alert("Bonjour"); ].

Dans ce script, une seule instruction est utilisée "alert", elle ouvre une petite fenêtre avec le message "Bonjour" et le bouton "OK" pour la refermer. En fait "alert()" est une fonction du DOM.

Version ECMAScript
Voici la même application en ECMAScript, Les changements sont en gras.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="fr">
<head>
    <title>Test</title>
</head>
<body>
    <script type="text/ecmascript">
    <!--
    //<![CDATA[
     alert("Bonjour");
    //]]>
    //-->
    </script>
</body>
</html>

JavaScript dans un fichier séparé

Il est possible de mettre le code JavaScript dans un fichier séparé, cela est très utile si des fonctions JavaScript sont appelées depuis différentes pages du site.

La page précédente devient :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="fr">
<head>
    <title>Test</title>
</head>
<body>
    <script type="text/javascript" src="message.js"> </script>
</body>
</html>

Et le fichier "message" :

alert("Hello monde!");

Elément HTML "noscript"

A destination des utilisateurs qui interdisent l'exécution du JavaScript.

<noscript>

Votre navigateur ne peut pas exécuter le JavaScript. Vous devriez le configurer pour qu'il le fasse.

</noscript>

Dans ces conditions le code HTML entre les balises <noscript> et  </noscript> est interprété par le navigateur.

Vous pouvez essayer sur ce site, vous verrez ce qui se passe (notamment en haut de page).

JavaScript dans les attributs d'éléments HTML

Il est possible d'intégrer directement du JavaScript dans certains attributs (d'action) d'éléments HTML, par exemple pour un lien :

<A href="Javascript:alert('Bonjour');">Cliquez</A>

Dans la page "Cliquez" est un lien hypertexte, en l'activant l'utilisateur va déclencher la fonction "alert()" qui affichera "Bonjour" dans une petite fenêtre.
Remarquez l'utilisation imbriquée des guillemets et apostrophes.

Cette utilisation est délicate car si le navigateur n'accepte pas le JavaScript, le lien sera bien affiché mais il ne produira rien.

Evénements

Les évènements sont produits par le navigateur soit d'une façon "interne" : fin du chargement de la page par exemple, soit externe par action de l'utilisateur tel un clic de souris.

Il existe plusieurs façons de gérer les évènements, la plus fréquente est d'utiliser dans un élément HTML un attribut du nom de l'évènement voulu et de l'associer directement à une instruction JavaScript.

<p onmouseover="alert('Ouh !')">Paragraphe sensible</p>

Lorsque l'utilisateur passera sa souris sur les mots "Paragraphe sensible" (événement "onmouseover"), la fonction alert() sera déclenchée.

Les événements seront décrits dans les pages consacrées au DOM de ce site.

Structure de base du langage

Ecriture

L'écriture se fait, comme pour l'HTML, avec un éditeur de texte usuel. Le langage en lui-même ne connait que les caractères latins non accentués (code ASCII standard).  Cependant dans les textes que l'on produit (chaînes de caractères) d'autres codes sont possibles (ISO, UTF, ...).

ATTENTION, le JavaScript fait la distinction entre majuscules et minuscules.

Les caractères d'espacement : saut de ligne, tabulateur, espace, peuvent être librement utilisés pour la mise en page. Ils n'ont pas d'incidence sur le déroulement du programme.

Pour l'écriture du script, il est préférable d'utiliser un éditeur de texte spécialisé. Certains de ces logiciels, libres et gratuits, analysent le texte en temps réel afin de détecter les erreurs de syntaxe éventuelles, complètent automatiquement le code (utile pour les longs noms) sans risque d'erreur et contiennent la documentation du langage intégrée.

En cas d'erreur

En cas d'erreur de syntaxe dans le code JavaScript, il ne se passe pas grand chose de visible si ce n'est que ce que l'on a écrit ne fonctionne pas. Toutefois Internet Explorer affiche un petit message dans la ligne d'état en bas à gauche.

Pour obtenir des informations plus précises sur les erreurs durant la mise au point, il est préférable d'utiliser Mozilla Firefox et d'ouvrir la "Console d'erreur" (menu "Outils" de Firefox), elle donnera beaucoup d'informations utiles sur les erreurs éventuelles de la page.
Voir : https://developer.mozilla.org/fr/Console_d%27erreurs

Le module complémentaire de Firefox : "Firebug" est aussi très intéressant pour la mise au point des scripts.

Commentaires JavaScript

Ils sont très utiles pour documenter le programme ou pour empêcher provisoirement l'exécution d'une de ses parties.

Il y a deux façons de noter un commentaire :


alert ("Bonjour"); // Il est 10h

alert ("Bonne nuit)"; /* Du soir...
... au jour */

Instructions

Le code JavaScript est composé d'instructions, chaque instruction doit être terminée par le caractère "point-virgule" : ';'.

Il existe plusieurs catégories d'instructions.

Les déclarations

Ces instructions indiquent au navigateur que certains éléments existent. Car, avant d'être utilisés, il est souvent utile qu'il en connaisse l'existence et la structure.

Ainsi certaines variables et fonctions doivent être déclarées avant d'être utilisées (les concepts de variables et de fonctions seront éclaircis plus loin).

Très souvent, on trouve dans l'en-tête de la page un script contenant tout un groupe de déclarations.

Programmation objet

JavaScript est un langage orienté objets, bien que nous utiliserons certaines particularités de la programmation objet. Il n'est pas de notre propos ici de voir la construction d'objets JavaScript


Les appels de fonction et méthodes

Ce sont des instructions qui réalisent une action. Il en existe un grand nombre qui sont prédéfinies dans le langage et dans le DOM et d'autres que l'on peut créer soi-même par une déclaration.

Une fonction possède un nom (généralement en minuscules).

Beaucoup de "fonctions" sont liées à un "objet" du langage ("core") ou du DOM. On les appelle "méthodes" Dans ce cas,  le nom est préfixé par le celui de l'objet suivi du point '.'.

Pour appeler (exécuter) une fonction/méthode on écrit son nom suivi de parenthèses. Celles-ci peuvent contenir des informations qui seront transmises à la fonction : paramètres. Une fonction renvoie souvent (pas toujours) une valeur.

Certaines méthodes affectent l'objet qui les préfixe.

Voici quelques exemples de fonctions/méthodes prédéfinies.

L'écriture des noms de fonctions et méthodes intégrées dans le langage (core et DOM) suit une règle simple.

Les affectations

L'instruction d'affectation simple donne une valeur à une variable.

L'affectation combinée modifie la valeur d'une variable.

En fait, au sens strict, il s'agit d'opérateurs.

Les instructions de contrôle d'exécution

ou "structures de contrôle".

Ces instructions modifient le déroulement séquentiel du programme selon une condition.

Certaines permettent l'exécution d'une partie ou d'une autre du script en fonction du contexte (valeur d'une variable par exemple).

D'autres sont prévues pour un déroulement répétitif d'une section jusqu'à la réalisation d'une condition.

Elles seront détailles plus bas dans cette page.

Blocs d'instructions

Lors d'utilisation d'une structure de contrôle, il est souvent nécessaire de réaliser, selon la condition, une séquence de plusieurs instructions. Afin que cette séquence ne soit vue par la structure que comme une seule instruction, on l'entoure d'accolades.

{instruction1; instruction2; ....}

Les types de données et les objets

Types et constantes

Les données que peut traiter JavaScript sont de plusieurs types :

Numérique

Il s'agit des nombres, ils peuvent être entiers ou à virgule flottante (décimaux). Un nombre négatif est préfixé du signe '-'.

On peut noter un nombre entier en base 8 (octal) en le préfixant par '0' : 014  vaut 12 en décimal. En base 16 (hexadécimal) en le préfixant par '0x' : 0x1A vaut 26 en décimal. Pour l'hexadécimal les caractères de A à F ainsi que le x peuvent être en majuscules ou minuscules.

Les nombres "flottants" utilisent le point '.' comme séparateur des parties entière / décimale. Le caractère 'E" (majuscule ou minuscule) indique la puissance de 10.

1.2E3 vaut 1200, 45e-4 vaut 0.0045 .

La conversion entre entier et flottant est généralement implicite.

Booléens

Ils ne disposent que de deux valeurs : vrai ou faux, notées respectivement true ou false.

Caractères et chaînes de caractères

Il s'agit de texte. On le note entre guillemets ou apostrophes.

La barre oblique inverse (anti-slash) est utilisée pour noter les caractères spéciaux, en voici quelques-uns.

L'apostrophe : \'
Le guillemet : \"
L'anti_slash : \\
Le saut de ligne : \n
Le retour en début de ligne : \r
Le caractère de code hexadécimal AA : \xAA

Les propriétés et méthodes de ce type d'objet seront décrites à la page "JavaScript, objets 'core' ".

Les tableaux

Il s'agit d'une structure d'ensemble ordonné de valeurs. A chaque valeur est associée une clef qui permet d'y accéder. Ces clefs peuvent être textuelles ou numériques (indice ou index).

Comme tous les types de JavaScript, il s'agit d'un type d'objet. Mais la création d'un tableau nécessite une information concernant sa structure. Cela se fait par l'utilisation de l'opérateur "new" au moment de la création de l'objet.

Un tableau est défini avec le mot 'Array' suivi de parenthèses indiquant sa taille ou son contenu initial.  Si l'on ne sait pas encore quel sera son contenu, on utilise des parenthèses vides.

liste1= new Array(); //On ne connait encore rien du tableau
liste2= new Array(15); //Prévu pour contenir 15 éléments
liste3= new Array('jean', 'pierre', 'paul'); //3 éléments

Le dernier cas présente un tableau initialisé à trois éléments d'indices 0, 1 et 2.

Les tableaux associatifs, ceux dont les indices sont des textes (clefs), sont généralement définis sans information (comme "liste1").

Les propriétés et méthodes de ce type d'objet seront décrites à la page "JavaScript, objets 'core' ".

Les dates et heures

C'est un type prédéfini du JavaScript. Créer un objet de ce type impose d'utiliser l'opérateur "new". Il y a plusieurs façons de créer un objet de type date, en voici quelques unes.

maintenant= new Date(); //Date et heure actuelle
printemps= new Date(2010,2,20,17,32,0); // 20 mars 2010 à 17h32m0s
an2000= new Date(2000, 0, 1);

Remarquons que les mois sont numérotés à partir de 0 : on a 2 pour mars.

Les propriétés et méthodes de ce type d'objet seront décrites à la page "JavaScript, objets 'core' ".

null

Il s'agit d'une constante associée à tous les types, elle indique l'absence de valeur.

Les variables et objets

Une variable contient une information (une valeur) de l'un des types vu plus haut. Comme son nom le laisse penser, le contenu d'une variable peut être modifié.

Les variables sont des instanciations d'objets (création). Quelques types d'objets comme Array , Date et ceux éventuellement définis par le concepteur nécessitent l'opérateur "new" pour la création d'un objet de ce type.

Pour accéder à un élément d'une variable de type tableau, on suffixe la variable de crochets dans lesquels est indiqué la clef/indice de cet élément.

Exemple, pour les tableaux vus plus haut .

a= liste2[3]; //Quatrième élément de liste 2
liste1['nom']= 'Dupont'; //Affectation dans un tableau associatif

Propriétés d'objets

Une propriété est une composante de l'objet. Elle a une valeur que l'on peut obtenir et, parfois, modifier.

Par exemple :
Math.PI donne le rapport entre la circonférence et le diamètre d'un cercle, proche de 3.14.

document.bgColor= '#FFCCCC'; fixe la couleur de fond de la fenêtre ("document" est un objet du DOM).

Méthodes d'objets

Une méthode est une fonction associée à l'objet, son nom est suivi de parenthèses. Elle peut modifier l'objet ou renvoyer une valeur.

Par exemple : 

var prenoms = new Array("Marie", "Jean", "Zoé", "Albert");
prenoms.sort();

Le tableau prénom contiendra : "Albert", "Jean", "Marie", "Zoé".

Et 'Math.random()' renverra un nombre pseudo-aléatoire compris entre 0 et 1.

this

Cet objet (non modifiable) est surtout utilisé en liaison avec le DOM pour dénoter l'élément HTML qui le contient.

<p onmouseover="this.style.color= '#FF0000'">
    Paragraphe sensible
</p>

Au passage de la souris sur "Paragraphe sensible", le paragraphe prendra la couleur rouge. Ici 'this' est l'élément HTML "p".

Les opérateurs

Comme on peut s'y attendre, ils réalisent des opérations, mais pas uniquement arithmétiques. Dans tous les cas, ils renvoient une valeur.

Les opérateurs arithmétiques, sur les bits et d'incrémentation / décrémentation renvoient un nombre, les opérateurs de comparaison et logiques donnent un booléen, l'opérateur de concaténation renvoie une chaîne de caractères et l'opérateur d'assignation peut produire tout type de valeur.

Il n'est pas utile de donner ici la liste fort longue des opérateurs et de leur rôle car cela est très bien expliqué sur cette page :
http://fr.selfhtml.org/javascript/langage/operateurs.htm

Les structures de contrôle

Les structures de contrôle d'exécution affectent le déroulement du script. Il y en a de deux sortes  :

Les instructions de contrôle permettent la création de ces structures, en voici une présentation par l'exemple.

Remarquez l'utilisation des parenthèses et, parfois, l'utilisation de blocs d'instruction {..).

Structures conditionnelles

Instruction "if"

if (max < val)
    max= val; //On est sûr que max sera le plus grand

if (test) //test est un booléen
    alert ("c'est vrai");
else
    alert ("c'est faux");

if (a > b) alert ("Le plus grand est "+a);
else if (a < b) alert ("le plus grand est "+b);
    else alert ("Ces deux valeurs sont égales à "+a);

Notez, dans le dernier exemple l'imbrication de deux tests.

Si on doit exécuter conditionnellement plusieurs instructions, il faut les grouper dans un bloc. Voici un exemple de comptage décimal  :

if (unite == 10) {
    dizaine++;
    unité = 0;
    if (dizaine == 10 {
        centaine++;
        dizaine = 0;
    } // test dizaine
} // test unité

Les accolades sont nécessaires pour que le JavaScript séquence bien les instructions.
Et l'indentation (décalage des lignes) n'est là que pour faciliter la lecture.

Instruction "switch"

Plus rarement utilisée que la précédente elle évite les imbrications de "if", "elseif" pour les tests d'égalité.

switch (num_mois) {// Avec 1 pour janvier
    case 2:
        jours= bissextile ? 29 : 28;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        jours= 30;
        break;
    default:
        jours= 31;
}

L'instruction "break" sert à sortir du "switch". Si on l'avait oubliée, tous les mois auraient 31 jours !

Notez (dans "case 2") l'utilisation de l'opérateur "? :" qui évite une structure "if".

Structures de boucle

Il y en a plusieurs, pour différents usages commençons par la plus simple

Instruction "while"

Teste une condition, si elle est vraie exécute l'instruction (ou le bloc d'instructions) de la boucle et réitère le processus. Lorsque la condition est fausse, passe à l'instruction qui suit celle de la boucle.

Si la condition est fausse du début, l'instruction de boucle n'est pas exécutée. Naturellement, si on veut sortir de la boucle, il faut que cette condition devienne fausse.

Exemple, affiche les multiples de 7 inférieurs à 100 :

nombre= 0;
while (nombre < 100) {
    document.write(nombre+" ");
    nombre += 7;
}

"document.write(param)" affiche la valeur de son paramètre dans la fenêtre du navigateur.

Si la condition de boucle ne devient jamais fausse, le script ne se terminera pas.

Instruction "do-while"

Assez rarement utilisée, cette boucle est proche de "while", voici le même exemple :

nombre= 0;
do {
    document.write(nombre+" ");
    nombre += 7;
while (nombre < 100);

Mais ici, comme le test est fait à la fin, on est assuré que l'instruction de boucle est exécutée au moins une fois.

Instruction "for"

Cette instruction, très fréquente, est un raccourci de la boucle "while" car elle englobe, dans ses parenthèses, l'initialisation, la condition et une instruction d'itération.

Voici encore le même exemple :

for(nombre= 0; nombre < 100; nombre += 7)
    document.write(nombre+" ");

C'est rigoureusement équivalent à l'exemple sur l'instruction"while" (et non pas "do-while").

Instruction "for ... in"

Cette instruction est adaptée au parcours des tableaux, notamment associatifs

<pre>
    <script type="text/ecmascript">
    <!--
        mois= new Array(12);
        mois['janvier']= 31;
        mois['février']= 28;
        mois['mars']= 31;

        for (m in mois)
            document.writeln(m+" à "+mois[m]+" jours.");


//-->
    </script>
</pre>


On remarque, la méthode "writeln" de l'objet document qui affiche avec saut de ligne, à condition que l'on se trouve dans l'élément HTML "pre".

Ruptures de séquence

On a déjà vu l'instruction "break" pour sortir de "switch", cette instruction peut aussi être utilisée dans une boucle pour la quitter prématurément.

L'instruction "continue" est utilisée dans les boucles pour ignorer la suite de l'instruction bloc de boucle en relançant un tour : soit revenir au test.

Les déclarations de fonctions

La bibliothèque interne du JavaScript dispose de nombreuses fonctions mais parfois il est utile d'en créer. Souvent, il a été dit que créer une fonction était intéressant pour ne pas avoir à répéter des parties de code qui devaient être exécutées à plusieurs endroits du script, mais la création de fonction a d'autres avantages.

Habituellement les fonctions sont déclarées dans la section d'en-tête (head) de la page voire dans un fichier séparé.

Déclarer une fonction est assez simple : on écrit le nom que l'on veut donner à la fonction suivi de parenthèses, puis entre accolades on écrit les instructions qui composent la fonction. Là on peut mettre tout ce qui est possible dans un script, y compris des déclarations.

Dans les parenthèses qui suivent le nom de la fonction, il est possible de mettre des noms de variables. Ces variables seront initialisées par les paramètres transmis lors de l'appel à la fonction et seront, bien sûr, utilisables par la fonction.

Si la fonction doit renvoyer une valeur, on indique dans le corps de la fonction, à l'endroit où son travail est terminé, l'instruction "return" suivi de l'expression de la valeur à renvoyer. Dans tous les cas, "return" termine l'exécution des instructions de la fonction. Si "return" n'est pas présente, la fonction se termine à l'accolade la fermant.

Exemple : calculer la moyenne de deux nombres.

function moyenne(a, b) {
    return (a+b)/2;
}

//on teste...
alert(moyenne(12, 5));


Autre exemple : insérer dans la page HTML un passage de texte encadré avec un fond.

function encadre(msg) {
    document.write('<span style="border: 2px solid red; ');
    document.write('background-color: #FFDDFF;">');
    document.write(msg);
    document.write('</span>');
}
document.write("Cet animal est une ");
encadre('souris');
document.write(" verte");

Cela produira :

Cet animal est une : souris verte

Attention aux variables

Les fonctions peuvent utiliser et modifier les variables globales du script.

a= 3; b= 4; c= 5;

function calcul_etrange(a){
    b= a + c;
    document.write(a+" "+b);
}

calcul_etrange(b);
alert(a+" "+b);

Le premier affichage est celui fait par la fonction dans le document,
il donne : "4 9".
Le second donne les valeurs des variables globales au retour de la fonction soit : "3 9". On voit que "b" a été modifiée. C'est généralement à éviter dans les scripts car la maintenance sera difficile.

Alors si l'on veut qu'une variable locale à une fonction n'interfère pas avec une éventuelle variable globale de même nom, on préfixe sa déclaration par "var".

a= 3; b= 4; c= 5;

function calcul_etrange(a){
    var b= a + c;
    document.write(a+" "+b);
}

calcul_etrange(b);
alert(a+" "+b);

?>

Le premier affichage (de la fonction) est encore : "4 9".
Le second donne : "3 4" car la variable "b" de la fonction est distincte de la "b" globale qui est inchangée.

A suivre...

On peut trouver une documentation assez complète et en français à :
https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core

Sinon, commencer à approfondir les objets du coeur (core) de JavaScript.
JavaScript, objets "core"