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.

:arrow: 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.

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". 8O
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:

---

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:

---

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:

---

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:

---

1 2 3 4 5

var i; var len = aFruits.length; for (i = 0; i < len; i++) { // code }

---

plutôt que

Code:

---

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.

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:

---

1 2 3 4

if( bValue == true ) { console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau }

---

Code:

---

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:

---

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

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

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

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

Citation:

---

Envoyé par sekaijin

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:

---

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:

• 0 ,
  Code:

  ---

  1 2 3 4 5

  b=0; if(b){/*.....*/}//Rien ne se produira b=new Boolean(0) b==false //true b.valueOf()===false //true

  ---

• "", la chaîne de caractère vide
  Code:

  ---

  1 2 3 4 5

  b=""; if(b){/*.....*/}//Rien ne se produira b=new Boolean("") b==false //true b.valueOf()===false //true

  ---

• undefined
  Code:

  ---

  1 2 3 4 5

  b=undefined; if(b){/*.....*/}//Rien ne se produira b=new Boolean(undefined) b==false //true b.valueOf()===false //true

  ---

• null
  Code:

  ---

  1 2 3 4 5

  b=null; if(b){/*.....*/}//Rien ne se produira b=new Boolean(null) b==false //true b.valueOf()===false //true

  ---

• NaN
  Code:

  ---

  1 2 3 4 5

  b=NaN; if(b){/*.....*/}//Rien ne se produira b=new Boolean(NaN) b==false //true b.valueOf()===false //true

  ---

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()

Citation:

---

Envoyé par The_Pretender

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:

---

var isAGoodPractice = true;

---

et dans ce cas tu peux faire :

Code:

---

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:

---

1 2 3 4

//Fonctionne if ("bonjour") { //code }

---

Code:

---

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.

:salut:

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.

---

:aie: 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.

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

Encore plein de bourdes un peu partout dans les codes présentés :

Code:

---

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:

---

var aFruits = new Array('pomme', 'orange', 'banane', 'peche', 'clementine');

---

Les déclarations en écriture littérale sont recommandés : ['pomme','orange', ... ]

Code:

---

for (i = 0; i < aFruits.length; i++)

---

i n'est pas déclarée, c'est donc une global leak

Code:

---

var bValue = new Boolean(false);if( bValue == true )

---

Déjà dit plus haut, le code autour des booléens ne rime à rien

Code:

---

<!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:

---

1 2	<!DOCTYPE html> <html>

---

Code:

---

<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:

---

<script type="text/javascript">

---

L'attribut type des scripts est facultatif depuis HTML5

Code:

---

return;

---

Cette instruction est inutile

Code:

---

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:

---

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:

---

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.