JavaScript with Oops is not much used by developers while creating application however we can make our life easy if we use JavaScript with Oops.
Let’s started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.
Create Class
Create the class Timer. Below code shows how to declare the class
|
1 2 3 4 5 6 7 8 9 |
// Declaring class "Timer" var Timer = function() { // .... // Class body // .... } |
Add Public Properties
To add public properties to the class we use this keyword as shown below
|
1 2 3 4 5 6 7 8 9 10 11 |
// Declaring class "Timer" var Timer = function() { // Property: Frequency of elapse event of the timer in millisecond this.Interval = 1000; // Property: Whether the timer is enable or not this.Enable = new Boolean(false); } |
You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.
Add Events (If any)
Now we might want to add events to the class in case we need. For Timer class we need “Tick” event which will be fired every after “Interval”. Event are added the same way as the public properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Declaring class "Timer" var Timer = function() { // Property: Frequency of elapse event of the timer in millisecond this.Interval = 1000; // Property: Whether the timer is enable or not this.Enable = new Boolean(false); // Event: Timer tick this.Tick; } |
Add Private Member Variables
We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using ‘var’ keyword.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Declaring class "Timer" var Timer = function() { // Property: Frequency of elapse event of the timer in millisecond this.Interval = 1000; // Property: Whether the timer is enable or not this.Enable = new Boolean(false); // Event: Timer tick this.Tick; // Member variable: Hold interval id of the timer var timerId = 0; // Member variable: Hold instance of this class var thisObject; } |
Add Functions
Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first “Start” to start the timer and second “Stop” to stop the timer.
|
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 |
// Declaring class "Timer" var Timer = function() { // Property: Frequency of elapse event of the timer in millisecond this.Interval = 1000; // Property: Whether the timer is enable or not this.Enable = new Boolean(false); // Event: Timer tick this.Tick; // Member variable: Hold interval id of the timer var timerId = 0; // Member variable: Hold instance of this class var thisObject; // Function: Start the timer this.Start = function() { this.Enable = new Boolean(true); thisObject = this; if (thisObject.Enable) { thisObject.timerId = setInterval( function() { thisObject.Tick(); }, thisObject.Interval); } }; // Function: Stops the timer this.Stop = function() { thisObject.Enable = new Boolean(false); clearInterval(thisObject.timerId); }; }; |
You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.
Using the Class
To use the class first create the instance of Timer.
|
1 2 3 |
var obj = new Timer(); |
Now assign the value to its properties as needed.
|
1 2 3 |
obj.Interval = 300; |
Attach handler to the events
|
1 2 3 4 5 6 7 8 |
obj.Tick = timer_tick; function timer_tick() { // Do something.. } |
Now call the “Start” function to start the timer
|
1 2 3 |
obj.Start(); |
To stop the timer anytime in between just call the “Stop” function.
|
1 2 3 |
obj.Stop(); |
[…] quite handy for timer like functionality and some time wish I could use that in C# too. In an earlier post I create a C# like timer functionality in JavaScript. Now, I want to do opposite i.e. implement […]
[…] the Object oriented programming the exception handling is also not used while coding in JavaScript. That why in most of cases if […]
[…] don’t contain any images. They all are pure JavaScript based progress bars. They uses the JavaScript Timer Class for the delay and jQuery fading function transparency for animated effect. To add a progress bar […]