In my last post, Understanding Prototypes, you learned that you can use prototypes to implement inheritance. In this post, I will agree with Javier Uria and Pedro Teixeira who posts on MetaDuck, who advocates a way to implement inheritance using the revealing module pattern.
Continue reading “Object JavaScript – Inheritance Using Revealing Module Pattern”
As you learned in my post on Scope, Namespaces, “use strict”, all variables are accessible from the global scope except variables that are declared within a function using the var keyword. In this post, we add the idea of closures.
Closures are functions that retain a reference to their free variables.
And we show how you can use closures in building a robust revealing module pattern. Along the way, we explore some other patterns, such as the self-invoking anonymous function. And in the conclusion show how you can use the revealing module pattern to extend existing modules.
This post relies heavily on Joe Zim’s article JavaScript Closures and the Module Pattern, whose explanation dovetails with the revealing module pattern and asynchronous modules definition.
When you see Asynchronous Module Definition (AMD), you will see how asynchronous modules build on these concepts.
Using globals give you the opportunity to have your code overwritten by any other JavaScript added to the page after yours. And that is an opportunity best to be avoided.
The work around is to use the revealing module pattern.
I am a huge fan of the revealing module pattern. It keeps your objects encapsulates and was easier to understand for me as a C# guy.
In this post, we will step through the various JavaScript patterns and ending up at how you can implement the revealing module pattern. You will see the JavaScript syntax to create objects and how the revealing module patterns uses scope to keep private data private and reveals the data you want public. And you can do this without mucking up your globals.
Continue reading “Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern”
In this post, you will learn about how JavaScript defines scopes and how you can use that to your advantage by declaring your own namespaces. Namespaces help you lower the possibility of naming collisions when using our code in conjunction with other JavaScript libraries.
Continue reading “Object JavaScript – Scope, Namespaces, “use strict””
JavaScript is full of objects. In the previous posting, you learned how to create objects using constructors and literals. You saw a couple notations for creating objects. You learned how to add properties and methods.
In this lesson, you will learn about prototypes. A prototype is an object from which other objects inherit properties.
Every object has a prototype by default. Since prototypes are themselves objects, every prototype has a prototype too. (There is only one exception, the default object prototype at the top of every prototype chain.)
Continue reading “Object JavaScript – Understanding Prototypes, Inheritance”
This post begins a series on how you can write better JavaScript.
The purpose of this series is take your knowledge to the next level, for you to add skills that will help you build commercial-quality code.
JavaScript objects were introduced in the ECMAScript 5 specification.
In this post, you will learn
For pages using process-intensive scripts, you can get quicker page loading with the async attribute for the script element.
This enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script loads and executes in the background while the page continues to be parsed.
Without the async (or defer) attribute, a script can block other page content from loading.
Continue reading “HTML5 Tutorial – Asynchronous Script Execution”
When you display video in HTML5, you have may want to display a set of controls to the user. The HTML5 video tag has a control attribute that lets you display the controls that come with the browser.
But you may want to build custom controls using its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values).
This post shows how you can build a custom media player using different the media API attributes, events, and methods.
Continue reading “HTML5 Tutorial – Custom Controls for Multimedia”
As you have seen in our introductory posts on HTML5, you will want to start with some sort of boilerplate. Boilerplates help you remember all of the items you need to be successful.
HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.
Every element in web design is a rectangular box. IN a previous post, Positioning & Inline, you learned about where the box is displayed. But that is only part of the story. The other part is about padding, border, and margin and how they affect where the box is displayed.
When you type in F12 in your favorite debugger, you will find tools that help you figure out the values in your style sheets for the size and location of the box.
| Internet Explorer | Chrome | Firefox |
 |
 |
 |
But what happens when you do not declare your widths? What happens then?
This post relies on Chris Coyier’s excellent post The CSS Box Model.