Sample Code – Page 5

Object JavaScript – Dynamic UI Using Observables with MVVM Using Knockout.js

April 25, 2014

In our previous posts, you learned how to build modules. In the next series of posts, you will learn how you can connect up modules to the user interface. You will learn, step by step how to use observables for your user interface to dynamically update itself.

Knockout.js makes it easier to create rich, responsive UIs with JavaScript. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

Knockout helps you build rich client-side interactivity by using an MVVM-like (Model, View, and ViewModel) pattern. It does this by helping you separate the UI behavior and the data structures. To do this, you will use declarative bindings with observable data.

Knockout is free, open source, and available for your projects using the MIT License.

Knockout helps you:

Synchronize JSON models with HTML elements using Observable Properties.
Synchronize arrays, using Observable Arrays.
Provide calculated properties using Computed Properties.

Continue reading “Object JavaScript – Dynamic UI Using Observables with MVVM Using Knockout.js”

Object JavaScript – Using Q Promises Inside a RequireJS AMD Module

April 23, 2014

As you are thinking more about your Web page being an app, you look for ways to reduce the complexity by using modules. In earlier post Getting Started with Modules Using RequireJS , you learned how RequireJS provides a great way to think of your app in modules and to asynchronously load and run your app.

RequireJS helps your describe the dependencies of a module and make sure you load them before executing your script.

But what happens when your module is long running? You can certainly turn that portion into a module and the require the completion before continuing. But in my case, I want think about my AMD module as an object and then call long-running methods on that module after it has been loaded.

This snippet expands on Asynchronous JavaScript Promises Using Q and shows how you can use a promise inside your module that will have some long running asynchronous method.

When you make an asynchronous call, you can use a promise to handle both successful completion of the work and potential errors that may arise during execution. Upon the successful completion of one asynchronous call, you may want to pass the result to make another request.

The solution combines the promises of Q.js with the Asynchronous Module Definition (AMD) of Require.JS.

Continue reading “Object JavaScript – Using Q Promises Inside a RequireJS AMD Module”

Object JavaScript – Getting Started with Modules Using RequireJS

April 22, 2014

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and NodeJS. Using a modular script loader like RequireJS will improve the speed and quality of your code.

When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.

You may also want to load code on the fly, after page load.

RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimizer without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.

Continue reading “Object JavaScript – Getting Started with Modules Using RequireJS”

Object JavaScript – Asynchronous JavaScript Promises Using Q

April 21, 2014

Q is a library that implements the standard and has some extra helpers. Q works in the browser and in node.js.

Q was designed to provide a robust way to provide you ways to write asynchronous code cleanly.

If a function cannot return a value or throw an exception without blocking, it can return a promise instead. A promise is an object that represents the return value or the thrown exception that the function may eventually provide. A promise can also be used as a proxy for a remote object to overcome latency.

You can read the specifications for Q at Promises A+, which aims to clarify “the behavioral clauses of the Promises/A proposal, extending it to cover de facto behaviors and omitting parts that are underspecified or problematic.”

You use deferreds and promises in ways similar to the ways you would use them in jQuery. However, Q has some important features.

Continue reading “Object JavaScript – Asynchronous JavaScript Promises Using Q”

Object JavaScript – Promises for Asynchronous Operations Using jQuery

April 17, 2014

You need promises as soon as you do anything that involves an asynchronous API. In Object JavaScript – Asynchronous Programming Using Promises, you learned the basics about promises.

jQuery’s implementation of promises is based around the jQuery.Deferred object. This is a chainable constructor where you can check for the existence of a promise. The jQuery Deferred object can also invoke callback queues and pass on the success of synchronous and asynchronous functions.

Continue reading “Object JavaScript – Promises for Asynchronous Operations Using jQuery”

Object JavaScript – Using the ‘this’ Keyword

April 11, 2014

this is a special word in JavaScript that is important whenever you are thinking in object-oriented terms.

The value of this inside a function, effectively depends on the object which called it. The ECMAScript Language Specification says, “The this keyword evaluates to the value of the ThisBinding of the current execution context.”

The use of the “this” keyword inside a function should be familiar to the C++/C# developers among us—it refers to the object through which the method is called ( developers who use Visual Basic should find it familiar, too—it’s called “Me” in Visual Basic).

This post borrows heavily from Daniel Trebbien’s response from JavaScript “this” keyword and some added examples from Ray Djajadinata’s article in MSDN Magazine, Create Advanced Web Applications With Object-Oriented Techniques.

Continue reading “Object JavaScript – Using the ‘this’ Keyword”

Object JavaScript – Inheritance Using Revealing Module Pattern

April 10, 2014

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”

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

April 7, 2014

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.

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

Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern

April 6, 2014

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”

HTML5 Tutorial – Messaging

March 29, 2014

Web browsers, for security and privacy reasons, prevent documents in different domains from affecting each other; that is, cross-site scripting is disallowed.

That means that communication between frames, tabs, and windows was restricted for security reasons. If browsers allowed you to access content loaded into other frames and tabs, site could steal information another site using scripting. So, attempting to retrieve or modify content loaded from another source raises a security exception and prevents the operation.

But there are cases where you want content from different sites to be able to communicate inside the browser, such as for mash-ups.

To meet this need, HTML5 allows Cross-Document Messaging and Channel Messaging.

In this post, you will learn: