IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Débutez votre développement avec le langage JavaScript [Tutoriel]


Sujet :

JavaScript

  1. #1
    Rédacteur

    Avatar de The_Pretender
    Homme Profil pro
    Formateur Développement / Programmation
    Inscrit en
    Juin 2004
    Messages
    739
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Formateur Développement / Programmation
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2004
    Messages : 739
    Points : 4 673
    Points
    4 673
    Par défaut Débutez votre développement avec le langage JavaScript
    Bonjour à toutes et tous,

    Et voici la suite des tutoriels en vidéo sur le langage JavaScript.

    Cette série de vidéo s'adresse tout particulièrement aux développeurs qui découvrent le langage JavaScript et
    à ceux qui veulent partir sur des bases solides.

    Débutez en programmation avec le langage JavaScript

    Après avoir lu et appliqué le tutoriel, revenez partager vos applications, vos codes source dans ce message.

    A bientôt pour la suite de cette série.
    Réclamez La Méthode Développement Facile pour Créer Rapidement des Applications Performantes sur Mobiles et Ordinateurs : Développement Facile

    Développez des Applications Web Performantes avec la Formation Vidéos Developpez : Programmation Facile

    Découvrez : Tutoriels, ressources AS2 et AS3

  2. #2
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    Je ne vois pas ce que l'ActionScript vient faire dans ce tutoriel, si ce n'est perturber le lecteur (ou encore le PHP). Dans la vidéo, on entend clairement "je vais vous montrer un code ActionScript".
    Surtout que la dernière version stable d'ActionScript repose sur ES3 et que certaines méthodes d'ES5 sont utilisées dans le tuto.

    Sinon vis à vis du tutoriel ... je trouve qu'il n'est pas adapté aux débutants. En effet, de mauvaises techniques sont utilisées.

    - il vaut mieux utiliser les formes littérales plutôt que les constructeurs (var a = "a" plutôt que var a = new String("a") par exemple. Idem pour les Array).
    Niveau performance, les moteurs JavaScript sont plus adaptés aux formes littérales.
    De plus, avec une forme littérale on peut faire ceci :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var a = 'a';
    console.log(typeof a); // string
    Utiliser le constructeur donne ceci ... Sans parler du fait d'oublier l'opérateur new
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var a = new String("a");
    console.log(typeof a); // object
    Même démonstration pour les autres primitives (booléens et nombres)

    Enfin, voilà pourquoi il est dangereux aussi d'utiliser les constructeurs plutôt qu'une forme primitive :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var bValue = new Boolean(false);
    if( bValue == true ) {
    	console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
    }
    Fonctionne uniquement car l'objet bValue est (sous le capot) transcrit en primitive (ici false) grâce au signe ==. (D'ailleurs il est préférable d'utiliser === pour les comparaisons. Ce qui ferait échouer le code).
    Or, si on omet == true (ce qui est fortement probable chez les débutants), le code ne marche pas. En effet, cette fois bValue est vrai car celle-ci est alors soumise à cette règle.

    - l'utilisation de w3schools comme ressource. Il vaut mieux éviter et utiliser MDN plutôt.

    - l'utilisation de document.write sans prévenir de sa dangerosité. Ou alors être constant et n'utiliser que console.log (un coup, c'est document.write, un autre console.log, un autre alert ... )

    - toString() sur un Array ne "renvoie tous les éléments du Tableau" mais renvoie la liste des éléments séparés par une virgule. Il y a d'autres méthodes pour récupérer, séparément, tous les éléments.

    - Calculer en amont la longueur d'une chaine ou d'un tableau en cas de boucle (et déclarer les variables) :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var i;
    var len = aFruits.length;
    for (i = 0; i < len; i++) {
      // code
    }
    plutôt que
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for (i = 0; i < aFruits.length; i++) {
      // code
    }

    - Faire prendre conscience aux débutants que certaines méthodes sont disponibles à partir de certains navigateurs (aborder ES3/ES5 rapidement). Exemple indexOf pour IE9+.

    - Les signes === et !== ne sont pas du tout mentionnés ...

    - sans parler de certains termes dans la vidéo à faire hérisser les poils .... "Booléen c'est une classe", "la classe est String" par exemple. Tout ça est propice à la non compréhension du lecteur.
    Je ne suis pas allé jusqu'au bout, je me suis arrêté à la manipulation des chaînes.

    L'initiative est pourtant intéressante mais techniquement, je trouve pas ça assez travaillé. Ou alors, c'est trop vague et pas assez ciblé JavaScript.
    En effet, les vidéos sont assez "générales" dans le domaine de la programmation, cela n'a rien à faire, pour moi, dans des cours JavaScript.

    Bon courage pour la suite.

  3. #3
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    même commentaire que mon prédécesseur j'ajoute qu'on ne teste pas un booléen on l'utiliser et cela est vrais dans tous les langage supportant les booléen
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    if( bValue == true )
    {
    	console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    if( bValue )
    {
    	console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
    }
    sinon tu peux t'amuser à comparer dix foix
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var bvalue
     
    if(((((bValue) == true ) == true) == true ) == true) //...
    {
    	console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
    }
    A+JYT

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Aussi, l'utilisation suggérée de booléens pour débugger un script JavaScript est une bien mauvaise idée. On ne va pas mettre de if(DEBUG_MODE) un peu partout dans le code, c'est fastidieux et ça augmente inutilement la taille du code à télécharger par le client. Sans parler du fait que a laisse des traces de debug dans du code lisible par tous vos clients, pas top pour l'image. Pour déboguer un script, les outils de développement intégrés dans tous les navigateurs traditionnels sont une solution bien plus efficace.

    C'est le sixième ou septième tuto vidéo "Développement facile" en deux mois, j'ai un peu de mal à suivre le compte. Le format est sympa et l'initiative est à saluer, mais attention à ne pas sacrifier la qualité pour la quantité car là ça devient "Tutoriel facile"...
    One Web to rule them all

  5. #5
    Membre expérimenté
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    623
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hauts de Seine (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 623
    Points : 1 370
    Points
    1 370
    Par défaut
    Effectivement la le tutoriel est censé parler de JavaScript et au final, on entend des choses comme PHP, ActionScript...

    Sur le site du "Club des développeurs et IT pro", ça le fait pas trop....

  6. #6
    Rédacteur

    Avatar de The_Pretender
    Homme Profil pro
    Formateur Développement / Programmation
    Inscrit en
    Juin 2004
    Messages
    739
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Formateur Développement / Programmation
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2004
    Messages : 739
    Points : 4 673
    Points
    4 673
    Par défaut
    Bonjour,

    Merci à tous pour vos retours.

    Cette série de vidéos vous montre qu'il existe des concepts de base communs à la majorité des langages.

    Plutôt que d'apprendre, la syntaxe de chaque langage un par un,
    il est beaucoup plus efficace d'apprendre les concepts qui se cachent derrière.

    Comme les booléens, les conditions, les boucles while, la POO, les événements, les patterns...

    Bien évidemment, les exemples sont volontairement simples pour être compréhensibles très facilement par un débutant,
    notamment celui du booléen.
    (je ne vois pas l'intérêt de présenter un code source de 10 ou 20 fichiers JavaScript avec l'utilisation des booléens dans des cas très particuliers,
    cela ne fait que perdre le débutant).

    Et vu que ce sont des concepts communs à plusieurs langages, suivant que ce soit du php, du javascript, de l'actionscript,
    le booléen est soit considéré comme une classe, un objet...

    Et oui les vidéos sont réalisées et tournées avec des professionnels, ce qui prend un temps non négligeable pour chaque vidéo.

    Par contre, la méthode d'enseignement est différence de ce qui se fait habituellement.
    Ce qui compte, c'est les résultats rapides obtenus par les développeurs qui suivent les cours.


    Au plaisir de lire vos suggestions pour améliorer les prochains cours "Développement Facile".
    Réclamez La Méthode Développement Facile pour Créer Rapidement des Applications Performantes sur Mobiles et Ordinateurs : Développement Facile

    Développez des Applications Web Performantes avec la Formation Vidéos Developpez : Programmation Facile

    Découvrez : Tutoriels, ressources AS2 et AS3

  7. #7
    Membre chevronné
    Avatar de la.lune
    Homme Profil pro
    Directeur Technique
    Inscrit en
    Décembre 2010
    Messages
    545
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Comores

    Informations professionnelles :
    Activité : Directeur Technique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2010
    Messages : 545
    Points : 2 084
    Points
    2 084
    Par défaut
    Citation Envoyé par sekaijin Voir le message
    j'ajoute qu'on ne teste pas un booléen on l'utiliser et cela est vrais dans tous les langage supportant les booléen
    +1
    Seulement le fait qu'il utilise le constructeur Boolean() lui fera tomber toujours dans l'erreur s'il veut utiliser le booléen sans le tester avec le ==. Ceci est due au fait que si on fait a=new Boolean(false) alors a est un objet donc non null. S'il utilise directement a en faisant if(a) ..... alors a produira le même comportement que true et non false et pourtant a est construit avec false. Ceci est vrai
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    new Boolean(new Boolean(true)).valueOf()===new Boolean(new Boolean(false)).valueOf()===true
    . Ainsi, la bonne manière dans ce cas ce n'est pas de tester bien sûr mais de manipuler la valeur if(a.valueOf()) ..... car a.valueOf()===false dans notre cas.

    Mais la remarque aussi importante que j'aurais aimé souligner, c'est que dans un cours qui parle des booléens, expressions logiques, et instructions conditionnelles, il fallait qu'il ait mention des expression qui sont équivalent à false et true autre que les littéraux true et false.

    Toute valeur/expression en javascript utilisée dans une condition ou dans le constructeur Booean() produira le même comportement que la littéral true sauf les expression qui renvoient les valeurs suivantes:

    Seulement NaN ne se compare pas avec NaN, faire NaN==NaN ou NaN===NaNretournera toujours false, ainsi pour tester une valeur s'il n'est un nombre on utilise la fonction isNaN()

  8. #8
    Membre expérimenté
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    623
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hauts de Seine (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 623
    Points : 1 370
    Points
    1 370
    Par défaut
    Citation Envoyé par The_Pretender Voir le message
    Bonjour,

    Merci à tous pour vos retours.

    Cette série de vidéos vous montre qu'il existe des concepts de base communs à la majorité des langages.

    Plutôt que d'apprendre, la syntaxe de chaque langage un par un,
    il est beaucoup plus efficace d'apprendre les concepts qui se cachent derrière.

    Comme les booléens, les conditions, les boucles while, la POO, les événements, les patterns...

    Bien évidemment, les exemples sont volontairement simples pour être compréhensibles très facilement par un débutant,
    notamment celui du booléen.
    (je ne vois pas l'intérêt de présenter un code source de 10 ou 20 fichiers JavaScript avec l'utilisation des booléens dans des cas très particuliers,
    cela ne fait que perdre le débutant).

    Et vu que ce sont des concepts communs à plusieurs langages, suivant que ce soit du php, du javascript, de l'actionscript,
    le booléen est soit considéré comme une classe, un objet...

    Et oui les vidéos sont réalisées et tournées avec des professionnels, ce qui prend un temps non négligeable pour chaque vidéo.

    Par contre, la méthode d'enseignement est différence de ce qui se fait habituellement.
    Ce qui compte, c'est les résultats rapides obtenus par les développeurs qui suivent les cours.


    Au plaisir de lire vos suggestions pour améliorer les prochains cours "Développement Facile".
    Ça parait être une bonne idée, mais ça ne l'est pas tant que ça.
    En PHP le booléen n'est ni un classe, ni un objet.
    En Java ça peut mais la plupart du temps on utilise le primitif.
    En JavaScript aussi, dans la vrai vie on fait :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var isAGoodPractice = true;
    et dans ce cas tu peux faire :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    if (isAGoodPractice) {
    //do it
    } else {
    //change the way you do it
    }
    Et la plus besoin de faire des valueOf ou === true.

    Chaque langage a son paradigme ou suis plus ou moins strictement un même paradigme, c'est pourquoi je pense qu'il vaut mieux apprendre un langage et le comprendre (pas juste la syntaxe), plutôt qu'essayer d'en apprendre plusieurs en même temps.
    L'apprentissage d'un autre se fera plus simplement après.
    Ne serait-ce que pour le typage (statique/dynamique) on ne peut mélanger le java et le JavaScript.
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    //Fonctionne
    if ("bonjour") {
    //code
    }

    Code java : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    //Ne compile pas
    if ("bonjour") {
    //code
    }

    Et ça se sont des choses importantes a enseigner surtout en JavaScript. En Java c'est évident, on n'utilise pas un string là où on doit mettre un booléen.

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut

    Citation Envoyé par The_Pretender
    Par contre, la méthode d'enseignement est différence de ce qui se fait habituellement.
    Ce qui compte, c'est les résultats rapides obtenus par les développeurs qui suivent les cours.
    j'ai donc bien peur que les commentaires faits sur [Vidéo] Maîtriser les bases de HTML5 pour réaliser votre site web ne soient que lettres mortes, il n'empêche que les conclusions se rejoignent.

  10. #10
    Membre éprouvé

    Profil pro
    Inscrit en
    Juin 2007
    Messages
    748
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 748
    Points : 1 022
    Points
    1 022
    Par défaut
    pareil, autant le support vidéo + quelques screans de codes parait super intéressent sur le format ( même si tu a pas mis les écouteurs tu as de quoi suivre la conversation, et si tu as pas de video tu suis avec les écouteurs ), autant le contenu parait dés la première map assez "oléoLé" .... genre ce se serait comme si nous n'avions pas suivi les conférences 2010 et 2012 des choses à comprendre, et encore plus loin; donc petit bémole la dessus, même si le format parait à jour, le contenu lui est à revoir
    Conception / Dev

  11. #11
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Encore plein de bourdes un peu partout dans les codes présentés :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log("---> exemple javascript array");// avec extension firebug
    Pas besoin de Firebug pour lire un message en console, tous les outils de dev des navigateurs ont une console, et bien plus

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var aFruits = new Array('pomme', 'orange', 'banane', 'peche', 'clementine');
    Les déclarations en écriture littérale sont recommandés : ['pomme','orange', ... ]

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    for (i = 0; i < aFruits.length; i++)
    i n'est pas déclarée, c'est donc une global leak

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var bValue = new Boolean(false);if( bValue == true )
    Déjà dit plus haut, le code autour des booléens ne rime à rien

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><<a href="http://www.w3.org/TR/html-markup/html.html" target="_blank">html</a> <a href="http://www.w3.org/TR/html-markup/xmlns.html" target="_blank">xmlns</a>="http://www.w3.org/1999/xhtml">
    Pourquoi imposer du XHTML et un doctype de 1999 aux débutants ? La notation s'est largement simplifiée depuis :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!DOCTYPE html>
    <html>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    les metatags de définission de type et de charset sont déconseillés, il vaut mieux utiliser les headers HTTP correspondants.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript">
    L'attribut type des scripts est facultatif depuis HTML5

    Cette instruction est inutile

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <center>
    	    	Appuyer sur le bouton Valider <br/><br/>
     
    	    	<input type="button" value="Valider" onclick="affiche()" /><br />
    	    </center>
    Les balises de style sont dépréciées depuis des années, on n'utilise plus <center> mais du CSS

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     setTimeout('getDateLocale("'+sNameHTML+'");','900');// mise à jour de l'heure toutes les 0.9 seconde
    Il est recommandé pour des questions de scope et de performance de passer une fonction à setTimeout et non une String. Aussi, 900 est un nombre, pas une String.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.write( "Math.PI : "+Math.PI+" <br />" );// la classe Math
    Par pitié, arrêtez d'utiliser document.write dans les tutos ! C'est un calvaire le nombre de topics ouverts à cause d'une mauvaise utilisation de cette méthode.

    J'en ai sûrement oublié au passage, mais le fait est que relever une erreur toutes les trois lignes de code dans un tuto est inacceptable. On sent le manque de maîtrise technique et l’obsolescence des connaissances de l'auteur. Désolé de ne pas mâcher mes mots mais je me dois d'être sincère, je déconseille à tout débutant de partir sur ces tutos.
    One Web to rule them all

Discussions similaires

  1. Développer une communauté autour de votre site avec Google Friend Connect
    Par Baptiste Wicht dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 17/10/2012, 17h22
  2. Réponses: 4
    Dernier message: 12/10/2010, 13h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo