Cours javascript

6 088 vues

Publié le

utilisation de javascript en html5 +css3

0 commentaire
14 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 088
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 582
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
14
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours javascript

  1. 1. Télécharger ce document en format pdf sur www.krymo.com .
  2. 2. Télécharger ce document en format pdf sur www.krymo.com JavaScript TutorielJavaScript est LE langage de script du web.JavaScript est utilisé dans des milliards de pages Web pour ajouter des fonctionnalités, valider les formulaires, communiqueravec le serveur, et bien plus encore.JavaScript est facile à apprendre. Vous ne le regretterez pas.Qui devrait lire ce tutoriel?1. Ce tutoriel est fait pour ceux qui veulent apprendre JavaScript:Que Javascript, et comment le faire fonctionner avec HTML et CSS.2. Ce tutoriel est aussi pour ceux qui ont utilisé le langage JavaScript avant:Mettez vos connaissances à jour. Beaucoup de choses ont changé dans le développement JavaScript durant les dernières années. .
  3. 3. Télécharger ce document en format pdf sur www.krymo.comCe que vous devriez déjà savoirAvant de continuer, vous devriez avoir une compréhension de base de ce qui suit: •HTML et CSSJavaScript introductionJavaScript est un langage de programmation dans le monde le plus populaire. Cest la langue pour le HTML et le Web, des serveurs, desPC, ordinateurs portables, tablettes, téléphones intelligents, et plus encore.JavaScript est un langage de scriptUn langage de script est un langage de programmation léger.JavaScript est un code de programmation qui peut être inséré dans des pages HTML.JavaScript inséré dans des pages HTML, peuvent être exécutées par tous les navigateurs modernes.JavaScript est facile à apprendre. .
  4. 4. Télécharger ce document en format pdf sur www.krymo.comCe que vous apprendrezVoici un avant-goût de ce que vous apprendrez dans ce didacticiel.JavaScript: lécriture dans la sortie HTMLExempledocument.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph</p>"); Vous ne pouvez utiliser document.write dans la sortie HTML. Si vous lutilisez après que le document ait été chargé, lensemble du document sera écrasé.JavaScript: Réagissant aux événementsExemple<button type="button" onclick="alert(Welcome!)">Click Me!</button>La fonction alert () nest pas très utilisé en JavaScript, mais il est souvent très utile pour essayer de code.Lévénement onclick est seulement lun des nombreux événements HTML que vous apprendrez dans ce didacticiel. .
  5. 5. Télécharger ce document en format pdf sur www.krymo.comJavaScript: Modification du contenu HTMLUtilisation de JavaScript pour manipuler le contenu des éléments HTML est une fonctionnalité très puissante.Exemplex=document.getElementById("demo") //Find the elementx.innerHTML="Hello JavaScript"; //Change the contentVous verrez souvent document.getElementById (" certains Identifiant ») . Elle est définie dans le DOM HTML.Le DOM ( D ocument O bjet M odèle) est la norme officielle du W3C pour accéder à des éléments HTML.Vous trouverez plusieurs chapitres sur le DOM HTML dans ce tutoriel.JavaScript: Modification de styles HTMLChanger le style dun élément HTML, est une variante de la modification dun attribut HTML.Exemplex=document.getElementById("demo") //Find the elementx.style.color="#ff0000"; //Change the style .
  6. 6. Télécharger ce document en format pdf sur www.krymo.comJavaScript: Valider lentréeJavaScript est couramment utilisé pour valider lentrée.Exempleif isNaN(x) {alert("Not Numeric")};Le saviez-vous? JavaScript et Java sont deux langues totalement différentes, à la fois concept et le design. Java (inventé par Sun) est un langage de programmation plus complexe dans la même catégorie que C.ECMA-262 est le nom officiel de la norme JavaScript. JavaScript a été inventé par Brendan Eich. Il est apparu dans Netscape (un navigateur qui nest plus présente) en 1995, et a été adopté par lECMA (association standard) depuis 1997.JavaScript Comment sexécute -t-il ?Son exécution au format HTML doit être inséré entre <script> et les balises </ script>.Les scripts peuvent être mis dans le body et dans la section <head> dune page HTML. .
  7. 7. Télécharger ce document en format pdf sur www.krymo.comLe Tag <script>Pour insérer un code JavaScript dans une page HTML, utilisez la balise <script>.Le <script> et </ script> indique où le JavaScript commence et se termine.Les lignes entre la <script> et </ script> contient le code JavaScript:<script>alert("My First JavaScript");</script>Vous navez pas besoin de comprendre le code ci-dessus. Il suffit de le prendre pour un fait, que le navigateur dinterpréter et dexécuter le code JavaScriptentre le <script> et </ script> balises. Exemples de lAncien peut avoir le type = "text / javascript" dans la balise <script>. Ce ne sont plus nécessaires. JavaScript est le langage de script par défaut dans tous les navigateurs modernes et en HTML5.Activer JavaScript dans le <body>Dans cet exemple, JavaScript écrit dans le body HTML, tandis que la page se charge:Exemple<!DOCTYPE html><html><body>. .
  8. 8. Télécharger ce document en format pdf sur www.krymo.com.<script>document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph</p>");</script>..</body></html>Les fonctions JavaScript et événementsLes instructions JavaScript dans lexemple ci-dessus, sont exécutés tandis que la page se charge.Le plus souvent, nous voulons exécuter du code lorsquun événement se produit, comme lorsque lutilisateur clique sur un bouton.Si nous mettons le code JavaScript dans une fonction , on peut appeler cette fonction lorsquun événement se produit.Vous apprendrez beaucoup plus sur les fonctions JavaScript et des événements dans les chapitres suivants.Activer JavaScript dans le <head> ou le <body>Vous pouvez placer un nombre illimité de scripts dans un document HTML.Les scripts peuvent être dans le body ou dans la section <head> de HTML, et / ou dans les deux.Il sagit dune pratique courante de mettre des fonctions dans la section <head>, ou au bas de la page. De cette façon, ils sont tous au même endroit et ne pasinterférer avec le contenu des pages. .
  9. 9. Télécharger ce document en format pdf sur www.krymo.comUne fonction JavaScript dans <head>Dans cet exemple, une fonction JavaScript est placée dans la section <head> dune page HTML.La fonction est appelée quand un bouton est cliqué:Exemple<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body></html>Une fonction JavaScript dans le <body>Dans cet exemple, une fonction JavaScript est placée dans la section body dune page HTML.La fonction est appelée quand un bouton est cliqué: .
  10. 10. Télécharger ce document en format pdf sur www.krymo.comExemple<!DOCTYPE html><html><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></body></html>JavaScripts externesLes scripts peuvent également être placés dans des fichiers externes. Les fichiers externes contiennent souvent du code pour être utilisé par plusieursdifférentes pages Web.Fichiers JavaScript externes ont lextension de fichier. Js. .
  11. 11. Télécharger ce document en format pdf sur www.krymo.comPour utiliser un script externe, pointez sur le fichier js dans lattribut "src" de la balise <script>.:Exemple<!DOCTYPE html><html><body><script src="myScript.js"></script></body></html>Vous pouvez placer le script dans len-tête ou <body> que vous le souhaitez. Le script se comporte comme si elle était située exactement là où vous placez labalise <script> dans le document. Scripts externes ne peuvent pas contenir des balises <script>.JavaScript sortieJavaScript est typiquement utilisé pour manipuler les éléments HTML. .
  12. 12. Télécharger ce document en format pdf sur www.krymo.comManipulation déléments HTMLPour accéder à un élément HTML à partir de JavaScript, vous pouvez utiliser le document.getElementById ( id ) méthode.Utilisez lattribut "id" pour identifier lélément HTML:ExempleAccédez à lélément HTML avec lid spécifié et modifier son contenu:<!DOCTYPE html><html><body><h1>My First Web Page</h1><p id="demo">My First Paragraph</p><script>document.getElementById("demo").innerHTML="My First JavaScript";</script></body></html>Le JavaScript est exécuté par le navigateur. Dans ce cas, le navigateur accéder à lélément HTML avec un id = "demo", et remplacez son contenu (innerHTML)avec "My JavaScript abord».Écrit à la sortie des documentsLexemple ci-dessous, écrit un élément <p> directement dans la production de documents HTML:Exemple<!DOCTYPE html><html><body> .
  13. 13. Télécharger ce document en format pdf sur www.krymo.com<h1>My First Web Page</h1><script>document.write("<p>My First JavaScript</p>");</script></body></html>AvertissementUtilisez document.write () uniquement pour écrire directement dans la production de documents.Si vous exécutez document.write après que le document a terminé le chargement, la page HTML sera écrasé:Exemple<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My First Paragraph.</p><button onclick="myFunction()">Try it</button><script>function myFunction(){ .
  14. 14. Télécharger ce document en format pdf sur www.krymo.comdocument.write("Oops! The document disappeared!");}</script></body></html>JavaScript dans Windows 8 Microsoft prend en charge JavaScript pour créer des applications Windows 8. JavaScript est certainement lavenir de lInternet et de Windows.JavaScript déclarations .
  15. 15. Télécharger ce document en format pdf sur www.krymo.comJavaScript est une séquence dinstructions à exécuter par le navigateur.Déclarations JavaScriptInstructions JavaScript sont des "commandes" au navigateur. Lobjectif de ces déclarations est de dire au navigateur ce quil faut faire.Cette déclaration indique au navigateur JavaScript pour écrire "Bonjour Dolly" à lintérieur dun élément HTML avec un id = "demo":document.getElementById("demo").innerHTML="Hello Dolly";Point-virgule;Point-virgule sépare les instructions JavaScript.Normalement, vous ajoutez un point-virgule à la fin de chaque instruction exécutable.En utilisant des points-virgules permet également décrire de nombreuses déclarations sur une seule ligne. Vous pouvez voir des exemples sans virgules. fin déclarations virgule est optionnel en JavaScript.Code JavaScriptLe code JavaScript (ou juste JavaScript) est une séquence dinstructions JavaScript.Chaque instruction est exécutée par le navigateur dans lordre où elles sont écrites.Cet exemple de manipuler deux éléments HTML: .
  16. 16. Télécharger ce document en format pdf sur www.krymo.comExempledocument.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";Blocs de code JavaScriptInstructions JavaScript peuvent être regroupés en blocs.Blocs commencer avec un crochet gauche bouclés, et se terminent par un crochet droit bouclés.Le but dun bloc est de rendre la séquence dinstructions pour exécuter ensemble.Un bon exemple de déclarations regroupées en blocs, sont JavaScript fonctions .Cet exemple exécute une fonction qui va manipuler deux éléments HTML:Exemplefunction myFunction(){document.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";}Vous en apprendrez plus sur les fonctions dans les chapitres suivants. .
  17. 17. Télécharger ce document en format pdf sur www.krymo.comJavaScript est sensible à la casseJavaScript est sensible à la casse.Surveillez votre capitalisation de près lorsque vous écrivez des instructions JavaScript:Un getElementById fonction nest pas la même que getElementById.Une variable myVariable nommé nest pas le même que MyVariable.White SpaceJavaScript ne tient pas compte des espaces supplémentaires. Vous pouvez ajouter un espace blanc pour votre script pour le rendre plus lisible. Les lignessuivantes sont équivalentes:var name="Hege";var name = "Hege";Briser une ligne de codeVous pouvez interrompre une ligne de code dans une chaîne de texte avec une barre oblique inverse. Lexemple ci-dessous saffiche correctement:document.write("Hello World!");Cependant, vous ne pouvez pas briser une ligne de code comme ceci:document.write ("Hello World!"); .
  18. 18. Télécharger ce document en format pdf sur www.krymo.comLe saviez-vous? JavaScript est un langage de script. Code de script est exécuté ligne par ligne alors que le navigateur le lit. Avec la programmation traditionnelle, tout le code doit être compilé avant de pouvoir être exécuté.JavaScript commentairesCommentaires JavaScript peut être utilisé pour rendre le code plus lisible.Commentaires JavaScriptCommentaires seront pas exécutées par JavaScript.Les commentaires peuvent être ajoutés pour expliquer le JavaScript ou pour rendre le code plus lisible.Commentaires dune ligne commencent par / /.Lexemple suivant utilise des lignes de commentaires simples à expliquer le code:Exemple// Write to a heading:document.getElementById("myH1").innerHTML="Welcome to my Homepage";// Write to a paragraph:document.getElementById("myP").innerHTML="This is my first paragraph."; .
  19. 19. Télécharger ce document en format pdf sur www.krymo.comJavaScript commentaires multi-lignesCommentaires multi-lignes commencent par / * et se terminent par * /.Lexemple suivant utilise un commentaire multi-lignes pour expliquer le code suivant:Exemple/*The code below will writeto a heading and to a paragraph,and will represent the start ofmy homepage:*/document.getElementById("myH1").innerHTML="Welcome to my Homepage";document.getElementById("myP").innerHTML="This is my first paragraph.";Utilisation de commentaires pour empêcher lexécutionDans lexemple suivant, le commentaire est utilisé pour empêcher lexécution de lune des lignes de code (peut convenir pour le débogage): .
  20. 20. Télécharger ce document en format pdf sur www.krymo.comExemple//document.getElementById("myH1").innerHTML="Welcome to my Homepage";document.getElementById("myP").innerHTML="This is my first paragraph.";Dans lexemple suivant, le commentaire est utilisé pour empêcher lexécution dun bloc de code (peut convenir pour le débogage):Exemple/*document.getElementById("myH1").innerHTML="Welcome to my Homepage";document.getElementById("myP").innerHTML="This is my first paragraph.";*/Utilisation des commentaires à la fin dune ligneDans lexemple ci-dessous le commentaire est placé à lextrémité dune ligne de code:Exemplevar x=5; // declare x and assign 5 to itvar y=x+2; // declare y and assign x+2 to it .
  21. 21. Télécharger ce document en format pdf sur www.krymo.comJavaScript variablesVariables JavaScript sont des "containers" pour stocker des informations:Exemplevar x=5;var y=6;var z=x+y;Ressemble à de lalgèbrex=5y=6z=x+yEn algèbre, nous utilisons des lettres (comme x) pour stocker des valeurs (comme 5).De lexpression z = x + y ci-dessus, nous pouvons calculer la valeur de z à 11.Dans ces lettres JavaScript sont appelés variables. .
  22. 22. Télécharger ce document en format pdf sur www.krymo.com Pensez à des variables comme conteneurs pour le stockage de données.Variables JavaScriptComme avec lalgèbre, les variables JavaScript peut être utilisé pour stocker des valeurs (x = 5) ou des expressions (z = x + y).Variable peut avoir des noms courts (comme x et y) ou des noms plus descriptifs (âge, somme, totalvolume). •Les noms de variables doivent commencer par une lettre •Les noms de variables peuvent aussi commencer avec $ et _ (mais nous ne lutiliserons pas) •Les noms de variables sont sensibles à la casse (y et Y sont des variables différentes) Les deux instructions JavaScript et JavaScript sont des variables sensibles à la casse.JavaScript types de donnéesVariables JavaScript peuvent également contenir dautres types de données, comme les valeurs de texte (name = "John Doe").En JavaScript un texte comme "John Doe" est appelé une chaîne.Il existe de nombreux types de variables JavaScript, mais pour linstant, il suffit de penser nombres et des chaînes.Lorsque vous affectez une valeur à une variable texte, mettre des guillemets doubles ou simples autour de la valeur.Lorsque vous affectez une valeur numérique à une variable, ne pas mettre des guillemets autour de la valeur. Si vous mettez des guillemets autour dune valeurnumérique, il sera traité comme du texte. .
  23. 23. Télécharger ce document en format pdf sur www.krymo.comExemplevar pi=3.14;var name="John Doe";var answer=Yes I am!;Déclaration (Création) Variables JavaScriptCréation dune variable en JavaScript est le plus souvent dénommé «déclarant» une variable.Vous déclarez les variables JavaScript avec le var mot-clé:var carname;Après la déclaration, la variable est vide (il na pas de valeur).Pour affecter une valeur à la variable, utilisez le signe égal:carname="Volvo";Cependant, vous pouvez également attribuer une valeur à la variable lors de sa déclaration:var carname="Volvo";Dans lexemple ci-dessous, nous créons une variable appelée RARnom, affecte la valeur "Volvo" pour elle, et mettre la valeur à lintérieur du paragraphe HTMLavec un id = "demo":Exemple<p id="demo"></p>var carname="Volvo";document.getElementById("demo").innerHTML=carname; .
  24. 24. Télécharger ce document en format pdf sur www.krymo.com Cest une bonne pratique de programmation de déclarer toutes les variables dont vous avez besoin, en un seul lieu, au début de votre code.Une déclaration, de nombreuses variablesVous pouvez déclarer plusieurs variables dans une instruction. Il suffit de commencer avec la déclaration var et séparer les variables par des virgules:var name="Doe", age=30, job="carpenter";Votre déclaration peut également sétendre sur plusieurs lignes:var name="Doe",age=30,job="carpenter";Valeur = undefinedDans les programmes informatiques, les variables sont souvent déclarée sans valeur. La valeur peut être quelque chose qui doit être calculé, ou quelque chosequi sera fournie plus tard, comme saisie de lutilisateur. Variable déclarée sans valeur aura la valeur undefined .La variable RARnom aura la valeur undefined après lexécution de linstruction suivante:var carname;Re-déclaration de variables javascriptSi vous re-déclarer une variable JavaScript, il ne perdra pas sa valeur:.La valeur de la variable RARnom auront toujours la valeur " Volvo "après lexécution des deux énoncés suivants: .
  25. 25. Télécharger ce document en format pdf sur www.krymo.comvar carname="Volvo";var carname;Arithmétique JavaScriptComme avec lalgèbre, vous pouvez faire de larithmétique avec des variables JavaScript, en utilisant des opérateurs comme = et +:Exempley=5;x=y+2;JavaScript types de donnéesString, Number, Boolean, Array, Object, null, undefined.JavaScript a des types dynamiquesJavaScript doit types dynamiques. Cela signifie que la même variable peut être utilisé en tant que types différents: .
  26. 26. Télécharger ce document en format pdf sur www.krymo.comExemplevar x // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a StringJavaScript StringsUne chaîne est une variable qui stocke une série de caractères comme «John Doe».Une chaîne peut être nimporte quel texte entre guillemets. Vous pouvez utiliser des guillemets simples ou doubles:Exemplevar carname="Volvo XC60";var carname=Volvo XC60;Vous pouvez utiliser des guillemets dans une chaîne, dans la mesure où elles ne correspondent pas les guillemets entourant la chaîne:Exemplevar answer="Its alright";var answer="He is called Johnny";var answer=He is called "Johnny";Vous en apprendrez beaucoup plus sur les chaînes de la section avancée de ce tutoriel.Numéros JavaScriptJavaScript ne dispose que dun seul type de numéros. Les nombres peuvent être écrits avec ou sans décimales: .
  27. 27. Télécharger ce document en format pdf sur www.krymo.comExemplevar x1=34.00; //Written with decimalsvar x2=34; //Written without decimalsExtra large ou extra petits nombres peuvent être écrits à caractère scientifique (exponentielle) Notation:Exemplevar y=123e5; // 12300000var z=123e-5; // 0.00123Vous en apprendrez beaucoup plus sur les numéros dans la section avancée de ce tutoriel.Booléens JavaScriptLes booléens peuvent avoir que deux valeurs: vrai ou faux.var x=truevar y=falseLes booléens sont souvent utilisés dans un test conditionnel. Vous en apprendrez plus sur le test conditionnel dans un chapitre ultérieur de ce tutoriel.Les tableaux JavaScriptLe code suivant crée un tableau appelé voitures: .
  28. 28. Télécharger ce document en format pdf sur www.krymo.comvar cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";ou (tableau résumé):var cars=new Array("Saab","Volvo","BMW");ou (littéral de tableau):Exemplevar cars=["Saab","Volvo","BMW"];Les indices de tableau sont basés sur zéro, ce qui signifie que le premier élément est [0], la deuxième est [1], et ainsi de suite.Vous en apprendrez beaucoup plus sur les tableaux dans les chapitres suivants de ce tutoriel.Objets JavaScriptUn objet est délimité par des accolades. Lintérieur des accolades propriétés de lobjet sont définis comme paires nom et valeur (nom: valeur). Les propriétéssont séparées par des virgules:var person={firstname:"John", lastname:"Doe", id:5566};Lobjet (personne) dans lexemple ci-dessus a 3 propriétés: nom, prénom, et id.Les espaces et les sauts de ligne ne sont pas importants. Votre déclaration peut sétendre sur plusieurs lignes:var person={firstname : "John",lastname : "Doe",id : 5566}; .
  29. 29. Télécharger ce document en format pdf sur www.krymo.comVous pouvez régler les propriétés de lobjet de deux manières:Exemplename=person.lastname;name=person["lastname"];Vous en apprendrez beaucoup plus sur les objets dans les chapitres suivants de ce tutoriel.Undefined et nullIndéfini est la valeur dune variable sans valeur.Les variables peuvent être vidés en définissant la valeur à null ;Exemplecars=null;person=null;Déclarer les types de variablesLorsque vous déclarez une variable, vous pouvez déclarer le type avec le "nouveau" mot-clé:var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object; Variables JavaScript sont tous des objets. Lorsque vous déclarez une variable que vous créez un nouvel objet. .
  30. 30. Télécharger ce document en format pdf sur www.krymo.comJavaScript objets"Everything" en JavaScript est un objet: une chaîne, un nombre, un tableau, une date ....En JavaScript, un objet est une donnée, avec des propriétés et des méthodes.Propriétés et méthodesPropriétés sont les valeurs associées à un objet.Méthodes sont des actions qui peuvent être effectuées sur les objets. .
  31. 31. Télécharger ce document en format pdf sur www.krymo.comUn objet Real Life. Une voiture:Propriétés: Méthodes:car.name = Fiatcar.model car.start () car.drive ()car.brake ()= 500 = 850 kgcar.weightcar.color =blancLes propriétés de la voiture inclure le nom, le modèle, le poids, la couleur, etcToutes les voitures ont ces propriétés, mais les valeurs de ces propriétés diffèrent dune voiture à.Les méthodes de la voiture pourrait être start (), disque (), le frein (), etcToutes les voitures sont ces méthodes, mais elles sont réalisées à des moments différents.Objets en JavaScript:En JavaScript, les objets sont des données (variables), avec des propriétés et des méthodes.Lorsque vous déclarez une variable JavaScript comme ceci:var txt = "Hello";En fait, vous créez un objet JavaScript String. Lobjet String a une longueur propriété intégré appelé. Pour la chaîne ci-dessus, la longueur a la valeur 5. LobjetString également plusieurs méthodes intégrées. .
  32. 32. Télécharger ce document en format pdf sur www.krymo.comPropriétés: Méthodes:txt.length = 5 txt.indexOf ()txt.replace "Bonjour" ()txt.search () Dans les langages orientés objet, les propriétés et les méthodes sont souvent appelés membres de lobjet .Vous en apprendrez davantage sur les propriétés et les méthodes de lobjet String dans un chapitre ultérieur de ce tutoriel.Création dobjets JavaScriptPresque "tout" en JavaScript est un objet. Cordes, dates, tableaux, fonctions.Vous pouvez également créer vos propres objets.Cet exemple crée un objet appelé «personne», et ajoute quatre propriétés de l:Exempleperson=new Object();person.firstname="John";person.lastname="Doe"; .
  33. 33. Télécharger ce document en format pdf sur www.krymo.comperson.age=50;person.eyecolor="blue";Il existe de nombreuses façons de créer de nouveaux objets JavaScript, et vous pouvez également ajouter des propriétés et des méthodes aux objets existants.Vous apprendrez beaucoup plus à ce sujet dans un chapitre ultérieur de ce tutoriel.Accès aux Propriétés de lobjetLa syntaxe pour accéder à la propriété dun objet est le suivant:objectName.propertyNameCet exemple utilise la propriété length de lobjet String pour trouver la longueur dune chaîne:var message="Hello World!";var x=message.length;La valeur de x, après lexécution du code ci-dessus sera:12Accès aux méthodes dobjetsVous pouvez appeler une méthode avec la syntaxe suivante:objectName.methodName()Cet exemple utilise la méthode toUpperCase () de lobjet String à convertir un texte en majuscules:var message="Hello world!";var x=message.toUpperCase();La valeur de x, après lexécution du code ci-dessus sera: .
  34. 34. Télécharger ce document en format pdf sur www.krymo.comHELLO WORLD!Le saviez-vous? Il est commun dans les langages orientés objets, dutiliser des noms de fonctions chameau de cas. Vous aurez plus souvent voir les noms de fonctions comme someMethod () au lieu de some_method ().JavaScript FonctionsUne fonction est un bloc de code qui sera exécuté quand "quelquun", il appelle:Exemple<!DOCTYPE html><html><head> .
  35. 35. Télécharger ce document en format pdf sur www.krymo.com<script>function myFunction(){alert("Hello World!");}</script></head><body><button onclick="myFunction()">Try it</button></body></html>Fonction Syntaxe JavaScriptUne fonction est écrite comme un bloc de code (à lintérieur des accolades accolades {}), précédée de la fonction de mot-clé:function functionname(){some code to be executed}Le code de la fonction sera exécutée lorsque "quelquun" appelle la fonction.La fonction peut être appelée directement lorsquun événement se produit (comme quand un utilisateur clique sur un bouton), et il peut être appelé à partir de«nimporte où» par le code JavaScript. .
  36. 36. Télécharger ce document en format pdf sur www.krymo.com JavaScript est sensible à la casse. Le mot-clé fonction doit être écrit en minuscules, et la fonction doit être appelée avec les mêmes capitales tel quil est utilisé dans le nom de la fonction.Appel dune fonction avec des argumentsLorsque vous appelez une fonction, vous pouvez transmettre des valeurs à lui, ces valeurs sont appeléesarguments ou paramètres .Ces arguments peuvent être utilisés à lintérieur de la fonction.Vous pouvez envoyer autant darguments que vous le souhaitez, séparées par des virgules (,)myFunction(argument1,argument2)Déclarer largument, en tant que variables, lorsque vous déclarez la fonction:function myFunction(var1,var2){some code}Les variables et les arguments doivent être dans lordre attendu. La première variable est donnée la valeur du premier argument passé etcExemple<button onclick="myFunction(Harry Potter,Wizard)">Try it</button><script>function myFunction(name,job){alert("Welcome " + name + ", the " + job);}</script> .
  37. 37. Télécharger ce document en format pdf sur www.krymo.comLa fonction ci-dessus alerter "Bienvenue Harry Potter, le magicien" lorsque le bouton est cliqué.La fonction est flexible, vous pouvez appeler la fonction avec des arguments différents, et différents messages de bienvenue sera donnée:Exemple<button onclick="myFunction(Harry Potter,Wizard)">Try it</button><button onclick="myFunction(Bob,Builder)">Try it</button>Lexemple ci-dessus va alerter "Bienvenue Harry Potter, le magicien» ou «Bienvenue Bob, le bricoleur" en fonction du bouton est cliqué.Fonctions Avec une valeur de retourParfois, vous voulez que votre fonction pour renvoyer une valeur de retour à lendroit où lappel a été fait.Ceci est possible en utilisant le retour déclaration.Lorsque vous utilisez le retour déclaration, la fonction arrêter lexécution, et de retourner la valeur spécifiée.Syntaxefunction myFunction(){var x=5;return x;}La fonction ci-dessus retournera la valeur 5.Remarque: Il nest pas le code JavaScript qui parviendra à arrêter lexécution, seule la fonction. JavaScript se poursuivra lexécution du code, où lappel defonction a été fabriqué à partir.Lappel de fonction sera remplacée par la valeur de retour:var myVar=myFunction();La variable myVar contient la valeur 5, qui est ce que la fonction "myFunction ()" retourne. .
  38. 38. Télécharger ce document en format pdf sur www.krymo.comVous pouvez également utiliser la valeur de retour sans lenregistrer comme une variable:document.getElementById("demo").innerHTML=myFunction();Le innerHTML de la "démo" élément sera de 5, ce qui est ce que la fonction "myFunction ()" retourne.Vous pouvez faire une valeur de retour fondée sur des arguments passés à la fonction:ExempleCalculer le produit de deux nombres, et renvoyer le résultat:function myFunction(a,b){return a*b;}document.getElementById("demo").innerHTML=myFunction(4,3);Le innerHTML de la "démo" élément sera:12Linstruction return est également utilisé lorsque vous souhaitez simplement quitter une fonction. Le retour de valeur est facultative:function myFunction(a,b){if (a>b) { return; }x=a+b}La fonction ci-dessus pour quitter la fonction si a> b, et ne calcule la somme de a et b. .
  39. 39. Télécharger ce document en format pdf sur www.krymo.comVariables locales JavaScriptUne variable déclarée (en utilisant var) dans une fonction JavaScript devient LOCAL et ne peut être consulté à partir de cette fonction. (La variable a uneportée locale).Vous pouvez avoir des variables locales avec le même nom dans différentes fonctions, parce que les variables locales ne sont reconnus par la fonction danslaquelle ils sont déclarés.Les variables locales sont supprimées dès que la fonction est terminée.Les variables globales JavaScriptLes variables déclarées en dehors dune fonction, deviennent MONDIALE , et tous les scripts et les fonctions de la page Web puissent y accéder.La durée de vie des variables javascriptLes variables de durée de vie, javascript commence au moment où ils sont déclarés.Les variables locales sont supprimées lorsque la fonction est terminée.Les variables globales sont supprimés lorsque vous fermez la page.Affectation de valeurs à des variables non déclarées JavaScriptSi vous affectez une valeur à une variable qui na pas encore été déclarée, la variable sera automatiquement déclaré comme GLOBAL variable.Cette déclaration:carname="Volvo";va déclarer la variable RARnom comme une variable globale, même si elle est exécutée à lintérieur dune fonction. .
  40. 40. Télécharger ce document en format pdf sur www.krymo.comJavaScript opérateurs= Est utilisé pour assigner des valeurs.+ Est utilisée pour ajouter des valeurs.Lopérateur daffectation = est utilisé pour assigner des valeurs aux variables JavaScript.Lopérateur arithmétique + est utilisé pour ajouter des valeurs.ExempleAssigner des valeurs aux variables et ajoutez-les ensemble:y=5;z=2;x=y+z;Le résultat de x sera:7 .
  41. 41. Télécharger ce document en format pdf sur www.krymo.comOpérateurs arithmétiques JavaScriptLes opérateurs arithmétiques sont utilisés pour effectuer des opérations arithmétiques entre les variables et / ou des valeurs.Étant donné que y = 5 , le tableau ci-dessous décrit les opérateurs arithmétiques:Opérateur Description Exemple Résultat de x Résultat dy + Addition x = y +2 7 5 - Soustraction x = y-2 3 5 * Multiplication x=y*2 10 5 / Division x=y/2 2,5 5 % Module (reste de la division) x = y 2% 1 5 ++ Incrémenter x=y++ 6 6 x=y++ 5 6 - Décrémenter x=-y 4 4 x=y- 5 4 .
  42. 42. Télécharger ce document en format pdf sur www.krymo.comLes opérateurs dassignation JavaScriptLes opérateurs daffectation sont utilisés pour assigner des valeurs aux variables JavaScript.Étant donné que x = 10 et y = 5 , le tableau ci-dessous explique les opérateurs daffectation:Opérateur Exemple Identique à la Résulter = x=y x=5 += x+y= x=x+y x = 15 -= x = y- x = xy x=5 *= x=y* x=x*y x = 50 /= x/y= x=x/y x=2 %= x = y% x = x y% x=0Lopérateur + Utilisé sur les chaînesLopérateur + peut également être utilisé pour ajouter des variables de chaîne ou des valeurs texte ensemble.ExemplePour ajouter deux ou plusieurs variables de chaîne en même temps, utilisez lopérateur +. .
  43. 43. Télécharger ce document en format pdf sur www.krymo.comtxt1="What a very";txt2="nice day";txt3=txt1+txt2;Le résultat de txt3 seront les suivants:What a verynice dayPour ajouter un espace entre les deux chaînes, insérez un espace dans lune des chaînes:Exempletxt1="What a very ";txt2="nice day";txt3=txt1+txt2;Le résultat de txt3 seront les suivants:What a very nice dayou insérer un espace dans lexpression:Exempletxt1="What a very";txt2="nice day";txt3=txt1+" "+txt2;Le résultat de txt3 seront les suivants:What a very nice day .
  44. 44. Télécharger ce document en format pdf sur www.krymo.comAjout de chaînes et les nombresAddition de deux nombres, sera de retour la somme, mais lajout dun nombre et une chaîne retourne une chaîne:Exemplex=5+5;y="5"+5;z="Hello"+5;Le résultat de x , y et z sont les suivants:1055Hello5La règle est la suivante: Si vous ajoutez un nombre et une chaîne, le résultat sera une chaîne!JavaScript comparaison et les opérateurs logiquesLes opérateurs de comparaison et logiques sont utilisés pour tester la vraie ou fausse .Opérateurs de comparaisonLes opérateurs de comparaison sont utilisées dans les états logiques pour déterminer légalité ou la différence entre les variables ou les valeurs.Étant donné que x = 5 , le tableau ci-dessous explique les opérateurs de comparaison:Opérateur Description Comparaison Résultats == est égal à x == 8 faux x == 5 vrai .
  45. 45. Télécharger ce document en format pdf sur www.krymo.com === est exactement égale à (valeur et le type) x === "5" faux x === 5 vrai != nest pas égal x! = 8 vrai ! == nest pas égale (ni valeur ni de type) x! == "5" vrai x! == 5 faux > est plus grande que x> 8 faux < est inférieur à x <8 vrai >= est supérieur ou égal à x> = 8 faux <= est inférieure ou égale à x <= 8 vraiComment peut-il être utiliséLes opérateurs de comparaison peuvent être utilisés dans des instructions conditionnelles pour comparer des valeurs et dagir en fonction du résultat:if (age<18) x="Too young";Vous en apprendrez plus sur lutilisation des instructions conditionnelles dans le prochain chapitre de ce tutoriel. .
  46. 46. Télécharger ce document en format pdf sur www.krymo.comOpérateurs logiquesLes opérateurs logiques sont utilisés pour déterminer la logique entre les variables ou les valeurs.Étant donné que x = 6 et y = 3 , le tableau ci-dessous explique les opérateurs logiques:Opérateur Description Exemple && et (X <10 && y> 1) est vraie || ou (X == 5 | | y == 5) est fausse ! pas ! (X == y) est vraieOpérateur conditionnelJavaScript contient également un opérateur conditionnel qui affecte une valeur à une variable en fonction de certaines conditions.Syntaxevariablename=(condition)?value1:value2 .
  47. 47. Télécharger ce document en format pdf sur www.krymo.comExempleExempleSi la variable âge est une valeur inférieure à 18, la valeur de la variable voteable sera «Trop jeune, sinon la valeur de voteable sera "assez vieux":voteable=(age<18)?"Too young":"Old enough";JavaScript if ... elseLes instructions conditionnelles sont utilisées pour effectuer des actions différentes en fonction de différentes conditions.Instructions conditionnellesTrès souvent, lorsque vous écrivez du code, vous souhaitez effectuer des actions différentes pour les différentes décisions. Vous pouvez utiliser des instructionsconditionnelles dans votre code pour ce faire.En JavaScript, nous avons les déclarations conditionnelles suivantes: •if - utiliser cette instruction pour exécuter du code seulement si une condition spécifiée est vraie .
  48. 48. Télécharger ce document en format pdf sur www.krymo.com •si ... else - utiliser cette instruction pour exécuter du code si la condition est vraie et un autre code si la condition est fausse •if ... else if .... else - utilisez cette commande pour sélectionner lun des nombreux blocs de code à exécuter •instruction switch - utilisez cette commande pour sélectionner lun des nombreux blocs de code à exécuterSi la déclaration est vraieUtilisez linstruction if pour exécuter du code seulement si une condition spécifiée est vraie.Syntaxeif (condition) { code to be executed if condition is true }Notez que si est écrit en lettres minuscules. Utilisant des majuscules (SI) va générer une erreur JavaScript!ExempleFaire un "Bonne journée" greeting si le temps est inférieur à 20:00:if (time<20) { x="Good day"; }Le résultat de x sera:Good dayRemarquez quil ny a pas dautre .. .. dans cette syntaxe. Vous dire au navigateur dexécuter du code seulement si la condition spécifiée est vraie . .
  49. 49. Télécharger ce document en format pdf sur www.krymo.comSi la déclaration est fausseUtilisez linstruction else if .... dexécuter du code si une condition est vraie et un autre code si la condition nest pas vraie.Syntaxeif (condition) { code to be executed if condition is true }else { code to be executed if condition is not true }ExempleSi le temps est inférieur à 20:00, vous obtiendrez un "Bonne journée" salut, sinon vous obtiendrez un «bonsoir» message daccueilif (time<20) { x="Good day"; }else { x="Good evening"; }Le résultat de x sera:Good day .
  50. 50. Télécharger ce document en format pdf sur www.krymo.comIf ... elseif ... elseUtilisez le si .... else if ... else pour sélectionner lun des plusieurs blocs de code à exécuter.Syntaxeif (condition1) { code to be executed if condition1 is true }else if (condition2) { code to be executed if condition2 is true }else { code to be executed if neither condition1 nor condition2 is true }ExempleSi le temps est inférieur à 10:00, vous obtiendrez un "bonjour" salut, si elle nest pas, mais le temps est inférieure à 20h00, vous obtiendrez un "Bonnejournée" salut, sinon vous aurez une bonne " soirée "message daccueil:if (time<10) { x="Good morning"; }else if (time<20) { x="Good day"; } .
  51. 51. Télécharger ce document en format pdf sur www.krymo.comelse { x="Good evening"; }Le résultat de x sera:Good dayJavaScript CommutateurLinstruction switch est utilisée pour exécuter cette action différente en fonction de différentes conditions.Linstruction switch JavaScriptUtilisez linstruction switch pour sélectionner lun des nombreux blocs de code à exécuter.Syntaxeswitch(n){case 1: execute code block 1 break;case 2: execute code block 2 break; .
  52. 52. Télécharger ce document en format pdf sur www.krymo.comdefault: code to be executed if n is different from case 1 and 2}Voilà comment cela fonctionne: Tout dabord, nous avons une seule expression n (le plus souvent une variable), qui est évaluée une fois. La valeur delexpression est ensuite comparée avec les valeurs de chaque cas dans la structure. Si une correspondance est trouvée, le bloc de code associée à cette espèceest exécutée. Utilisezbriser pour empêcher lexécution du code dans le cas suivant automatiquement.ExempleAfficher daujourdhui semaine-nom. Notez que dimanche = 0, lundi = 1, mardi = 2, etc:var day=new Date().getDay();switch (day){case 0: x="Today its Sunday"; break;case 1: x="Today its Monday"; break;case 2: x="Today its Tuesday"; break;case 3: x="Today its Wednesday"; break;case 4: x="Today its Thursday"; break;case 5: x="Today its Friday"; break;case 6: x="Today its Saturday"; .
  53. 53. Télécharger ce document en format pdf sur www.krymo.com break;}Le résultat de x sera:Today its SundayLe défaut Mots-clésUtilisez la valeur par défaut mot-clé pour spécifier ce quil faut faire sil ny a pas de correspondance:ExempleSi ce nest pas le samedi ou le dimanche, puis décrire un message par défaut:var day=new Date().getDay();switch (day){case 6: x="Today its Saturday"; break;case 0: x="Today its Sunday"; break;default: x="Looking forward to the Weekend";}Le résultat de x sera:Today its Sunday .
  54. 54. Télécharger ce document en format pdf sur www.krymo.comJavaScript boucle ForLes boucles peuvent exécuter un bloc de code un nombre de fois.JavaScript bouclesLes boucles sont à portée de main, si vous voulez exécuter le même code encore et encore, chaque fois avec une valeur différente.Souvent, cest le cas lorsque lon travaille avec des tableaux:Au lieu décrire:document.write(cars[0] + "<br>");document.write(cars[1] + "<br>");document.write(cars[2] + "<br>");document.write(cars[3] + "<br>");document.write(cars[4] + "<br>");document.write(cars[5] + "<br>"); .
  55. 55. Télécharger ce document en format pdf sur www.krymo.comVous pouvez écrire:for (var i=0;i<cars.length;i++){document.write(cars[i] + "<br>");}Différents types de bouclesJavaScript prend en charge différents types de boucles: •pour - une boucle dans un bloc de code un nombre de fois •pour / de - boucles à travers les propriétés dun objet •tandis que - une boucle à travers un bloc de code tant quune condition spécifiée est vraie •do / while - Boucles également à travers un bloc de code tant quune condition spécifiée est vraieLa boucle ForLa boucle for est souvent loutil que vous allez utiliser lorsque vous souhaitez créer une boucle.La boucle a la syntaxe suivante:for (statement 1; statement 2; statement 3) { the code block to be executed } .
  56. 56. Télécharger ce document en format pdf sur www.krymo.comDéclaration 1 est exécutée avant que la boucle (le bloc de code) commence.Déclaration 2 définit la condition pour courir la boucle (le bloc de code).Déclaration 3 est exécutée chaque fois après que la boucle (le bloc de code) a été exécutée.Exemplefor (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; }Dans lexemple ci-dessus, vous pouvez lire:Énoncé 1 définit une variable avant le début de la boucle (var i = 0).Déclaration 2 définit la condition pour que la boucle soit (i doit être inférieur à 5).Déclaration 3 augmente dune valeur (i + +) à chaque fois que le bloc de code dans la boucle a été exécutée.Énoncé 1Normalement, vous devez utiliser la déclaration de 1 à initier la variable utilisée dans la boucle (var i = 0).Ce nest pas toujours le cas, JavaScript ne se soucie pas, et létat 1 est facultative.Vous pouvez lancer toutes les valeurs (ou plusieurs) dans létat 1:Exemple:for (var i=0,len=cars.length; i<len; i++){document.write(cars[i] + "<br>");} .
  57. 57. Télécharger ce document en format pdf sur www.krymo.comEt vous pouvez omettre la déclaration 1 (comme quand vos valeurs sont définies avant que la boucle commence):Exemple:var i=2,len=cars.length;for (; i<len; i++){document.write(cars[i] + "<br>");}Déclaration 2Souvent, lénoncé 2 est utilisé pour évaluer létat de la variable initiale.Ce nest pas toujours le cas, JavaScript ne se soucie pas, et létat 2 est facultative.Si lénoncé 2 renvoie true, la boucle recommence, si elle retourne false, la boucle se termine. Si vous omettez la question 2, vous devez fournir une pause dans la boucle. Sinon, la boucle ne finira jamais. Cela planter votre navigateur. Lisez à propos des ruptures dans un chapitre ultérieur de ce tutoriel.Énoncé 3Souvent énoncé 3 augmente la variable initiale.Ce nest pas toujours le cas, JavaScript ne se soucie pas, et lénoncé 3 est facultative. .
  58. 58. Télécharger ce document en format pdf sur www.krymo.comDéclaration 3 pourrait rien faire. Lincrément peut être négatif (i -), ou plus (i = i +15).Déclaration 3 peut également être omis (comme quand vous avez un code correspondant à lintérieur de la boucle):Exemple:var i=0,len=cars.length;for (; i<len; ){document.write(cars[i] + "<br>");i++;}La boucle for / inLe JavaScript boucles for / in états à travers les propriétés dun objet:Exemplevar person={fname:"John",lname:"Doe",age:25};for (x in person) { txt=txt + person[x]; }Vous en apprendrez plus sur la boucle for / in dans le chapitre sur les objets JavaScript. .
  59. 59. Télécharger ce document en format pdf sur www.krymo.comLa boucle WhileLa boucle while et la. Boucle do / while sera expliqué dans le chapitre suivantJavaScript boucle WhileLes boucles peuvent exécuter un bloc de code tant quune condition spécifiée est vraie.La boucle WhileLes boucles boucle while par un bloc de code tant quune condition spécifiée est vraie.Syntaxewhile (condition) { code block to be executed } .
  60. 60. Télécharger ce document en format pdf sur www.krymo.comExempleLa boucle dans cet exemple continuera à fonctionner tant que la variable i est inférieur à 5:Exemplewhile (i<5) { x=x + "The number is " + i + "<br>"; i++; } Si vous oubliez daugmenter la variable utilisée dans la condition, la boucle ne finira jamais. Cela planter votre navigateur.La boucle do / whileLa boucle do / while est une variante de la boucle while. Cette boucle exécute le bloc de code une fois, avant de vérifier si la condition est vraie, alors ellerépète la boucle tant que la condition est vraie.Syntaxedo { code block to be executed }while (condition); .
  61. 61. Télécharger ce document en format pdf sur www.krymo.comExempleLexemple ci-dessous utilise un / do while. La boucle est toujours exécutée au moins une fois, même si la condition est fausse, parce que le bloc de code estexécuté avant que la condition est testée:Exempledo { x=x + "The number is " + i + "<br>"; i++; }while (i<5);Ne pas oublier daugmenter la variable utilisée dans la condition, sinon la boucle ne finira jamais!Pour comparer et BienSi vous avez lu le chapitre précédent, à propos de la boucle for, vous allez découvrir que une boucle while est bien la même que celle dune boucle for, avec ladéclaration 1 et 3 Déclaration omis.La boucle dans cet exemple utilise une boucle for pour afficher toutes les valeurs dans le tableau voitures:Exemplecars=["BMW","Volvo","Saab","Ford"];var i=0;for (;cars[i];){document.write(cars[i] + "<br>");i++;}La boucle dans cet exemple utilise une boucle while pour afficher toutes les valeurs dans le tableau voitures: .
  62. 62. Télécharger ce document en format pdf sur www.krymo.comExemplecars=["BMW","Volvo","Saab","Ford"];var i=0;while (cars[i]){document.write(cars[i] + "<br>");i++;}JavaScript break et continueLinstruction break "saute" dune boucle.Linstruction continue "saute" une itération dans la boucle.Linstruction breakVous avez déjà vu linstruction break utilisé dans un chapitre précédent de ce tutoriel. Il a été utilisé pour "sauter" dune instruction switch ().Linstruction break peut également être utilisée pour sortir dune boucle.L instruction break interrompt la boucle et continue à exécuter le code après la boucle (le cas échéant):Exemplefor (i=0;i<10;i++) { if (i==3) { .
  63. 63. Télécharger ce document en format pdf sur www.krymo.com break; } x=x + "The number is " + i + "<br>"; }Depuis linstruction if a quune seule ligne de code, les accolades peuvent être omises:for (i=0;i<10;i++) { if (i==3) break; x=x + "The number is " + i + "<br>"; }Linstruction continueL instruction continue rompt une itération (en boucle), si une condition spécifiée se produit et se poursuit avec la prochaine itération de la boucle.Cet exemple ignorait la valeur de 3:Exemplefor (i=0;i<=10;i++) { if (i==3) continue; x=x + "The number is " + i + "<br>"; } .
  64. 64. Télécharger ce document en format pdf sur www.krymo.comÉtiquettes JavaScriptComme vous lavez déjà vu, dans le chapitre sur linstruction switch, instructions JavaScript peuvent être étiquetés.Pour étiqueter des instructions JavaScript vous faites précéder les déclarations de deux points:label:statementsLa rupture et les états continuent sont les seules déclarations de JavaScript qui peuvent «sauter hors dun« bloc de code.Syntaxe:break labelname;continue labelname;Linstruction continue (avec ou sans référence à une étiquette) ne peut être utilisé à lintérieur dune boucle.Linstruction break, sans référence à une étiquette, ne peut être utilisé à lintérieur dune boucle ou dun commutateur.Avec une référence étiquette, il peut être utilisé pour "sauter hors de" tout bloc de code JavaScript:Exemplecars=["BMW","Volvo","Saab","Ford"];list:{document.write(cars[0] + "<br>");document.write(cars[1] + "<br>");document.write(cars[2] + "<br>");break list;document.write(cars[3] + "<br>");document.write(cars[4] + "<br>");document.write(cars[5] + "<br>");} .
  65. 65. Télécharger ce document en format pdf sur www.krymo.comJavaScript ErreursL essai de déclaration vous permet de tester un bloc de code derreur.La prise de déclaration vous permet de gérer lerreur.Le jet de déclaration vous permet de créer des erreurs personnalisées. Des erreurs se produisent!Lorsque le moteur JavaScript exécute le code JavaScript, différentes erreurs peuvent se produire:Il peut y avoir des erreurs de syntaxe, généralement des erreurs de codage ou de frappe faites par le programmeur.Il peut être mal orthographié ou manquant caractéristiques de la langue (peut-être dues à des différences de navigateur).Il peut y avoir des erreurs dues à une mauvaise entrée, provenant dun utilisateur, ou à partir dun serveur Internet.Et, bien sûr, il peut y avoir beaucoup dautres choses imprévisibles.Renvoie des erreurs JavaScriptLorsquune erreur se produit, quand quelque chose se passe mal, le moteur JavaScript va normalement sarrêter et générer un message derreur.Le terme technique pour cela est: JavaScript va lancer une erreur. .
  66. 66. Télécharger ce document en format pdf sur www.krymo.comJavaScript try et catchL essai déclaration vous permet de définir un bloc de code à tester des erreurs alors quil est en cours dexécution.La prise déclaration vous permet de définir un bloc de code à exécuter si une erreur se produit dans le bloc try.Les instructions JavaScript essayer et les captures viennent en couples.Syntaxetry { //Run some code here }catch(err) { //Handle errors here }ExemplesDans lexemple ci-dessous, nous avons délibérément fait une faute de frappe dans le code dans le bloc try.Le bloc catch intercepte lerreur dans le bloc try, et exécute le code pour y faire face:Exemple<!DOCTYPE html><html><head> .
  67. 67. Télécharger ce document en format pdf sur www.krymo.com<script>var txt="";function message(){try { adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.nn"; txt+="Error description: " + err.message + "nn"; txt+="Click OK to continue.nn"; alert(txt); }}</script></head><body><input type="button" value="View message" onclick="message()"></body></html>Linstruction throwLinstruction throw vous permet de créer une erreur personnalisée.Le terme technique est de créer ou de lever une exception .Si vous utilisez linstruction throw avec try et catch, vous pouvez contrôler le déroulement du programme et de générer des messages derreur personnalisés. .
  68. 68. Télécharger ce document en format pdf sur www.krymo.comSyntaxethrow exceptionLexception peut être une chaîne JavaScript, un numéro, un booléen ou un objet.ExempleCet exemple porte sur la valeur dune variable dentrée. Si la valeur est incorrecte, une exception (erreur) est renvoyée. Lerreur est interceptée par linstructioncatch et un message derreur personnalisé saffiche:Exemple<script>function myFunction(){try { var x=document.getElementById("demo").value; if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "to high"; if(x<5) throw "too low"; }catch(err) { var y=document.getElementById("mess"); y.innerHTML="Error: " + err + "."; }}</script><h1>My First JavaScript</h1><p>Please input a number between 5 and 10:</p><input id="demo" type="text"><button type="button" onclick="myFunction()">Test Input</button><p id="mess"></p> .
  69. 69. Télécharger ce document en format pdf sur www.krymo.comJavaScript FormulairesValidation de formulaires JavaScriptJavaScript peut être utilisé pour valider les données des formulaires HTML avant denvoyer le contenu vers un serveur.Les données de formulaire sont généralement vérifiés par un JavaScript pourrait être: •lutilisateur a laissé des champs obligatoires vides? •lutilisateur a entré une adresse e-mail? •lutilisateur a entré une date valide? •lutilisateur a entré du texte dans un champ numérique?Champs obligatoiresLa fonction ci-dessous vérifie si un champ a été laissé vide. Si le champ est vide, un message dalerte avertit un message, la fonction retourne false, et leformulaire ne sera pas soumis:function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x=="") { alert("First name must be filled out"); return false; }}La fonction ci-dessus pourrait être appelée lorsque le formulaire est soumis: .
  70. 70. Télécharger ce document en format pdf sur www.krymo.comExemple<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form>E-mail de validationLa fonction ci-dessous vérifie si le contenu a la syntaxe générale dun e-mail.Cela signifie que les données dentrée doit contenir le signe @ et au moins un point (.). En outre, le @ ne doit pas être le premier caractère de ladresse e-mail,et le dernier point doit être présent après le signe @ et un minimum de 2 caractères avant la fin:function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; }}La fonction ci-dessus pourrait être appelée lorsque le formulaire est soumis:Exemple<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">Email: <input type="text" name="email"> .
  71. 71. Télécharger ce document en format pdf sur www.krymo.com<input type="submit" value="Submit"></form> .

×