Remerciez-le!

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

Information : Le JavaScript peut aussi être utilisé pour réaliser des applicati

Information : Le JavaScript peut aussi être utilisé pour réaliser des applications, l'interface de Firefox est notamment développée avec ce langage mais cela reste une implémentation bien particulière à la société Mozilla. Cependant, il vous est tout à fait possible aujourd'hui de créer une application en JavaScript grâce à Node.js et si vous souhaitez y ajouter une interface, d'autres projets venant se greffer à Node vous faciliteront la tâche, tel qu'Electron ou NW.js. <script> to add the javascript code for htmll5 </script> <script type= ‘text/javascript’> for html4 et xhtml1.x and earlier </script> Commentaire : // ou /* */ si plusieurs lignes ! Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe, portant l'extension.js => le fichier externe est mis en cache par le navigateur et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page. <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script src="hello.js"></script> </body> </html> NB : il est conseillé de placer les éléments<script>juste avant la fermeture de l’élément<body>, sinon le navigateur va charger le fichier avant de commencer à afficher le contenu de la page. ================================ Variables =================================== var myVariable; myVariable = 2; var myVariable1, myVariable2 = 4, myVariable3; les variables sont typées dynamiquement les trois types principaux en JavaScript : number / string / boolean (true or false) var text = 'Ça c\'est quelque chose !'; typeof variable ; /* to get its type */ undefined => variable does not exist or declared and not defined. La concaténation : text1+text2 Interagir avec l'utilisateur : var userName = prompt('Entrez votre prénom :'); ( ce qui rentré est interprété comme text, meme si c un nombre, il faut le convertir pour l’utiliser en nombre) alert(userName); // Affiche le prénom entré par l'utilisateur Conversion : parseInt() var first, second, result; first = prompt('Entrez le premier chiffre :'); second = prompt('Entrez le second chiffre :'); result = parseInt(first) + parseInt(second); alert(result); Convertir un nombre en chaîne de caractères text = number1 + '' + number2; La condition « if else » la fonction confirm() if (confirm('Voulez-vous exécuter le code JavaScript de cette page ?')) { alert('Le code a bien été exécuté !'); } La structure IF else if La condition « switch » var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :')); switch (drawer) { case 1: alert('Contient divers outils pour dessiner : du papier, des crayons, etc.'); break; case 2: alert('Contient du matériel informatique : des câbles, des composants, etc.'); break; case 3: alert('Ah ? Ce tiroir est fermé à clé ! Dommage !'); break; case 4: alert('Contient des vêtements : des chemises, des pantalons, etc.'); break; default: alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve du contraire, les tiroirs négatifs n'existent pas."); } Nb : un switchpermet de faire une action en fonction d'une valeur mais aussi en fonction du type de la valeur (comme l'opérateur ===). Par example comparaison d’un string « 1 » avec un un num 1 sera considérée comme fausse. Amoins d’utiliser parsInt(). Les ternaires var startMessage = 'Votre catégorie : ', endMessage, adult = confirm('Êtes-vous majeur ?'); endMessage = adult ? '18+' : '-18'; alert(startMessage + endMessage); Les ternaires sont très utiles pour raccourcir des codes mais il ne faut pas pousser leurs capacités à leur paroxysme ou bien vous vous retrouverez avec un code que vous ne saurez plus lire vous-même. NB : le type d'une variable (quel qu'il soit) peut être converti en booléen même si à la base on possède un nombre ou une chaîne de caractères. les contenus faux pour le savoir : un nombre qui vaut zéro ou bien une chaîne de caractères vide. Tout le reste est considéré comme vrai. Bien entendu, la valeurundefinedest aussi évaluée à false. L'incrémentation number = number + 1; number++; number--; NB : ++number retourne la valeur de number incrémentée : var number = 0; var output = ++number; alert(number); // Affiche : « 1 » alert(output); // Affiche : « 1 » Alors que : var number = 0; var output = number++; alert(number); // Affiche : « 1 » alert(output); // Affiche : « 0 » La boucle while var number = 1; while (number < 10) { number++; } Quelques améliorations Utilisation de break Utilisation de continue La boucle do while : Dans le cas d'une bouclewhile, si la condition n'est pas valide, la boucle n'est pas exécutée. Avecdo while, la boucle est exécutée une première fois, puis la condition est testée pour savoir si la boucle doit continuer. do { instruction_1; instruction_2; instruction_3; } while (condition); La boucle for for (var iter = 0; iter < 5; iter++) { alert('Itération n°' + iter); } Portée des variables de boucle Attention : une fois que la boucle est exécutée, la variable existe toujours, ce qui explique que dans l'exemple précédent on puisse récupérer la valeur de i une fois la boucle terminée. Ce comportement est différent de celui de nombreux autres langages, dans lesquels une variable déclarée dans une boucle est « détruite » une fois la boucle exécutée. ========================= Les fonctions ==================== function myFunction(arguments) { // Le code que la fonction va devoir exécuter } La portée des variables Variables locales : déclarées au sein d’une fonction Les variables globales : il est plutôt déconseillé de créer des variables globales et locales de même nom, cela est souvent source de confusion. Créer et utiliser un argument Les valeurs de retour function sayHello() { return 'Bonjour !'; // L'instruction « return » suivie d'une valeur, cette dernière est donc renvoyée par la fonction } alert(sayHello()); // Ici on affiche la valeur retournée par la fonction sayHello() Les fonctions anonymes function (arguments) { // Le code de votre fonction anonyme } ou var sayHello = function() { alert('Bonjour !'); }; Les fonctions anonymes : isoler son code (function() { // Code isolé })() ; donc var test = 'noir'; // On crée une variable « test » contenant le mot « noir » (function() { // Début de la zone isolée var test = 'blanc'; // On crée une variable du même nom avec le contenu « blanc » dans la zone isolée alert('Dans la zone isolée, la couleur est : ' + test); })(); // Fin de la zone isolée. Les variables créées dans cette zone sont détruites. alert('Dans la zone non-isolée, la couleur est : ' + test); // Le texte final contient bien le mot « noir » vu que la « zone isolée » n'a aucune influence sur le reste du code ou pour avoir le retour enregistré pour une futue utilisation : var sayHello = (function() { return 'Yop !'; })(); alert(sayHello); // Affiche : « Yop ! » ================================ Objets ================================= Les objets contiennent trois choses distinctes :  un constructeur ;  des propriétés ;  des méthodes. var myString = 'Ceci est une chaîne de caractères'; // On crée un objet String alert(myString.length); // On affiche le nombre de caractères, au moyen de la propriété « length » alert(myString.toUpperCase()); // On récupère la chaîne en majuscules, avec la méthode toUpperCase() Arrays : var myArray_a = [42, 12, 6, 3]; var myArray_b = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume']; myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau myArray.pop(); // Retire « Guillaume » var cousinsString = 'Pauline Guillaume Clarisse', cousinsArray = cousinsString.split(' ');// split()qui permet de les découper en un tableau, en fonction d'un séparateur. var cousinsString_2 = cousinsArray.join('-'); // join() : L'inverse de split() Parcourir un tableau Avec for : for (var i = 0; i < myArray.length; i++) { alert(myArray[i]); } il est possible d'accéder aux items d'un tableau via leur indice, il peut être pratique d'y accéder au moyen d'un identifiant. = objet litteral : var family = { self: 'Sébastien', sister: 'Laurence', brother: 'Ludovic', cousin_1: 'Pauline', cousin_2: 'Guillaume' }; family.sister; family['sister']; // une aute syntaxe, utile si on a une variable comme identifiant. family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle » family.uncle = 'Didier'; // Même opération mais d'une autre manière for (var id in family) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family » alert(family[id]); //Il n'est pas possible de parcourir un objet littéral avec une bouclefor } Utilisation des objets littéraux : peuvent se révéler très utiles pour ordonner un code. On les utilise aussi dans les fonctions : les fonctions, avecreturn, ne savent retourner qu'une seule variable. Si on veut retourner plusieurs variables, il faut les placer dans un tableau et retourner ce dernier. Mais il est plus commode d'utiliser un objet littéral. function getCoords() { /* Script incomplet, juste pour l'exemple */ return { x: 12, y: 21 }; } var coords = getCoords(); alert(coords.x); // 12 alert(coords.y); // 21 ========================= Debuggage ==================================== La méthode console.log() Example ( valeur de variables ) : for (var i = 0; i < 10; i++) { // On affiche les valeurs uploads/S4/ javascript-notes-v3.pdf