Video: How to create JavaScript Objects using Object.create

Video: How to create Objects as literals in JavaScript

Video : How to create Objects using new operator in JavaScript

In this video, you will learn to create JavaScript object from an existing object using prototype. In this video you will learn to create JavaScript object using static function Object.create

PhoneGap or Cordova? Don’t confuse and tell me the differences!

I am an App developer. And I confess that I am big advocate of Hybrid Apps paradigm. Long back I wrote a blog post

As a Developer why should I worry about Hybrid Application Development?

Simply to create an App, I used to follow below steps,

image

As you see PhoneGap was something very essential and my best friend to create Cross-Platform apps. But suddenly I found one day PhoneGap.js has been changed to something Coredova.js. What the heck is this?

Did my best friend change name? Or do I need to make friendship with someone new? I was confused and decided to get rid of this confusion.

I found a blog posts on Adobe site which clarifies many of my doubt PhoneGap, Cordova, and what’s in a name? So essentially in this blog post author’s view can be expressed in below steps,

image

PhoneGap and Cordova is a framework (They are same with different name). They provide you set of API to work with devices on different platforms. Using them you can access native device functions such as camera or contact using JavaScript functions.

PhoneGap build is a Build Service allows you to build and package you app in cloud. You do not need to install any SDK locally to build app.

image

PhoneGap get distributed using Apache Cordova. Now let us get it straight,

image

You can summarize that current open source code base (both known as PhoneGap or Cordova) will be free always and distributed by Apachae. In future Adobe may add more values to current codebase and will be branded as PhoneGap. One may have to pay for that. One of the example is PhoneGap Build Service.

PhoneGap Build is service provided by Adobe which allows you to build your app in the cloud. You do not need to install any SDK locally.

image

Apache Cordova is free open source. It allows you to create mobile apps native to platforms using web technologies.

PhoneGap mobile application development framework is same as Apache Cordova or rather two names of same framework.

image

However PhoneGap Services will be own by Adobe and may not be open source. But Apache cordova will be always opensource and free.

I hope now you have some clarification on PhoneGap and Cordova myth. Thanks for reading.

Inbuilt Bindings in Knockout.js: Controlling Text and Appearance

Setting up Visual Studio 2013 for Knockoutjs Development

Create your First MVVM based JavaScript App in two simple steps using Knockoutjs

In simpler terms we can define Knockoutjs binding as a mechanism to establish relationship between view and ViewModel. View takes user action and pass the instruction to ViewModel. One of the most popular example of this could be clicking on a button or selection of an item on the View by user. After each action of user, view got the task to instruct ViewModel about the same. This is done through the BINDING. On the other hand we can define binding as manipulating DOM elements and their appearance on the basis of ViewModel properties. Binding establish the relationship between View and ViewModel.

image

KO Bindings can be categorized in various categories,

  • Controlling Text and Appearance
  • Controlling Flow
  • Controlling User Actions like Click, Submit etc.

If required you can create Custom Binding as well. In this post we will focus on bindings which control text and appearance. Those bindings are as follows,

clip_image002

Now one by one let us take a look on different text control and appearance binding.

Visible binding

You use visible binding to find when an element on DOM should be visible or when it should not be. This binding is very simple to use.

Let us say you have a ViewModel as below,


var viewModel = {

display: ko.observable(false)

};

You can use visible binding on view as below,


<div data-bind="visible: display">
 <h2>hey I am visible through visible binding </h2>
 </div>

Some points about visible binding is worth discussing here, If value of ViewModel property will resolved to following values then bind DOM element view property will be set to block.

  • Null
  • undefined
  • number zero
  • Boolean false

For DOM elements if ViewModel property value is yielding to false then visible binding will always have more priority than CSS attributes.

image

Text binding

You use text binding to display a text on View. You can do text binding with elements like

  • <h1>,<h2>
  • <em>
  • <span>
  • <input>
  • Practically you can do text binding with any element on View.

Let us suppose you have ViewModel as below,


var viewModel = {

message : "hey welcome to KO "

};

You can do text binding on View as below,


<div>
 <h2 data-bind="text : message"></h2>
 </div>

If ViewModel property contains a HTML encoded value and you bind that property on View using text binding.


var viewModel = {

message: "hey welcome to KO ",
 messagehtml:"<i>hello there</i>"

};

binding is done as below ,


<div>
 <h2 data-bind="text : message"></h2>
 <span data-bind="text: messagehtml"></span>
 </div>

You will get output HTML encoded value as plain text. It will not get rendered. You will get ouput as below,

clip_image001

In text binding

  • All the previous value of the Element on View will be overwritten
  • If ViewModel property contains any value than string or number then in text binding that value will get displayed as value.toString()

HTML binding

