back to basic...

[birdman]

I've been wondering for years on how to use the "?" and ":" when writing a script. As a result (I believe...), I end up writing a script, the hard way

Anyways, can anyone give an opinion about my script? (here's another example on how hard to it is for me to write something supposedly to be, simple?)

http://www.geocities.com/talkshowhost85/js/tsh_aabc.js

online sample @ http://www.geocities.com/talkshowhost85/home.html

thank u loads!

[Twey]

Erm...
1) If you're going to write a script only for one browser, IE is not the one to go for. It is highly non-compliant.
2) It works OK in Firefox.
3) That background image is horrible. Renders the page nigh unreadable.
4) ? : is if shorthand. 1 == 1 ? yes() : no(); means if one is one, then yes(); otherwise, no().

[birdman]

1) which browser should i choose then?
2) which background did you mean? for the mainpage or the calendar
3) are the methods used suitable? it's a big pain in the ass for me to write it!

thank u

[birdman]

and uh... the background. i thought it's okay, did u mean it was not readable via i.e or firefox?

[Twey]

I don't have access to IE, but in Firefox (and probably most other browsers) the colour of the text against that background is very hard to read.

[mwinter]

I've been wondering for years on how to use the "?" and ":" when writing a script.

The construct you're referring to, the conditional operator (?: ), should be used as part of an expression, just like most other operators.

Consider if, the statement equivalent. Its use focuses primarily around code path branches; where certain statements should only occur given a specific condition (or conditions). The conditional operator should be used when a value in an expression should change based on a condition (or conditions).

For example:

var errors = [];

/* ...
 * Some code that may encounter errors to be shown to the user.
 * ...
 */

/* If error messages were added to the the errors array, */
if(errors.length) {
  /* ...display them in a dialog box. */
  alert(errors.length + ' error'
                      + ((errors.length > 1) ? 's' : '')
                      + ' occurred:\n\n'
                      + errors.join('\n'));
}

Here, if there is more than one error message, an 's' is added to form a plural; if only one is present then no suffix is added.

As a result (I believe...), I end up writing a script, the hard way

The repetition can certainly be avoided. In addition, multiple document.write calls can severely slow execution.

if('function' != typeof Array.prototype.push) {
  Array.prototype.push = function(x) {
    var i = 0,
        j = this.length >>> 0,
        n = arguments.length;
 
    while(i < n) {this[j++] = arguments[i++];}
    return j;
  };
}

function daysInMonth(m, y) {
  var d = new Date(y || (new Date()).getFullYear(), m + 1, 0);

  return d.getDate();
}
function showEvent(n) {
  if('undefined' != typeof events[n]) {alert(events[n]);}
  else if(noEvent) {alert(noEvent);}
}

var noEvent = '',
    events = {9 : 'Happy birthday Andrea! *hugsssss!',
             10 : 'This note feature was immediately put after 30 minutes of completing the first version!\n\nUiTM convo from the 10th to 19th.',
             11 : 'Shakespeare\'s Macbeth @ Actors Studio Bangsar tonight - 8:30pm',
             14 : 'Double Bill @ KLPac begins!',
             19 : 'happy birthday Ellis :D *muaks!'},
    days   = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    now    = new Date(),
    d      = now.getDate(),
    m      = now.getMonth(),
    y      = now.getFullYear(),
    a      = ['<table class="calendar">',
              '<caption>' + days[now.getDay()] + ', ' + d + ' ' + months[m] + ' ' + y + '</caption>',
              '<tr>'];

