Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Java Script Introduction : Qui n'a jamais entendu parler du JavaScript ? Créé d

Java Script Introduction : Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Mais avant de se targuer de créer des applications pour serveurs, tablettes et Windows, il faut d'abord apprendre la base et s'intéresser aux origines : le JavaScript au sein des pages Web. Et ça tombe bien ; c'est le sujet de ce cours. Chemin faisant, vous apprendrez la structure du langage, à manipuler les événements, interagir avec les éléments HTML, dialoguer avec le serveur, faire un système d'envoi d'images, faire un peu de dessin et des animations, et bien d'autres choses ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript :  Un système de chat, comme celui de Facebook ;  Une suggestion lors de la frappe dans un champ de texte, comme lors d'une recherche avec Google ;  Un lecteur de vidéos ou de musiques, aussi puissant que celui de Youtube, grâce aux balises <video> et <audio> ;  Des jeux exploitants la balise <canvas> comme Torus, un Tetris en 3D ;  La modélisation 3D d'une Lamborghini affichée grâce à l'API WebGL et à la bibliothèque Three.js ;  Et bien d'autres choses ! Avant d'entrer directement dans le vif du sujet, ce chapitre va vous apprendre ce qu'est le JavaScript, ce qu'il permet de faire, quand il peut ou doit être utilisé et comment il a considérablement évolué depuis sa création en 1995. Nous aborderons aussi plusieurs notions de bases telles que les définitions exactes de certains termes. Définition : Le JavaScript est un langage de programmation de scripts orienté objet. Les versions du JavaScript Les versions du JavaScript sont basées sur celles de l'ECMAScript (que nous abrégeons ES ci-dessous). Ainsi, il existe :  ES 1 et ES 2, qui sont les prémices du langage JavaScript ;  ES 3 (sorti en décembre 1999) ;  ES 4, qui a été abandonné en raison de modifications trop importantes qui ne furent pas appréciées ;  ES 5 (sorti en décembre 2009), la version la plus répandue et utilisée à ce jour ;  ES 6, finalisé en décembre 2014 et dont l'implémentation avait déjà été commencée avant cette date au sein de plusieurs navigateurs. Ce cours portera sur la version 5 de l'ECMAScript, la version 6 n'étant pas encore très bien supportée à l'heure où nous écrivons ces lignes. Premiers pas en JavaScript Comme indiqué précédemment, le JavaScript est un langage essentiellement utilisé avec le HTML, vous allez donc apprendre dans ce chapitre comment intégrer ce langage à vos pages Web, découvrir sa syntaxe de base et afficher un message sur l'écran de l'utilisateur. Afficher une boite de dialogue : Le Hello World! Ne dérogeons pas à la règle traditionnelle qui veut que tous les tutoriels de programmation commencent par afficher le texte « Hello World! » (« Bonjour le monde ! » en français) à l'utilisateur. Voici un code HTML simple contenant une instruction (nous allons y revenir) JavaScript, placée au sein d'un élément<script>: <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script> alert('Hello world!'); </script> </body> </html> Écrivez ce code dans un fichier HTML, et ouvrez ce dernier avec votre navigateur habituel : Une boîte de dialogue s'ouvre, vous présentant le texte Hello world! Les nouveautés Dans le code HTML donné précédemment, on remarque quelques nouveautés. Tout d'abord, un élément<script>est présent : c'est lui qui contient le code JavaScript que voici : alert('Hello world!'); Il s'agit d'une instruction, c'est-à-dire une commande, un ordre, ou plutôt une action que l'ordinateur va devoir réaliser. Les langages de programmation sont constitués d'une suite d'instructions qui, mises bout à bout, permettent d'obtenir un programme ou un script complet. Dans cet exemple, il n'y a qu'une instruction : l'appel de la fonctionalert(). La boîte de dialoguealert() alert()est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message. Ce message est placé entre apostrophes, elles- mêmes placées entre les parenthèses de la fonctionalert(). La syntaxe du JavaScript Les instructions La syntaxe du JavaScript n'est pas compliquée. De manière générale, les instructions doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction : instruction_1; instruction_2; instruction_3; En réalité le point-virgule n'est pas obligatoire si l'instruction qui suit se trouve sur la ligne suivante, comme dans notre exemple. En revanche, si vous écrivez plusieurs instructions sur une même ligne, comme dans l'exemple suivant, le point-virgule est fortement recommandé. Si le point-virgule n'est pas mis, l'interpréteur risque de ne pas comprendre qu'il s'agit d'une autre instruction et retournera une erreur. Instruction_1;Instruction_2 Instruction_3 Les espaces Le JavaScript n'est pas sensible aux espaces. Cela veut dire que vous pouvez aligner des instructions comme vous le voulez, sans que cela ne gêne en rien l'exécution du script. Par exemple, ceci est correct : instruction_1; instruction_1_1; instruction_1_2; instruction_2; instruction_3; Les commentaires Les commentaires sont des annotations faites par le développeur pour expliquer le fonctionnement d'un script, d'une instruction ou même d'un groupe d'instructions. Les commentaires ne gênent pas l'exécution d'un script. Il existe deux types de commentaires : les commentaires de fin de ligne, et les commentaires multilignes. Commentaires de fin de ligne Ils servent à commenter une instruction. Un tel commentaire commence par deux slashs instruction_1; // Ceci est ma première instruction instruction_2; // La troisième instruction ci-dessous : instruction_3; Le texte placé dans un commentaire est ignoré lors de l'exécution du script, ce qui veut dire que vous pouvez mettre ce que bon vous semble en commentaire, même une instruction (qui ne sera évidemment pas exécutée) : instruction_1; // Ceci est ma première instruction instruction_2; // La troisième instruction ci-dessous pose problème, je l'annule temporairement // instruction_3; Commentaires multilignes Ce type de commentaires permet les retours à la ligne. Un commentaire multiligne commence par /* et se termine par */ : * Ce script comporte 3 instructions : - Instruction 1 qui fait telle chose - Instruction 2 qui fait autre chose - Instruction 3 qui termine le script */ instruction_1; instruction_2; instruction_3; // Fin du script Remarquez qu'un commentaire multiligne peut aussi être affiché sur une seule ligne : instruction_1; /* Ceci est ma première instruction */ instruction_2; Les fonctions Dans l'exemple duHello world!, nous avons utilisé la fonctionalert(). Nous reviendrons en détail sur le fonctionnement des fonctions, mais pour les chapitres suivants, il sera nécessaire de connaître sommairement leur syntaxe. Une fonction se compose de deux choses : son nom, suivi d'un couple de parenthèses (une ouvrante et une fermante) : myFunction(); // « function » veut dire « fonction » en anglais Entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas duHello world!, ce sont les mots « Hello world! » qui sont passés en paramètre : alert('Hello world!'); Où placer le code dans la page Les codes JavaScript sont insérés au moyen de l'élément<script>. Cet élément possède un attributtypequi sert à indiquer le type de langage que l'on va utiliser. Dans notre cas, il s'agit de JavaScript, mais ça pourrait être autre chose, comme du VBScript, bien que ce soit extrêmement rare. Si vous n'utilisez pas le HTML5, sachez que l'attributtypeprend comme valeurtext/javascript, qui est en fait le type MIME d'un code JavaScript. <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script> alert('Hello world!'); </script> </body> </html> Le JavaScript externe Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe, portant l'extension.js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément<script>et de son attributsrcqui contient l'URL du fichier.js. Voici tout de suite un petit exemple : alert('Hello world!'); <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script src="hello.js"></script> </body> </html> On suppose ici que le fichier hello.js se trouve dans le même répertoire que la page Web. Positionner l'élément<script> La plupart des cours de JavaScript, et des exemples donnés un peu partout, montrent qu'il faut placer l'élément<script>au sein de l'élément<head>quand on l'utilise pour charger un fichier JavaScript. C'est correct, oui, mais il y a mieux ! Une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le<head>, puis les éléments de<body>les uns à la suite des autres. Si vous appelez un fichier JavaScript dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le fichier avant de commencer à afficher le contenu de la page. Pour pallier ce problème, il est conseillé de placer les éléments<script>juste avant la fermeture de l’élément<body>, comme ceci : <!DOCTYPE uploads/Litterature/ cours-java-script-pdf.pdf