Créé le 31 Mai 2008, par Anis Safine
Si vous avez lu le premier chapitre, vous savez maintenant plus ou moins ce qu'est le JavaScript et ce dont il est capable. Seulement ça manquait franchement d'action et rassurez-vous, on va corriger ça avec ce nouveau chapitre ! 
Nous allons y découvrir ce qui caractérise n'importe quel langage informatique : sa syntaxe... Un peu de vocabulaire en vue donc, et puis bien sûr, nos premières lignes de code en JavaScript !
Allez, en avant ! 
Remonter
1. Des outils
Avant de démarrer, nous allons répondre à cette grande question : avec quoi programme-t-on en JavaScript ?
Taper du code
Et bien c'est simple, on programme en JavaScript avec un éditeur de texte uniquement : le bloc-notes par exemple... Eh non, pas de dreamweaver, frontpage ou autres logiciels qui génèrent le code à votre place : il va falloir le taper entièrement vous même !
Pour tous ceux qui n'ont jamais utilisé d'éditeur de texte pour programmer, et les courageux qui programment avec le Bloc-Notes de Windows (ou un équivalent pour les autres systèmes d'exploitation), je vous conseille vivement d'adopter un éditeur de texte fait pour la programmation, comme Notepad++.
Un tel logiciel colorera votre code de façon à mieux le visualiser et prendre un vrai plaisir à programmer ! Allez pour les utilisateurs de windows, voici un lien direct pour télécharger l'installeur de notepad++.
Tester son code
Ca y est, vous avez tous vos éditeurs de texte ouverts ? Maintenant, il faut avoir de quoi tester nos futurs codes JavaScript ! Il va donc falloir utiliser un navigateur qui va lire le code et l'exécuter : Firefox, Safari, Internet Explorer... bref votre navigateur favori ! 
Une petite remarque cependant : peut-être vous rappelez-vous de ce que je disais concernant la portabilité du JavaScript ? Il existe certains codes qui ne sont pas interprétés correctement sur tous les navigateurs et il sera parfois nécessaire de vérifier leur portabilité. Cela ne sera pas vrai pour toute la première partie car le noyau Javascript est portable à 100%, mais autant prendre les bonnes habitudes dès maintenant !
Pour vérifier la portabilité de votre code et la garantir à 99%, testez le systématiquement sous Internet Explorer d'abord, et puis sous n'importe quel autre navigateur.
Corriger son code
Un dernier outil sympa pour les utilisateurs de Firefox : la console JavaScript contenu dans l'extension Web Developer (Cliquer ici pour l'installer) ! Lorsque vous programmerez en JavaScript, vous ferez parfois quelques erreurs et vous ne vous en rendrez compte qu'au moment fatidique du test ! La console JavaScript vous aidera à repérer ces erreurs et les comprendre plus facilement, en vous indiquant la ligne où se situe le problème ainsi que sa nature :
La barre WebDeveloper avec un avertissement
La console JavaScript avec le rapport d'erreur
Ne cherchez pas encore à comprendre les rapports d'erreurs, tout cela viendra en temps et en heure !
Pour les utilisateurs d'Internet Explorer, il existe une sorte d'équivalent moins complet qui apparaît dès qu'il y a une erreur (sauf si cela est désactivé dans les options) :
Le débogueur IE
Pour les autres navigateurs, désolé, mais je n'ai absolument aucune idée de ce qui est fournit pour aider les développeurs à corriger leur code. 
Remonter
2. Une histoire de syntaxe
Vous avez maintenant tous votre éditeur de texte ainsi que votre navigateur favori ouverts, avec éventuellement pour les utilisateurs de Firefox, l'extension Web Developer installée.
Je sais pas pour vous, mais je me sens d'humeur à faire un petit cours de vocabulaire. Allez, faites pas la tête, on s'approche à grand pas de notre première instruction JavaScript et ce serait dommage que vous ne compreniez pas la moitié de ce que je dis.
Tiens d'ailleurs, une instruction, qu'est-ce que c'est ? J'en parle depuis le premier chapitre mais je n'ai jamais expliqué ce que c'était.
Une instruction
L'ordinateur que vous utilisez au moment où vous lisez ces lignes est l'une des choses les plus stupides qui n'ai jamais existé au monde. Désolé d'insulter votre ami préféré, mais à part calculer ultra-rapidement, il ne sait rien faire de lui-même.
Il faut donc tout lui apprendre et par conséquent, communiquer avec lui : c'est à cela que servent les langages informatiques. Seulement, votre ordinateur, y a pas à dire, c'est vraiment un crétin : il est pas fichu de valider un formulaire de lui-même. 
Il faut donc tout lui expliquer :
- Récupère le pseudo tapé
- Si sa longueur est supérieur à 20 caractères, afficher une erreur
- Si le pseudo est déjà utilisé, afficher une erreur
- Récupère les 2 mots de passe tapés
- Si les 2 mots de passe ne sont pas identiques, afficher une erreur
...
Chaque petit tiret représente une instruction : c'est un ordre particulier donné à l'ordinateur et qu'il est capable de réaliser. Ainsi, pour construire un code JavaScript (on parle aussi de script JavaScript), on va assembler un grand nombre d'instructions pour faire faire quelque chose à l'ordinateur. Dans cet exemple, notre ensemble d'instructions sert à valider un formulaire d'inscription.
Vous allez me dire : oui mais comment on sait ce qu'il sait réaliser, et ce qu'il ne sait pas ? Et bien pas de souci à ce niveau, un ordinateur comprend tout ce qu'on lui dit tant que c'est fait avec un langage informatique.
Ce type de programmation, où on assemble des instructions est appelé programmation procédurale. Il existe une autre façon de programmer que nous n'étudierons en détail que plus tard, appelée Programmation Orientée Objet (ou POO). {mystère mystère}
Syntaxe
Je vous ai dit qu'une instruction était un ordre communiqué à un ordinateur, grâce à un langage qu'il comprend : le JavaScript par exemple. Comme pour un langage humain, les langages informatiques doivent respecter des règles de "grammaires" que l'on appelle plutôt syntaxe.
Des exemples de règles de syntaxe sont :
- on finit toujours une instruction par un point-virgule ";"
- on déclare toujours une variable en commençant par le mot-clé "var"
- on définit le contenu d'une fonction entre 2 accolades "{" et "}"
Vous n'êtes pas encore censés comprendre ces exemples mais l'essentiel est de comprendre qu'il existe des règles que l'on doit impérativement suivre lorsqu'on programme en JavaScript.
Pourquoi impérativement ? Parce que contrairement à nous, un ordinateur est incapable de comprendre concrètement ce qu'on lui demande et donc de corriger lui-même les erreurs de syntaxe. Nous allons apprendre ces règles tout au long du cours et il faudra les connaître par coeur.
Remonter
3. Notre première instruction
Ce fut long mais nous y sommes ! L'heure est historique ! Nous allons enfin écrire notre première instruction JavaScript !
Hello world !
La vérité c'est que je l'ai fait pour vous ! Copiez-collez ceci dans votre éditeur de texte :
Code javascript
<script type="text/javascript">
// Notre première instruction : elle affiche un texte à l'écran
document.write('Hello world !');
</script>
Enregistrez alors le fichier en l'appelant "instruction.html" ou quoi que ce soit que vous voulez d'autre, tant que le fichier est au format .html. Ensuite, ouvrez le fichier avec votre navigateur soit :
- depuis votre navigateur en cliquant sur "Fichier", puis "Ouvrir un fichier" et en sélectionnant votre fichier
- en double cliquant sur votre fichier (l'extension .html est normalement reconnue par l'ordinateur)
Petite remarque pour les utilisateurs d'Internet Explorer : il est possible qu'il refuse de lancer le JavaScript parce qu'il le considère comme dangereux ("Pour vous aider à protéger votre ordinateur, Internet Explorer a restreint l'éxecution des scripts ou des contrôles ActiveX de cette page web...).
Dans ce cas là, cliquez sur le message et faites "Autoriser le contenu bloqué" :
Autoriser le JavaScript sous IE
Ensuite, validez l'autorisation et tout devrait se dérouler sans soucis !
Si tout se passe normalement, vous devriez avoir un joli "Hello World !" qui s'affiche à l'écran :
Bon, je sais que c'est un grand moment d'émotion pour chacun d'entre vous, mais il va falloir se concentrer un peu et décortiquer tout ça !
Explications
La première chose à remarquer, c'est que nous avons créé une page HTML. Le deuxième chose à remarquer, c'est que cette page est tout à fait invalide : il n'y a même pas de balise body ou head qui sont pourtant le minimum.
Tout cela mérite quelques explications : je vous ai déjà dit dans le premier chapitre que le JavaScript est un langage qui est exécuté côté client et qui doit être inclut dans le code (x)HTML d'une page. D'où un fichier .html.
Ensuite, on aurait très bien pu faire notre instruction de la façon suivante :
Code html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Hello world !</title>
<script type="text/javascript">
// Notre première instruction : elle affiche un texte à l'écran
document.write('Hello world !');
</script>
</head>
<body>
</body>
</html>
Cette page est valide, mais avouez que ça fait beaucoup de code pour pas grand chose et que dans le cadre de ce cours, c'est se compliquer l'existence que de se forcer à faire une page valide. Donc exceptionnellement, dans le cadre de ce cours, on va se permettre de faire de l'invalide, juste histoire de s'entraîner.
Attention tout de même : vous ne pouvez vous permettre de faire des pages HTML invalides que pour vous entraîner dans le cadre de cette première partie du cours. Dans tous les autres cas, il faudra vous forcer à suivre mon deuxième exemple.. Mais nous y reviendrons : l'utilisation du JavaScript au sein d'une page (x)HTML valide est le sujet même de la deuxième partie !
Étudions maintenant ce code d'un peu plus près :
- on remarque d'abord les balises <script type="text/javascript"></script> qui annoncent que tout ce que l'on trouvera à l'intérieur est du JavaScript. Il faudra tout le temps les utiliser au cours de notre première partie et on les reverra un peu plus tard dans la troisième partie.
- La deuxième ligne contient ce l'on appelle un commentaire (que vous connaissez peut-être déjà puisque l'on peut écrire des commentaires en (x)HTML). En gros, un commentaire est une phrase écrite en langage humain et qui n'est pas exécutée par l'ordinateur.
En fait, pour l'ordinateur, le commentaire n'existe même pas et il ne voit que ça :
Code javascript
<script type="text/javascript">
document.write('Hello world !');
</script>
Mais mais... alors il sert à quoi ce fichu commentaire ?
Ici, je vous l'accorde, à rien du tout ! Mais lorsque vous ferez des codes JavaScript de 300 lignes (ça m'est déjà arrivé...), vous ne vous souviendrez peut-être plus trop de ce que vous vouliez faire à la ligne 215 ou 114. Vous serez alors heureux d'avoir un commentaire présent pour vous rafraichir la mémoire !
Niveau syntaxe, on démarre toujours un commentaire par deux slashs : "//". Tout ce qui suivra ne sera pas lu par l'ordinateur et sera considéré comme un commentaire, mais uniquement jusqu'à la fin de la ligne.
Par exemple, ceci n'est pas correct :
Code javascript
// Notre première instruction :
elle affiche un texte à l'écran
document.write('Hello world !');
Dans cet exemple, la deuxième ligne "elle affiche un texte à l'écran" n'est plus considérée comme un commentaire à cause du retour à la ligne. Du coup l'ordinateur ne comprend plus rien et le script plante !
Heureusement il existe une autre syntaxe qui permet d'étaler un commentaire sur plusieurs lignes :
Code javascript
/* Notre première instruction :
elle affiche un texte à l'écran */
document.write('Hello world !');
Pour faire un commentaire sur plusieurs lignes vous devez donc commencer votre commentaire par "/*" et le finir par "*/". Bien évidemment, vous pouvez utiliser cette syntaxe pour un commentaire qui tient sur une ligne !
Enfin, il reste une dernière ligne non étudiée et qui vaut son pesant de cacahuètes puisque c'est elle qui permet d'afficher le fameux "Hello world !" à l'écran. Pour être plus précis, il s'agit de la seule instruction de notre premier script JavaScript !
Il y a beaucoup de choses à tirer de cette instruction... La première chose à retenir, et que vous devez graver quelque part au fond de votre mémoire, c'est que l'on finit TOUJOURS une instruction par un point-virgule ";" !
Si vous n'utilisez pas de points-virgule, l'ordinateur sera incapable de distinguer les différentes instructions et donc de les comprendre ! Oubliez un seul point-virgule, et votre script ne fonctionnera pas, à coup sûr !
En fait, c'est l'une des erreurs les plus courantes lorsque l'on débute la programmation procédurale : un petit point virgule oublié au milieu d'une cinquantaine d'instructions, et vous perdez 5 minutes à vous arracher les cheveux... Alors je le dis, je le répète : n'oubliez jamais de finir vos instructions par un point-virgule !
Et que signifie le document.write() ?
Vous aurez deviné que ce bout de code affiche le contenu des parenthèses ! Ce que vous ne pouviez pas deviner, c'est qu'il s'agit de ce que l'on appelle une fonction.
Les fonctions représentent un large sujet et nous apprendrons à créer les notre dans un prochain chapitre. En fait, une fonction fait appel à un bloc d'instructions déjà tapé pour vous et sont là pour vous éviter d'avoir toujours tout à programmer vous même ! Mais nous y reviendrons !
Pour ce qui est du contenu des parenthèses, nous nous y intéresseront plus en détail au chapitre suivant.
Ah ! Une précision importante que j'allais oublier ! Pour "document.write", pensez bien à tout mettre en minuscule et à ne pas oublier le point entre "document" et "write" ! Les deux instructions suivantes ne fonctionneront jamais :
Code javascript
<script type="text/javascript"><script type="text/javascript">
Document.write('Hello world !');
documentwrite('Hello world !');
</script>
Et une dernière petite chose avant de clore ce chapitre ! Il s'agit là d'un simple conseil pour le futur, mais pensez bien à indenter votre code ! Indenter, cela veut dire structurer son code en mettant des espaces et des sauts de ligne. Un code bien indenté est un code facile à lire et à comprendre dès le premier coup d'oeil !
Regardez cet exemple très désagréable :
Code javascript
<script type="text/javascript">
document.write('Hello world !');
// Notre première instruction : elle affiche un texte à l'écran
</script>
Bon là j'exagère, mais vous verrez très vite que quand on commence à avoir plusieurs dizaines de lignes de code, indenter son code devient vital ! Alors prenez dès maintenant les bonnes habitudes !
Remonter
Conclusion
Et bien ce fut un chapitre plein de vocabulaire ! Nous avons vu ce qu'était la programmation procédurale, une instruction, un commentaire, la syntaxe d'un langage et nous avons même commencé à étudier un peu celle du JavaScript !
Dans le chapitre suivant, nous allons éclaircir le mystère sur le contenu des parenthèses de document.write avec les types de données et nous apprendrons à faire quelques calculs simples !
