JavaScript Garden. Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace.
Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting. JavaScript : 3 fondamentaux.
Après quelques années à écrire dans un langage, on finit facilement par oublier les premières difficultés que l’on avait rencontrées.
Et à force de faire de la veille, de l’autoformation et de parler entre experts dans des conférences, j’ai un peu quitté la réalité de la majorité des équipes Web. Maintenant que je suis consultant indépendant je retourne dans des équipes qui avaient autre chose à faire que de se demander si on a le droit de parler de classe en JavaScript, quelle est la bonne définition d’une closure, ou quelles sont les fonctionnalités de EcmaScript 5 qui auraient du rester dans Ecmascript.Next. J’avais déjà parlé sur ce blog de JavaScript et la programmation orienté objet pour les développeurs PHP, nous allons explorer ici les 3 notions fondamentales de JavaScript qui sont probablement les plus grosses sources de bugs, d’incompréhension et de frustration pour le développeur Web moyen.
Et qui accessoirement sont la base d’une programmation plus évoluée par la suite. Coder en Javascript dans une console. Depuis l’apparition des consoles Javascript, on peut debugger plus facilement des erreurs de scripts, qui à l’époque d’IE6 & co se faisait à coup de alert().
Un chose que je ne trouve pas très répandu, c’est d’utiliser ces consoles pour coder directement, de petit morceaux de code, sans se (re)taper d’ajouter du script inline, ou un fichier juste pour avoir bonne conscience. Avec une console avancée, on peut même éditer des scripts en cours d’exécution ! A quoi ça sert de coder du Javascript dans une console ? Un exemple très simple sera plus parlant : vous voyez un paragraphe de texte et vous vous demandez combien il comporte de caractères. Et là vous commencez à compter… 1, 2, 3… Sttoooppp ! $0 est très simple d’utilisation, et peut être très utile. Utilisation : compter le texte d’un paragraphe Admettons que vous cherchez à compter le nombre de caractères dans une <div>, inspectez là, puis dans votre console entrez-y la ligne suivante: $0.innerHTML.length Coder plus d’un ligne.
Using the Console - Chrome DevTools. Firebug and the Command Line : Firebug. The command line is one of the oldest tools in the programming toolbox.
Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities. Get your hands dirty If you know your way around the DOM, sometimes there's no faster way to get answers than to just use JavaScript to snoop around. Firebug's command line lets you do just that - enter whatever JavaScript you like.
It will be executed as if it were part of the page, and the returned values displayed in the console. Autocomplete The autocompletion of the command line is very powerful. Autocomplete works at many levels. Go big.