You use HTML binding to set InnerHtml property of View’s Elements. So let us take a ViewModel with property value encoded HTML value.


var viewModel = {

message: "hey welcome to KO ",
 messagehtml:"<h1>hello there</h1>"

};

html binding can be done as following ,


<div>
 <h4 data-bind="text : message"></h4>
 <span data-bind="html: messagehtml"></span>
 </div>

Now View will render html from ViewModel. Html binding always set innerHtml attribute of Element and text binding set innerText property. You should be cognizant using html binding because it may cause potential injection of script on the view.

CSS binding

You use CSS binding to apply CSS class to elements on View. Let us say you have a CSS class defined as below,


.red
{
 color:red

}

You want to apply red background to div on a condition from ViewModel property. Let us assume we have a ViewModel as following,


var viewModel = {

message: "hey welcome to KO ",
 messagehtml: "<h1>hello there</h1>",
 warningmessage : false

};

Let us assume that we want to apply red class from CSS on basis of warningmessage property of view. We can do css binding as below,


<div data-bind="css: {red : warningmessage}">
 hello world
 </div>

Let us see that how can we work with dynamic classes in CSS binding. Assume that we have following classes,


.red
{
 color:red

}
.blue
{
 color:blue
}
.green{
 color : green
}

We need to dynamically bind one of these classes to element on View. Suppose we have ViewModel as below,


var viewModel = {

message: "hey welcome to KO ",
 messagehtml: "<h1>hello there</h1>",
 messagelevel : 10

};

On basis of ViewModel property messagelevel we need to apply a css class dynamically. To do this a computed observable is required. Computed observable will return css class.


viewModel.colorMessage = ko.computed(function () {

if (this.messagelevel > 0)
 {
 return 'green';
 }
 else if(this.messagelevel <0)
 {
 return 'red';
 }
 else if(this.messagelevel==0)
 {
 return 'blue';
 }

}, viewModel);

And CSS binding at View can be done as follows,


<div>
 <div data-bind="css: colorMessage,
 html: messagehtml">

 </div>

 </div>

In this post we learn various binding which help to control text and appearance of elements. I hope you find this post useful. Thanks for reading.

Pointers in C

I know there are astronomical amount of articles, books, blogs have written so far on topic Pointers in C. However in this post I am trying to simplify this very topic in my own way.

To start with Pointer is a variable in C, which holds address of other variables.

image

  • Pointers can contain address of char variables
  • Pointers can contain address of int variables
  • Pointers can contain address of float variables
  • Pointers can contain NULL
  • Pointers can contain address of other pointer variables

You can create a pointer by creating a variable with the name starting with * asterisk. So a Pointer can be created as below,

image

  • First statement in above code can hold address of an integer variable.
  • Second statement in above code can hold address of a character variable
  • Third statement in above code can hold address of float variable

After declaring a pointer variable, address of simple variable can be assigned as below,

clip_image001

Different types of variable takes different space in memory. For example an integer variable will take 2 bytes, float will take 4 bytes and character variable will take 1 byte in memory. We can depict language C memory consumption by different kind of variables as below,

clip_image003

Now assume that you have created an integer pointer and assigned values to that as below,

clip_image004

There are two variables in above code snippet. Let us see how they point to different values. Assume that memory address containing value of variable var1 is 2000. You can find out from below image that var1 contains values 99 and its address in memory is 2000. Pvar1 is a pointer and it contains 2000 as value.

clip_image006

Let us go ahead and print various values.

clip_image007

One by one try to understand above lines of codes,

  1. Line 1 will print value of var1 which is 99
  2. Line 2 will print value of var1 again. Because pvar1 is pointer which contains address of var1. So to print value at that address we use * operator. Hence second line of above code will print value 99
  3. Third line will print address of var1. Address can be accessed with address operator (&)
  4. Fourth line will print address of var1. Since pvar1 is a pointer variable so printing this value will be address of the variable it contains
  5. Fifth line will print value 99. Because we are printing applying pointer variable * on address operator &.

So we can put output of above code snippets as below,

image

So I end this post with hope that you have some clarification of Pointers in C now. Code from above discussion is given below for your reference,


#include "stdafx.h"

void main()
{
int var1 =99;
int *pvar1 ;
pvar1 = &var1;

printf("%d\n",var1);
printf("%d\n",*pvar1);
printf("%u\n",&var1);
printf("%u\n",pvar1);
printf("%d\n",*(&var1));

char var2 ='a';
char *pvar2 ;
pvar2 = &var2;

printf("%c\n",var2);
printf("%c\n",*pvar2);
printf("%u\n",&var2);
printf("%u\n",pvar2);
printf("%c\n",*(&var2));

getchar();
}

Expected output of above code is as below. Have in mind that address value could be differ in your environment.

clip_image001[5]

I hope you find this post useful. Thanks for reading.