SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    another question re _simply javascript_

    Hi Again,

    I hope your patience will bear with me, as I'm trying to cement together the pieces of my understanding of javascript. Again, I'm trying to understand a passage in _Simply Javascript_ (Section, "Comparing Classes," page 88).

    In this code:
    Code:
    Core.hasClass = function (target, theClass)
    {
        var pattern = new RegExp ("(^| )" + theClass + "( |$)");
        if (pattern.test(target.className))
        {
            return true;
        }
        return false;
    };
    Is the "target" argument an argument for "whatever relevant element is called by this function." That is, does it (sort of) say "each element that is referenced to the class named 'theClass'"? I couldn't find reference to "target" in this passage outside of the code example. (I couldn't find it mentioned earlier in the text either, and later references didn't help with my understanding.) My sense is that it is the generic/system name/placeholder for each element that the function is targeting, that is, each element with the className "theClass." Is that correct?

    In this code:
    Code:
    var scarlet = document.getElementById("scarlet");
    if (Core.hasClass(scarlet, "clicked"))
    {
       .
       .
    }
    What is "clicked?" Is this in reference to an event? I couldn't find reference to it in this passage. (As with above, I couldn't find it reference earlier in the text either, and later references didn't help with my understanding.)

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is the "target" argument an argument for "whatever relevant element is called by this function."
    Yes, "target" becomes a local variable to the function. It can be whatever is passed to the function and in this case it looks like it will be a reference to the element that the function is testing to see if it has a particular class (which is theClass, which also becomes a local variable within hasClass). Because this function has local variables (target, theClass and pattern) we say it has made a closure (like a mini-environment where variables and functions declared within it cannot be touched from outside).

    What is "clicked?"
    "clicked" is the class you are testing. It will have come from an HTML element similar to this:
    HTML Code:
    <a href="#" class="clicked" id="scarlet">Text</a>
    though the likelihood is that the class name "clicked" was added using javascript. That code is first getting a reference to an HTML element via its ID (using getElementById). That reference is "held" by the variable "scarlet". Then we test "scarlet" to see if it has the class name "clicked" using the hasClass method of the Core object (when a function belongs to an object, it is called a method). The Core object is just a container to put things in. It is done like this so that the global namespace doesn't get polluted with lots of variables in the global scope, thus reducing the possibility of conflict with other scripts that might have declared global variables. Therefore you can have another function called "hasClass" outside your Core object (as a global variable) and it will be safe - no conflicts with the "hasClass" method of Core.

    In code form:
    Code Javascript:
    var a = 'I am A'; // variable in global scope
    var b = {}; // An object, also in global scope
    b.a = 'I am A as well but I belong to B'; // a is a property of b. a is not in the global scope. It is in the scope of b
    alert(a); // will alert 'I am A';

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    but why is ...

    Thanks Raffle,

    I appreciate your effort. Another question (as I'm confused): why is scarlet not in quotation marks, and "clicked" is? How are those two entities different?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    One of them is a variable name and the other one is a string.
    It can be confusing when a variable and a string are called the same, so here's a version of the code that might help remove some confusion.

    Code Javascript:
    var element = document.getElementById("scarlet");
    if (Core.hasClass(element, "clicked"));

    By the way, the Simply Javascript has some corrections.
    http://www.sitepoint.com/books/javascript1/errata.php
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, Paul, thanks. This definitely helped clarify the matter. Also, I reread "Arguments: Passing Data to a Function," which helped clarify. It's starting to sink in what loosely typed means, as I learn this stuff. It seems to offer lots of flexibility. Once I finally get a working knowledge of this, I'm going to have a hoot. Again, thank to all.

    Edit: also, the various ways for defining a variable are starting to sink in.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •