JavaScript Objects Deep Dive : Create Objects With Object.Create

Object.Create( ) is a static function which can take two arguments.  The first argument is the prototype of the object, while the second argument is the properties of the argument.  A prototype is a second object that is created with every JavaScript object.  It is like a blueprint, or the model that the object is built on.  Think of it as a car prototype.

So let's create an object with Object.Create( ) function:

var person = Object.create({
    name: "Tech Junkie",
    location: "Mars",
    hobbie: "Video Games"
});

console.log(person);

JavaScript Objects Deep Dive : Creating Objects With The new Keyword

In the previous post we visited how to create an object with an object literal.  In this post we are going to create the same object using the new keyword.  When creating objects using the new keyword it is required that the it is followed by a function call.  The purpose of this function call is the needs a way to call to the constructor of the new object.  A constructor is used to create or initialize the created object.

Here is the code to rewrite our literal object using the new keyword:

var product = new Object();

product.name = "Chai";
product.category= "Tea";
product.country= "India";
product.supplier= {
    name: "ACME Tea Of India",
    location: "New Delhi"
};

product.related = new Array("Earl Grey", "Green Tea", "Dark Tea", "White Tea");
product.display = function () {
    console.log(this);
};

JavaScript Objects Deep Dive : Creating Objects With Object Literals

The most common ways you see how objects are created in JavaScript is the object literal syntax.  The object literal syntax is the open { } with comma separated name: pair value lists.  The name: part is the name of the property.  The part after : is the property value which can hold a primitive value or another object.  It could even be a function.

Here is an example of an object literal:

var product = {
    name: "Chai",
    Category: "Tea",
    Country: "India",
    supplier: {
        name: "ACME Tea Of India",
        location : "New Delhi"
    },
    related: ["Earl Grey", "Green Tea", "Dark Tea", "White Tea"],
    display: function () {
        console.log(this);
    }
};

JavaScript : Error Handling With try/catch/finally

JavaScript error handling is a lot like other languages where you have the try/catch/finally  statement that you can used.  The basic premise is

try
{
     // try some codes here fingers crossed that nothing bad happens
}
catch(ex)
{
     // oops something bad happened, this is where it gets handled or I tell the user
}
finally
{
    // I don't care what happens I am going to execute and get paid
}

Here is the error handling in action:

JavaScript Basics : The for/in Loop

The for/in loop is a for loop that is used to iterate through the variables in an object. It can iterate to through that anything that can evaluated on the left side of the assignment expression call the LValues.  Let's use the for/in loop to iterate through an object "person".

Here we created an object called "person" with three properties we are going to use the for/in loop to display the property names as well as the values of those properties

var person = new Object();

person.name = "Tech Junkie";
person.occupation = "Blogger";
person.location = "Mars";

for(var p in person)
console.log(p + ": " + person[p]);

Here is the output:

JavaScript Basics : do/while Loop

The do/while loop is similar to the while loop.  The difference is that the first the loop expression is tested after the do statement block is executed at least once.  For example let's use our countdown example again.

If we have the code below the countdown displays the same results as the output.  However, the first iteration is performed without a evaluation of the expression.  It's not until the countdown is 9 that the while part of the loop kicks in.

JavaScript Basics : The while loop

The while loop statement in JavaScript simply executes a statement block until a condition is not true anymore the syntax for the while loop is as follow

while (expression is true)
{
     execute these statements
}

The while loop is an iterative loop if the condition is true and the statements are executed, it starts at the top of the loop again and executes until the expression is false.  Therefore, there's a potential for an infinite loop.

AngularJS SPA Part 13: Install RoboMongo GUI for MongoDB

In this post we will be installing the RoboMongo user interface for MongoDB.  The advantage of a GUI is that you can see the documents in MongoDB visually also there is a validate future that is quite useful when you make changes to the data.

Here are the steps to install RoboMongo:

1.  Go to https://robomongo.org/download and click on the "Download" button

JavaScript : Selecting Elements in The DOM getElementById, getElementByTagName, getElementByClassName, querySelector, and querySelectorAll

In JavaScript the DOM is an acronym for "Document Object Model" that's quite a mouthful.  Most people just refer to it as the DOM.  The DOM is basically a collection of objects/elements organized in the tree structure.  To perform any functions in JavaScript you first have to find a reference to the object or element you are working with.  Luckily, there are a few handy JavaScript methods that can help you find the elements in the DOM that you want.

Let's take a look at the methods:

• getElementById - this method gets the element based on the unique id that is assigned to the                                   element
• getElementByClassName - this method gets the elements that has the class name that is passed                               into the method
• getElementByTagName - this method gets the elements that matches the tag name
• querySelector - this method gets the first child element that matches the CSS selector being                                passed in
• querySelectorAll - this method gets all the child elements that match the CSS selector

AngularJS SPA Part 12: Deploy Shopping List Application To Heroku

The previous blog post we setup our application to work with Heroku locally.  In this post we will deploy our application to the live Heroku platform.

