SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Maine, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simply JavaScript discontinuity: changing styles with class

    Working my way through Simply JavaScript (Yank & Adams), and all was going relatively well until I got to the section on changing styles with class (pp 87-90). Up until that point, every time a script failed to execute properly, I managed to track it down (sometimes taking hours or days) to an error on my part.

    This time, nothing I did made the script work. After a bunch of comparing and selective copying and pasting, I found that I could make it work if I added an event listener and the Core.start function to my core.js. To my knowledge, these items hadn't been discussed to this point in the text.

    Did I miss something? Are these things covered further on in the text? Do I need to find an even more elementary JavaScript text?

    I'll move on from this point, but my obsessive-compulsive nature makes me uncomfortable that I'm forging ahead with assumed knowledge instead of a complete grounding in the tools I'm supposed to be using.

  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)
    I don't have the book but a big hurdle that people normally take time to get over is that when you use javascript from an external file and you add event listeners to elements, you need to "initialise" the script by making the preparatory stuff on the onload event of the window object. In other words, you can't do anything until the DOM has been constructed (visually, until the page has finished rendering, whether images need to be loaded or not depends on the browser, unless you use things like this, which are a bit more advanced).

    At its most basic level, you are doing things like this, I imagine:
    Code:
    function myStuff() {
      var thing = document.getElementById('thing'), otherthing = document.getElementById('otherthing');
      thing.onclick = changeColour;
      otherthing.onmouseover = changeSize;
    }
    function changeColour() {
      this.className = 'highlight';
    }
    function changeSize() {
      this.className = 'mega';
    }
    window.onload = myStuff;
    Code CSS:
    .highlight {
      color:red;
    }
    .mega {
      font-size:2em;
    }

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Maine, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, like that, kind of. Except that I didn't know that I was supposed to be adding an event listener. As far as I can tell, the text is incomplete on that subject, although it does discuss event listeners in the next chapter. I guessed that I had to add the event listener and some sort of init process and just copied and pasted from the provided core.js file to the one I'm building.

    I do not like building my knowledge on guesses. I usually get into trouble when I do that.

    pee ess:

    Thank you for your quick response.

  4. #4
    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)
    Sounds like you should read up on events. Think of an event as anything that is the result of user interaction, like the mouse moving, clicking or hovering over something, or a key being pressed, the window being resized on the user scrolling down the page or an element. But not all events are the obvious direct result of user interaction. For example, loading a page (the window.onload event) is an event in itself.

    So to have anything change, you need to attach an "event listener" to something, be it the window or an HTML element. In my example above I used two different ones, onclick and onmouseover.

    The init process is simply collecting the elements to add the event listeners to after the page has loaded. That is why the init function is attached to the window's onload event, normally like this:
    Code:
    window.onload = init;
    Then the init function gets together some HTML elements and attaches some events to them, such as onclick or onmouseover events. These events call a function, which in my example was changeColour or changeSize.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Maine, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, thanx.

    Oddly enough, the next chapter is titled "Events." I look forward to learning about them. And then backtracking to apply the knowledge to the chapter I'm currently working on.

  6. #6
    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)
    Good idea.

    quirksmode.org has a very nice series of articles on events that is extremely useful. Probably first google result for "javascript events".

  7. #7
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Maine, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Much thanx. I just went over for a look. It appears to be written so that even I can comprehend it.


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
  •