SlideShare une entreprise Scribd logo

Cours javascript

K
K

utilisation de javascript en html5 +css3

Cours javascript

1  sur  71
Télécharger ce document en format pdf sur www.krymo.com




                                                          .
Télécharger ce document en format pdf sur www.krymo.com




                                                     JavaScript Tutoriel


JavaScript est LE langage de script du web.
JavaScript est utilisé dans des milliards de pages Web pour ajouter des fonctionnalités, valider les formulaires, communiquer
avec 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.



                                                                                                                                .
Télécharger ce document en format pdf sur www.krymo.com



Ce que vous devriez déjà savoir
Avant de continuer, vous devriez avoir une compréhension de base de ce qui suit:

       •HTML et CSS




JavaScript introduction



JavaScript est un langage de programmation dans le monde le plus populaire. C'est la langue pour le HTML et le Web, des serveurs, des
PC, ordinateurs portables, tablettes, téléphones intelligents, et plus encore.




JavaScript est un langage de script
Un 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.




                                                                                                                                        .
Télécharger ce document en format pdf sur www.krymo.com

Ce que vous apprendrez
Voici un avant-goût de ce que vous apprendrez dans ce didacticiel.




JavaScript: l'écriture dans la sortie HTML
Exemple
document.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 l'utilisez après que le document ait été chargé, l'ensemble du document sera
       écrasé.




JavaScript: Réagissant aux événements
Exemple
<button type="button" onclick="alert('Welcome!')">Click Me!</button>



La fonction alert () n'est pas très utilisé en JavaScript, mais il est souvent très utile pour essayer de code.

L'événement onclick est seulement l'un des nombreux événements HTML que vous apprendrez dans ce didacticiel.




                                                                                                                                                          .
Télécharger ce document en format pdf sur www.krymo.com

JavaScript: Modification du contenu HTML
Utilisation de JavaScript pour manipuler le contenu des éléments HTML est une fonctionnalité très puissante.

Exemple
x=document.getElementById("demo")            //Find the element
x.innerHTML="Hello JavaScript";              //Change the content



Vous 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 HTML
Changer le style d'un élément HTML, est une variante de la modification d'un attribut HTML.

Exemple
x=document.getElementById("demo")            //Find the element
x.style.color="#ff0000";                     //Change the style




                                                                                                               .
Télécharger ce document en format pdf sur www.krymo.com

JavaScript: Valider l'entrée
JavaScript est couramment utilisé pour valider l'entrée.

Exemple
if 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 n'est plus présente) en 1995, et a été adopté par
      l'ECMA (association standard) depuis 1997.




JavaScript Comment s'exé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> d'une page HTML.




                                                                                                                                                                .

Contenu connexe

Tendances

Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menusLilia Sfaxi
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPYouness Boukouchi
 
Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation FlutterAppstud
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 

Tendances (20)

Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation Flutter
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction a Flutter
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 

En vedette (7)

Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
 
Php
PhpPhp
Php
 
INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 

Similaire à Cours javascript

Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.pptPROFPROF11
 
Jquery
JqueryJquery
Jquerykrymo
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptxlaabid1
 
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...ATPENSC-Group
 
Formation java script
Formation java scriptFormation java script
Formation java scriptRomdhani Asma
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilitemikeh
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 

Similaire à Cours javascript (20)

js.pdf
js.pdfjs.pdf
js.pdf
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
Jquery
JqueryJquery
Jquery
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Chapter1
Chapter1Chapter1
Chapter1
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
M31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdfM31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdf
 
Html 5
Html 5Html 5
Html 5
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
 
Chapitre 4 Java script
Chapitre 4 Java scriptChapitre 4 Java script
Chapitre 4 Java script
 
Formation java script
Formation java scriptFormation java script
Formation java script
 
Html de base
Html de baseHtml de base
Html de base
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 