Here are the steps to deploy our application to Heroku:

1.  First we need to check in our code into a local Git repository to add our code to Git is easy first type git init










2.  Then type git add .

3. Then type git commit -m "Initial commit"

JavaScript : The switch Statement

The switch statement is there to make the code more readable if the if statements contains too many branches and becomes too hard to read.

Consider the code below

var x = 6;

if (x === 1)
{
     console.log("one");
}
else if (x === 2)
{
     console.log("two");
}
else if (x === 3)
{
     console.log("three");
}
else if (x === 4)
{
     console.log("four");
}
else if (x === 5)
{
     console.log("five");
}
else
{
     console.log("x is not 1-5");
}

AngularJS SPA Part 11: Setup The Shopping Application For Heroku And Testing It Locally

In this blog post we will setup our AngularJS SPA application for Heroku and testing it locally to make sure we got all our ducks in a row if you need a refresher for how to setup Heroku you can visit this post.  By deploying to Heroku we can access our application online making our application live.

Here are the steps to deploying the AngularJS shopping application to Heroku:

1.  Find out the node and npm version you have installed on your machine by typing in the following command

node --version
npm --version










the version you have installed on your machine is probably different

JavaScript Basics: The for loop

The for loop is a looping construct in JavaScript that are more simplistic than the while loop.   When writing the for loop there are three three parts they are

1.  Initialize - a count variable is initialize, it's usually zero but it doesn't have to be
2. Test - A test to see if the loop should continue
3. Increment - finally the count is incremented, it doesn't have to be an increment it could be decrements as well

AngularJS SPA Part 10: Setup Express To Serve Static Files

In the previous blog we setup the folder structure to use the Jade view engine just to make sure Express is working correctly.  In this blog post we are going to tell Express to serve file static files as well in our app folder.  In the previous part when we browse to http://localhost:3000 we get the "Express" index page.  Using a view engine is a preference that some people have, but I feel more comfortable developing in HTML.

JavaScript : The ? Ternary Operator

The conditional ?: operator in JavaScript has three operands the first part goes before ? the second goes between the ? and the : symbol and the third operand goes after the : symbol.  You can think of this operator as shorthand way of writing a an if statement.  The first operand evaluates to a boolean, if the first operand is true then evaluate the second operand else evaluate the third operand.

Let's say we want to want to see what the gender of the baby is and assign it a name, let's demonstrate it with code.

var gender = "girl";

var name = gender === "boy" ? "Julian" : "Julie";

console.log(name);

The code above assigns the variable gender to "girl" then it uses the conditional ?: to assign a value to the variable name if the gender is "boy" then assign the name "Julian" to name, else assign the name "Julie"

Type the code into the browser console you will get "Julie" as name

Installing Heroku Terminal on Windows

Heroku is a service provider that you can use to host your Node application quickly.  In this blog post I will how you how to install Heroku on a Windows machine.

Here are the steps to setup Heroku on a Windows machine:

1.  Go to heroku.com and sign up for a free account, follow the instruction on the page
2.  Download the Heroku toolbelt from the Heroku website at http://toolbelt.heroku.com

ASP.NET Core : Add Tag Helpers To NorthwindCafe Application

In this post we will add Tag Helpers support for our application.  Tag Helpers are programmable attributes that you can use throughout the application.

Follow the steps below to enable tag helpers:

1.  Right-click on the "Views" folder and create a "View Imports" file

JavaScript : The eval() Function

The eval() function in JavaScript provides the power of dynamic evaluation, it evaluates a strings of JavaScript codes and returns a value.  If you use the eval on pair of string numbers it will be forgiving and give you the number if it can.  For example if you type int

eval("4+5")  the result will be 9 even though it's a string





Just because you can evaluate numbers that are strings, are you supposed to do it?  It's something you have to consider carefully before you go down that path.

The eval() function takes a one argument a string.  It tries to parse the argument as JavaScript code, if it fails a SyntaxError is thrown.  If it is successful then a value is returned or an undefined is returned if there are no value.  Since eval() uses a lot of interpretation of the code performance can take a hit.

For example if you type in the following code you will get an undefined and a SyntaxError

console.log(eval(myvar));

var myvar = "my variable";


console.log(eval(myvar));

AngularJS SPA Part 9: Creating The SPA Project Folder Structure

Now that we have express installed let's do a little clean up and organization by creating some folders that we need.  First of all create the models and controllers folder inside the app folder your folder should look like the following

ASP.NET Core: Create The Category Repository

In this post we will create the Category Repository to retrieve information from the database about the the different categories in the NorthwindCafe database.

Here are the steps to create the Category repository class in the NorthwindCafe application:

1.  Create the ICategoryRepository interface for dependency injection, create a file call ICategoryRepository.cs in the "Models" folder with the following code

using System.Collections.Generic;

namespace NorthwindCafe.Web.Models
{
    public interface ICategoryRepository
    {
        IEnumerable GetAllCategories();
        Category GetCategory(int Id);

    }
}