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

JavaScript Functions: Use Properties As Arguments

To make your functions developer friendly it is sometime useful to define your a arguments as properties.  This way your code is self documented, instead of having the developers read documentation on the code you can just use the arguments to document the code so that it would reduce the confusion from the developer.

    <script>

        var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var copiedNumbers = [];

        function copyNumbers(args) {
            copyAll(args.orignal,
                args.copy,
                args.size);

            function copyAll(original, copy, size) {
                for (var i = 0; i < size; i++) {
                    copy[i] = original[i];
                }
            }
        }

        copyNumbers({ orignal: numbers, copy: copiedNumbers, size: numbers.length });

        console.log("original " + numbers);
        console.log("copies " + copiedNumbers);

    </script>

CSS: Linking to An External Stylesheet With the link Tag and The @import Directive

One of the first thing you would do in web development is to link an external Cascading Stylesheet to an HTML document.  As a matter of fact bootstrap would not work if you didn't link the bootstrap.css file in your HTML document.  Linking an external document is easy enough you often see the link like this

    <link href="Content/bootstrap.css" media="all" rel="stylesheet" type="text/css"></link>
    <script src="Scripts/bootstrap.js"></script>

Now let's break it down link attributes, there are four possible attributes for the link tag.

They are the following:

• rel (required) - Relations, relationship to this page.  For CSS stylesheets its "stylesheet"
• type (optional) - is the type of the link, "text/css" is the type for CSS stylesheets
• href (required) - is the location of the resource, it could a relative path or an actual URL like a CDN
• media (optional) - with this attribute you can specify which media the stylesheet is meant for.  For example the media attribute can have the "projector" value.

JavaScript Functions: Function Properties

Since JavaScript functions are objects they can have properties that belongs to the function itself.  For example this simple example counts the number of times the function is being called by incrementing the counter property that belongs to the function.

    <script>
        functionCount.counter = 0;

        function functionCount() {
            return functionCount.counter++;
        }

        for (var i = 0; i < 10; i++)
            functionCount();

        console.log(functionCount.counter);

    </script>

JavaScript Array Deep Dive: Adding and Deleting Elements Array.push(), Array.unshift(), and delete

When you define an object as an Array in JavaScript you get the benefits of inheriting some useful methods with it.  Some of the common methods are those that allows you to add and delete elements from an array.  The .push() method adds an element at the end of the array, the unshift() method adds an element at the beginning of the array.  The delete keyword deletes an element at the specified index.

Let say you have an the following array:

var numbers = [3,4];

If you output the array in the browser console you will see that the array has two elements with the number 3 occupying index 0 and the number 4 occupying index 1.

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");
}

JavaScript Array Deep Dive : Iterating Through Array

Since an array is a collection of elements of objects, values, etc.  The most common function performed on it is to iterate through each elements of the array.  The most frequent way to do that is with a for loop.

Let's say you have an array with the following:

var numbers = ["one","two","three","four","five"];

The numbers array above contains five string elements, which also has a indexes associated with the it.  There's also a length that is defined with each array that we will use for the for loop we are about to write.  So what do the you length of the numbers array will be?

If we output the array to the browser with the statement console.log(numbers.length) do you think we will get the length to be 5 or 4?

If you guess 5 you are correct because there are five elements in the array.  However, the arrays have zero based indexes therefore the index is always length -1

for(var i = 0; i < numbers.length; i++)
{
     console.log(numbers[i]);
}

JavaScript : Multidimensional Arrays or Arrays of Arrays

JavaScript itself does not have multidimensional arrays, instead you can use an arrays of arrays instead.  Multidimensional arrays are basically arrays that you can reference by rows and columns.  The most obvious real world use is to store rows and columns of a database record.  Imagine if you have a row of the database product from the database from the table "Products".  Instead of storing each value in an individual variable you can store them in an arrays of arrays.

Let's say you have the following database Products table

MongoDB In-Depth: Installing MongoDB on Windows

In the previous post we installed MongoDB on Linux on this post we are going to install MongoDB on Windows.

Here are the steps:

1. Go to https://www.mongodb.com/download-center/community, then click on the "Download" button

JavaScript Array Methods: The Array.reverse() Method

The Array.reverse() method reverses the order of the array elements.  The easiest way to demonstrate this is to have an array with the numbers 1 to 5.  If we call the Array.reverse() method we should get an array of 5 to 1.  The Array.reverse() does not create a new array, it simply rearranges the array into a new order.  Just keep that in mind when you are using this method.

So let's declare our array from 1 to 5

    <script>
        var numbers = [1, 2, 3, 4, 5];
    </script>

So if we call the numbers.reverse() method we should get an array of 5 to one in the reverse order