FICHE 1 Les Bases Du JavaScript - Iddocs
JavaScriptFICHE 1.Les bases du JavaScriptLe JavaScript, créé en 1995 par Brendan Eich (pour la Netscape CommunicationCorporation), est un langage de programmation de scripts orienté objet. Si le terme Javaest commun au langage du même nom, le JavaScript est radicalement différent.La version ES5 date de 2009.On crée un instruction Javascript à l'intérieur des balises script /script 1.1. La boîte de dialogue alert()alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîtede dialogue contenant un message. Ce message est placé entre apostrophes, elles-mêmesplacées entre les parenthèses de la fonction alert().1.2. La syntaxe JavascriptLa syntaxe du Javascript n'est pas compliquée. De manière générale, les instructionsdoivent être séparées par un point-virgule que l'on place à la fin de chaque instruction : script instruction 1;instruction 2;instruction 3; /script La syntaxe d'une fonction se compose de deux choses : son nom, suivi d'un couple deparenthèses (une ouvrante et une fermante). Entre les parenthèses se trouvent lesarguments, que l'on appelle aussi paramètres. script myFunction(); /script Par exemple : script alert('Bonjour');// la fonction affiche une boîte de dialogue avec "Bonjour" /script
JavaScript1.3. Des fichiers .jsIl 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 del'élément script et de son attribut src qui contient l'URL du fichier .js.Par exemple dans le fichier hello.js, on écrit :alert('Hello world!');Et dans le body de la page html, on trouve : script src "hello.js" /script Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer leséléments script juste avant la fermeture de l’élément body .1.4. Indentations et commentairesPour s'y retrouver dans l'écriture du code, on peut l'indenter, c'est-à-dire hiérarchiserles lignes de code avec des tabulations.Par ailleurs, on peut intégrer des commentaires, qui ne sont pas interprétés comme ducode, afin d'expliquer son code ou de mieux s'y retrouver : script instruction 1; // Ceci est ma première instructioninstruction 2;/* La troisième instruction ci-dessous,avec un commentaire sur deux lignes */instruction 3; /script 1.5. Un site pour tester le JavascriptPour tester le code Javascript sans créer systématiquement des pages web :http://jsfiddle.net/Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 2.Les variables2.1. Bases des variables en JavaScriptUne variable consiste en un espace de stockage, qui permet de garder en mémoiretout type de données. La variable est ensuite utilisée dans les scripts. Une variablecontient seulement des caractères alphanumériques, le (dollar) et le (underscore) ;elle ne peut pas commencer par un chiffre ni prendre le nom d'une fonction existante deJavascript. On crée la variable et on lui affecte (ou attribue) une valeur :ou : script var myVariable;myVariable 2; /script script var myVariable 2; /script 2.2. Les types de variablesUne variable peut être de type numérique, mais aussi une chaîne de caractères : script var text 'J\'écris mon texte ici'; /* Avec des apostrophes, le \ sert àéchapper une apostrophe intégrée dans le texte, pour ne pas que Javascript penseque le texte s'arrête là.*/ /script Une variable peut enfin être de type booléen (boolean), avec deux états possibles :vrai ou faux (true ou false).2.3. Les opérateurs arithmétiquesOn peut utiliser 5 opérateurs arithmétiques : l'addition ( ), la soustraction (-), lamultiplication (*), la division (/) et le modulo (%). Le modulo est le reste d'une division.Par exemple : script var number1 3,number2 2, result;result number1 *number2;alert(result); //Affiche : « 6 » /script ou : script var number 3;number number 5;alert(number); //Affiche : « 8 » /script qui équivaut à : script var number 3;number 5;alert(number); //Affiche : « 8 » /script
JavaScript2.4. La concaténationUne concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre,comme dans cet exemple : script var hi 'Bonjour ', name 'toi', result;result hi name;alert(result);// Affiche : « Bonjour toi » /script ou : script var text 'Bonjour ';text 'toi';alert(text);// Affiche « Bonjour toi ». /script On peut convertir un nombre en chaîne de caractères avec l'astuce suivante : script var text, number1 4, number2 2;text number1 '' number2; /* on ajoute une chaîne de caractères videentre les deux nombres pour permettre une concaténation sans calcul */alert(text); // Affiche : « 42 » /script 2.5. La fonction prompt(), avec concaténation et calculVoici la base de cette fonction : script var userName prompt('Entrez votre prénom :');alert(userName); // Affiche le prénom entré par l'utilisateur /script On peut demander le prénom et afficher un message avec concaténation : script var start 'Bonjour ', name, end ' !', result;name prompt('Quel est votre prénom ?');result start name end;alert(result); /script On peut aussi se servir de la fonction prompt() pour un calcul : script var first, second, result;first prompt('Entrez le premier chiffre :');second prompt('Entrez le second chiffre :');result parseInt(first) parseInt(second); /* la fonction parseInt()transforme la chaîne de caractères en nombre */alert(result); /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 3.Les conditions (1/2)Une condition (true ou false) est un test qui permet de vérifier qu'une variablecontient bien une certaine valeur.3.1. Les huit opérateurs de comparaisonIl y en a 8 : : égal à! : différent de : contenu et type devariable égal à! : contenu ou typede variable différent de supérieur à : inférieur à supérieur ou égal à : inférieur ou égal àIl suffit d'écrire deux valeurs avec l'opérateur de comparaison souhaité entre les deuxet un booléen est retourné. Si celui-ci est true alors la condition est vérifiée, si c'estfalse alors elle ne l'est pas : script var number1 2, number2 2, number3 4, result;result number1 number2; // Au lieu d'une seule valeur, on en écritdeux avec l'opérateur de comparaison entre ellesalert(result); // la condition est donc vérifiée car les deux variablescontiennent bien la même valeurresult number1 number3;alert(result); // la condition n'est pas vérifiée car 2 est différent de 4result number1 number3;alert(result); // la condition est vérifiée car 2 est bien inférieur à 4 /script 3.2. Les opérateurs logiquesIl y en a 3 :&&qui signifie ET avec par exemple :valeur1 && valeur2Cet opérateur vérifie la condition lorsque toutes les valeurs qui lui sont passées valent true. qui signifie OU avec par exemple : valeur1 valeur2Cet opérateur est plus souple car il renvoie true si une des valeurs qui lui est soumise contienttrue, qu'importent les autres valeurs.! qui signifie NON avec par exemple : !valeurCet opérateur se différencie des deux autres car il ne prend qu'une seule valeur à la fois. S'il senomme « NON » c'est parce que sa fonction est d'inverser la valeur qui lui est passée, ainsi truedeviendra false et inversement.
JavaScript3.3. La condition if elseLa condition est composé :- de la structure conditionnelle if ;- de parenthèses qui contiennent la condition à analyser, ou plus précisément lebooléen retourné par les opérateurs conditionnels ;– d'accolades qui permettent de définir la portion de code qui sera exécutée si lacondition se vérifie.La fonction confirm() permet une interaction de l'utilisateur à l'exécution du code(true si OK, false si Annuler) : script if (confirm('Voulez-vous exécuter le code Javascript de cette page ?')) {alert('Le code a bien été exécuté !');} /script La structure else permet de simplifier l'alternative : script if (confirm('Pour accéder à ce site vous devez être une fille, cliquez sur"OK" si c\'est le cas.')) {alert('Vous allez être redirigé vers le site.');}else {alert("Désolé, vous n'avez pas accès à ce site.");} /script On peut ajouter des conditions intermédiaires avec la structure else if : script var floor parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de-2 à 30) :"));if (floor 0) {alert('Vous vous trouvez déjà au rez-de-chaussée.');} else if (-2 floor && floor 30) {alert("Direction l'étage n " floor ' !');} else {alert("L'étage spécifié n'existe pas.");} /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 4.Les conditions (2/2)4.1. La condition switchCette structure permet de gérer une courte liste de possibilités : script var drawer parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :')); //onprécise bien le type de la valeur, ici un nombre avec la fonction parseInt()switch (drawer) {case 1: // on pose chaque cas l'un après l'autre ; on met des apostrophes sil'on vérifie des chaînes de caractères au lieu de nombresalert('Contient divers outils pour dessiner : du papier, des crayons, etc.');break; // on arrête la fonction pour passer à un autre cascase 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: // on pose une autre possibilité, pour gérer une erreur del'utilisateuralert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuvedu contraire, les tiroirs négatifs n'existent pas.");} /script 4.2. Les ternairesCette structure permet de simplifier certaines conditions : script var startMessage 'Votre genre : ',endMessage,adult confirm('Êtes-vous une fille ?');endMessage adult ? 'Fille' : 'Garçon';alert(startMessage endMessage); /script
JavaScript4.3. Exercice sur les conditions.Fournir un commentaire selon l'âge de la personne.Vous devez fournir un commentaire sur 4 tranches d'âge qui sont les suivantes :Tranche d'âge1 à 6 ans7 à 11 ans12 à 17 ans18 à 120 ansExemple de commentaire« Vous êtes un jeune enfant. »« Vous êtes un enfant qui a atteint l'âge de raison. »« Vous êtes un adolescent. »« Vous êtes un adulte. »Correction. script var age parseInt(prompt('Quel est votre âge ?'));if (1 age && age 6) {alert('Vous êtes un jeune enfant.');} else if (7 age && age 11) {alert ('Vous êtes un enfant qui a atteint l\'âge de raison.');} else if (12 age && age 17) {alert ('Vous êtes un adolescent.');} else if (18 age && age 120) {alert ('Vous êtes un adulte.');} else {alert ('Erreur !!');} /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 5.Les boucles5.1. Incrémentation et décrémentationL'incrémentation permet d'ajouter une unité à un nombre au moyen d'une syntaxecourte. À l'inverse, la décrémentation permet de soustraire une unité. script var number 0;number ;alert(number); // Affiche : « 1 »number--;alert(number); // Affiche : « 0 » /script 5.2. La boucle whileUne boucle sert à répéter une série d'instructions. La répétition (ou itération) se faitjusqu'à ce qu'on dise à la boucle de s'arrêter. Pour une boucle, on pose une condition, etla boucle se répète tant que la condition est vérifiée (true), selon la structure suivante : script while (condition) {instruction 1; instruction 2; instruction 3;} /script Quand la boucle s'arrête, les instructions qui suivent la boucle sont executées : script var number 1;while (number 10) {number ; // Tant que le nombre est inférieur à 10, on l'incrémente de 1}alert(number); // Affiche : « 10 » /script Un exemple avec prompt() et break script var prenoms '', prenom; // On crée une variable prenoms pour mémoriserwhile (true) {prenom prompt('Entrez un prénom :'); // L'utilisateur entre chaque prenomif (prenom) {prenoms prenom ' '; // Ajoute le nouveau prénom ainsi qu'une espace} else {break; // On quitte la boucle}} alert(prenoms); // Affiche les prénoms à la suite /script
JavaScript5.3. La boucle do while (peu utile)Dans ce cas, la boucle est executée au moins une fois, après quoi on teste lacondition, selon la structure suivante : script do {instruction 1; instruction 2; instruction 3;} while (condition); /script 5.4. La boucle for (très utile)Cette boucle est très utile pour l'incrémentation automatique : script for (initialisation; condition; incrémentation) {instruction 1;instruction 2;instruction 3;} /script Par exemple : script for (var iter 1; iter 5; iter ) { // On initialise une variable, et tantqu'elle est inférieure ou égale à 5 on l'incrémente de 1.alert('Itération n ' iter); // A chaque fois on affiche une boîte dedialogue (5 fois)} /script Et avec les prénoms : script for (var prenoms '', prenom; true;) { // ici sans incrémentation nécessaire,mais avec un point-virgule obligatoire après la condition trueprenom prompt('Entrez un prénom :');if (prenom) { prenoms prenom ' '; }else { break; } }alert(prenoms); /script Mais on peut se servir de l'incrémentation pour compter le nombre de prénoms : script for (var i 0, prenoms '', prenom; true; i ) {prenom prompt('Entrez un prénom :');if (prenom) { prenoms prenom ' '; }else { break; } }alert('Il y a ' i ' prénoms :\n\n' prenoms); // Les \n servent à fairedes sauts de ligne /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 6.Les fonctionsIl y a les fonctions ou variables natives (déjà existantes), mais on peut aussi en créerde nouvelles, selon la structure suivante : script function myFunction(arguments) { // Le terme "function" est obligatoire pourdéclarer une fonction// Le code que la fonction va devoir exécuter} /script Par exemple : script function byTwo() {var result parseInt(prompt('Donnez le nombre à multiplier par 2 :'));alert(result * 2); }byTwo(); // On appelle la fonction crééealert('Vous en êtes à la moitié !'); // Puis un message intermédiairebyTwo(); // Et appelle de nouveau la fonction /script 6.1. Les variables locales et globalesAttention : toute variable déclarée dans une fonction n'est utilisable que dans cettemême fonction. Ces variables spécifiques à une seule fonction ont un nom : les variableslocales. Déclarées en dehors des fonction, on parle de variables globales. script var message 'Ici la variable globale !';function showMsg() {var message 'Ici la variable locale !';alert(message); }showMsg(); // On affiche la variable localealert(message); // Puis la variable globale /script Mais on évite de créer des variables locales et globales qui portent le même nom.En règle générale, on préfère utiliser des variables locales (pour éviter les confusions).6.2. Les argumentsPas obligatoire, l'argument peut être ainsi utilisé : script function myFunction(arg) { // Notre argument est la variable « arg »alert('Votre argument : ' arg); }myFunction('En voilà un beau test !'); /script
JavaScriptOu : script function myFunction(arg) {alert('Votre argument : ' arg); }myFunction(prompt('Que souhaitez-vous passer en argument à la fonction ?')); /script Ou encore avec des arguments multiples : script function moar(first, second) {// On peut maintenant utiliser les variables « first » et « second » comme onle souhaite :alert('Votre premier argument : ' first);alert('Votre deuxième argument : ' second);}moar(prompt('Entrez votre premier argument :'),prompt('Entrez votre deuxième argument :')); /script 6.3. Les valeurs de retourUne fonction peut retourner une seule valeur, stockée dans ue variable : script function sayHello() {return 'Bonjour !'; // L'instruction « return » suivie d'une valeur, cettedernière est donc renvoyée par la fonction (il ne peut pas y en avoir d'autres)}alert(sayHello()); /script 6.4. Les fonctions anonymes (bases)Elles supposent la structure suivante, sans nom : script function (arguments) {// Le code de votre fonction anonyme} /script Une fonction anonyme peut être utilisée, entre autres, par le biais d'une variable : script var sayHello function() {alert('Bonjour !');};sayHello(); /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 7.Les objets et les tableaux (1/2)7.1. Les objetsLes variables contiennent des objets, qui peuvent être des nombres, des chaînes decaractères ou des booléens. Mais le Javascript n'est pas un langage orienté objet (C ,C# ou Java), mais un langage orienté objet par prototype.Les objets contiennent trois choses :- un constructeur- des propriétés- des méthodes.Par exemple : script var myString 'Ceci est une chaîne de caractères'; // On crée un objet Stringalert(myString.length); // On affiche le nombre de caractères, au moyen de lapropriété « length »alert(myString.toUpperCase()); // On récupère la chaîne en majuscules, avec laméthode toUpperCase(), l'inverse étant la méthode toLowerCase() /script 7.2. Les tableauxAprès Number, String et Boolean, Array est un 4e objet natif de Javascript.Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieursvaleurs, appelées items. Chaque item est accessible au moyen d'un indice (index enanglais) et dont la numérotation commence à partir de 0. script var myArray ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume'];// Le contenu se définit entre crochets, avec une virgule entre chaque valeur.// La chaîne 'Rafael' correspond à l'indice 0, 'Mathilde' à l'indice 1.alert(myArray[1]); // Affiche : « Laurence » /script On peut modifier une valeur : script var myArray ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume'];myArray[1] 'Paul';alert(myArray[1]); // Affiche : « Paul » /script
JavaScript7.3. Opérations sur les tableauxOn peut ajouter des items avec la méthode push() : script var myArray ['Rafael', 'Mathilde'];myArray.push('Ahmed'); // Ajoute « Ahmed » à la fin du tableaumyArray.push('Jérôme', 'Guillaume'); // Ajoute « Jérôme » et « Guillaume » àla fin du tableau /script La méthode unshift() fonctionne comme push(), excepté que les items sont ajoutésau début du tableau. Les méthodes shift() et pop() retirent respectivement le premieret le dernier élément du tableau. script var myArray ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume'];myArray.shift(); // Retire « Rafael »myArray.pop(); // Retire « Guillaume »alert(myArray); // Affiche « Mathilde,Ahmed,Jérôme » /script On peut découper une chaîne de caractères en tableau avec split() : script var cousinsString 'Jérôme Guillaume Paul',cousinsArray cousinsString.split(' '); // Avec les espaces, on a trois itemsalert(cousinsString);alert(cousinsArray); /script On fait l'inverse avec join() : script var cousinsString 2 cousinsArray.join('-');alert(cousinsString 2); /script 7.4. Parcourir un tableauOn peut parcourir un tableau avec for : script var myArray ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume']; // Lalength est de 5for (var i 0, c myArray.length; i c; i ) { // On crée la variable cpour que la condition ne soit pas trop lourde en caractèresalert(myArray[i]); // On affiche chaque item, l'un après l'autre, jusqu'à lalongueur totale du tableau} /script Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.par F. Reynaud. 2012.
JavaScriptFICHE 8.Les objets et les tableaux (2/2)8.1. Les objets littérauxOn peut remplacer l'indice par un identifiant. Dans ce
2.1. Bases des variables en JavaScript Une variable consiste en un espace de stockage, qui permet de garder en mémoire tout type de données. La variable est ensuite utilisée dans les scripts. Une variable contient seulement des caractères alphanumériques, le (dollar) et le _ (underscore) ;
Fiche 1 Les tests de français 10 Fiche 2 Les tests d'orthographe 11 Fiche 3 Test : orthographe 12 Fiche 4 Les tests de vocabulaire 16 Fiche 5 Test : définitions 17 Fiche 6 Test : synonymes 24 Fiche 7 Test : antonymes 26 Fiche 8 Test : homonymes et paronymes 28 Fiche 9 Test : analogies 33 Fiche 10 Test : intrus 35 Fiche 11 Test : anagrammes 38 Fiche 12 Test : syllabes communes 43 Fiche 13 .
individuelle de travail Fiche 12. Les formes de la relation de travail Fiche 13. La qualifi cation du contrat de travail Fiche 14. L'embauche Fiche 15. La conclusion ducontrat de travail Fiche 16. Les clauses du contrat de travail Chapitre 4. L'employeur Fiche 17. Le pouvoir de direction Fiche 18. Le pouvoir réglementaire Fiche 19. Le pouvoir disciplinaire Fiche 20. Le transfert d .
Fiche 6 : Les articles indéfi nis (un, une, des) 14 Fiche 7 : Les articles défi nis (le, la, l’, les) 15 Fiche 8 : Les adjectifs de couleur 16 Fiche 9 : L’obligation : Il faut infi nitif 17 Fiche 10 : Les nombres de 21 à 60 18 Fiche 11 : Le présent du verbe être 19 Fiche 12 : Le genre des noms et des adjectifs (réguliers) 20
FICHE 16 L’analyse du texte argumentatif 291 FICHE 17 L’analyse de l’image 294 Les méthodes FICHE 18 Le commentaire 297 FICHE 19 La dissertation 301 FICHE 20 La contraction de texte 306 FICHE 21 L’essai 308 FICHE 22 La prise de notes 311 V E R S L E BAC. Histoire littéraire et culturelle .
Fiche 7 Domaine de définition d’une fonction, graphe 18 Focus La construction de l’ensemble des réels : les coupures de Dedekind 21 Fiche 8 Comment définir une fonction? 22 Fiche 9 Majorations et minorations 24 Fiche 10 Fonctions monotones 26 Fiche 11 Parité, imparité 28 Fiche 12 Symétries 30 Fiche 13 Fonctions périodiques 32
Chapitre 12 – Le système digestif Fiche 120 De l’alimentation aux nutriments 123 Fiche 121 L’appareil digestif : généralités 124 Fiche 122 L’histologie du tube digestif 125 Fiche 123 Le système nerveux entérique 126 Fiche 124 La cavité buccale 127 Fiche 125 L’œsophage et la déglutition 128 Fiche 126 L’estomac129
Groupes de travail 8 1. GÉNÉRALITÉS Fiche 1.1 Acronymes, sigles et abréviations 11 Fiche 1.2 Glossaire 12 Fiche 1.3 Recommandations à destination des responsables 15 Fiche 1.4 Consignes à destination des agents du service hébergement 16 2. LES PRODUITS D'ENTRETIEN Argumentaire pour le choix des produits d'entretien 21 Fiche 2.1 Critères de choix d'un détergent (d) 22 Fiche 2.2 .
Fiche-professeur n 4 : Comprendre un dialogue du film 17 Fiche-élève n 5 : Analyser les lieux du film 18 Fiche-professeur n 5 : Analyser les lieux du film 19 III. ANALYSE D‘UNE SÉQUENCE 20 Fiche-élève n 6 : Analyser une séquence du film 20 Fiche-professeur n 6 : Analyser une séquence du film 21 IV. ANNEXES 22
