이 글은 스터디 과제로 작성된 코드를 정리한 것입니다.웹문서는 구조를 담은 HTML과 표현을 담당하는 CSS로 나뉘어진다. 그리고 동작을 담당하는 Script로 구분되는데, 이같은 분리는 구조와 표현 그리고 동작 영역이 서로의 영역으로 최대한 침범하지 않음으로써 유연함을 갖추면서 웹접근성을 확보하는데 도움을 줄 수 있다. 웹표준을 잘 따른 웹사이트가 CSS를 걷어 내었을 경우에도 HTML문서가 담고 있는 콘텐츠를 충분히 고객에게 전달할 수 있는 것과 같이 Script의 분리는 자바스크립트등 동적 기능이 제한적이거나 사용할 수 없는 경우에도 웹탐색을 지속시켜줄 수 있다.
다음은 사용자 입력 상자에 포커스가 위치한 경우 배경색이 바뀌는 동작을 처리하는 예제이다.
HTML보기.
CSS보기.
다음은 Script 코드이다.
var color = "c_red";
옵션(배경색 버튼)에 의해서 선택된 값이 저장되는 전역변수를 가장 먼저 선언했다.
window.onload = function()
{
{
1. HTML 문서가 완전히 로딩되었을 때 스크립트가 실행되도록 window.onload에 익명함수를 작성했다.
obj = document.getElementsByTagName("input");
obj[0].onfocus = function()
{
this.className = color;
}
obj[0].onblur = function()
{
this.className = "";
}
obj[0].onfocus = function()
{
this.className = color;
}
obj[0].onblur = function()
{
this.className = "";
}
2. obj 변수에 HTML 문서 내의 모든 input 요소를 배열로 담는다.
3. 예제로 사용된 HTML 문서에는 하나의 input 요소만 존재하므로 첫번째 배열 요소를 지정(obj[0])하는 것으로도 코드를 작성할 있었다.
4. obj[0] 객체(input 요소)에 onfocus 이벤트가 발생할 경우 객체의 class명을 전역 변수 color에 지정된 값(디폴트값은 c_red)이 설정되도록 했다.
5. 마찬가지로 obj[0] 객체에 onblur 이벤트가 발생할 경우 객체의 class명을 비워 원래대로 돌린다.
idx = document.getElementById("colors");
bts = idx.getElementsByTagName("button");
for(var i=0; i<bts.length; i++){
bts[i].onclick = function(){
setColor(this);
}
}
}
bts = idx.getElementsByTagName("button");
for(var i=0; i<bts.length; i++){
bts[i].onclick = function(){
setColor(this);
}
}
}
6. id가 "colors"인 요소를 idx 변수에 담고, idx 객체를 기준으로 button 태그들을 모두 bts 변수에 배열 형태로 담는다.
7. HTML 문서에서 id가 colors인 요소 안에 위치한 button 요소는 총 3개이므로, 스크립트는 3번의 반복문을 실행하면서 버튼이 클릭될 때마다 setColor 함수를 실행시킨다.
function setColor(obj)
{
color = obj.className;
tit = obj.firstChild.nodeValue;
alert(tit+"색이 지정되었습니다.");
}
{
color = obj.className;
tit = obj.firstChild.nodeValue;
alert(tit+"색이 지정되었습니다.");
}
8. setColor 함수는 버튼 요소에 지정된 class명을 전역변수 color에 설정하고, 메세지창을 띄운다.
pageoff_javascript_study_1.zip
이게 :active라는 슈도 셀렉터를 이용하면 자바스크립트 없이도 간단하게 되는데 역시 IE 계열이 제대로 지원하지 않아서 말이죠..ㅠㅠ
답글삭제@daybreaker - 2008/09/18 18:10
답글삭제하하 ^^ 그렇죠. IE가 참 좋은 기술 여럿 못쓰게 했죠^^;
뭐 글은 HTML에서 동작(Javascript)을 분리하는 연습때문에 했던 예제 코드에요~
trackback from: 기억력을 증진하는 자바스크립트 카드 맟추기 게임 ver0.2
답글삭제지난번에 만들었던것 에서 여러가지 요소를 추가하여 0.2버전입니다. 카드의 위치를 기억한다음 시작하기 버튼을 누르면 게임을 시작합니다. 전부 15쌍의 카드를 찾으면 게임 끝입니다. 카드를 뒤집은 횟수와 경과시간을 알수 있습니다.