Object JavaScript – Inheritance Using Revealing Module Pattern

10063_580983808600819_401360548_nIn 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”

Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern

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

Continue reading “Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern”

Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern

10063_580983808600819_401360548_nUsing 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”

Object JavaScript – Understanding Prototypes, Inheritance

10063_580983808600819_401360548_nJavaScript 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”

Object JavaScript – Getting Started with Objects the Way JavaScript Thinks About Objects

10063_580983808600819_401360548_nThis 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

  • Create objects using a constructor and literals.
  • How to access property values.
  • How methods operate on an object.
  • What an instance is.
  • Identify important objects used in JavaScript

Continue reading “Object JavaScript – Getting Started with Objects the Way JavaScript Thinks About Objects”

HTML5 Tutorial – Asynchronous Script Execution

10063_580983808600819_401360548_nFor 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”

HTML5 Tutorial – Custom Controls for Multimedia

imageWhen 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”

HTML5, CSS3 Tip – Boilerplates

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

Continue reading “HTML5, CSS3 Tip – Boilerplates”

CSS3 Tutorial – CSS Box Model

css3_logoEvery 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
image image image

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.

Continue reading “CSS3 Tutorial – CSS Box Model”