for(var i = 1, n = daysInMonth(m, y); i <= n; ++i) {
  if(!((i - 1) % 5) && (i - 1)) {a.push('</tr>', '<tr>');}
  a.push('<td class="' + ((i == d) ? 'today ' : '') + ('undefined' != typeof events[i&#93; ? 'event' : '') + '" onclick="showEvent(' + i + ')">' + i + '</td>');

}
if((i = n % 5)) {a.push('<td class="empty" colspan="' + (5 - i) + '"></td>');}
a.push('</tr>', '</table>');
document.write(a.join('\n'));

The dates now use one-based indicies, and are added through the events object. The class attribute structure has also been changed. Don't create classes for everything; use the document structure whenever possible. For example, you used 'calTD' for every table cell within the calendar table, when '.calTB td' would have sufficed needing far less markup.

You can see the new classes from looking through the code, but briefly they are:

• calendar - The main class that indicates that a particular table contains a calendar.
• event - This cell class marks that date as one that contains an event.
• today - Obvious, I hope.
• empty - Used on the final cell that appears for months that will create partial rows (February, and 31-day months) so that the border can be styled away (or whatever).

A possible replacement for your current style sheet might be:

table.calendar {
  border-collapse: collapse;
  font: 90% sans-serif;
  width: 10em;
}
table.calendar caption {
  font-weight: bold;
  margin-bottom: 0.5ex;
}
table.calendar td {
  color: #000000;
  background-color: #eeeeee;
  border: 1px solid #000000;
  cursor: pointer;
  text-align: center;
}
table.calendar td.empty {
  background-color: transparent;
  border-style: none;
}
table.calendar td.event {
  color: #1177ff !important;
}
table.calendar td.today {
  background-color: #bbbbbb;
  color: #ffffff;
  font-weight: bold;
}

and uh... the background. i thought it's okay, did u mean it was not readable via i.e or firefox?

Unreadable in Firefox as the background becomes fully visible after about a sixth of the way down the page.

Why does this happen? I'm not entirely sure. When I view the document locally, it doesn't occur, so I assume it's related to the junk injected by GeoCities.

Some general advice, though:

• Dump XHTML. It currently has no value on the Web, unless you content negotiate it to XML-only parsers. As you serve the markup as HTML, it won't even benefit these user agents.
• Stop using 'div soup'. Your markup at the moment is basically div and span elements, with a load of line breaks (br) thrown in. Most of those span elements should be level 2 headings (h2), and most of those div elements should be paragraphs (p). The line breaks can (and should) be replaced by margins (usually provided by default for headings).
• Instead of adding a class attribute to each list item of your lower-roman list, add a single one to the list element itself.
• Mark-up the other two lists as lists, not broken lines.
• Don't use pixel font sizes as IE cannot resize these. Use percentages instead. Moreover, use 100% for body text, 85% of default for legalese, and never go lower; 10px is far too small. Black-on-white at that size is guaranteed to give me, and many others no doubt, a painful headache.
• Unless you are content to use Verdana at its default size, don't use it. If you shrink it down, other fonts (used when Verdana doesn't exist on a system) will probably be completely unreadable.
• Remove the layout table. Float the right-hand column instead.

Finally, to answer a question I just happened to read, a generic font is the type of typeface: serif (TNR), sans-serif (Arial), monospace (Courior New), cursive, and fantasy[1]. As font-family declarations use a fallback mechanism, the last family should be generic in case none of the specified fonts were available. A simple example is:

font-family: Arial, sans-serif;

As some browsers default to serif fonts, this would ensure that your document was presented with a sans-serif font even if Arial didn't exist (like in Linux).

Hope that helps,
Mike


[1] The latter two don't have well-known examples, but are mainly decorative. Cursive fonts have connected glyphs just like you'd find in handwriting. Fantasy fonts have a rather vague description, but I'd think of them as rare, special typefaces used in logos. For instance, a vampire film might use in its advertising a typeface that features points at the base of stems to convey the association with a vampire's fangs; it's not a functional font but, in this instance, represents an idea.

[Twey]

Ah, that's what "fantasy" is for. I always wondered

[mwinter]

Ah, that's what "fantasy" is for. I always wondered

The CSS Specification provides Alpha Geometrique and Critter as examples of a fantasy font. As you can see, they do represent characters unlike picture fonts such as Wingdings, but they are exclusively decorative - not something you'd use for an entire document.

Mike

[birdman]

in depth, accurate, logic

More questions and statements + needing more tips and advices

1) So what is it that XHTML has to offer? To be honest i face a lot of problems with XHTML; certain things are totally removed like the simple "name" attribute. I almost cannot do anything with XHTML!
1a) Is XHTML 1.0 Transitional is just as good and "convenient" as older HTML?
1b) What should I use then?

2) I'm sorry for the page formatting. I'm bad in designs AND if you notice, I try too hard on "practising-clean-markups" which I find troublesome.

3) For the script I wrote... the reason I've to put too much document.write is because I don't have much knowledge in JavaScript. Again I say -> if you notice (I guess you do), I had to apply actions to every single conditions. My .js file is 13kb and is very ridiculous for a simple calendar...

4) Is shortcuts in CSS recommended? e.g:

font: 10px verdana;

or

border: 1px #000000 solid;

- I received errors when validating my css file (using the validator in w3c.org)

5) The example you gave...

.calTB td

How does it work?

Isn't it suppose to be -

.calTB, td

or, they're just the same?

THANK YOU

[Twey]

1) So what is it that XHTML has to offer? To be honest i face a lot of problems with XHTML; certain things are totally removed like the simple "name" attribute. I almost cannot do anything with XHTML!

There are alternatives available to (almost) all the features XHTML no longer considers a part of itself. The biggest change in XHTML is the switch to pure CSS for styling, rather than HTML attributes (<font face=... &c.). See if there is a CSS equivalent available. The name attribute is not one of the things that has been deprecated, as far as I know. Remember that XHTML is case-sensitive. Always use lower-case.

1a) Is XHTML 1.0 Transitional is just as good and "convenient" as older HTML?

Don't know about "convenient." Using correct (X)HTML, just like using correct English, is never convenient for you; what you're worrying about is how convenient it will be for the user. As most modern browsers support XHTML, although HTML has not been deprecated, there is currently no obvious advantage to using XHTML. However, if HTML does become deprecated (which, having seen some of the junk some people call web design, I sincerely hope it does) you'll just save yourself the job of totally rewriting the page.

1b) What should I use then?

I always try to use XHTML1.0 Strict, although I may fall back to Transitional if there is a vital element that I can't use in Strict. John would totally disagree with me in this paragraph. XHTML 1.1, I believe, requires itself to be served up as text/xhtml rather than text/html, which may confuse some browsers. So, for now, I stick to 1.0. It's not such a big step to 1.1 if the need arises. 1.1 and I also had some extended disputes about the correct way to use an image map, which is another reason I'm a little leery of it

2) I'm sorry for the page formatting. I'm bad in designs AND if you notice, I try too hard on "practising-clean-markups" which I find troublesome.

Design should really come first. Now, I usually put a big "DO NOT USE" stamp on WYSIWYG editors, but to rush up a quick, basic design is the one thing I'd recommend them for. You can then rewrite the page to make the code more palatable and add the smaller features that aren't as vital to the overall design.

4) Is shortcuts in CSS recommended? e.g:

font: 10px verdana;

or

border: 1px #000000 solid;

- I received errors when validating my css file (using the validator in w3c.org)

They are as recommended as CSS is. Any browser that supports modern CSS standards should support correct CSS shorthand.

5) The example you gave...

.calTB td

How does it work?

Isn't it suppose to be -

.calTB, td

or, they're just the same?

.calTB td means any <td> element within an element with the class of "calTB".