Tech Junkie Blog - Real World Tutorials, Happy Coding!: December 2021

Friday, December 31, 2021

The some() array works similar to the every() method, it also returns true or false when the condition is met.  some() needs to match just one element in the array that meets the condition to return true.  So lets run the same code that we ran for the every() method.  We will test to see if the array is greater than 50 for the first condition, and then we will test to see if the array is greater than 70 for the second condition.  For the every() method the first condition returns true, while the second condition returns false.  Let's see what happens with the some() method.


    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 76.99];

        var greaterThanFifty = oilPrices.some(function (value) { return value > 50; });

        var greaterThanSeventy = oilPrices.some(function (value) { return value > 70 });

        console.log("greaterThanFifty: " + greaterThanFifty);
        console.log("greaterThanSeventy: " + greaterThanSeventy);
    </script>

Thursday, December 30, 2021

If you come from C# or Java, JavaScript inheritance is a little different than what you are used to.  In JavaScript you don't inherit from a class, but you inherit the classes' prototype object.  In our previous post we created an Account class.  In this post we are going to inherit from the account class.  First let's recreate the Account class with the code below.


    <script>
    <script>
        function Account(balance, type) {
            this.balance = balance;
            this.type = type;
        }

        Account.prototype.deposit = function (d) {

            this.balance = this.balance + d;
            return this.balance;
        }

        Account.prototype.withdrawal = function (w) {
            this.balance = this.balance - w;
            return this.balance;
        }

    </script>


Wednesday, December 29, 2021

In the previous post we created arrays of different types, in this post we are going to read the values from our arrays.

Let's work with the following arrays
  1. var numbers = [1,2,3,4];
  2. var stringArray = new Array("USA", "Canada","China");
  3. var objectArray = [{firstName: "Jane", lastName:"Johnson", weight:"115lbs"},{firstName: "Jack", lastName:"Johnson", weight:"200lbs"}];
Let's start with getting a value from an array:

To get the second value of an array you would write the following code by using the :

console.log(numbers[1]);
console.log(stringArray[1]);
console.log(objectArray[1]);

Tuesday, December 28, 2021

Arrays in JavaScripts are a collection of values stored in what are called elements.  Each element is represented by a numeric index that is zero based, meaning the first element of an array starts at index zero.  JavaScript arrays are dynamic and can contain many types of objects including functions.  The useful thing about arrays is that they are a specialized object that contains a variety of built-in methods that are useful in the manipulation of the array.

First let's create an empty array, there are several ways to do this:


  1. var empty = [ ];
  2. var empty = new Array();
  3. var empty = new Array(0);

Monday, December 27, 2021

The Array.isArray() method is a useful method to determine object is of type array.  Let's demonstrate with some code.

    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 69.50, 76.99];
        var iamObject = new Object();

        console.log(Array.isArray(oilPrices));
        console.log(Array.isArray(iamObject));
    </script>

The code above tests to see if the oilPrices array is of type array which it is, and then it tests to see iamObject is an array.  The console.log out put should return true, and the second console.log should return false.

Friday, December 24, 2021

In JavaScript when you define a function you get a built-in Arguments object, this object is an array-like object that puts the arguments/parameters of the your function in an object which can be accessed via indexes much like an array.

This can be useful if you have a function that takes multiple parameters, but you don't know how parameters there will be.  Let's modify our addNumbers function so that it can add more than two numbers using the Arguments object.

    <script>
        function addNumbers() {
            var sum = 0;

            for (var i = 0; i < arguments.length; i++)
                sum += arguments[i];

            return sum;
        }

        console.log("The sum of the numbers are " + addNumbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
    </script>

Thursday, December 23, 2021

A JavaScript class is different than classes in other languages like C# or Java.  A class in JavaScript means that the objects inherit properties from the same prototype object.  It is defined by using the function to initialize and return a new object.

First thing we have to do define the prototype object by creating a function constructor that initializes and creates a new object.  Let's say we have a bank account first we will create a constructor that will create a new account object.  We then define the class methods by defining the prototype methods.  After we do that all the new objects that created will inherit those prototype methods. Like the code below.


    <script>
    <script>
        function Account(balance, type) {
            this.balance = balance;
            this.type = type;
        }

        Account.prototype.deposit = function (d) {

            this.balance = this.balance + d;
            return this.balance;
        }

        Account.prototype.withdrawal = function (w) {
            this.balance = this.balance - w;
            return this.balance;
        }

        var a = new Account(100, "Checking");
        var bonus = 10;
        var fine = 20;

        console.log("Deposit " + bonus + " " + a.deposit(bonus));
        console.log("Withdrawal " + fine + " " +  a.withdrawal(fine))
        console.log("Account type " + a.type);
    </script>




Wednesday, December 22, 2021

The lastIndexOf() method searches for last appearance the element in the array that matches the passed in value. In this example we will search for the value 60.50 in the array.  The lastIndexOf() method takes two arguments.  The first argument is the value to search for, the second argument is optional and specifies the index to start the search at.  If the second argument is omitted the search will start at the first element of the array.

    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 69.50, 76.99];

        var searchAtBeginning = oilPrices.lastIndexOf(60.50);

        var searchAtIndex = oilPrices.lastIndexOf(60.50,2);

        console.log("searchAtBeginning: " + searchAtBeginning);
        console.log("searchAtIndex: " + searchAtIndex);
    </script>

Tuesday, December 21, 2021

