background preloader

JavaScript Garden

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

Related:  JavaScriptJavascriptJavascript resources

JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed as a JavaScript program? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); If it surprises you that the answer is “10”, then this one will probably really throw you for a loop: var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); Here, of course, the browser will alert “1”.

Native equivalents of jQuery functions Update: many people have asked about browser compatability for the native methods I’ve shown. Here are the links to that information: querySelector/querySelectorAll, classList, getElementsByClassName, createDocumentFragment. If you checked out my last post you’ll know that I have been doing lots of JavaScript coding as of late, both inside and out of Brackets. I have also been doing a series of performance tests (1, 2, 3) between popular jQuery methods and their native DOM equivalents. Yes I know what you’re thinking. Obviously native methods are faster because jQuery has to deal with older browsers and host of other things. Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others.

Essential JavaScript Design Patterns For Beginners I would like to thank Rebecca Murphey for inspiring me to open-source this mini-book and release it for free download and distribution - making knowledge both open and easily available is something we should all strive for where possible. I would also like to extend my thanks to the very talented Alex Sexton who was kind enough to be the technical reviewer for this publication. I hope that it helps you learn more about design patterns and the usefulness of their application to JavaScript.

It’s here! Our shiny new Javascript API [Reposted from the SlideShare Blog Attention developers…you asked for it, and here it is. Our new Javascript API allows users to access major functions, navigate across presentations, and control the SlideShare embed player via Javascript. For your embedded presentations, you can now make JS calls to do things like view next and previous slides, and jump to a certain slide. Have you ever wanted to automate synchronized slides and video? Or automate several players to randomly play slides one at a time? Truth, Equality and JavaScript You don’t have to be a JavaScript novice to get confused by this… or this… The good news is that there is a standard and all browsers follow it.

AngularJS Directives in Traction AngularJS is a super-heroic JavaScript Framework that makes writing single page applications a breeze. It allows you to expand HTML vocabulary by creating custom tags with a help of directive definition object. AngularJS bundled with a set of directives like ngRepeat, ngModel, ngView which make it really easy to build an application but many a times the existing directives fell short considering the need and complexity you are dealing with. And you face the problem head-on when it comes to build directives from ground ups. How to build an Electronic Scoreboard with jQuery I recently took on the job of organising a charity fundraiser in my office in aid of Comic Relief . I decided to stage a Faceball tournament and stream the event live via UStream , One of the things that I thought would help would be to use the big HD TV in our reception area as a scoreboard as it would be big enough to be visible on the video, after toying with the idea of using Processing to build the scoreboard, I finally decided that it would be quicker (for me) to just build an HTML page with some script to update the scores through keyboard input. The rules of the game state that there are 5 rounds with the winner being the person with the highest cumulative score after all 5 rounds have been played. Basic HTML markup

Web Services Messaging with Apache Axis2: Concepts and Techniques Web Services Messaging with Apache Axis2: Concepts and Techniques Pages: 1, 2, 3, 4 Summary In summary, the behavior of web service messaging is based on three parameters: the message exchange pattern, the synchronous/asynchronous behavior of the client, and the behavior of the transport. Javascript Closures Introduction Closure A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression). Closures are one of the most powerful features of ECMAScript (javascript) but they cannot be property exploited without understanding them. They are, however, relatively easy to create, even accidentally, and their creation has potentially harmful consequences, particularly in some relatively common web browser environments.

Writing Modular JavaScript With AMD, CommonJS & ES Harmony When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another. Unlike some more traditional programming languages however, the current iteration of JavaScript (ECMA-262) doesn't provide developers with the means to import such modules of code in a clean, organized manner. It's one of the concerns with specifications that haven't required great thought until more recent years where the need for more organized JavaScript applications became apparent.

Related:  javascriptJavaScriptJavaScriptCodingJavaScriptjQueryDevelopmentJavaScriptJavaScriptJavaScriptLearningC#JavascriptJava ScriptJavascriptJavaScript