먼저 초보 임을 알릴게요
요즘 대세가 구조와 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 쪽을 최대한 간단히 만들려고 노력 하고 있어요^^
그래서 이런걸 이번에 해 봤구요
중복이라면 ;;;;; 죄송요
요즘 대세가 구조와 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 쪽을 최대한 간단히 만들려고 노력 하고 있어요^^
그래서 이런걸 이번에 해 봤구요
중복이라면 ;;;;; 죄송요
댓글 4개
게시글 목록
| 번호 | 제목 |
|---|---|
| 32281 | |
| 32267 | |
| 32264 | |
| 32262 | |
| 32254 | |
| 32239 | |
| 32232 | |
| 32221 | |
| 32220 | |
| 32217 | |
| 32204 | |
| 32203 | |
| 32200 | |
| 32192 | |
| 32161 | |
| 32154 | |
| 32150 | |
| 32146 | |
| 32137 | |
| 32116 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기