1. Unobtrusive JavaScript

  2. Unobtrusive JavaScript

    Lessons learned from CSS

  3. JavaScript pseudo-protocol

    <a href="javascript:window.open('help.html')">my page</a>

    Awful!

  4. Redundant link

    <a href="#" onclick="window.open('help.html')">my page</a>

    Bad!

  5. Inline JavaScript

    <a href="help.html"
    onclick="window.open(this.getAttribute("href")); return false;">my page</a>

    Better.

    Alternate HTML-DOM version:

    <a href="help.html"
    onclick="window.open(this.href); return false;">my page</a>
  6. No inline JavaScript

    <a href="help.html" class="help">my page</a>

    Best!

  7. Writing the function

    
    function doPopups() {
      var links = document.getElementsByTagName("a");
      for (var i=0; i < links.length; i++) {
        if (links[i].className.match("help")) {
          links[i].onclick = function() {
            window.open(this.getAttribute("href"));
            return false;
          }
        }
      }
    }
    
  8. Object detection

    
    function doPopups() {
      if (document.getElementsByTagName) {
        var links = document.getElementsByTagName("a");
        for (var i=0; i < links.length; i++) {
          if (links[i].className.match("help")) {
            links[i].onclick = function() {
              window.open(this.getAttribute("href"));
              return false;
            }
          }
        }
      }
    }
    
  9. Object detection

    
    function doPopups() {
      if (!document.getElementsByTagName) return false;
      var links = document.getElementsByTagName("a");
      for (var i=0; i < links.length; i++) {
        if (links[i].className.match("help")) {
          links[i].onclick = function() {
            window.open(this.getAttribute("href"));
            return false;
          }
        }
      }
    }
    
  10. Triggering the function

    You must wait until the document has finished loading.

    The Document Object Model must be complete.

    
    window.onload = doPopups;
    
  11. JavaScript Image Gallery

    Markup

    
    <ul>
    <li><a href="images/andy.jpg">Andy</a></li>
    <li><a href="images/ian.jpg">Ian</a></li>
    <li><a href="images/doug.jpg">Doug</a></li>
    </ul>
    

    View example

  12. JavaScript Image Gallery

    Markup

    
    <ul>
    <li><a href="images/andy.jpg">Andy</a></li>
    <li><a href="images/ian.jpg">Ian</a></li>
    <li><a href="images/doug.jpg">Doug</a></li>
    </ul>
    <img src="images/placeholder.jpg" alt="my gallery"
     id="placeholder" />
    
  13. JavaScript Image Gallery

    JavaScript

    
    function showPic(whichpic) {
      if (!document.getElementById) return true;
      var source = whichpic.getAttribute("href");
      var placeholder = document.getElementById("placeholder");
      placeholder.setAttribute("src",source);
      return false;
    }
    

    A shortcut (but very hard to read):

    
    document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));
    
  14. JavaScript Image Gallery

    Talk to me!

    a web page and a script, unconnected
  15. JavaScript Image Gallery

    Inline event handlers

    
    <ul>
    <li><a href="images/andy.jpg"
    onclick="return showPic(this)">Andy</a></li>
    <li><a href="images/ian.jpg"
    onclick="return showPic(this)">Ian</a></li>
    <li><a href="images/doug.jpg"
    onclick="return showPic(this)">Doug</a></li>
    </ul>
    <img src="images/placeholder.jpg" alt="my gallery"
     id="placeholder" />
    
  16. JavaScript Image Gallery

    Class-itis

    
    <ul>
    <li><a href="images/andy.jpg"
    class="someclass">Andy</a></li>
    <li><a href="images/ian.jpg"
    class="someclass">Ian</a></li>
    <li><a href="images/doug.jpg"
    class="someclass">Doug</a></li>
    </ul>
    <img src="images/placeholder.jpg" alt="my gallery"
     id="placeholder" />
    
  17. JavaScript Image Gallery

    Unobtrusive JavaScript

    
    <ul id="imagegallery">
    <li><a href="images/andy.jpg">Andy</a></li>
    <li><a href="images/ian.jpg">Ian</a></li>
    <li><a href="images/doug.jpg">Doug</a></li>
    </ul>
    <img src="images/placeholder.jpg" alt="my gallery"
     id="placeholder" />
    
  18. JavaScript Image Gallery

    English

    Get all the links in the "imagegallery" element

    CSS

    #imagegallery a { }

    DOM

    
    document.getElementById("imagegallery").getElementsByTagName("a")
    
  19. JavaScript Image Gallery

    Unobtrusive JavaScript

    
    function prepareGallery() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("imagegallery")) return false;
      var gallery = document.getElementById("imagegallery");
      var links = gallery.getElementsByTagName("a");
      for ( var i=0; i < links.length; i++) {
        links[i].onclick = function() {
          return showPic(this);
        }
      }
    }
    window.onload=prepareGallery;
    
  20. JavaScript Image Gallery

    It's good to talk

    a web page and 2 scripts

    View example

  21. Best practices

  22. Next...

    Generating markup with the DOM.