Haut de page| Alain Barraud | Mémento informatique |
Array), les chaînes de caractères (String), etc. |
Bien que suffisamment complets, ces chapitres fournissent une liste non exhaustive des attributs / méthodes des objets abordés. |
Au fur et à mesure des pages, les codes JS seront testés "dans la page". Pour chaque code concerné, on trouvera ceci :
En plus, pour chaque test nº x :
- un autre test avec même nº x sur page html avec code script dans <head> autant que possible. Voir : appli.html
- un autre test avec même nº x sur page html avec code script dans fichier .js. Voir : appli_al.html
- http://www.commentcamarche.net/contents/javascript/jsintro.php3
- http://www.toutjavascript.com/savoir/savoir04.php3
- http://www.lecodejava.com/
- http://fr.hscripts.com/tutoriels/javascript/index.php
- http://www.flesko.com/annuaire/informatique/programmation/java-javascript.php
- http://www.siteduzero.com/tutoriel-2-70-javascript.html
- http://www.siteduzero.com/tutoriel-3-7930-presentation.html#ss_part_1
- http://fr.wikipedia.org/wiki/Javascript
- http://www.editeurjavascript.com/cours/
- http://javascript.developpez.com/cours/
- http://www.xul.fr/ecmascript/tutoriel/
- http://fr.selfhtml.org/javascript/intro.htm
- http://www.wikituto.org/index.php/Javascript:Fichiers_externes
-
CSS en JS
- http://batraciens.net/css-astuces/menu-css.htm
- http://www.css4design.com/blog/le-code-css-et-javascript-inline-saimal
- http://www.alsacreations.com/tuto/lire/562-bonnes-pratiques-javascript.html
- http://www.snoupix.com/encyclopedie_html-css.html dont menu déroulant en css sans js ici
- http://www.lehtml.com/js/even.htm
- http://membres.lycos.fr/ici/modemploi/javascript/cours-js/c-js1.htm
- http://fr.wikiversity.org/wiki/JavaScript/Premiers_pas
Bases
- http://www.creation-du-web.com/honolulu/cours-html-javascript-java5.html
- http://www.toutenligne.com/index.php?contenu=js_notion&menu=js
- http://forum.alsacreations.com/topic-5-20818-1.html
afficher date
- http://www.webelix.net/trucs_et_astuces-(JavaScript)_Afficher_date.html
- http://www.supportduweb.com/scripts_tutoriaux-code-source-9-faire-un-calendrier-en-javascript-avec-un-effet-de-transparence.html
- http://ireswww.in2p3.fr/ires/cours/cours.html
Cours JS
- http://pagesperso-orange.fr/philippe.medan/jvs/jsaccueil.htm#debut
- http://www.ac-creteil.fr/util/programmation/javascript/
- http://www.startjeux.com/
- http://www.scriptzone-fr.com/cours/javascript/cour0.htm
- http://www-ipst.u-strasbg.fr/pat/program/javascript/
- http://forum.alsacreations.com/topic.php?fid=5&tid=20818
-
JS par l'exemple
- http://developpementweb.online.fr/dev/JS/exemples.htm
- http://www.thelin.net/laurent/labo/js/
- http://www.jejavascript.net/rollov_3bis.php
fichier.pdf
- js_1.pdf
A revoir
- http://www.webinventif.fr/barre-de-navigation-fixe-depliable-et-transparente/
Le JavaScript est un langage de programmation (il est apparu en 1995).
C'est un langage orienté objet : quand on code en JavaScript, on se base sur des objets.
Sa principale utilisation est à l'intérieur des pages web. JavaScript est une extension du (x)HTML. Il permet de les rendre interactives.
Facile à mettre en œuvre, il suffit d'un navigateur et d'un éditeur de texte comme le Bloc-notes.
Possible même de faire de petites "applications" en DHTML (Dynamic HyperText Markup Langage). Ce sont des pages dont le contenu est modifié sans avoir à recharger la page.
En résumé :
Un script est, par opposition à un langage compilé, un langage qui s'interprète. L'interprète du JavaScript étant le navigateur du visiteur (le client).
L'intérêt des scripts est sans doute leur manière d'être utilisés : ils ne sont pas obligatoirement exécutés au chargement de la page. Ils sont lancés lorsqu'un événement spécifique se produit.
Fonctionnement
JavaSript n'est pas Java
- Le JavaScript est placé dans le code (x)HTML et fait partie intégrante du code source. Le navigateur lit et interprète ce code source, et exécute les scripts (ou les garde en mémoire pour les lancer plus tard, lorsqu'un événement particulier se produit).
- Le Java, quant à lui, est compilé pour former un programme.
Leur seul point commun, c'est d'être des langages orientés objet (comme le C++).
Rappel, commentaires en (x)HTML : <!--je suis un commentaire-->
En JS, il y a 2 manières d'écrire un commentaire :
C'est une petite fenêtre (une boîte) qui sert à communiquer (dialoguer) avec l'utilisateur (lui afficher ou lui demander quelque chose).
Exemple :
La boîte de dialogue
C'est du code JavaScript. Noter les apostrophes de part et d'autre du message qui doit lui-même ne pas en contenir.
Rappel de la structure d'une page xHTML (code minimal).
| Code : HTML |
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 3 <head> 4 <title>Titre de la page</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 <!-- en-tete du document --> 7 </head> 8 <body> 9 <!-- corps du document --> 10 </body> 11 </html> |
La première méthode consiste à écrire le code directement à l'intérieur de la balise qui va être concernée par le script.
Pour insérer le code dans une balise, une nouvelle propriété est nécessaire. Il s'agit du gestionnaire d'événements (en anglais : event handler).
Examinons un exemple.
Celà donne :
|
onclick doit être en minuscule ! Ceci est valable pour tous les gestionnaires d'événements. S'il y a une majuscule, la page est invalide ! |
Autre exemple d'un message en cliquant sur une image : 
Cas d'un lien :
Il est possible d'écrire du JavaScript directement à la place de l'adresse d'un lien, en le faisant précéder de javascript:
La syntaxe est la même. Les événements s'appliquent à la plupart des balises (sauf cas particuliers, relatifs à des balises précises).
En voici quelques uns :Gestionnaires d'événements de la balise <body>
Si le script est très long, on ne va pas le mettre dans le gestionnaire d'événements.
La seconde solution consiste à écrire le script entre deux balises spécifiques, <script> et </script>.
Il faut commencer par préciser au navigateur que notre script est du JavaScript.
Pour cela, on rajoute la propriété type="text/javascript", ce qui donne :
|
Attention : un vieux navigateur peut ne pas connaître le JS. Il va l'ignorer, mais tout le code sera considéré comme du texte et, il va être affiché sur la page. Il existe une solution. |
Pour faire ignorer ce texte à ce type de navigateur, on lui fait croire qu'il s'agit d'un commentaire en (x)HTML.
Un navigateur qui connaît le JavaScript, saura qu'il n'a plus affaire à du (x)HTML, et passera donc la balise du commentaire (<!--) sans en tenir compte.
Cependant, pour éviter qu'il soit déboussolé en rencontrant la balise de fin de commentaire (-->), on va lui dire, en JS, qu'il s'agit d'un commentaire, grâce à //.
Ce qui donne :
On peut mettre ces balises soit dans l'en-tête (<head> ... </head>), soit dans le corps (<body> ... </body>) de la page (x)HTML :
|
si on met un script pour indiquer la fin du chargement de celle-ci (donc, à la fin du corps), tant que la boîte de dialogue est ouverte, la page ne se charge pas. Le navigateur exécute le JS au fur et à mesure du chargement de la page et attend donc que le script soit terminé avant de charger la suite. |
Importer un fichier externe
Comme pour le CSS, on peut placer le code dans un fichier indépendant. On dit que le code est importé depuis un fichier externe. Ce fichier aura comme extension : .js.
On indique aux balises le nom et l'emplacement du fichier contenant le ou les scripts grâce à la propriété src.
|
Comme il n'y a plus de code entre les balises, la technique pour masquer le code aux anciens navigateurs n'a plus lieu d'être. |
Cela donne quelque chose comme :
Comme il n'y a rien entre les balises <script> et </script>, on peut faire de ces balises jumelles une seule et même balise qui sera <script/>.
Voici donc comment importer le fichier "script.js" :
Créer le fichier
Avec un éditeur de texte.
Une instruction est un "ordre" que l'on donne à l'ordinateur.
alert('Hello word'); par exemple, est donc une instruction. On ordonne au script de créer une boîte de dialogue.
Une grande partie de ce qu'on écrit en JS sont des instructions, mais pas tout.
Séparer des instructions
Quand on donne une instruction à l'ordinateur, il faut également lui dire où est la fin de cette instruction…
Pour cela, en JS, il y a deux solutions :
|
Il est recommandé d'utiliser le point-virgule, car dans de nombreux langages de programmation, il est obligatoire à la fin d'une instruction (de ce fait, le JS est une exception). |
Une fonction est une suite d'instructions ayant un rôle précis.
Reprenons l'exemple précédent :
Cette fonction affiche, lorsqu'on l'appelle (terme à retenir), une boîte de dialogue contenant le texte entre les apostrophes (ici : 'Hello world').
En JS, on a parmi beaucoup d'autres, la fonction alert( ).
Rôle des parenthèses
Ce qui est entre parenthèses est ce que pourrait appeler l'argument. L'argument est le texte à afficher. S'il y a plusieurs arguments, ils sont séparés par des virgules.
On doit obligatoirement mettre les parenthèses, même s'il n'y a aucun argument (elles seront alors vides).
|
Normalement, le nom de la fonction est alert. Employer le nom alert( ) est un abus de langage, mais cela permet de repérer facilement qu'on parle d'une fonction. |
De nouvelles fonctions
Il existe des fonctions déjà définies (terme à retenir) en JS, qu'on va donc pouvoir utiliser directement, comme notre fonction alert( ). Le navigateur va alors chercher la définition de cette fonction et l'exécuter, ce qui aura pour effet de faire apparaître le message.
Mais il est également possible de créer ses propres fonctions (voir plus loin).