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