The indexOf() method searches for the element in the array that matches the passed in value.
In this example we will search for the value 60.50 in the array.  The indexOf() method takes two arguments.  The first argument is the value to search for, the second argument is optional and specifies the index to start the search at.  If the second argument is omitted the search will start at the first element of the array.

    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 76.99];

        var searchAtBeginning = oilPrices.indexOf(60.50);

        var searchAtIndex = oilPrices.indexOf(60.50,2);

        console.log("searchAtBeginning: " + searchAtBeginning);
        console.log("searchAtIndex: " + searchAtIndex);
    </script>

Monday, December 20, 2021

The every() method is a method that tests a condition on every array element and makes sure that all the elements meets the criteria.  It returns true or false.

The code below test to see if the oil prices array is greater than $50 or greater than $70


    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 76.99];

        var greaterThanFifty = oilPrices.every(function (value) { return value > 50; });

        var greaterThanSeventy = oilPrices.every(function (value) { return value > 70 });

        console.log("greaterThanFifty: " + greaterThanFifty);
        console.log("greaterThanSeventy: " + greaterThanSeventy);
    </script>

Friday, December 17, 2021

A JavaScript function is a piece of code that is defined once and can be reused through your program.  A function can have arguments or parameters that you can pass into it and returns a value.  If an explicit return value is not specified the return value is "undefined".  During invocation of the function, the function returns the value of "this" keyword, which represents the context of the function.

As you can see a function is a lot like a method.  If a function is defined as a property of an object it is in fact called a method of the object.  It is import to keep in mind that functions in JavaScript are objects and they have the benefits of any objects, meaning they can be self contained, which provide them with a vast amount of flexibility.

Thursday, December 16, 2021

JavaScript does not have a built-in feature to define a namespace.  A namespace is basically a container of your code that it does not pollute the other codes that's on page.  Namespace allows you to play nice with people's code and other JavaScript libraries.

Fortunately, JavaScript functions have their own contexts and scope.  Therefore, we can use functions as a namespace so that it does not pollute the global scope.

The easiest way to create a namespace on a page is to encapsulate everything in an anonymous function like the code below.


    <script>
        (function () {
            // put your code here
        }());

    </script>

Another way of using namespace is to assign the anonymous function to a variable


    <script>
       var myNameSpace = (function () {
            // put your code here
        }());

    </script>

Wednesday, December 15, 2021

The filter() method returns the elements of the array that satisfies the function that is passed into the method.  If the function returns true the element is added to the filtered array, else it is ignored.

Let's say we only want to buy oil when the prices drops below $72, so we will only return an array element where the prices below $72


    <script>
        var oilPrices = [70.15, 69.50, 71.23, 74.32, 76.99];

        var lowPrices = oilPrices.filter(function (value) { return value < 72 });

        console.log(lowPrices);
    </script>

Tuesday, December 14, 2021

The JavaScript array splice() method allows you to delete and insert array elements in one method
Before we get to the examples let's see how we would use the splice() method on an array first.

The splice method takes 1....n method parameters.  The first parameter specify the position of the array that will be deleted.  The second parameter specify the number of elements to be deleted after the first element's index position, or splice out.  Any subsequent parameters will be the elements that will be added to the array.  If there's only one parameter then all the elements before the first parameter's position will be deleted

For example let say we have the following array

    <script>
        var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
    </script>

Monday, December 13, 2021

In CSS you can group your selects into one declarations. For example you want to create a read alert text for your h2 HTML element tag.

You can define each property one at a time like so

<style>
        h2{font: bold 25px arial, verdana;}
        h2{color: red;}
        h2{background:black;}
</style>


When you type in <h2>Alert</h2> you will get this effect





Friday, December 10, 2021

Before we begin inserting data into mongoDB we need to understand the difference between Relational Database Management System (RDBMS) and mongoDB.  RDBMS is a database many of us worked with in the past.  You have tables and relationships between those tables.  We will use the ACME Bank that we were build our AngularJS SPA application as an example.

This is how the design would be on a RDBMS






























Thursday, December 9, 2021

JavaScript is a flexible language, and that flexibility extends to functions.  A JavaScript function are not just codes that you reuse and execute.  There are also values, values that you assign to a variable.  In the following example we are going to write a function that will calculate the radius of a circle.  But instead of invoking radius function like a normal function call, we are going to assign to a function to a variable first.

Wednesday, December 8, 2021

The Array.concat() method returns a array that is a concatenation of the original array and what what is being passed into the concat() method.  The concat() method can take either values or another array.

For example lets say you have an array of numbers from 1 to 3

var numbers = [1,2,3];

Now let's say you want to concatenate the numbers 4 and 5 into the array.  You would type in the following

numbers.concat(4, 5);

Tuesday, December 7, 2021

The Array.sort() methods sorts the array in alphabetical order by default, or you can pass in a custom sort function.

So let's say you have an array of names that's our of order that you want to sort.


    <script>
        var names = ["zack", "jim", "bob", "adam", "jason"];
    </script>

If we call the names.sort() method we would get resulting array in Alphabetical order

Monday, December 6, 2021

The Array.join() method converts all of the elements of an array into strings and concatenates the elements.  If no delimiter is defined it is separated by a comma.  The most common use for this is to convert an array into a comma separated list of strings.

For example let's say we want to convert an array of zip codes into a comma separated list.

    <script>
        var zipCodes = [90210, 90211, 90212, 90213, 90214];
    </script>

If we just call the zipCodes.join() method we will get a string of comma separated list

Friday, December 3, 2021

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

Thursday, December 2, 2021

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>

Wednesday, December 1, 2021

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.

Search This Blog