SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some javascript questions

    Hello. I am brand new to javascript and confused about some fundementals. They talk about Dom nodes. Are these actually objects?

    And about below code;
    var mainLink=document.getElementByID('mainpage');
    mainLink.style.href="http://www.yahoo.com";
    When we declare mainLink.style.href , there are two properties in one decleration for the object. How can this happen?Shouldnt there be only one?And how can we explicitly change that expression into a object decleration shortcut,like the below one?

    var mainLink= {
    property="";
    method=function(){};
    }
    Thanks in advance.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a node is an object technically.

    href is not part of the style object, its part of the parent to the style object ie

    mainLink.href = 'http://www.yahoo.com';

    and

    mainLink.style.color = '#336699';

    color is a property of the style object.


  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post

    mainLink.style.color = '#336699';

    color is a property of the style object.
    Thanks for the reply and sorry for miscoding. About above code; why dont we capitalize the first letter of style although it is an object?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because we dont lol. theres no real naming convention for javascript. The objects already created are done so by the browser, if they capitilized the first letter then we'd have to do it as well.

    if you want to create objects then you can name them how ever you like (within reason)


  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    because we dont lol. theres no real naming convention for javascript. The objects already created are done so by the browser, if they capitilized the first letter then we'd have to do it as well.

    if you want to create objects then you can name them how ever you like (within reason)
    I meant a sincere question. I read it was a convention to make the first letter of the objects capitalized to differ it from variables. But you misunderstood me, I suppose

  6. #6
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a convention in object-orientation to do that, yes; but "style" isn't an object in the OO sense, even though it is an "object" in the more general sense. [deep breath]

    The beautiful yet initially confusing thing is that *everything* in javascript is an object. "style" is a property, but it's also an object. "document" is an object too, but it's not an object in the OO sense either, it's an instance of a "Document" object (which is an object in the OO sense). Functions are objects too, and they may or may not be an object in the OO sense, depending on how they're used (as well as always being instances of the "Function" object (in the OO sense)!)

    And if that wasn't enough .. there's also a kind of JS object called "Object", an instance of which still isn't an object in the OO sense, it's just "a thing with properties"; but everything in JS can have properties, because ... everything is an object!

    I'm not sure if that helps! It's awkward to explain because in JS the word "object" refers to all kinds of different things, most of which are not objects in the OO sense.

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake View Post

    The beautiful yet initially confusing thing is that *everything* in javascript is an object. "style" is a property, but it's also an object. "document" is an object too, but it's not an object in the OO sense either, it's an instance of a "Document" object (which is an object in the OO sense). Functions are objects too, and they may or may not be an object in the OO sense, depending on how they're used (as well as always being instances of the "Function" object (in the OO sense)!)
    Thanks @brothercake. This one is great explanation for me to struggle with abstract issues of Javascript.Almost understood the big scene.

    But also I want to ask this question. Lets assume, I wish to change the color of an anchor element which I referenced it by mainLink variable or object. Then I have to attach style object with a period before it to the mainLink object. This means to me, style object is nested inside mainLink object like a property does. But how will I nest an object inside another one. I just wish to see the code for doing this, if possible.

    Code JavaScript:
    var mainLink={
    href="http://www.sitepoint.com",
    style..........?????????? ,
    }

    Thanks in advance.

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because of how loose javascript is with regards to defining objects and classes there is many wants to answer your question.

    Are you using mainLink as an example or is there a specific reason for it?

    One of the many wants to create a class, is

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var mainLink = function() {
                    this.property = 'value';
                    this.href;
    
                    this.method = function() {
                        alert(this.href);
                    }
                }
    
                var instance = new mainLink(); // creates an instance of the mainLink object
                alert(instance.property); // alerts value
                instance.property = 'bob'; // sets property variable to bob
                alert(instance.property); // alerts bob
                instance.href = 'http://www.sitepoint.com'; // sets href property to http://www.sitepoint.com
                instance.method(); // calls function which in turn alerts http://www.sitepoint.com
            </script>
        </head>
        <body>
            
            
    
        </body>
    </html>


  9. #9
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much @gRoberts.


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
  •