구조 css 분리 하라고 권유 많이 하죠 (자바스크립트)

구조 css 분리 하라고 권유 많이 하죠 (자바스크립트) > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

구조 css 분리 하라고 권유 많이 하죠 (자바스크립트) 정보

구조 css 분리 하라고 권유 많이 하죠 (자바스크립트)

본문

먼저 초보 임을 알릴게요
요즘 대세가 구조와 css 를 분리 하라고 하고 있고
거기에 더해서 자바스크립트도 분리 해야 된다고들 하죠..
그래서 하나 올려 봅니다.

먼저 예제 부터 올릴게요

<script>
function InitPage()
{
var btn = document.getElementsByTagName("button");
for( i = 0; i < btn.length; i++)
{
btn[i].onclick = function(){ alert(i+1); };

}
}
window.onload = InitPage;
</script>
<button>버튼1</button>
<button>버튼2</button>
<button>버튼3</button>
<button>버튼4</button>

위 코드를 실행하면 버튼을 클릭할때마다 1, 2, 3, 4 가 출력 되는게 아니라
항상 5만 출력이 되죠..
이걸 당연하다고 생각 하시면 더이상 글을 안보셔도 되구요...^^

제가 이번에 삽질한게 자바스크립트, 클로저, 스코프 이쪽 이였는데
암튼 자바스크립트는 변수 참조가 블록단위가 아니고 함수단위로 참조 된다는걸
이제 알았네요

해결방법 전체 소스 올려 볼게요(조금 응용해서 메뉴에 쓸만한 소스로...)

<html>
<head>
<title>test</title>
<script type="text/javascript">
function InitPage()
{
var btn = document.getElementsByTagName("button"); //
for( i = 0; i < btn.length; i++)
{
if( document.attachEvent) // 익스플로러 7, 8 버전을 위해서
{
//익스 버전
btn[i].attachEvent("onmouseover", function(obj){ return function(){ obj.className += "_over";}; }(btn[i]));
btn[i].attachEvent("onmouseout", function(obj){ return function(){ obj.className = obj.className.split("_")[0]; }; }(btn[i]));

}
else
{
// 크롬 기타 버전( 크롬만 해 봤습니다);
btn[i].addEventListener("mouseover", function(obj){ return function(){ obj.className += "_over";}; }(btn[i]), false);
btn[i].addEventListener("mouseout", function(obj){ return function(){ obj.className = obj.className.split("_")[0]; }; }(btn[i]), false);
}

}
}
window.onload = InitPage;
</script>
<style type="text/css">
.red {background-color: red; color: #fff;}
.red_over {background-color: #ff8811; color: #fff;}
.blue {background-color: blue; color: #fff;}
.blue_over {background-color: #1188ff; color: #fff;}
</style>
</head>
<body >
<button class="red">메뉴1</button>
<button class="red">메뉴2</button>
<button class="blue">메뉴3</button>
<button class="blue">메뉴4</button>
</body>
</html>

저는 주로 사이트 만들때 최대한 이미지를 않넣을려고 하고
또한 html 쪽을 최대한 간단히 만들려고 노력 하고 있어요^^
그래서 이런걸 이번에 해 봤구요
중복이라면 ;;;;; 죄송요