[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