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
Page mise à jour le : 12-08-2015
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 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 é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.
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.
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 :
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.
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 :
Et le fichier "message" :
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).
Il est possible d'intégrer directement du JavaScript dans certains attributs (d'action) d'éléments HTML, par exemple pour un lien :
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.
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.
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.
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 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.
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 :
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.
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.
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
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'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.
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.
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 données que peut traiter JavaScript sont de plusieurs types :
Il s'agit des nombres, ils peuvent être entiers ou à virgule flottante (décimaux). Un nombre négatif est préfixé du signe '-'.
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.
Ils ne disposent que de deux valeurs : vrai ou faux, notées respectivement true ou false.
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' ".
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.
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' ".
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.
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' ".
Il s'agit d'une constante associée à tous les types, elle indique l'absence de valeur.
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 .
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).
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.
Cet objet (non modifiable) est surtout utilisé en liaison avec le DOM pour dénoter l'élément HTML qui le contient.
Au passage de la souris sur "Paragraphe sensible", le paragraphe prendra la couleur rouge. Ici 'this' est l'élément HTML "p".
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 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 {..).
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 :
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.
Plus rarement utilisée que la précédente elle évite les imbrications de "if", "elseif" pour les tests d'égalité.
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".
Il y en a plusieurs, pour différents usages commençons par la plus simple
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 :
"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.
Assez rarement utilisée, cette boucle est proche de "while", voici le même exemple :
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.
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 :
C'est rigoureusement équivalent à l'exemple sur l'instruction"while" (et non pas "do-while").
Cette instruction est adaptée au parcours des tableaux, notamment associatifs
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".
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.
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.
Autre exemple : insérer dans la page HTML un passage de texte encadré avec un fond.
Cela produira :
Cet animal est une : souris verte
Les fonctions peuvent utiliser et modifier les variables globales du script.
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".
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.
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"