Algorithms, Blockchain and Cloud

Console in Javascript


In Javascript, there are some nice language features, one of them is to define a class via returning a list of functions. For example, the following illustrates this simple method, which is efficient and elegant.

var test = (function ()
{
  // attributes go here
  var val = null;

  // private methods
  function _init()
  {
    val = 1;
  }

  // return public methods
  return {
    Init: function()
    {
       _init();
    },
    Add: function()
    {
       if (arguments.length > 0)
       {
          val += parseInt(arguments[0]);
       }
       else
       {
          val ++;
       }
    }
  }
})();

test.Init();
test.Add();

It is worth mentioning that the bracket { of return statement should be in the same line with return otherwise the browsers will complain syntax error.

The followng will present a useful class that is based on this kinda of declaration. It can be used to print messages to the browser, in a way similar to consoles. The DOM object is referenced by getElementById and the text area (acts as a screen) is controlled by innerHTML property.

/**
 * @author Dr justyy
 * https://helloacm.com 
 */
 
 var Console = (function () 
 {
     var DOM = null;

     function _initDOM(_DOM) 
     {
         DOM = document.getElementById(_DOM);
     }
     
     function _init() 
     {
         _initDOM('console');
     }    

     function _clear() 
     {
         DOM.innerHTML = '';
     }

     function _print(output) 
     {
         DOM.innerHTML += output;
     }
     
     function _println(output)
     {
         DOM.innerHTML += output + '
';
     }

     return { // { must be on this line  
         Initialize: function() 
         { 
             if (arguments.length > 0)
             {
                 _initDOM(arguments[0].toString());
             } 
             else
             {
                 _init();
             }             
         },

         Clear: function()
         {
             _clear();            
         },

         Print: function() 
         {
             for (var i = 0; i < arguments.length; i++) 
             {
                 _print(arguments[i].toString() + ' ');
             }
         },
         
         PrintLn: function() 
         {
             for (var i = 0; i < arguments.length; i++) 
             {
                 _println(arguments[i].toString() + ' ');
             }
         }
     }
 })();

The sample HTML usage is given below, which prints a three ‘Hello, World!’ in three lines, as you will notice, it is very clear and the usage is very simple, which can be used in even complex applications.



  
  
    
    
  
  
abc

The code can be also downloaded at github. For normal HTML tags without contents, you can close it by adding a slash before “>” for example, the break return: <BR />. However, this does not apply to the script tag, if you specify a src attribute, you still have to close the script tag by </script>.

–EOF (The Ultimate Computing & Technology Blog) —

467 words
Last Post: Bug-fixes for PHP Online Logo Interpreter
Next Post: SetTimeout in IE

The Permanent URL is: Console in Javascript (AMP Version)

Exit mobile version