Functions within functions, and prototyping

[krycek]

OK, here are two related questions concerning functions:


----- 1. -----


If I have a function called f1(), I can nest another function within this by saying:


function f1() {
this.greeting = "hello"
}

function f2() {
this.greeting = "hi"
}

f1.f2 = new f2()


--- OR ---


function f1() {
this.greeting = "hello"
this.f2 = function {
this.greeting = "hi"
}
}


Now, in the first example, I can say f1.greeting or f1.f2.greeting. Also, I can add multiple layers of functions, e.g. f1.f2.f3.f4.greeting.

In the second example, I have the following two questions:

A: How do I add multiple nests of functions?

B: How should I reference them, both inside and outside the functions? e.g. are variables always this.greeting which would then be f1.f2.f3.greeting etc. - or would it be this.f1.f2.f3.greeting = , etc.


The reason I need to know this is that I have a working nest using the first method, and prototypes, but I would like it all contained within the first function if possible, because the nested functions should not be available outside of the parent.


----- 2. -----


My second question is purely about prototyping:

If I want to add a function to an object, I can say:

myObject.prototype.myFunction = function() {} etc.

I can use my own objects for this, or else extend predefined JavaScript objects, for example:

Array.prototype.myFunction...... etc.

Now, I would like to be able to add some functions to textboxes if possible, but I do not see any way to do this. I assume it is not possible, but apparently it is possibly to add to an Image object...?

So, my question is:

A: What kinds of objects exist, and which can be extended?

B: Do they have any relation to the HTML equivalent? i.e. is Image equivalent to <img> ?

C: Is it possible for me to add a function to every single <input> box, or not?


:confused:


Thanks people for the help, I know someone out there has the answers! :)


::] krycek [::

[joh6nn]

in Gecko based browsers (Mozilla, et al), you can prototype HTML elements. in IE, you can't. in my opinion, if the answer is "you can't do it cross browser", then the answer is really "no".

cross browser, the only objects that can be prototyped, are the ones that you could make using the new operator. like new Object(), new Array(), new String, etc. also, any user defined objects you make can be prototyped.

i'll get to Image() in a moment.

in order to achieve the same sort of functionality of prototyping, for form elements, you'd have to loop through all the forms on a page, have a loop inside that loop, which goes through all the elements in that form, checks to see if their type == "text", and if it does, assign them a new method.

Image() objects sort of cross the divide here. you can make then using the new operator, and you can prototype them, but in some ways, they also correspond to images in the page. but not exactly. the difference, is that Image objects, aren't part of the DOM; they're just a means for holding an image file in the cache. Because it's never rendered on the screen, you can manipulate it more, in JavaScript.

[krycek]

Thanks joh6nn, for the speedy reply - that cleared a few things up because I had found some webpages detailing prototyping html elements and I now realise they must be mozilla only, like you said :)

You also sorted the Image issue for me, which is cool because I have not been able to find out much of any use, they are not mentioned in the Danny Goodman Dynamic HTML book I have etc. etc. etc.

However, do you have any idea about the first question, i.e. functions within functions? Someone just messaged me that using this nested method, you can only access a function from the next one out or something - but if someone could explain this in context to my question it would be great :)

Cheers people!

::] krycek [::

[joh6nn]

as for the first part of the question, i'm really not sure what you're trying to accomplish.

[krycek]

OK, I will try to expand my explanation about the first one a bit! :)

My aim is to create an object with the following example nested properties and methods:


myObject.greeting
myObject.display()
myObject.level2.greeting
myObject.level2.display()
myObject.level2.level3.greeting
myObject.level2.level3.display()


Let's just say that the greetings are "hello", "hi" and "welcome" respectively. display() would simply show the greeting on its level.


function display() {
alert(this.greeting)
}


Now, I can do this easily, by doing the following:


function myObject {
this.greeting = "hello"
}

myObject.prototype.display = function() {
alert(this.greeting)
}

function level2{
this.greeting = "hi"
}

level2.prototype.display = function() {
alert(this.greeting)
}

function level3{
this.greeting = "welcome"
}

level3.prototype.display = function() {
alert(this.greeting)
}

myObject = new myObject()
myObject.level2 = new level2()
myObject.level2.level3 = new level3()


So far, so good. This works (well I dunno about that specific example because I just wrote that on the fly, but it should work - my original works :))

What I want to do, though, is to include both of those nested functions INSIDE the original, but still be able to access them from the outside in the same manner, i.e. myObject.level2.level3.greeting

I can start off by doing this:


function myObject {
this.greeting = "hello"
function level2{
this.greeting = "hi"
}
level2.prototype.display = function() {
alert(this.greeting)
}
function level3{
this.greeting = "welcome"
}
level3.prototype.display = function() {
alert(this.greeting)
}
this.level2 = new level2()
this.level2.level3 = new level3()
}

myObject.prototype.display = function() {
alert(this.greeting)
}

myObject = new myObject()


And that appears to work OK. However it is only partway - I want something more like this:


function myObject {
this.greeting = "hello"
this.level2() = function() {
this.greeting = "hi"
this.display = function() {
alert(this.greeting)
}
}

myObject.prototype.display = function() {
alert(this.greeting)
}

myObject = new myObject()


I have left level3 out of the last example, so that you can see more clearly what is going on - but level3 would be nested inside level2 in the same way that level2 above is nested within myObject.

The problem is, it doesn't work!

How can I accomplish this - maybe it is a reference problem, i.e. should I be saying this.display() or this.level2.display to create the display() function within level2? etc. etc. etc.

Not sure if that has explained the problem any more clearly for you, but I tried :)

Cheers!

::] krycek [::

[krycek]

Anyone? :confused:

I think that this may well tie in with another post I made, about this objects and functions (http://www.codingforums.com/showthread.php?s=&threadid=9191).

::] krycek [::