Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Après une courte introduction au Javascript, nous allons enfin pouvoir commencer à étudier quelques petites choses. Elles seront la base de la base pour passer aux chapitres suivants, mais vous allez remarquer qu'elles sont d'une facilité déconcertante à utiliser.
Il va surtout y avoir une grosse nouveauté qu'il n'y avait pas au chapitre précédent : un QCM.
C'est un Questionnaire à Choix Multiples, autrement dit cela vous servira pour savoir si oui ou non vous avez compris le cours.
À partir de ce chapitre, nous allons commencer à faire concrètement du Javascript. Autrement dit, pour rappel, vous devez connaître le HTML. Je vous conseille aussi de vous rafraîchir la mémoire en allant jeter un coup d'oeil au tuto de M@teo21 sur le HTML.
Avant de commencer, il faut aussi que vous ayez un éditeur de texte. Puisque vous savez coder en HTML, j'estime qu'il n'est pas nécessaire de vous expliquer la raison pour laquelle il vous en faut absolument un.
Quand vous faisiez du HTML, le Bloc-notes pouvait suffire. Maintenant, je vous conseille très fortement de passer à un éditeur plus puissant qui vous aidera à repérer vos erreurs beaucoup plus simplement. Je vous expliquerai par la suite pourquoi il est vraiment important d'avoir un bon éditeur de texte pour coder en Javascript.
M@teo21 m'a fait découvrir Notepad++, qui s'avère être un excellent éditeur de texte, avec plein de fonctions
très très très pratiques. Elles vous serviront surtout quand vous aurez un script assez long. En attendant, je vous conseille de télécharger ce fabuleux logiciel qu'est Notepad++.
Que votre éditeur de texte soit Smultron, Notepad++, Emacs ou encore Bloc-Notes, la façon dont vous allez apprendre le Javascript sera
exactement la même pour tout le monde ! Certains seront peut-être plus à l'aise que d'autres sous Notepad++, mais c'est tout
.
Se servir de Notepad++
Nous allons maintenant apprendre à nous servir de Notepad++. Ouvrez-le, puis insérez-y la source suivante.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 | <!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" lang="fr">
<head>
<title>Devoir de Latin à rendre pour lundi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p
{
font-family: verdana, arial, courrier;
font-size: 12px;
color: blue;
}
p:first-letter
{
color: black;
font-size: 14px;
font-weight: bold;
}
.rouge
{
color: red;
}
.italique
{
font-style: italic;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ornare tristique pede. Aliquam arcu leo, imperdiet eget, dapibus non, accumsan quis, est. Sed eget massa. Praesent mi. Cras sollicitudin erat non tellus. Quisque sit amet leo. Sed volutpat faucibus eros. Duis eget libero. Ut luctus. Nullam sit amet nibh vel quam accumsan aliquam. Curabitur elementum. Nulla purus dolor, aliquet ac, gravida sit amet, vehicula non, elit. Morbi neque quam, viverra eget, bibendum dictum, condimentum sit amet, nibh. Nunc sit amet nisl eu eros ullamcorper dictum. <span class="rouge">In orci ligula</span>, viverra non, tempus sit amet, dapibus sit amet, lectus. Pellentesque pharetra. Nam gravida. Pellentesque dignissim. Ut eu leo sed urna ullamcorper aliquam. Nunc ultricies quam sed mauris bibendum iaculis.
</p>
<p>
Vivamus pulvinar diam sit amet quam. Nunc dui elit, mattis ut, rhoncus quis, accumsan in, tellus. Cum sociis natoque penatibus et magnis dis <span class="rouge">parturient montes</span>, nascetur ridiculus mus. Curabitur eu mauris at risus ullamcorper consequat. Praesent vulputate metus ac pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci leo, euismod vitae, pulvinar a, aliquet a, tellus. Morbi tincidunt malesuada leo. Proin tincidunt libero at nibh. Cras sollicitudin vulputate nunc. Suspendisse blandit purus vel magna. Nulla dignissim lectus euismod odio.
</p>
<p>
Ut ultrices dapibus velit. Aliquam erat volutpat. In tempus libero. Proin tempus. Aenean odio wisi, laoreet nec, viverra et, congue ac, risus. Morbi consectetuer elit et turpis. Vivamus pulvinar. Donec ornare dapibus nibh. Sed odio. In eget turpis.
</p>
<p>
Maecenas pretium eros nec tortor. Morbi at ipsum quis massa varius tempus. Morbi placerat eros sit amet quam. Nulla in lorem ut neque volutpat adipiscing. Pellentesque erat magna, volutpat non, rhoncus sollicitudin, tincidunt vitae, felis. Praesent eget magna. Sed dictum. Mauris vehicula auctor risus. Curabitur neque nunc, interdum et, vestibulum id, placerat sit amet, elit. Etiam nec elit id nisl molestie dictum. Maecenas elementum lectus ut magna. <span class="italic">In ut sem</span>. Proin suscipit, metus non viverra sodales, elit diam fermentum est, a feugiat eros lorem id risus.
</p>
<p>
Nunc ac quam. Curabitur neque orci, malesuada eget, imperdiet ac, tincidunt vel, nisl. Fusce faucibus. Aliquam eleifend, nisl vitae molestie posuere, erat velit sollicitudin wisi, in laoreet est sapien et quam. Sed tincidunt. In sodales neque vel dui. Nunc ut orci in metus molestie tempor. Sed urna. Etiam ut neque auctor sem elementum rutrum. Etiam ac lectus. Sed mollis sem nec tortor. Sed volutpat risus sed magna.
</p>
</body>
</html>
|
On va maintenant activer le mode HTML (le Javascript est inclus dans ce mode). Pour cela, allez dans la barre de menu et cliquez sur Langage. Ensuite, Sélectionnez HTML.
Et il n'y a plus qu'à admirer la source qui s'est colorée, comme sur l'image ci-dessous.
Si c'est pas beau, ça ? Un code tout coloré et surtout
CLAIR !
Maintenant que vous êtes dotés de super éditeurs de texte, nous allons enfin pouvoir commencer.
Tout d'abord, il faudrait savoir où placer du Javascript. C'est pratiquement comme le CSS, il suffit de mettre votre source JS entre les balises
<script type="text/javascript"><!-- //--></script>
Je résume pour vous en couleur :
Code : HTML1
2
3
4
5
6
7
8
9 | <!-- un peu de HTML par ici -->
<script type="text/javascript">
<!--
// ici on met tout le script Javascript
//-->
</script>
<!-- et pour finir un peu de HTML par là -->
|
En premier, il faut mettre la balise
script. C'est pour dire que il y aura un script dans la page. Ensuite, on met l'attribut
type qui a pour valeur
text/javascript. C'est comme en CSS, pour dire que ce qui se trouvera entre ces balises sera un script (aux normes). Et puis il ne faut pas oublier de rajouter des sortes de commentaires, car grâce à ça, les navigateurs trop vieux ne génèreront pas d'erreur et n'afficheront pas le script.
Pour finir, il vous suffit d'enregistrer votre script comme une page HTML normale.
Notez que vous pouvez placer n'importe où les balises <script></script>, aussi bien dans <head> que dans <body> ou encore <p> !
Une autre méthode
Il se trouve qu'il existe une autre méthode pour insérer du Javascript dans votre page. Il vous faut mettre votre script JS dans un fichier, que vous nommerez mon_fichier
.js.
Une fois ce fichier créé, créez-en un nouveau se nommant page_html
.html. Là, c'est comme d'habitude, vous enregistrez le fichier au format html. Dans ce fichier, saisissez ceci.
Code : HTML1
2 | <script type="text/javascript" src="mon_fichier.js">
</script>
|
N'oubliez pas de mettre le chemin d'accès à votre fichier JS dans
src. Par exemple, si votre site est
www.monsite.com et que votre fichier est situé à www.monsite.com/mon_fichier.js, dans votre page html il y aura ceci.
Code : HTML1
2 | <script type="text/javascript" src="http://www.monsite.com/mon_fichier.js">
</script>
|
Enfin du Javascript !
Pfiouuu, ça aura été long de passer à du Javascript, mais je voulais m'assurer que tout irait pour le mieux dans votre apprentissage. Je ne pouvais donc pas attaquer directement le JS.
Ouvrez un nouveau fichier dans votre éditeur de texte, puis insérez-y la source suivante.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <html>
<head>
<title>Mon premier script !</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('<p>Ceci est une ligne écrite en Javascript</p>');
//-->
</script>
</body>
</html>
|
Euh... C'est génial, mais à quoi ça sert d'afficher du texte en Javascript plutôt qu'en HTML ?
Ah, cette question je la sentais venir...
À vrai dire, pour l'instant ça ne vous sert à rien
. Mais vous allez vite voir que par la suite, ça va être super utile !
Bien. Commençons à étudier le script. La partie qui nous intéresse est
document.write('<p>Ceci est une ligne écrite en Javascript</p>');, car vous connaissez le reste.
- Débutons par le document.write. C'est une fonction qui permet d'effacer ce qu'il y a à l'écran, puis d'écrire ce qu'il y a entre les parenthèses. 'document.write' signifie en français 'écrire.document'. Traduisez par écrire. En résumé, document.write efface tout ce qu'il y avait écrit dans la page, puis écrit ce qu'il y a entre parenthèses.
- Passons ensuite à ce qu'il y a entre les parenthèses. Tout d'abord, il y a deux apostrophes. Elles servent à déclarer à Javascript que tout ce qui se trouve entre elles sera du texte. Nous verrons dans les prochains chapitres ce que l'on peut mettre à part du texte.
- Ensuite, il y a <p>Ceci est une ligne écrite en Javascript</p>. Je pense qu'ici il n'y a pas trop de problèmes. Retenez bien que dans le document.write, on peut mettre du HTML.
- Et enfin, il y a le point-virgule. Il sert à dire que l'instruction est finie. Pensez bien à le mettre à chaque fin d'instruction ! C'est comme si je vous disais "Tu bois du soda". À la fin de cette phrase, il faudrait y placer un point-virgule.
N'oubliez surtout pas le point-virgule à la fin de chaque instruction, sinon votre script plantera ! La plupart des erreurs viennent de là, alors restez vigilants !
Maintenant que j'ai expliqué comment tout se déroulait, je vous conseille d'essayer vous-mêmes d'écrire quelques phrases en Javascript. D'abord pour vous familiariser avec Javascript, et ensuite pour que vous trouviez un moyen de faire planter le script alors qu'il devrait normalement fonctionner. La réponse est en dessous, la solution à ce problème également.
Dans certains cas, document.write ne marche pas
Ne vous affolez pas,
document.write marche dans tous les cas. Il n'y a pas de bogue, et votre ordinateur n'a pas un virus anti-javascript
.
Commençons par le commencement : dans quels cas document.write plante ?
Puisqu'on ne sait pas, on va tester plein de phrases pour voir quand il y a une erreur. En guise d'exemple, nous allons utiliser la phrase : "Hé tu pourrais pas m'apprendre à faire des frites ?". Essayons, voir ce que cela donne.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write('Hé tu pourrais pas m'apprendre à faire des frites ?');
//-->
</script>
</body>
</html>
|
C'est bon, on la tient l'erreur !
Dans mon incroyable bonté, je vais vous dire qu'est-ce qui cloche. C'est une affaire d'apostrophes. Voici ce que comprend Javascript.
Ça y est, vous avez compris ?
Pour régler ce problème, nous allons utiliser l'antislash, le voici :
\. Il suffit de mettre ce caractère devant l'apostrophe précédant ce l'on veut afficher. Constatez par vous-mêmes : vous allez voir, ça marche !
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write('Hé tu pourrais pas m\'apprendre à faire des frites ?');
//-->
</script>
</body>
</html>
|
"Les commentaires, à quoi peuvent-ils bien servir ? À commenter du code, pardi !"
À présent, nous allons nous attaquer aux commentaires. Comme l'indique la phrase du haut, ils servent à commenter du code. Par exemple : "Ici j'ai fait ça pour créer ça". Quand vous regarderez votre page, vous ne verrez pas le commentaire. Il n'y a
qu'en regardant la source de la page que vous pouvez les voir.
Je vous comprends quand vous dites que cela ne sert à rien, car pour l'instant vous avez à peine une ligne de Javascript dans votre source. Mais je peux vous assurer que quand vous commencez à dépasser les 50 lignes, c'est
SUPER pratique, oh que oui !
Je suppose que vous avez déjà entendu parler des commentaires en HTML. Vous savez, ce sont ces deux balises un peu "spéciales".
Code : HTML1 | <!-- Ceci est un commentaire HTML -->
|
Eh bien bonne nouvelle, les commentaires en Javascript, c'est presque pareil ! Constatez vous-mêmes la différence.
Code : JavaScript1 | /* Ceci est un commentaire Javascript */
|
Les commentaires HTML ne se placent pas dans les balises <script>, et vice versa.
N'abusez pas non plus des commentaires, sinon votre script sera trop détaillé, et ça vous embrouillera, faites comme pour l'alcool, consommez avec modération.
Voilà : ce n'était pas très compliqué à comprendre, mais c'était surtout super important. J'espère que cette notion de commentaires est acquise !
Maintenant, c'est l'heure du QCM, vous n'aviez pas oublié ? C'est un moyen pour vous de voir où vous en êtes arrivés dans la leçon. Est-ce que il faut relire encore une fois le cours, ou est-ce que je peux passer au chapitre suivant ? Aux résultats de déterminer !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
210 Zéros connectés |
8 requêtes |
0.0239s (0.0111s)
