Que fait ce code?
Les types primitifs de Javascript
Objectif
A la fin de cette séance, vous serez capables de réaliser
des programmes en javascript utilisant les types primit...
Critères d'évaluation
En groupe :
- vous expliquerez les pièges de l'opérateur + ("plus")
Individuellement :
- vous expliq...
Conditions
Utilisez :
- un IDE (Netbeans, Apatana)
- et un navigateur avec des outils de développement (ex :
Firefox avec ...
Références
http://www.w3.org/community/webed/wiki/Main_Page#JavaScript_core_skills
http://www.crockford.com/javascript/sur...
Nombres et chaînes
Les nombres
function additionner()
{
var iResult = 0;
for(i = 0; i < arguments.length; i++)
{
iResult += arguments[i];
}
r...
Les chaînes de caractères
function concatener()
{
var sResult = "";
for(i = 0; i < arguments.length; i++)
{
sResult += arg...
Opération sans douleur?
/* Que se passe-t-il maintenant?
*/
var n1 = '1', n2 = '2', n3 = '3';
alert(additionner(n1, n2, n3...
Les chaînes ont du caractère...
/* Que se passe-t-il maintenant?
*/
var s1 = 1, s2 = 2, s3 = 3;
alert(concatener(s1, s2, s...
Quelles solutions?
Que proposez-vous pour remédier à ces
comportements "étranges"?
Explication
http://fr.wikipedia.org/wiki/Syntaxe_JavaScript
L'opérateur '+' est surchargé; il est utilisé pour la concatén...
Construisons ensemble
une calculatrice
Eval is evil
Créez un bouton en html (<input type="button">).
Lorsque l'utilisateur appuie sur le bouton, l'opération
math...
Code à trou : protoCalc
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; ...
Typeof()
Créez une fonction réalisant une des 4 opérations arithmétique de base
(addition, ou soustraction, ou multiplicat...
Vrai ou faux?
Que fait ce code?
Jeu de Boole
var bTest = new Boolean(0);
if(bTest )
{
sMsg = "I'm sorry Dave."
+ " I'm afraid I Can't do that...";
alert (...
Bilan
Objectif atteint?
Critères d'évaluation
En groupe :
- avez-vous expliqué les pièges de l'opérateur + ("plus")?
Individuellement :
- avez-vou...
Fin
La série “Que fait ce code?”
de Mickael Ruau
est mise à disposition selon les termes de la
licence Creative Commons Attrib...
Prochain SlideShare
Chargement dans…5
×

Javascript : que fait ce code?

533 vues

Publié le

Ce document a été conçu et utilisé sur plusieurs sessions de formation professionnelles pour développeurs logiciels.

Il présente la syntaxe du langage javascript à usage d'un public de développeurs maîtrisant déjà un langage de développement (langage C, Java, C Sharp, PHP...).

Niveau : débutant.
Séance numéro : 1/10.
Temps nécessaire à la séance : environ 1h.

Cette séance fait partie d'une série de 10 séances présentant le langage javascript (niveau débutant à confirmé).

Le niveau débutant de la série se réalise en 2 jours.
La niveau confirmé se réalise en 3 jours.

Ce programme est conforme aux titres du ministère du travail :
- Développeur Logiciel
- Concepteur Développeur Informatique
Il permet de valider les modules correspondants de ces titres RNCP (compétences développement de pages web).

La méthode utilisée mélange les approches interrogatives et actives :
- à partir d'exemples de code, faire raisonner les stagiaires par raisonnement hypothético-déductif ("que fait ce code?")
- à partir de code "à trous", faire découvrir et appliquer des éléments de syntaxe (travaux pratiques "construisons ensemble")
- à partir des problèmes rencontrés, faire rechercher des solutions possibles aux problèmes soulevés par le code "énigme" ("quelles solutions?")
- à partir de code "énigme", faire vérifier l'assimilation des connaissances ("vrai ou faux?")

Inclus :
- code à trou
- grille d'évaluation

Ce document powerpoint est également disponible en marque blanche. Nous contacter via notre compte twitter @forgelogicielle.

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Javascript : que fait ce code?

  1. 1. Que fait ce code? Les types primitifs de Javascript
  2. 2. Objectif A la fin de cette séance, vous serez capables de réaliser des programmes en javascript utilisant les types primitifs (String, Number, Boolean). - Vous aurez expliqué les pièges de l'opérateur + ("plus") - Vous aurez expliqué les pièges de la fonction eval() - Vous aurez mis en oeuvre une méthode de vérification des types manipulés, avec la fonction typeof et/ou l'opérateur de stricte égalité.
  3. 3. Critères d'évaluation En groupe : - vous expliquerez les pièges de l'opérateur + ("plus") Individuellement : - vous expliquerez les pièges de la fonction eval() - vous réaliserez les fonctions de base d'une calculatrice à partir du code à trous fourni. A cette occasion, vous mettrez en oeuvre une méthode de vérification des types manipulés, avec la fonction typeof et/ou l'opérateur de stricte égalité.
  4. 4. Conditions Utilisez : - un IDE (Netbeans, Apatana) - et un navigateur avec des outils de développement (ex : Firefox avec Firebug).
  5. 5. Références http://www.w3.org/community/webed/wiki/Main_Page#JavaScript_core_skills http://www.crockford.com/javascript/survey.html http://www.peachpit.com/articles/article.aspx?p=1847297&seqNum=2 http://www.gchagnon.fr/cours/dhtml/ http://fr.wikipedia.org/wiki/Syntaxe_JavaScript http://fr.wikibooks.org/wiki/Programmation_JavaScript/ http://www.commentcamarche.net/contents/javascript/ https://developer.mozilla.org/fr/docs/JavaScript http://www.xul.fr/ecmascript/ http://msdn.microsoft.com/en-us/library/ie/d1et7k7c(v=vs.94).aspx http://dev.opera.com/articles/view/javascript-best-practices/
  6. 6. Nombres et chaînes
  7. 7. Les nombres function additionner() { var iResult = 0; for(i = 0; i < arguments.length; i++) { iResult += arguments[i]; } return iResult ; } alert(additionner(1,2,3)); // affiche "6"
  8. 8. Les chaînes de caractères function concatener() { var sResult = ""; for(i = 0; i < arguments.length; i++) { sResult += arguments[i]; } return sResult; } alert(concatener("Concaténation ","de ","chaînes.")); // Affiche "Concaténation de chaînes"
  9. 9. Opération sans douleur? /* Que se passe-t-il maintenant? */ var n1 = '1', n2 = '2', n3 = '3'; alert(additionner(n1, n2, n3)); // Affiche "0123"
  10. 10. Les chaînes ont du caractère... /* Que se passe-t-il maintenant? */ var s1 = 1, s2 = 2, s3 = 3; alert(concatener(s1, s2, s3)); //affiche "123"
  11. 11. Quelles solutions? Que proposez-vous pour remédier à ces comportements "étranges"?
  12. 12. Explication http://fr.wikipedia.org/wiki/Syntaxe_JavaScript L'opérateur '+' est surchargé; il est utilisé pour la concaténation de chaîne de caractères et l'addition ainsi que la conversion de chaînes de caractères en nombres. // Concatène une chaîne et un nombre var x = 2; alert( x + '2'); // affiche 22 // Convertit une chaîne en nombre var z = '4'; // z est une chaîne (le caractère 4) alert( z + x); // affiche 42 alert( +z + x); // affiche 6
  13. 13. Construisons ensemble une calculatrice
  14. 14. Eval is evil Créez un bouton en html (<input type="button">). Lorsque l'utilisateur appuie sur le bouton, l'opération mathématique est exécutée à l'aide de la fonction native eval() et le résultat est affiché dans une fenêtre de dialogue. Ex.a : alert(eval(1+2)); Ex.b : eval(alert(1+2)); 1- Quelles sont les différences entre ces deux exemples? 2- Quels avantages et inconvénients y-a-t-il à utiliser la fonction eval()?
  15. 15. Code à trou : protoCalc <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function additionner() { var iResult = 0; for(i = 0; i < arguments.length; i++) { iResult += arguments[i]; } return iResult ; } </script> </head> <body> <form name="frm_calcul"> <input type="button" value="1+2" name="addition" onclick="alert(additionner(1,2));" /> <input type="button" value="1+'2'" name="addition_v2" onclick="alert(additionner(1,'2'));" /> <input type="button" value="'1'+2" name="addition_v3" onclick="alert(additionner('1',2));" /> <input type="button" value="'1'+'2'" name="addition_v4" onclick="alert(additionner('1','2'));" /> </form> </body> </html>
  16. 16. Typeof() Créez une fonction réalisant une des 4 opérations arithmétique de base (addition, ou soustraction, ou multiplication, ou division). Vérifiez les saisies utilisateur à l'aide de l'opérateur de stricte égalité (===) ou de la la fonction typeof(). Ex : alert(typeof("1")); Notes : - javascript est sensible à la casse : typeof s'écrit entièrement en minuscules - il n'existe qu'un seul type pour stocker les nombres, quels qu'ils soient (entiers, flottants, etc.) : la classe Number.
  17. 17. Vrai ou faux? Que fait ce code?
  18. 18. Jeu de Boole var bTest = new Boolean(0); if(bTest ) { sMsg = "I'm sorry Dave." + " I'm afraid I Can't do that..."; alert (sMsg); }
  19. 19. Bilan Objectif atteint?
  20. 20. Critères d'évaluation En groupe : - avez-vous expliqué les pièges de l'opérateur + ("plus")? Individuellement : - avez-vous expliqué les pièges de la fonction eval()? - avez-vous réalisé les fonctions de base d'une calculatrice à partir du code à trous fourni? A cette occasion, avez-vous mis en oeuvre une méthode de vérification des types manipulés, avec la fonction typeof et/ou l'opérateur de stricte égalité?
  21. 21. Fin
  22. 22. La série “Que fait ce code?” de Mickael Ruau est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International. Les autorisations au-delà du champ de cette licence peuvent être obtenues à creativecommons@ShakerTechnologies.com.

×