Home
Console in Javascript
Tags:, , , , , , ,

Console in Javascript

August 28, 2012 No Comments beginner, github, HTML5, http, implementation, internet, javascript, programming languages, technical, tricks

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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();
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/**
 * @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() + ' ');
             }
         }
     }
 })();
/**
 * @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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script language='Javascript' type='text/Javascript' src='console.js'> </script>  
  </head>  
  <body>
  <div id='console'> abc </div>
  <script language='Javascript' type='text/Javascript'>
    Console.Initialize('console');
    Console.Clear();
    Console.PrintLn('Hello, World!');
    Console.PrintLn('Hello, World!');
    Console.PrintLn('Hello, World!');
  </script>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script language='Javascript' type='text/Javascript' src='console.js'> </script>  
  </head>  
  <body>
  <div id='console'> abc </div>
  <script language='Javascript' type='text/Javascript'>
    Console.Initialize('console');
    Console.Clear();
    Console.PrintLn('Hello, World!');
    Console.PrintLn('Hello, World!');
    Console.PrintLn('Hello, World!');
  </script>
  </body>
</html>

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) —

GD Star Rating
loading...
484 words
Last Post: Bug-fixes for PHP Online Logo Interpreter
Next Post: SetTimeout in IE

The Permanent URL is: Console in Javascript

Related posts:

  1. How to Determine Sum of Two Square Numbers? Given a non-negative integer c, your task is to decide whether there’re two integers a...
  2. Simple NodeJS Example to Show Average Scores in the Steemit-Wechat Group I have shown a simple NodeJS example that calls the SteemIt Wechat API to get...
  3. Codeforces: B. Roadside Trees (Simplified Edition) The problem is from codeforces: http://www.codeforces.com/contest/265/problem/B This problem is not difficult, but it took me nearly...
  4. How to Fix a Slow/Incorrect Clock on Windows? I have been using HP Z800 Server for a couple of years and lately, the...
  5. Lost Era, Microsoft DOS, 16-bit Assembly, Echo program revisited 16-bit DOS has been obsolete. But learning 16-bit Assembly helps up understand how underlying system...
  6. AWK Tutorial: How often do you generate a Witness Block? (SteemIt) How many hours/minutes or blocks are there since last time you generate a block as...
  7. How to Reorder Data in Log Files using the Custom Sorting Algorithm? You have an array of logs. Each log is a space delimited string of words....
  8. Teaching Kids Programming – Algorithms to Find the Lowest Common Ancestor of a Binary Search Tree Teaching Kids Programming: Videos on Data Structures and Algorithms Given a binary search tree (BST),...

Leave a Reply