The first thing that I always do when creating a JavaScript application is to mock up the html. I find it much easier to debug if I can actually see what is coming out of the JavaScript. This is exactly what I will show you now.

My main concern at this point is that my JavaScript calendar will be robust enough to handle any user’s need. This means considering how many weeks I needed to display to show all of the days. At first thought, 5 seems like a good idea, and why not? Most months consist of four weeks with a few days on either end. But, alas, there are many cases where five weeks would just not do. This means that my design includes six weeks with the first day of the month you are looking at, starting at the top week and the other days following.

The next thing I considered was how to display and manipulate this data. My first idea, and I think best idea, is to just use a simple table. I know, I know, I made reference to the dreaded html tag and even said that I used it, but the plain and simple task is that I do use it and so should you…when it makes sense.

With those two things in mind, I set off to compose some really ugly looking html. Let’s begin by creating a table that has a border so we can see exactly where our columns and rows are divided. That will look something like this:

<table border="1">

Pretty simple! The first thing I want the user to see is the name of the month with an arrow on either side so they can move from month to month. That would look something like this:

<tr>
<td><<</td>
<td colspan="5">May</td>
<td>>></td>
</tr>

The colspan=”5″ is included because we know that there are 7 days in a week and the arrows only need to be one column wide. This means that we want the name of the month to take up the rest of the columns which would be 5 columns. The next row will show each day of the week in the corresponding column assigned to it:

<tr>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
</tr>

The final thing to do is simply list the days the correspond to the month. The first few will of course be for the month before and the last few days for the month after.

<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

And after all of that nice html code just finish it off with </table> and the mock of up our date picker/calendar is complete. Here is what the finished product should look like:

Not very pretty yet? Doesn’t actually accomplish anything yet? Um, yeah, that is correct. This is only so that we have a base off of which we can go. Now we easily know how we want to generate our html inside out javascript object. Figuring out the basic html before hand is the best way I have found to build web applications.

In the next installment of this tutorial I will show how to create a JavaScript object, public and private methods and variables in that object as well as one way to generate html on the fly with JavaScript. Thanks for joining me for this tutorial and I encourage you to check out the rest of the tutorials as they come.

• Processing.js – This is a JavaScript library that implements the Processing Visualization Language. Check out the demos and you will see that it is pretty amazing.
• DHTML Lemmings – This is one of the best Amega games ever, completely implemented in JavaScript! Too bad he had people breathing down his neck for copyright infringement so he couldn’t finish making the game.
• Orto – The JavaVM written in JavaScript. You take the byte code and run it through Orto and out comes JavaScript that emulates your java code. It can even handle threads. How cool is that?

These are just three of hundreds, if not thousands, of amazing things people are able to do with JavaScript. I love JavaScript and while other technologies have their places, I intend to continue to develop in JavaScript for many days to come.

I am developing this app for two reasons. One is so that I can learn AJAX better. The second is because I really need a to-do list that I don’t have to carry around with me everywhere. If I put this one up on the cloud then wherever I find the internet I will also find my to-do list.

So far there haven’t been any major problems as I have been fleshing out basic functionality. Currently gDo is just some iframes with a content div to hold the list of items in the to-do list. Figuring out how to interact between the windows and having different windows update at the correct times has been interesting. I would go into a long tutorial on how to do all of it except that I found all my solutions online. I will post on how I make the main window refresh and the complexities of knowing when windows are loaded so that they can be used.

Security has been my next project. I don’t want to implement full bore https but I don’t want people’s passwords to just be plain text available upon packet/request/response inspection. My solution has not been very original or novel (oh too bad, no patents that I can troll about with) but it is going to work great. I am just going to put the password through a little hash, which one of course will remain nameless, and add a little salt in for taste and bam. No little hackers reading my passwords without at least some effort.

The best part about all of this, though, is the experience I am gaining. I really enjoy learning new things and trying them out. It seems that many of my fellow nerds swear by this technology or that technology. They will argue until they are blue in the face about how Linux is better than Windows or Flex is better than AJAX or Java is better than any scripting language. The way I look at things is more of a buffet (and I do love buffets): I take a little AJAX when it seems to work well and then I take a little Flex when it works well. Bottom of the line, no technology is inherently bad. As long as you keep your eyes and mind open there will be places for every technology.