divs vs tables

econophil · December 2nd, 2012, 10:47 PM

Hi Jeremy.

I'm making another of my periodic forays into trying to learn JS. I'm working through your new 24-hour trainer book, which I really like. It seems to have a much clearer theoretical structure than the Beginning JavaScript that you revised for Wilton. Probably the advantage of starting from scratch rather than trying to update something that went back so many years.

Anyway, though, I'm a bit disappointed that you're using tables for your layouts (eg in Lesson 17) rather than the currently more approved divs. I've found getting divs to float and unfloat properly is hard, but that's particularly why I'd like to see some good examples of that approach actually being put to use. I've seen ads for web programmers "who hate tables." Maybe in the second edition?

Also, does everything in the book apply equally to HTML5?

Thanks.

econophil · December 3rd, 2012, 02:32 PM

I figured it was worth my while to dig in and practice developing a grid using divs. I came up with the following, using stuff I found on the web. I don't claim to understand how it all works. As someone on the web said, using divs for grid layout seems as much a hack as using table a la Russian dolls. (I added ' ' around each link to give greater clicking space.) The code seems to work fine on Firefox in Linux; haven't checked on other browsers or OSs.

Code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Lesson 17: Example</title>
    <!--[if IE ]>
     <script> //For production, put this function in a JS script directory
      /*** CSS VQS - Chapter 2 - HTML5forIE.js ***/
(function(){if(!/*@cc_on!a*/0)return;var e= "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer, header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','); for(var i=0;i<e.length;i++) {document.createElement(e[i])}))()
    </script>
    <![endif]-->
    
    <style type="text/css">
      #grid {
        width:350px;
        clear:both;
      }
      .row {
        float:left;
        overflow:hidden;
      }
      .inputs {
        float: left;
        border: 1pt gray solid;
        padding:5px;
        overflow:hidden;
        white-space:nowrap;
        margin-right:2px;
        margin-top: 2px;
      }
      #results {height:20px; width:300px;}
      .inputs {float:left; margin:10px; width:50px}
    </style>
</head>
<body>
<div id="grid">
  <div class="row" id="row1" >
    <div class="inputs" id="results">
    
    </div> <!--div#results -->
  </div> <!--div#row1 -->
  <div class="row" id="row2">
     <div class="inputs"><a href="#" onclick="return addDigit(1)"> &nbsp;1&nbsp; </a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(2)">&nbsp;2&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(3)">&nbsp;3&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit('+')">&nbsp;+&nbsp;</a></div> 
  </div><!--div#row2 -->
  <div class="row" id="row3">
     <div class="inputs"><a href="#" onclick="return addDigit(4)">&nbsp;4&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(5)">&nbsp;5&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(6)">&nbsp;6&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit('-')">&nbsp;-&nbsp;</a></div> 
  </div><!--div#row3" -->
  <div class="row" id="row4">
     <div class="inputs"><a href="#" onclick="return addDigit(7)">&nbsp;7&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(8)">&nbsp;8&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit(9)">&nbsp;9&nbsp;</a></div> 
     <div class="inputs"><a href="#" onclick="return addDigit('*')">&nbsp;*&nbsp;</a></div> 
  </div> <!-- #div#row4 -->
  <div class="row" id="row5">
      <div class="inputs"><a href="#" onclick="return reset()">Clear</a></div> 
      <div class="inputs"><a href="#" onclick="return addDigit()">&nbsp;0&nbsp;</a></div> 
      <div class="inputs"><a href="#" onclick="return calculate()">&nbsp;=&nbsp;</a></div> 
      <div class="inputs"><a href="#" onclick="return addDigit('/')">&nbsp;/&nbsp;</a></div> 
  </div><!--div#row5 -->
</div><!--div#grid -->
<script>
   function addDigit(digit) {
      var resultField = document.getElementById("results");
      resultField.innerHTML += digit;
      return false;
   }
   
   function calculate() {
     var resultField = document.getElementById("results");
     resultField.innerHTML = eval(resultField.innerHTML);
     return false;
   }
 
   function reset() {
      var resultField = document.getElementById("results")
      resultField.innerHTML = "";
      return false;
   }     

</script>
</body></html>

jmcpeak · December 4th, 2012, 01:22 AM

Howdy, econophil.

From a teaching standpoint, I wanted to focus on teaching JavaScript. Going a route that requires extra CSS and/or polyfills adds unwanted complexity to the already complex topic of learning JavaScript (especially in the midst of a discussion on events). Tables are advantageous in this scenario for two reasons:

- they work in every browser
- everyone knows how they work

That allowed me to practically skip over an extra discussion on the markup. Whether or not the tables disappear in a future edition remains to be seen. Thanks for putting in the effort to building a grid =)

I'm afraid I don't fully understand your HTML5 question. Everything in the book works regardless if you're using HTML4, XHTML, or HTML5. Granted, none of the HTML5 APIs or features are covered in the book. A second edition will definitely add that information on those APIs.

econophil · December 4th, 2012, 09:25 AM

Thanks, Jeremy. Those are good points. When I look at the "divs" solution, it's definitely much more complex. (Does that make it "more of a hack" than the "tables" solution?--theological question, I think.)

Regarding HTML5: I wasn't thinking too clearly there, failing to distinguish backward compatibility from new features. And it will be quite a while before everyone's browsers catch up and are HTML5 compatible.

econophil · December 4th, 2012, 12:45 PM

Interesting: the spaces I put around the cell contents ( ) in the code above interfere with the "standard DOM event handler," lesson 19, version but not with the HTML attribute event handler model (lesson 17). Presumably some subtle difference in how innerHTML is parsed in the two cases.