Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Client-side Scripting Languages Introduction to Javascript
Plan du course <ul><li>Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? </li></ul><ul><li>Comment ajouter Javascript au H...
Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? <ul><li>Au début – simple texte + images + liens </li></ul><ul><li>Des p...
Include Javascript into HTML <ul><li>Script inclus dans la page html  </li></ul><ul><ul><li><script type=”text/javascript”...
Quand est le code exécuté <ul><li>Si le tag “script” est inclus dans le tag “head” </li></ul><ul><ul><li>Le script est exé...
Syntaxe du Javascript <ul><li>Similaire avec C & Java </li></ul><ul><li>Les variables n’ont pas du type </li></ul><ul><ul>...
Les objets du Javascript <ul><li>Les objets ont des </li></ul><ul><ul><li>methodes (fonctions) </li></ul></ul><ul><ul><li>...
References pour les objets du Javascript <ul><li>Math </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_math....
Examples <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function printValue() //declare a function </...
Javascript exemple - analyse <ul><li>“ +” est utilise pour aider les strings  </li></ul><ul><li>“ alert” est utilise pour ...
Evénements <ul><li>Les éléments du HTML peuvent détecter quand l’utilisateur a des interactions avec eux </li></ul><ul><li...
Events examples <ul><li><script type=“text/javascript”> </li></ul><ul><li>function youClicked(element) </li></ul><ul><li>{...
Evénements <ul><li>Qu’est que c’est “this” </li></ul>Html element User interacts event1 event2 Event1 a une fonction javas...
DOM <ul><li>DOM=Document Object Model </li></ul><ul><li>DOM = une representation des elements de la page HTML </li></ul>
DOM <ul><li>The DOM tree contains nodes which can be </li></ul><ul><ul><li>Html elements </li></ul></ul><ul><ul><li>Text  ...
Methods and properties <ul><li>document.write(“text”) </li></ul><ul><ul><li>Adds the “text” to the given page </li></ul></...
DOM Methods and properties <ul><li>getElementsByTagName </li></ul><ul><ul><li>Returns an array of elements with a given na...
DOM Methods and properties <ul><li>document.getElementById </li></ul><ul><ul><li>The most used method to access an element...
DOM objects methods and properties <ul><li>Direct access to the element </li></ul><ul><li>Predefined collections </li></ul...
Example – using javascript to validate forms <ul><li>When a form is submitted we need to validate it first on the client-s...
Validate forms with Javascript – example (I) <ul><li>function validateForm(){ </li></ul><ul><li>var usernameElement=docume...
Example of form validation with Javascript (II) <ul><li><form action=&quot;script.php&quot; method=&quot;POST&quot;> </li>...
Javascript debugging <ul><li>Firebug – extension for Firefox </li></ul><ul><ul><li>Allows debugging of scripts </li></ul><...
Javascript debugging example
Prochain SlideShare
Chargement dans…5
×

C5 Javascript French

4 536 vues

Publié le

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

C5 Javascript French

  1. 1. Client-side Scripting Languages Introduction to Javascript
  2. 2. Plan du course <ul><li>Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? </li></ul><ul><li>Comment ajouter Javascript au HTML </li></ul><ul><li>La syntaxe du Javascript </li></ul><ul><li>Document Object Model </li></ul><ul><li>Exemples </li></ul>
  3. 3. Javascript – Pourquoi?, Ou?, Qu-est ce que c’est? <ul><li>Au début – simple texte + images + liens </li></ul><ul><li>Des pages “live” ont été nécessaires sur le web </li></ul><ul><li>Netscape a invente “LiveScript” en 1995 </li></ul><ul><li>LiveScript a change le nom plus tard en Javascript </li></ul><ul><li>Javascript – fonctionne sur des navigateurs, permet de l'accès dynamique à la page html </li></ul><ul><li>Le langage a été interprété dans un façon différent de navigateurs différents </li></ul>
  4. 4. Include Javascript into HTML <ul><li>Script inclus dans la page html </li></ul><ul><ul><li><script type=”text/javascript”> </li></ul></ul><ul><ul><li>//code script </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li>Script inclus dans un fichier extérieur </li></ul><ul><ul><li><script src=”fisier_surse.js”></script> </li></ul></ul>
  5. 5. Quand est le code exécuté <ul><li>Si le tag “script” est inclus dans le tag “head” </li></ul><ul><ul><li>Le script est exécuté lorsque la page est chargée - avant de rendre </li></ul></ul><ul><li>Si le script est inclus dans le corps page  </li></ul><ul><ul><li>Le script est exécuté lorsque le balisage est </li></ul></ul>
  6. 6. Syntaxe du Javascript <ul><li>Similaire avec C & Java </li></ul><ul><li>Les variables n’ont pas du type </li></ul><ul><ul><li>Les variables sont déclaré en utilisant le mot “var” </li></ul></ul><ul><ul><li>var x=5, y=7; </li></ul></ul><ul><li>Les fonctions sont déclaré en utilisant le mot “function” </li></ul><ul><ul><li>function sum(x,y) </li></ul></ul><ul><ul><li>{ var rez=x+y; return rez;} </li></ul></ul><ul><li>Les fonctions sont appelées comme en C/Java </li></ul><ul><ul><li>var suma=sum(2,5); </li></ul></ul>
  7. 7. Les objets du Javascript <ul><li>Les objets ont des </li></ul><ul><ul><li>methodes (fonctions) </li></ul></ul><ul><ul><li>Proprietes </li></ul></ul><ul><li>Exemple </li></ul><ul><ul><li>var student={nom: &quot;ion&quot;, an:2, notes:{mate:9, pc:8}}; </li></ul></ul><ul><ul><li>alert(student.nom +&quot;<br>&quot; ); </li></ul></ul><ul><ul><li>alert(student.an +&quot;<br>&quot;); </li></ul></ul>
  8. 8. References pour les objets du Javascript <ul><li>Math </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_math.asp </li></ul></ul><ul><li>String </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_string.asp </li></ul></ul><ul><li>Array </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_array.asp </li></ul></ul><ul><li>Date </li></ul><ul><ul><li>http://www.w3schools.com/jsref/jsref_obj_date.asp </li></ul></ul>
  9. 9. Examples <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function printValue() //declare a function </li></ul><ul><li>{ </li></ul><ul><li>var x=Math.random()*10; //compute the value of x as a random value between 0 and 10 </li></ul><ul><li>alert(x); //display an alert containing the value of x </li></ul><ul><li>var y=&quot;a random text&quot;; //create a variable of type string </li></ul><ul><li>alert(y.length); //display an alert containing the length of y </li></ul><ul><li>//!!! length is a property and not a method </li></ul><ul><li>alert(y.substr(0,5)); //compute and display as an alert the substring of y between the first and the 5 th character </li></ul><ul><li>alert(x+&quot; &quot;+y.length+&quot; &quot;+y.substr(5,y.length)); </li></ul><ul><li>//display as an alert the string formed by x, length of y and the substring formed from the 5 th character of y until the last one </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  10. 10. Javascript exemple - analyse <ul><li>“ +” est utilise pour aider les strings </li></ul><ul><li>“ alert” est utilise pour afficher d’information pendant le développement. Il ne doit pas etre utilise en applications </li></ul><ul><li>Les objets peuvent avoir des méthodes comme y.substr(0,5) et propriétés comme y.length </li></ul>
  11. 11. Evénements <ul><li>Les éléments du HTML peuvent détecter quand l’utilisateur a des interactions avec eux </li></ul><ul><li>Exemples d’interactions </li></ul><ul><ul><li>Mouse over (mouse out) </li></ul></ul><ul><ul><li>Click </li></ul></ul><ul><ul><li>Key pressed </li></ul></ul><ul><ul><li>Blur </li></ul></ul><ul><ul><li>change </li></ul></ul><ul><li>Nous pouvons écrire du code Javascript pour traiter les interactions </li></ul>
  12. 12. Events examples <ul><li><script type=“text/javascript”> </li></ul><ul><li>function youClicked(element) </li></ul><ul><li>{element.innerHTML=&quot;you clicked this element&quot;;} </li></ul><ul><li>function youMousedOver() </li></ul><ul><li>{alert(&quot;mouse over detected&quot;); } </li></ul><ul><li></script> </li></ul><ul><li><h1 onclick=&quot;alert('youclicked');youClicked( this );&quot; onmouseover=&quot;youMousedOver()&quot;> Introduction dans la programmation web</h1> </li></ul>
  13. 13. Evénements <ul><li>Qu’est que c’est “this” </li></ul>Html element User interacts event1 event2 Event1 a une fonction javascript La fonction javascript doit savoir quel élément a modifier “ this” est la référence a l’objet qui doit être modifie
  14. 14. DOM <ul><li>DOM=Document Object Model </li></ul><ul><li>DOM = une representation des elements de la page HTML </li></ul>
  15. 15. DOM <ul><li>The DOM tree contains nodes which can be </li></ul><ul><ul><li>Html elements </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><li>The tree elements can be accessed </li></ul><ul><ul><li>By traversing the tree (See Data structures course) </li></ul></ul><ul><ul><li>By accessing them directly by name (getElementsByTagName) </li></ul></ul><ul><ul><li>By accessing them directly by id (getElementById) </li></ul></ul><ul><ul><li>Addressing them directly (as in an array) </li></ul></ul><ul><li>The root of the DOM tree is the document </li></ul>
  16. 16. Methods and properties <ul><li>document.write(“text”) </li></ul><ul><ul><li>Adds the “text” to the given page </li></ul></ul><ul><ul><li>If the page is finished loading it rewrites it </li></ul></ul><ul><ul><li>Example </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><ul><li>function printValue() </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>var x=Math.random()*10; </li></ul></ul></ul><ul><ul><ul><li>alert(x); </li></ul></ul></ul><ul><ul><ul><li>var y=&quot;a random text&quot;; </li></ul></ul></ul><ul><ul><ul><li>alert(y.length); </li></ul></ul></ul><ul><ul><ul><li>alert(y.substr(0,5)); </li></ul></ul></ul><ul><ul><ul><li>alert(x+&quot; &quot;+y.length+&quot;!!!&quot;+y.substr(5,y.length)); </li></ul></ul></ul><ul><ul><ul><li>document.write(x+&quot; &quot;+y.length+&quot;!!!&quot;+y.substr(5,y.length)); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul>
  17. 17. DOM Methods and properties <ul><li>getElementsByTagName </li></ul><ul><ul><li>Returns an array of elements with a given name </li></ul></ul><ul><ul><li>The we need to know the position of the element we need to modify inside the array </li></ul></ul><ul><ul><li>function modifySecondH1() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>var headersArray=document.getElementsByTagName(&quot;h1&quot;); //retrieves all the elements whose names are h1 </li></ul></ul><ul><ul><li>//elements’ numbering in the array starts at 0 </li></ul></ul><ul><ul><li>headersArray[1].innerHTML=Math.random()*5; } </li></ul></ul>
  18. 18. DOM Methods and properties <ul><li>document.getElementById </li></ul><ul><ul><li>The most used method to access an element of a html page </li></ul></ul><ul><ul><li>We have to be careful to set ids for the elements </li></ul></ul><ul><ul><li>function modifyFirstH1() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>//retrieve the element with the id h1id1 </li></ul></ul><ul><ul><li>var h1Element=document.getElementById(&quot;h1id1&quot;); </li></ul></ul><ul><ul><li>//set the HTML value for the document </li></ul></ul><ul><ul><li>h1Element.innerHTML=&quot;new title&quot;; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  19. 19. DOM objects methods and properties <ul><li>Direct access to the element </li></ul><ul><li>Predefined collections </li></ul><ul><ul><li>Forms </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><li>document.forms[0].username.value – accesses the first form in the document and sets the value property for the username input </li></ul>
  20. 20. Example – using javascript to validate forms <ul><li>When a form is submitted we need to validate it first on the client-side </li></ul><ul><li>The form should be validated before submitting </li></ul><ul><li>The event should be added to the submit button </li></ul><ul><li>For example we want to check if 2 passwords have the same value and if the username is longer than 4 characters </li></ul>
  21. 21. Validate forms with Javascript – example (I) <ul><li>function validateForm(){ </li></ul><ul><li>var usernameElement=document.getElementById(&quot;username&quot;); </li></ul><ul><li>var passwordElement=document.getElementById(&quot;password&quot;); </li></ul><ul><li>var rePasswordElement=document.getElementById(&quot;repassword&quot;); </li></ul><ul><li>if(passwordElement.value!=rePasswordElement.value || passwordElement.value.length==0) </li></ul><ul><li>{alert(&quot;please make sure the password is entered the same twice&quot;);return;} </li></ul><ul><li>if (usernameElement.value.length<4) </li></ul><ul><li>{alert(&quot;please make sure the username is longer than 4 letters&quot;);return; } </li></ul><ul><li>document.forms[0].submit(); </li></ul><ul><li>} </li></ul>
  22. 22. Example of form validation with Javascript (II) <ul><li><form action=&quot;script.php&quot; method=&quot;POST&quot;> </li></ul><ul><li>nom d'utilisateur<input type=&quot;text&quot; id=&quot;username&quot; /><br/> </li></ul><ul><li>mot de passe<input type=&quot;password&quot; id=&quot;password&quot; /> <br/> </li></ul><ul><li>mot de passe encore une fois <input id=&quot;repassword&quot; type=&quot;password&quot;> <br/> </li></ul><ul><li><input type=&quot;button&quot; value=&quot;send&quot; onclick=&quot;validateForm();&quot;/> </li></ul><ul><li></form> </li></ul>
  23. 23. Javascript debugging <ul><li>Firebug – extension for Firefox </li></ul><ul><ul><li>Allows debugging of scripts </li></ul></ul><ul><ul><li>Step by step execution </li></ul></ul><ul><ul><li>Adding breakpoints </li></ul></ul><ul><ul><li>Watch expressions </li></ul></ul><ul><ul><li>Visualize the DOM tree </li></ul></ul>
  24. 24. Javascript debugging example

×