diff options
Diffstat (limited to 'files/fr/web/javascript/guide_de_demarrage/index.html')
| -rw-r--r-- | files/fr/web/javascript/guide_de_demarrage/index.html | 338 |
1 files changed, 0 insertions, 338 deletions
diff --git a/files/fr/web/javascript/guide_de_demarrage/index.html b/files/fr/web/javascript/guide_de_demarrage/index.html deleted file mode 100644 index c95ba3d3a2..0000000000 --- a/files/fr/web/javascript/guide_de_demarrage/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Tutoriel pour débuter en JavaScript -slug: Web/JavaScript/guide_de_demarrage -tags: - - Beginner - - JavaScript - - NeedsBeginnerUpdate - - Tutorial -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Pourquoi JavaScript ?</h2> -<p>JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.</p> -<p>L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">Ce que vous devriez déjà savoir</h2> -<p>JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.</p> -<p>Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.<br> - Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.</p> -<h2 id="Getting_Started" name="Getting_Started">Pour commencer</h2> -<p>Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.</p> -<p>JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Les problèmes de compatibilité entre les navigateurs</h2> -<p>Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. <span style="line-height: 1.5;">Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.</span></p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">Comment essayer les exemples</h2> -<p>Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.</p> -<p>Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.<br> - JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.</p> -<p>Vour pouvez également utiliser certains site comme <a href="http://jsfiddle.net/">jsfiddle.net</a> pour tester du code JavaScript.</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Exemple : Capturer le clic de la souris</h2> -<p>Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'<a href="/fr/docs/Web/JavaScript/Guide/Boucle%C3%89v%C3%A9nements">événements JavaScript</a>.</p> -<p>Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris <span style="line-height: 1.5;">:</span></p> -<ul> - <li><code>click</code> - transmis quand un utilisateur clic avec la souris</li> - <li><code>dblclick</code> - transmis quand un utilisateur double-clic avec la souris</li> - <li><code>mousedown</code> - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)</li> - <li><code>mouseup</code> - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)</li> - <li><code>mouseout</code> - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet</li> - <li><code>mouseover</code> - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet</li> - <li><code>mousemove</code> - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet</li> - <li><code>contextmenu</code> - transmis lorsqu'un utilisateur effectue un clic-droit.</li> -</ul> -<p>Noter que dans les versions d'HTML, les événements <em>inline</em> (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.</p> -<p>La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Cliquer ici</span></pre> -<p>Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :</p> -<pre class="brush: js"><script> - function clickHandler() { - alert("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Cliquer ici</span></pre> -<p>Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :</p> -<pre class="brush: js"><script> - function clickHandler(événement) { - var eType = événement.type; - /* l'instruction suivante est utilisée à des fins de compatibilité */ - /* Firefox renseignera la propriété target de l'événement */ - /* IE renseignera la propriété srcElement */ - var eTarget = événement.target || événement.srcElement; - - alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" ); - } -</script> -<span onclick="clickHandler(event);">Cliquer ici</span></pre> -<p>En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.</p> -<pre class="brush: js"><body></body> -<script> - function mouseeventHandler(event) { - /* La ligne qui suit est utilisée à des fins de compatibilité */ - /* IE ne fournit pas directement l'événement */ - /* il faut obtenir une référence vers l'événement si nécessaire */ - if (!event) event = window.event; - - /* on récupère le type de l'événement et la cible */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id); - } - - function onloadHandler() { - /* on récupère une référence à l'élément 'body' de la page */ - var body = document.body; - /* on crée un élément span sur lequel on pourra cliquer */ - var span = document.createElement('span'); - span.id = 'SpanExemple'; - span.appendChild(document.createTextNode ('Cliquer ici !')); - - /* on inscrit l'objet span aux différents événements liés à la souris - les événements sont écrits en minuscules, le nom du gestionnaire d'événement - peut avoir n'importe quelle casse. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* on affiche l'élément span sur la page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Exemple : Intercepter un événement clavier</h2> -<p>De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.</p> -<p>La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :</p> -<ul> - <li><code>keypress</code> : se produit quand on appuie sur une touche et qu'on la relâche</li> - <li><code>keydown</code> : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée</li> - <li><code>keyup</code> : se produit quand la touche du clavier est relâchée</li> - <li>TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.</li> -</ul> -<p>Lors d'un événement <code><a class="new " href="/fr/docs/Web/Events/keypress" rel="internal">keypress</a></code>, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété <code>keyCode</code> ou <code><a href="/fr/docs/DOM/event.charCode" rel="internal">charCode</a></code> (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), <code>charCode</code> représentera la valeur du caractère en tenant compte de la casse (<code>charCode</code> gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans <code>keyCode</code>.</p> -<p>La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (<em>handlers</em>) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :</p> -<pre class="brush: js"><input type="text" onkeypress="alert ('Coucou monde !');"></pre> -<p>De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :</p> -<pre class="brush: js"><script> - function keypressHandler() { - alert ("Coucou monde !"); - } -</script> - -<input onkeypress="keypressHandler();" /></pre> -<p>De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :</p> -<pre class="brush: js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Renverra "keypress" comme type d'événement - /* ici aussi on utilise une instruction pour que le code fonctionne - sur les différents navigateurs (mozilla utilise which et les autre - navigateurs utilisent keyCode. - On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode est ' + keyCode; - var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode - alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :</p> -<pre class="brush: js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p>Voici un exemple complet qui illustre comment gérer les événements du clavier :</p> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var toucheExemple = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode - var keychar = String.fromCharCode(key); - if (key == toucheExemple) { - metaChar = true; - } - if (key != toucheExemple) { - if (metaChar) { - alert("Combinaison de la touche meta et de " + keychar) - metaChar = false; - } else { - alert("Touche utilisée : " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == toucheExemple) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Essayez de presser une touche ! -</body> -</html></pre> -<h3 id="Bugs_et_spécificités_des_navigateurs">Bugs et spécificités des navigateurs</h3> -<p>Les deux propriétés des différents événements clavier sont <code>keyCode</code> et <code>charCode</code>. Pour faire simple, <code>keyCode</code> fait référence à la touche du clavier qui a été utilisée alors que <code>charCode</code> représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même <code>keyCode</code> car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété<code> charCode</code> sera différente car le caractère sera différent.</p> -<p>La navigateurs interprètent <code>charCode</code> de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas <code>charCode</code>. Cependant, l'information du caractère est bien fourni avec <code>keyCode</code> , mais uniquement lors de l'événement <code>keypress</code>. Lors de <code>keydown</code> et de <code>keyup</code> <code>keyCode</code> contient les informations liées à la touche utilisée. Firefox utilise un terme différent : <code>which</code> pour distinguer le caractère.</p> -<p>Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API <a href="/fr/docs/Web/API/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">KeyboardEvent</a>.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Exemple : Déplacer des images</h2> -<p>L'exemple qui suit permet de déplacer une image de Firefox sur la page :</p> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target - // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } - return false; - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Vous pouvez déplacer l'image sur cette page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Exemple : Redimensionner des éléments</h2> -<div> - Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).</div> -<pre class="brush: js"><!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Cliquer sur l'image et étirer pour la redimensionner.</p> - </body> - - </html></pre> -<div> - </div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Exemple : Tracer des lignes</h2> -<pre class="brush: js"><!DOCTYPE html> -<html> -<head> -<script> -function dessinerLigne(ax, ay, bx, by) -{ - if(ay > by) - { - bx = ax+bx; - ax = bx-ax; - bx = bx-ax; - by = ay+by; - ay = by-ay; - by = by-ay; - } - var calc = Math.atan((ay-by)/(bx-ax)); - calc = (calc*180)/Math.PI; - var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser --> -</body> -</html></pre> |