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?

411 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • Créer des bookmarklets et/ou tiliser maqetta ou http://jsfiddle.net/ pour coder et tester
  • Prétexte à revoir/découvrir tout ce qui peut être converti en booléen (nombre, chaine, objet) et les valeurs prises.

    https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Boolean

    Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object.
    Any object whose value is not undefined or null, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. For example, the condition in the following if statement evaluates to true.



  • 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.

    ×