JavaScript Document Object

Great resource on the JavaScript Document Object.

http://www.comptechdoc.org/independent/web/cgi/javamanual/javadocument.html

JavaScipt Template Objects or Object Cloning

After doing a lot of research, I stumbled upon a talk by Nicholas C. Zakas  about Scalable Javascript Architecture.  Great!  Time to learn.


So, Yahoo has developed their own way of doing things.  They have created a 'Module' pattern.  If you watch the talk, he explains it in more detail.  The main idea is that the architecture is, ...well, MODULAR!  The problem is that he explains about the pattern without explaining all the parts that make it possible.


Let's start with creating an object that has 'Public' and 'Private' members and variables.  You start with making an object:

   var MyObj = function () {

                  var _myVar1;
                  var _myVar2;

  }

This will give your object private variables that are visible to any instance of the object, but not publicly visible.

Next, we add the functions that we want to the object:

MyObj.prototype = (function() {

              function func1 () {

              }

              function func2 () {

              }

              return {

                    // DON'T forget the constructor!

                    constructor: MyObj,

                    SomeFunctionName: func2

             }

})();

So, the key is that in the 'return' block, we add the functions we want to make public.  We can give whatever name we want to give, and that is the name with which we can access the function.  For instance,

        var myNewObj = new MyObj();
        myNewObj.SomeFunctionName();  // Will execute func2

We cannot access 'func1'.  It is private.


Next, we can look at trying to decouple objects from one another.  A main point of the talk was to stress the importance of knowledge of the layers.

The architecture looked something like:

                          MODULES
                          SANDBOX
                          APPLICATION CORE
                          LIBRARY


The modules should only know that the 'sandbox' exists, and have no knowledge of any other part of the system.

That's great and all, but how do we decouple the Application Core from the modules?

YUI has a built-in 'Clone' function.  Yay! Except, I don't want to have to incorporate YUI into my project just to use the clone feature.  I happen to use jQuery.

It took me a while to figure out, but I got it with some help from:  http://oranlooney.com/functional-javascript/

So, the reason we want to do this is, we want to be able to create module instances inside the AppCore, without the AppCore knowing about the modules directly.  We 'register' the modules with the AppCore and use a 'Start' method to start the module from the AppCore.

We don't want the AppCore creating direct instances of these modules.  So, the war around that is 'cloning'.

So, we have an object:

        var original = function () {
 
            var _name;
        
        }
 
        original.prototype = (function () {
 
            function Get() {
                return this._name;
            }
 
            function Set(name) {
                this._name = name;
            }
 
            return {
                constructor: original,
                Get: Get,
                Set: Set
            }
        })();

Now we want to use this object to create instances as modules in our system.  We don't want to directly create them, so we must do:

            var obj = new original();
 
            function Clone() { }
            Clone.prototype = obj;
 
            var test1 = new Clone();
            test1.Set("Locke");
            alert(test1.Get());
 
            var test2 = new Clone();
            test2.Set("Shepard");
            alert(test2.Get());
            alert(test1.Get());

This creates two instances of the original, without direct knowledge of it.

NOTE:  In the original object, you MUST use the pre-fix this, otherwise, if the private variable '_name' is changed, it is changed for all instances.  So, any reference to a variable inside that object that you do not want STATIC, you must have 'this.myVar'.  If you want it static throughout all instances, use 'myVar'.

JavaScipt Array Concat

So, when you concatenate two arrays in javascript, you shouldn't add the original array to the list of arrays to concatenate, unless you want to exponentially grow the array.

{
   var array1 = [ 'John Locke' , 'Jack Shepard' ];
   var array2 = [ 'Michael Scott', 'Dwight Schrute'];

   var array3 = array1.concat(array2);
}

array3 is === [ 'John Locke' , 'Jack Shepard' , 'Michael Scott' , 'Dwight Schrute'];

Javascript Charts

This site is full of javascript chart websites.

http://www.articlediary.com/article/25-graph-chart-solutions-for-web-developers-277.html

Don't know if all are good, but www.highcharts.com is awesome.

JavaScript Addition

Apparently, IEEE makes standards for JavaScript that make accurate addition difficult.

I haven't found the exact standard, but I'm looking for it.

When you add numbers with decimals, JavaScript will add value.

For instance:

115.04 + 15 = 130.04000000000002

Instead of 130.04

So, I found a work around for this. Use *.toPrecision(##).

toPrecision will allows you to truncate the value.

JavaScript Charting

This is a great 3d javascript chart library

http://dragan.yourtree.org/code/canvas-3d-graph/

CSS change children with JQuery

I wanted to be able to change the children's css of an element with JQuery.

In a table, for instance, I wanted to change the data rows as the user's mouse and . I was using

$("#tr").mouseleave(function(){

$(this).children().css = "...";

});

This even changed rows that were header rows.

I had more than one table on the page, so accessing an id isn't efficient or practical.

I created a class in css, tableHead, and set the rows containing the th to this class.

Then in JQuery, after $(this).children().css = "";

$(".tableHead").children().css = "..";

This changed everything with the class "tableHead" to the new css.

Javascript Confirmation Dialog

I was trying to get verification from the user on a delete command. This may not be the correct solution.

I needed a button, when the user clicks, a pop-up form asking "Are you sure?" appears. If the user selects 'Cancel', nothing happens. If the user selects 'Ok', then the data is deleted.

I developed this solution:

I am using the submit, because I have a hidden field that is set with a value depending on what the user has chosen to do. This is the reason for doing nothing on 'ok' and something on 'cancel'.

*************************************************

11/25/2009

I think this is a more versatile solution.

//***************************************************

// Name: Form Submit

// Parameter [formId] : this is the Id of the form to

// submit.

// Parameter [verify] : 'true' if the form needs a

// confirmation before submitting, any other string

// if the form does not need confirmation.

// Parameter [message] : Message to show if the form

// needs validation.

//**************************************************

function formSubmit(formId, verify, message) {

if (verify == "true") {

if (confirm(message)) {

document.getElementById(formId).submit();

}

}

else {

document.getElementById(formId).submit();

}

}

Replacing characters within strings with Javascript

I found out today how to replace characters within a string using Javascript.

It's not hard.

First, you take the string that has characters that need replacing.

You make a regular expression of the characters that need replacing. -> this uses the javascript RegEx("string") function.

You make a variable to hold the new string that is generated from the replacing.

You have a new string with replaced characters.

In the following example, I wanted to replace a string with the empty string, removing the unwanted characters.

temp will have the value of  "1,,3,4".

If you want to take the comma out, also, just put "2," into the regular expression function.

The regular expression function generates a regular expression that is understandable to javascript.  The first code would generate /2/ while the second code would generate /2,/.

Hope this helps.