Cours javascript

  • 1. Télécharger ce document en format pdf sur www.krymo.com .
  • 2. Télécharger ce document en format pdf sur www.krymo.com JavaScript Tutoriel JavaScript est LE langage de script du web. JavaScript est utilisé dans des milliards de pages Web pour ajouter des fonctionnalités, valider les formulaires, communiquer avec 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. Télécharger ce document en format pdf sur www.krymo.com Ce que vous devriez déjà savoir Avant de continuer, vous devriez avoir une compréhension de base de ce qui suit: •HTML et CSS JavaScript introduction JavaScript est un langage de programmation dans le monde le plus populaire. C'est la langue pour le HTML et le Web, des serveurs, des PC, ordinateurs portables, tablettes, téléphones intelligents, et plus encore. JavaScript est un langage de script Un 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. Télécharger ce document en format pdf sur www.krymo.com Ce que vous apprendrez Voici un avant-goût de ce que vous apprendrez dans ce didacticiel. JavaScript: l'écriture dans la sortie HTML Exemple document.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 l'utilisez après que le document ait été chargé, l'ensemble du document sera écrasé. JavaScript: Réagissant aux événements Exemple <button type="button" onclick="alert('Welcome!')">Click Me!</button> La fonction alert () n'est pas très utilisé en JavaScript, mais il est souvent très utile pour essayer de code. L'événement onclick est seulement l'un des nombreux événements HTML que vous apprendrez dans ce didacticiel. .
  • 5. Télécharger ce document en format pdf sur www.krymo.com JavaScript: Modification du contenu HTML Utilisation de JavaScript pour manipuler le contenu des éléments HTML est une fonctionnalité très puissante. Exemple x=document.getElementById("demo") //Find the element x.innerHTML="Hello JavaScript"; //Change the content Vous 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 HTML Changer le style d'un élément HTML, est une variante de la modification d'un attribut HTML. Exemple x=document.getElementById("demo") //Find the element x.style.color="#ff0000"; //Change the style .
  • 6. Télécharger ce document en format pdf sur www.krymo.com JavaScript: Valider l'entrée JavaScript est couramment utilisé pour valider l'entrée. Exemple if 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 n'est plus présente) en 1995, et a été adopté par l'ECMA (association standard) depuis 1997. JavaScript Comment s'exé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> d'une page HTML. .
  • 7. Télécharger ce document en format pdf sur www.krymo.com Le 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 n'avez pas besoin de comprendre le code ci-dessus. Il suffit de le prendre pour un fait, que le navigateur d'interpréter et d'exécuter le code JavaScript entre le <script> et </ script> balises. Exemples de l'Ancien 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. 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énements Les instructions JavaScript dans l'exemple ci-dessus, sont exécutés tandis que la page se charge. Le plus souvent, nous voulons exécuter du code lorsqu'un événement se produit, comme lorsque l'utilisateur clique sur un bouton. Si nous mettons le code JavaScript dans une fonction , on peut appeler cette fonction lorsqu'un é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 s'agit d'une 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 pas interférer avec le contenu des pages. .
  • 9. Télécharger ce document en format pdf sur www.krymo.com Une fonction JavaScript dans <head> Dans cet exemple, une fonction JavaScript est placée dans la section <head> d'une 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 d'une page HTML. La fonction est appelée quand un bouton est cliqué: .
  • 10. Télécharger ce document en format pdf sur www.krymo.com Exemple <!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 externes Les scripts peuvent également être placés dans des fichiers externes. Les fichiers externes contiennent souvent du code pour être utilisé par plusieurs différentes pages Web. Fichiers JavaScript externes ont l'extension de fichier. Js. .
  • 11. Télécharger ce document en format pdf sur www.krymo.com Pour utiliser un script externe, pointez sur le fichier js dans l'attribut "src" de la balise <script>.: Exemple <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html> Vous pouvez placer le script dans l'en-tête ou <body> que vous le souhaitez. Le script se comporte comme si elle était située exactement là où vous placez la balise <script> dans le document. Scripts externes ne peuvent pas contenir des balises <script>. JavaScript sortie JavaScript est typiquement utilisé pour manipuler les éléments HTML. .
  • 12. Télécharger ce document en format pdf sur www.krymo.com Manipulation d'éléments HTML Pour accéder à un élément HTML à partir de JavaScript, vous pouvez utiliser le document.getElementById ( id ) méthode. Utilisez l'attribut "id" pour identifier l'élément HTML: Exemple Accédez à l'élément HTML avec l'id 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 documents L'exemple ci-dessous, écrit un élément <p> directement dans la production de documents HTML: Exemple <!DOCTYPE html> <html> <body> .
  • 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> Avertissement Utilisez 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. Télécharger ce document en format pdf sur www.krymo.com document.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 l'avenir de l'Internet et de Windows. JavaScript déclarations .
  • 15. Télécharger ce document en format pdf sur www.krymo.com JavaScript est une séquence d'instructions à exécuter par le navigateur. Déclarations JavaScript Instructions JavaScript sont des "commandes" au navigateur. L'objectif de ces déclarations est de dire au navigateur ce qu'il faut faire. Cette déclaration indique au navigateur JavaScript pour écrire "Bonjour Dolly" à l'intérieur d'un é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 JavaScript Le code JavaScript (ou juste JavaScript) est une séquence d'instructions JavaScript. Chaque instruction est exécutée par le navigateur dans l'ordre où elles sont écrites. Cet exemple de manipuler deux éléments HTML: .
  • 16. Télécharger ce document en format pdf sur www.krymo.com Exemple document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; Blocs de code JavaScript Instructions 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 d'un bloc est de rendre la séquence d'instructions 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: Exemple function 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. Télécharger ce document en format pdf sur www.krymo.com JavaScript est sensible à la casse JavaScript est sensible à la casse. Surveillez votre capitalisation de près lorsque vous écrivez des instructions JavaScript: Un getElementById fonction n'est pas la même que getElementById. Une variable myVariable nommé n'est pas le même que MyVariable. White Space JavaScript ne tient pas compte des espaces supplémentaires. Vous pouvez ajouter un espace blanc pour votre script pour le rendre plus lisible. Les lignes suivantes sont équivalentes: var name="Hege"; var name = "Hege"; Briser une ligne de code Vous pouvez interrompre une ligne de code dans une chaîne de texte avec une barre oblique inverse. L'exemple ci-dessous s'affiche correctement: document.write("Hello World!"); Cependant, vous ne pouvez pas briser une ligne de code comme ceci: document.write ("Hello World!"); .
  • 18. Télécharger ce document en format pdf sur www.krymo.com Le 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 commentaires Commentaires JavaScript peut être utilisé pour rendre le code plus lisible. Commentaires JavaScript Commentaires 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 d'une ligne commencent par / /. L'exemple 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. Télécharger ce document en format pdf sur www.krymo.com JavaScript commentaires multi-lignes Commentaires multi-lignes commencent par / * et se terminent par * /. L'exemple suivant utilise un commentaire multi-lignes pour expliquer le code suivant: Exemple /* The code below will write to a heading and to a paragraph, and will represent the start of my homepage: */ document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; Utilisation de commentaires pour empêcher l'exécution Dans l'exemple suivant, le commentaire est utilisé pour empêcher l'exécution de l'une des lignes de code (peut convenir pour le débogage): .
  • 20. Télécharger ce document en format pdf sur www.krymo.com Exemple //document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; Dans l'exemple suivant, le commentaire est utilisé pour empêcher l'exécution d'un 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 d'une ligne Dans l'exemple ci-dessous le commentaire est placé à l'extrémité d'une ligne de code: Exemple var x=5; // declare x and assign 5 to it var y=x+2; // declare y and assign x+2 to it .
  • 21. Télécharger ce document en format pdf sur www.krymo.com JavaScript variables Variables JavaScript sont des "containers" pour stocker des informations: Exemple var x=5; var y=6; var z=x+y; Ressemble à de l'algèbre x=5 y=6 z=x+y En algèbre, nous utilisons des lettres (comme x) pour stocker des valeurs (comme 5). De l'expression z = x + y ci-dessus, nous pouvons calculer la valeur de z à 11. Dans ces lettres JavaScript sont appelés variables. .
  • 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 JavaScript Comme avec l'algè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 l'utiliserons 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ées Variables JavaScript peuvent également contenir d'autres 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 l'instant, 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 d'une valeur numérique, il sera traité comme du texte. .
  • 23. Télécharger ce document en format pdf sur www.krymo.com Exemple var pi=3.14; var name="John Doe"; var answer='Yes I am!'; Déclaration (Création) Variables JavaScript Création d'une 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 n'a 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 l'exemple ci-dessous, nous créons une variable appelée RARnom, affecte la valeur "Volvo" pour elle, et mettre la valeur à l'intérieur du paragraphe HTML avec un id = "demo": Exemple <p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname; .
  • 24. Télécharger ce document en format pdf sur www.krymo.com C'est 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 variables Vous 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 = undefined Dans les programmes informatiques, les variables sont souvent déclarée sans valeur. La valeur peut être quelque chose qui doit être calculé, ou quelque chose qui sera fournie plus tard, comme saisie de l'utilisateur. Variable déclarée sans valeur aura la valeur undefined . La variable RARnom aura la valeur undefined après l'exécution de l'instruction suivante: var carname; Re-déclaration de variables javascript Si 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 l'exécution des deux énoncés suivants: .
  • 25. Télécharger ce document en format pdf sur www.krymo.com var carname="Volvo"; var carname; Arithmétique JavaScript Comme avec l'algèbre, vous pouvez faire de l'arithmétique avec des variables JavaScript, en utilisant des opérateurs comme = et +: Exemple y=5; x=y+2; JavaScript types de données String, Number, Boolean, Array, Object, null, undefined. JavaScript a des types dynamiques JavaScript doit types dynamiques. Cela signifie que la même variable peut être utilisé en tant que types différents: .
  • 26. Télécharger ce document en format pdf sur www.krymo.com Exemple var x // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String JavaScript Strings Une chaîne est une variable qui stocke une série de caractères comme «John Doe». Une chaîne peut être n'importe quel texte entre guillemets. Vous pouvez utiliser des guillemets simples ou doubles: Exemple var 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: Exemple var answer="It's 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 JavaScript JavaScript ne dispose que d'un seul type de numéros. Les nombres peuvent être écrits avec ou sans décimales: .
  • 27. Télécharger ce document en format pdf sur www.krymo.com Exemple var x1=34.00; //Written with decimals var x2=34; //Written without decimals Extra large ou extra petits nombres peuvent être écrits à caractère scientifique (exponentielle) Notation: Exemple var y=123e5; // 12300000 var z=123e-5; // 0.00123 Vous en apprendrez beaucoup plus sur les numéros dans la section avancée de ce tutoriel. Booléens JavaScript Les booléens peuvent avoir que deux valeurs: vrai ou faux. var x=true var y=false Les 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 JavaScript Le code suivant crée un tableau appelé voitures: .
  • 28. Télécharger ce document en format pdf sur www.krymo.com var 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): Exemple var 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 JavaScript Un objet est délimité par des accolades. L'intérieur des accolades propriétés de l'objet sont définis comme paires nom et valeur (nom: valeur). Les propriétés sont séparées par des virgules: var person={firstname:"John", lastname:"Doe", id:5566}; L'objet (personne) dans l'exemple 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. Télécharger ce document en format pdf sur www.krymo.com Vous pouvez régler les propriétés de l'objet de deux manières: Exemple name=person.lastname; name=person["lastname"]; Vous en apprendrez beaucoup plus sur les objets dans les chapitres suivants de ce tutoriel. Undefined et null Indéfini est la valeur d'une variable sans valeur. Les variables peuvent être vidés en définissant la valeur à null ; Exemple cars=null; person=null; Déclarer les types de variables Lorsque 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. Télécharger ce document en format pdf sur www.krymo.com JavaScript 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éthodes Propriétés sont les valeurs associées à un objet. Méthodes sont des actions qui peuvent être effectuées sur les objets. .
  • 31. Télécharger ce document en format pdf sur www.krymo.com Un objet Real Life. Une voiture: Propriétés: Méthodes: car.name = Fiatcar.model car.start () car.drive ()car.brake () = 500 = 850 kg car.weightcar.color = blanc Les propriétés de la voiture inclure le nom, le modèle, le poids, la couleur, etc Toutes les voitures ont ces propriétés, mais les valeurs de ces propriétés diffèrent d'une voiture à. Les méthodes de la voiture pourrait être start (), disque (), le frein (), etc Toutes 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. L'objet String a une longueur propriété intégré appelé. Pour la chaîne ci-dessus, la longueur a la valeur 5. L'objet String également plusieurs méthodes intégrées. .
  • 32. Télécharger ce document en format pdf sur www.krymo.com Proprié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 l'objet . Vous en apprendrez davantage sur les propriétés et les méthodes de l'objet String dans un chapitre ultérieur de ce tutoriel. Création d'objets JavaScript Presque "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': Exemple person=new Object(); person.firstname="John"; person.lastname="Doe"; .
  • 33. Télécharger ce document en format pdf sur www.krymo.com person.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 l'objet La syntaxe pour accéder à la propriété d'un objet est le suivant: objectName.propertyName Cet exemple utilise la propriété length de l'objet String pour trouver la longueur d'une chaîne: var message="Hello World!"; var x=message.length; La valeur de x, après l'exécution du code ci-dessus sera: 12 Accès aux méthodes d'objets Vous pouvez appeler une méthode avec la syntaxe suivante: objectName.methodName() Cet exemple utilise la méthode toUpperCase () de l'objet String à convertir un texte en majuscules: var message="Hello world!"; var x=message.toUpperCase(); La valeur de x, après l'exécution du code ci-dessus sera: .
  • 34. Télécharger ce document en format pdf sur www.krymo.com HELLO WORLD! Le saviez-vous? Il est commun dans les langages orientés objets, d'utiliser des noms de fonctions chameau de cas. Vous aurez plus souvent voir les noms de fonctions comme someMethod () au lieu de some_method (). JavaScript Fonctions Une fonction est un bloc de code qui sera exécuté quand "quelqu'un", il appelle: Exemple <!DOCTYPE html> <html> <head> .
  • 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 JavaScript Une fonction est écrite comme un bloc de code (à l'inté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 "quelqu'un" appelle la fonction. La fonction peut être appelée directement lorsqu'un événement se produit (comme quand un utilisateur clique sur un bouton), et il peut être appelé à partir de «n'importe où» par le code JavaScript. .
  • 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 qu'il est utilisé dans le nom de la fonction. Appel d'une fonction avec des arguments Lorsque vous appelez une fonction, vous pouvez transmettre des valeurs à lui, ces valeurs sont appeléesarguments ou paramètres . Ces arguments peuvent être utilisés à l'intérieur de la fonction. Vous pouvez envoyer autant d'arguments que vous le souhaitez, séparées par des virgules (,) myFunction(argument1,argument2) Déclarer l'argument, en tant que variables, lorsque vous déclarez la fonction: function myFunction(var1,var2) { some code } Les variables et les arguments doivent être dans l'ordre attendu. La première variable est donnée la valeur du premier argument passé etc Exemple <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script> .
  • 37. Télécharger ce document en format pdf sur www.krymo.com La 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> L'exemple 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 retour Parfois, vous voulez que votre fonction pour renvoyer une valeur de retour à l'endroit où l'appel a été fait. Ceci est possible en utilisant le retour déclaration. Lorsque vous utilisez le retour déclaration, la fonction arrêter l'exécution, et de retourner la valeur spécifiée. Syntaxe function myFunction() { var x=5; return x; } La fonction ci-dessus retournera la valeur 5. Remarque: Il n'est pas le code JavaScript qui parviendra à arrêter l'exécution, seule la fonction. JavaScript se poursuivra l'exécution du code, où l'appel de fonction a été fabriqué à partir. L'appel 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. Télécharger ce document en format pdf sur www.krymo.com Vous pouvez également utiliser la valeur de retour sans l'enregistrer 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: Exemple Calculer 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: 12 L'instruction 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. Télécharger ce document en format pdf sur www.krymo.com Variables locales JavaScript Une 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 une porté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 dans laquelle ils sont déclarés. Les variables locales sont supprimées dès que la fonction est terminée. Les variables globales JavaScript Les variables déclarées en dehors d'une 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 javascript Les 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 JavaScript Si vous affectez une valeur à une variable qui n'a 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 à l'intérieur d'une fonction. .
  • 40. Télécharger ce document en format pdf sur www.krymo.com JavaScript opérateurs = Est utilisé pour assigner des valeurs. + Est utilisée pour ajouter des valeurs. L'opérateur d'affectation = est utilisé pour assigner des valeurs aux variables JavaScript. L'opérateur arithmétique + est utilisé pour ajouter des valeurs. Exemple Assigner des valeurs aux variables et ajoutez-les ensemble: y=5; z=2; x=y+z; Le résultat de x sera: 7 .
  • 41. Télécharger ce document en format pdf sur www.krymo.com Opérateurs arithmétiques JavaScript Les 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 d'y + 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. Télécharger ce document en format pdf sur www.krymo.com Les opérateurs d'assignation JavaScript Les opérateurs d'affectation 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 d'affectation: 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=0 L'opérateur + Utilisé sur les chaînes L'opérateur + peut également être utilisé pour ajouter des variables de chaîne ou des valeurs texte ensemble. Exemple Pour ajouter deux ou plusieurs variables de chaîne en même temps, utilisez l'opérateur +. .
  • 43. Télécharger ce document en format pdf sur www.krymo.com txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; Le résultat de txt3 seront les suivants: What a verynice day Pour ajouter un espace entre les deux chaînes, insérez un espace dans l'une des chaînes: Exemple txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; Le résultat de txt3 seront les suivants: What a very nice day ou insérer un espace dans l'expression: Exemple txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; Le résultat de txt3 seront les suivants: What a very nice day .
  • 44. Télécharger ce document en format pdf sur www.krymo.com Ajout de chaînes et les nombres Addition de deux nombres, sera de retour la somme, mais l'ajout d'un nombre et une chaîne retourne une chaîne: Exemple x=5+5; y="5"+5; z="Hello"+5; Le résultat de x , y et z sont les suivants: 10 55 Hello5 La 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 logiques Les opérateurs de comparaison et logiques sont utilisés pour tester la vraie ou fausse . Opérateurs de comparaison Les 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. 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 != n'est pas égal x! = 8 vrai ! == n'est 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 vrai Comment peut-il être utilisé Les opérateurs de comparaison peuvent être utilisés dans des instructions conditionnelles pour comparer des valeurs et d'agir en fonction du résultat: if (age<18) x="Too young"; Vous en apprendrez plus sur l'utilisation des instructions conditionnelles dans le prochain chapitre de ce tutoriel. .
  • 46. Télécharger ce document en format pdf sur www.krymo.com Opérateurs logiques Les 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 vraie Opérateur conditionnel JavaScript contient également un opérateur conditionnel qui affecte une valeur à une variable en fonction de certaines conditions. Syntaxe variablename=(condition)?value1:value2 .
  • 47. Télécharger ce document en format pdf sur www.krymo.com Exemple Exemple Si 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 ... else Les instructions conditionnelles sont utilisées pour effectuer des actions différentes en fonction de différentes conditions. Instructions conditionnelles Très souvent, lorsque vous écrivez du code, vous souhaitez effectuer des actions différentes pour les différentes décisions. Vous pouvez utiliser des instructions conditionnelles 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. 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 l'un des nombreux blocs de code à exécuter •instruction switch - utilisez cette commande pour sélectionner l'un des nombreux blocs de code à exécuter Si la déclaration est vraie Utilisez l'instruction if pour exécuter du code seulement si une condition spécifiée est vraie. Syntaxe if (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! Exemple Faire 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 day Remarquez qu'il n'y a pas d'autre .. .. dans cette syntaxe. Vous dire au navigateur d'exécuter du code seulement si la condition spécifiée est vraie . .
  • 49. Télécharger ce document en format pdf sur www.krymo.com Si la déclaration est fausse Utilisez l'instruction else if .... d'exécuter du code si une condition est vraie et un autre code si la condition n'est pas vraie. Syntaxe if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } Exemple Si le temps est inférieur à 20:00, vous obtiendrez un "Bonne journée" salut, sinon vous obtiendrez un «bonsoir» message d'accueil if (time<20) { x="Good day"; } else { x="Good evening"; } Le résultat de x sera: Good day .
  • 50. Télécharger ce document en format pdf sur www.krymo.com If ... elseif ... else Utilisez le si .... else if ... else pour sélectionner l'un des plusieurs blocs de code à exécuter. Syntaxe if (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 } Exemple Si le temps est inférieur à 10:00, vous obtiendrez un "bonjour" salut, si elle n'est pas, mais le temps est inférieure à 20h00, vous obtiendrez un "Bonne journée" salut, sinon vous aurez une bonne " soirée "message d'accueil: if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } .
  • 51. Télécharger ce document en format pdf sur www.krymo.com else { x="Good evening"; } Le résultat de x sera: Good day JavaScript Commutateur L'instruction switch est utilisée pour exécuter cette action différente en fonction de différentes conditions. L'instruction switch JavaScript Utilisez l'instruction switch pour sélectionner l'un des nombreux blocs de code à exécuter. Syntaxe switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; .
  • 52. Télécharger ce document en format pdf sur www.krymo.com default: code to be executed if n is different from case 1 and 2 } Voilà comment cela fonctionne: Tout d'abord, nous avons une seule expression n (le plus souvent une variable), qui est évaluée une fois. La valeur de l'expression 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èce est exécutée. Utilisezbriser pour empêcher l'exécution du code dans le cas suivant automatiquement. Exemple Afficher d'aujourd'hui semaine-nom. Notez que dimanche = 0, lundi = 1, mardi = 2, etc: var day=new Date().getDay(); switch (day) { case 0: x="Today it's Sunday"; break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; .
  • 53. Télécharger ce document en format pdf sur www.krymo.com break; } Le résultat de x sera: Today it's Sunday Le défaut Mots-clés Utilisez la valeur par défaut mot-clé pour spécifier ce qu'il faut faire s'il n'y a pas de correspondance: Exemple Si ce n'est 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 it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x="Looking forward to the Weekend"; } Le résultat de x sera: Today it's Sunday .
  • 54. Télécharger ce document en format pdf sur www.krymo.com JavaScript boucle For Les boucles peuvent exécuter un bloc de code un nombre de fois. JavaScript boucles Les 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, c'est le cas lorsque l'on 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. Télécharger ce document en format pdf sur www.krymo.com Vous pouvez écrire: for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } Différents types de boucles JavaScript 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 d'un objet •tandis que - une boucle à travers un bloc de code tant qu'une condition spécifiée est vraie •do / while - Boucles également à travers un bloc de code tant qu'une condition spécifiée est vraie La boucle For La boucle for est souvent l'outil 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. Télécharger ce document en format pdf sur www.krymo.com Dé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. Exemple for (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; } Dans l'exemple 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 d'une valeur (i + +) à chaque fois que le bloc de code dans la boucle a été exécutée. Énoncé 1 Normalement, vous devez utiliser la déclaration de 1 à initier la variable utilisée dans la boucle (var i = 0). Ce n'est 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. Télécharger ce document en format pdf sur www.krymo.com Et 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 2 Souvent, l'énoncé 2 est utilisé pour évaluer l'état de la variable initiale. Ce n'est 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é 3 Souvent énoncé 3 augmente la variable initiale. Ce n'est pas toujours le cas, JavaScript ne se soucie pas, et l'énoncé 3 est facultative. .
  • 58. Télécharger ce document en format pdf sur www.krymo.com Déclaration 3 pourrait rien faire. L'incré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 à l'intérieur de la boucle): Exemple: var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; } La boucle for / in Le JavaScript boucles for / in états à travers les propriétés d'un objet: Exemple var 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. Télécharger ce document en format pdf sur www.krymo.com La boucle While La boucle while et la. Boucle do / while sera expliqué dans le chapitre suivant JavaScript boucle While Les boucles peuvent exécuter un bloc de code tant qu'une condition spécifiée est vraie. La boucle While Les boucles boucle while par un bloc de code tant qu'une condition spécifiée est vraie. Syntaxe while (condition) { code block to be executed } .
  • 60. Télécharger ce document en format pdf sur www.krymo.com Exemple La boucle dans cet exemple continuera à fonctionner tant que la variable i est inférieur à 5: Exemple while (i<5) { x=x + "The number is " + i + "<br>"; i++; } Si vous oubliez d'augmenter la variable utilisée dans la condition, la boucle ne finira jamais. Cela planter votre navigateur. La boucle do / while La 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 elle répète la boucle tant que la condition est vraie. Syntaxe do { code block to be executed } while (condition); .
  • 61. Télécharger ce document en format pdf sur www.krymo.com Exemple L'exemple 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 est exécuté avant que la condition est testée: Exemple do { x=x + "The number is " + i + "<br>"; i++; } while (i<5); Ne pas oublier d'augmenter la variable utilisée dans la condition, sinon la boucle ne finira jamais! Pour comparer et Bien Si 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 d'une boucle for, avec la dé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: Exemple cars=["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. Télécharger ce document en format pdf sur www.krymo.com Exemple cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]) { document.write(cars[i] + "<br>"); i++; } JavaScript break et continue L'instruction break "saute" d'une boucle. L'instruction continue "saute" une itération dans la boucle. L'instruction break Vous avez déjà vu l'instruction break utilisé dans un chapitre précédent de ce tutoriel. Il a été utilisé pour "sauter" d'une instruction switch (). L'instruction break peut également être utilisée pour sortir d'une boucle. L' instruction break interrompt la boucle et continue à exécuter le code après la boucle (le cas échéant): Exemple for (i=0;i<10;i++) { if (i==3) { .
  • 63. Télécharger ce document en format pdf sur www.krymo.com break; } x=x + "The number is " + i + "<br>"; } Depuis l'instruction if a qu'une 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>"; } L'instruction continue L' 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: Exemple for (i=0;i<=10;i++) { if (i==3) continue; x=x + "The number is " + i + "<br>"; } .
  • 64. Télécharger ce document en format pdf sur www.krymo.com Étiquettes JavaScript Comme vous l'avez déjà vu, dans le chapitre sur l'instruction switch, instructions JavaScript peuvent être étiquetés. Pour étiqueter des instructions JavaScript vous faites précéder les déclarations de deux points: label: statements La rupture et les états continuent sont les seules déclarations de JavaScript qui peuvent «sauter hors d'un« bloc de code. Syntaxe: break labelname; continue labelname; L'instruction continue (avec ou sans référence à une étiquette) ne peut être utilisé à l'intérieur d'une boucle. L'instruction break, sans référence à une étiquette, ne peut être utilisé à l'intérieur d'une boucle ou d'un commutateur. Avec une référence étiquette, il peut être utilisé pour "sauter hors de" tout bloc de code JavaScript: Exemple cars=["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. Télécharger ce document en format pdf sur www.krymo.com JavaScript Erreurs L' essai de déclaration vous permet de tester un bloc de code d'erreur. La prise de déclaration vous permet de gérer l'erreur. 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 d'un utilisateur, ou à partir d'un serveur Internet. Et, bien sûr, il peut y avoir beaucoup d'autres choses imprévisibles. Renvoie des erreurs JavaScript Lorsqu'une erreur se produit, quand quelque chose se passe mal, le moteur JavaScript va normalement s'arrêter et générer un message d'erreur. Le terme technique pour cela est: JavaScript va lancer une erreur. .
  • 66. Télécharger ce document en format pdf sur www.krymo.com JavaScript try et catch L' essai déclaration vous permet de définir un bloc de code à tester des erreurs alors qu'il est en cours d'exé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. Syntaxe try { //Run some code here } catch(err) { //Handle errors here } Exemples Dans l'exemple ci-dessous, nous avons délibérément fait une faute de frappe dans le code dans le bloc try. Le bloc catch intercepte l'erreur dans le bloc try, et exécute le code pour y faire face: Exemple <!DOCTYPE html> <html> <head> .
  • 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> L'instruction throw L'instruction 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 l'instruction throw avec try et catch, vous pouvez contrôler le déroulement du programme et de générer des messages d'erreur personnalisés. .
  • 68. Télécharger ce document en format pdf sur www.krymo.com Syntaxe throw exception L'exception peut être une chaîne JavaScript, un numéro, un booléen ou un objet. Exemple Cet exemple porte sur la valeur d'une variable d'entrée. Si la valeur est incorrecte, une exception (erreur) est renvoyée. L'erreur est interceptée par l'instruction catch et un message d'erreur personnalisé s'affiche: 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. Télécharger ce document en format pdf sur www.krymo.com JavaScript Formulaires Validation de formulaires JavaScript JavaScript peut être utilisé pour valider les données des formulaires HTML avant d'envoyer le contenu vers un serveur. Les données de formulaire sont généralement vérifiés par un JavaScript pourrait être: •l'utilisateur a laissé des champs obligatoires vides? •l'utilisateur a entré une adresse e-mail? •l'utilisateur a entré une date valide? •l'utilisateur a entré du texte dans un champ numérique? Champs obligatoires La fonction ci-dessous vérifie si un champ a été laissé vide. Si le champ est vide, un message d'alerte avertit un message, la fonction retourne false, et le formulaire 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. Télécharger ce document en format pdf sur www.krymo.com Exemple <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 validation La fonction ci-dessous vérifie si le contenu a la syntaxe générale d'un e-mail. Cela signifie que les données d'entrée doit contenir le signe @ et au moins un point (.). En outre, le @ ne doit pas être le premier caractère de l'adresse 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. Télécharger ce document en format pdf sur www.krymo.com <input type="submit" value="Submit"> </form> .