Question

I ve been adding quite a bit of javascript to my pages lately, but have learned it all in classic seat-of-the-pants fashion. When I want my page to do something, I google and experiment until I get the result I want.

I frequently have objects in my pages that I want to activate/deactivate, hide, show, etc., but - having missed the rigorous introduction to javascript - I ve no idea how these things get named. I click on objects with firebug open, expecting to see some fully-qualified name for the object, but get no joy. I just need to be able to do something like form.button.value="something", and need to know the name of that object.

Any ideas?

Thanks.

Answer 1

Whilst you are running Javascript code, you have all the local variables in the current scope, so if you had the following code:

var myObject = New Object();
myObject.Person = New Object();
myObject.Person.Name = "Mark";
myObject.Person.Gender = "Male";
myObject.Name = "object1";

... your root object would be myObject, and you refer to descendent objects through the dot notation.

However, thanks to the implementation of the DOM in the browser, you also inherit the window object via the this keyword. In fact, you can leave the this keyword out for simple situations i.e. when you are not using closures. Therefore, you can access Javascript functions at the top level by just using the function name.

If you want to access specific elements, like it sounds like you are wanting, you need to learn the DOM, and not use the syntax that you were suggesting (that sounds like 1990s Javascript). The root element you need to know is the HTMLDocument object, accessed via the document property. You can discover elements with specific Id (not Name) attributes by using the getElementById method of the document element. Of course, it helps if you ve given your element an unique Id from the start. You can also recursively use the childNodes collection to iterate manually through elements until you find what you want. Alternatively, if you really can t supply an Id, you could also use the getElementsByTagName method, which is attached to every element in the DOM.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
    <TITLE></TITLE>
    <META NAME="Generator" CONTENT="TextPad 4.6">
    <META NAME="Author" CONTENT="?">
    <META NAME="Keywords" CONTENT="?">
    <META NAME="Description" CONTENT="?">
    <SCRIPT LANGUAGE="Javascript">
        <!--

        function DoSummat()
        {
            var divInside = document.getElementById("Inside");
            divInside.textContent = "This text will appear inside.";
        }

        //-->
    </SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<FORM>
    <INPUT TYPE="BUTTON" onclick="DoSummat();" NAME="MyButton" VALUE="Press Me">
</FORM>
<DIV ID="Outside">
    <DIV ID="Middle">
        <DIV ID="Inside"></DIV>
    </DIV>
</DIV>
</BODY>
</HTML>

Answer 2

Elements are generally identified using the id attribute. Example:

<input type="submit" id="saveButton" value="Save" />

You can use the getElementById method to get a reference to an element:

var b = document.getElementById( saveButton );
b.value =  Saving... ;

Answer 3

Well since you gave the form.button.value="something" example, I m guessing you want to control HTML objects. You can assign them an id, e.g.: <form id="my_form"... and then get elements by id from JS, as the function is even called, getElementById().

document.getElementById( my_form ).button.value =  something ;

Answer 4

You re question is extremely vague so I can t give you the answer you need.

Objects can t be "activated"/"deactivated" and they don t have "names" (they can have a name property, if that s what you mean).

For example, given:

var foo = {};

foo is a variable that happens to have a value that is an object. The object is not the variable (object having a "name"). Given:

bar = foo; foo = null;

foo is now null and the object that foo held is now stored as bar.

Answer 5

You won t be able to do that. The variable name isn t tied to the variable, and they re not passed between functions. The best you could do is write a function to take a string and resolve it back to a variable:

function printVar(name) {
    console.log(name + ": " + window[name]);
}

Of course, there s a lot of things wrong with this. I d recommend just making two logging calls:

console.log("foo");
console.log(foo);

or, using the printf-style syntax:

console.log("foo: %o", foo);

友情链接