[thelist] not mixing markup and whatever (was RE: AJAX Tip)
Matt Warden
mwarden at gmail.com
Thu Apr 6 11:48:38 CDT 2006
On 4/6/06, Canfield, Joel <JCanfield at pacadvantage.org> wrote:
> > onclick is a way of defining a behavior in response to an event, just
> > like defining myFunc() is defining behavior in response to that
> > function call.
>
> fascinating thread, guys
>
> matt, or whoever, can you help me out with this part and the associated
> bits? is it being said that js like 'onclick' shouldn't live in the
> html, but be external? I'm trying to get my head around how far we can
> take the separation. Keeping CSS external makes perfect sense to me, as
> do most js functions. but there are some javascript things that I'd be
> totally flummoxed about making external in the same manner.
>
> any pointers to resources that'd help? Christian, does your DHTML/DOM
> article which I've bookmarked but not read cover this?
>
> thanks again for a very educational conversation
Check out Christian's unobtrusive javascript tutorial, especially:
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter2.html
Just to give you an idea, though, here is an init function for one of
the interfaces of a scheduler I'm working on right now for a client:
/**
* Initiates the interface. Called on window.onload
*/
function init() {
if (!document.getElementById) return;
// attach "close" function to the 'X' in the appt
// form
var a = document.getElementById('closeapptform');
if (a) {
a.onclick = closeApptForm;
} // end if a
// attach "to day view" event to table cells in month view
// of calendar
var caltable = document.getElementById('calendardata');
if (caltable) {
var tds = caltable.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
if (!cssjs('check', tds[i], 'emptycell')) {
if (cssjs('check', tds[i], 'weeklabel')) {
tds[i].onclick = moveToWeekView;
}
else {
tds[i].onclick = moveToDayView;
}
} // end if
} // end for
} // end if caltable
// if in week view, handle expand/collapse
var weektable = document.getElementById('weekcaldata');
if (weektable) {
var trs = weektable.getElementsByTagName('tr');
for (var i=0; i<trs.length; i++) {
if (trs[i]) {
if (cssjs('check', trs[i], 'daydataexpanded')) {
trs[i].onclick = collapseDayData;
cssjs('add', trs[i], 'daydatahidden');
}
else if (cssjs('check', trs[i], 'daydatacondensed')) {
trs[i].onclick = expandDayData;
}
}
} // end for
} // end if
}
cssjs() is a function written by Christian also:
http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
--
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com
This email proudly and graciously contributes to entropy.
More information about the thelist
mailing list