473,320 Members | 1,910 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

how to get my javascript class?

7
Hi,
being quite new to javascript I'm scratching my head to the following issue, hope someone can help me...

I'm having a javascript "class" that looks like follows (just showing relevant parts)

Expand|Select|Wrap|Line Numbers
  1. function PlayControl (x) {
  2.    this.x = x;
  3. }
  4.  
  5. PlayControl.prototype.show = function() {
  6.    trace(this.x); 
  7.    setInterval (this.hide, 2000);
  8. }
  9.  
  10. PlayControl.prototype.hide = function() {
  11.    trace(this.x); 
  12. }
If I use this class like:
Expand|Select|Wrap|Line Numbers
  1. var control = new PlayControl(5);
  2. control.show();
the first trace prints "5" but the second trace (that is displayed after 2s) prints "undefined". Somehow, when the timer event invokes the hide function, "this" isn't the PlayControl object any more. My guess is that "this" represents the event target in this case, but how do I get to my PlayControl object in this scenario?

Thanks for any help!
/o

btw, I test this in Opera.
Sep 11 '09 #1
13 2092
Dormilich
8,658 Expert Mod 8TB
setInterval() (along with some other methods*) alter the scope of this in the called function. in this case the first time this (in trace(this.x)) refers to control, the second time to window.

* most methods of window and every event handler
Sep 11 '09 #2
olaalo
7
yes, that's what I suspected. But in the second case (in the hide method), how do I access the control object?
Thanks.
Sep 11 '09 #3
Dormilich
8,658 Expert Mod 8TB
@olaalo
you can’t because the object control does not exist here (it’s a variable name!). nevertheless you can manually set this by the call() function.
Expand|Select|Wrap|Line Numbers
  1. setInterval.call(this, this.hide, 2000);
Sep 11 '09 #4
olaalo
7
hmm, setInterval.call(null, this.hide, 2000) works fine (but I still get the window object in the hide function of course). setInterval.call(this, this.hide, 2000) doesn't get the hide function invoked at all...
Sep 11 '09 #5
Dormilich
8,658 Expert Mod 8TB
until I find a better solution you can use a closure.
Expand|Select|Wrap|Line Numbers
  1. PlayControl.prototype.show = function() {
  2.    console.log(this.x);
  3.    var that = this;
  4.    var fn = function() { that.hide(); }
  5.    setInterval(fn, 2000);
  6. }
Sep 11 '09 #6
olaalo
7
That works just fine! Thanks a lot!!
Sep 11 '09 #7
Dormilich
8,658 Expert Mod 8TB
@olaalo
I know, I made it work *gg* ;)
Sep 11 '09 #8
olaalo
7
Hi again,
I've now got a related question (which clearly shows I haven't really understood how JS really works...) Anyway, the following code works fine:
Expand|Select|Wrap|Line Numbers
  1. function PlayControl (x)  {   
  2.  this.x = x;
  3.  var c = document.getElementById('control');
  4.  c.addEventListener("mousemove", this._dragSettingsDialog, false);
  5. }
  6.  
  7. PlaybackControl.prototype._dragSettingsDialog = function(evt)
  8. {
  9.   //do something
  10. }
I now would like (again) to access the PlayControl's private properties from the _dragSettingsDialog method. To do this I thought I should pass the PlayControl object as a parameter to the method, like:

Expand|Select|Wrap|Line Numbers
  1. PlaybackControl.prototype._dragSettingsDialog = function(evt, controlObject)
  2. {
  3.   controlObject.x;
  4. }
Is this the best way to do it? If so, what should the addEventListener method look like? I've tried things like c.addEventListener("mousemove", function (e) { this._dragSettingsDialog(e, this); }, false); without any luck.
Hope you can help me with this too.
Sep 14 '09 #9
Dormilich
8,658 Expert Mod 8TB
first, in Javascript there are no private properties (although you can mimic something similar)

addEventListener() is similar to setInterval() as it changes the scope of this to the element it is attached to. if you want to use this in the scope of your class, just do what you have done with setInterval()—use a closure.

to better understand these problems, read about Scope and Inheritance, as these are crucial to further understand Javascript.
Sep 14 '09 #10
olaalo
7
Thanks for the pointer, I sure will read up on this (and yes, I'm just mimic private scoping here, or actually just trying to not pollute the global namespace with a bunch of properties).

I actually tried to use a closure like:
Expand|Select|Wrap|Line Numbers
  1. var that = this; 
  2. c.addEventListener("mousemove", that._dragSettingsDialog, false); 
but that doesn't make any difference at all, does the syntax need to be different?
Sep 14 '09 #11
Dormilich
8,658 Expert Mod 8TB
@olaalo
private properties and ‘not polluting the global namespace’ are two very different things.

@olaalo
that’s not a closure.

check out the references in this article
Sep 14 '09 #12
olaalo
7
thanks for the link,
I'll look into this and hopefully I'll figure out how to make this work.
Sep 14 '09 #13
Dormilich
8,658 Expert Mod 8TB
unfortunately it’s not a piece of cake (when I think how long it took me to understand it), best is to try and code as much as possible.
Sep 14 '09 #14

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: Alex Fitzpatrick | last post by:
Just by way of introduction, I'm currently the principal developer and maintainer of the a JavaScript editor plug-in for Eclipse. https://sourceforge.net/projects/jseditor/ The plug-in as it...
1
by: bin_P19 P | last post by:
the code i have got is as follows and now im stuck <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Shopping...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
4
by: Greg | last post by:
I'm guessing the problem I'm having has something to do with Master Pages or DetailsView because the exact same code works fine on a page without a Master Page and DetailsView controls. The...
7
by: Wm.M.Thompson | last post by:
For a computer programmer JavaScript is not difficult. It is pretty easy to look at some code for the first time and figure out what is going on. This is especially true if you have gratuated...
18
by: Tom Cole | last post by:
I'm working on a small Ajax request library to simplify some tasks that I will be taking on shortly. For the most part everything works fine, however I seem to have some issues when running two...
8
by: rajesh | last post by:
< script language = javascript c =...
1
pbmods
by: pbmods | last post by:
VARIABLE SCOPE IN JAVASCRIPT LEVEL: BEGINNER/INTERMEDIATE (INTERMEDIATE STUFF IN ) PREREQS: VARIABLES First off, what the heck is 'scope' (the kind that doesn't help kill the germs that cause...
3
by: bhanubalaji | last post by:
hi, I am unable to disable the text(label) in javascript..it's working fine with IE,but i am using MOZILLA.. can any one help regarding this.. What's the wrong with my code? I am...
2
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.