반응형
안녕하세요. 양군입니다.
오늘은 재밌는걸 한번 해 보려고 합니다.
웹에서 select 박스를 많이 사용하는데요.
옵션중에 multiple 이라는 옵션을 사용하게 되면, 한번에 여러개를 선택할 수 있게 됩니다.
이런 형태죠? <select name="updownlist" size="7" multiple>
옆에 옵션에 size=7 이라고 주게 되면, 화면에 7칸이 보이게 한다는 뜻이구요.
위 코드를 정리해보면, 화면에는 7칸이 보이면서, 여러개를 동시에 선택할 수 있는 박스가 마들어 지는 것입니다.
그럼 오늘 해야할 일이 모죠?
바로 여러개를 선택한 상태에서 선택한 Option을 위 혹은 아래로 이동시켜 보는 것입니다.
이런 모양이 될것입니다.
위 그림과 같이 Option 2, Option 4를 선택한 가운데 "Up" 버튼을 누르면 이렇게 변화가 되야겠죠..
이게 오늘 하려는 것이 무엇인지 감이 오시죠?
자 그럼 전체적인 코드를 보겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var Selectbox = new Object();
Selectbox.upOptions = function ( selectBoxListObj ) {
// 첫번째 것은 위로 올라갈 수 없으므로,
// index를 1번부터 처리한다.
for ( var k = 1 ; k < selectBoxListObj.options.length ; k++ )
{
if ( selectBoxListObj.options[ k ].selected )
{
// 자신의 상위가 선택되어 있다면, 위로 올리지 않는다.
if ( selectBoxListObj.options[ k -1 ].selected )
{
continue;
}
// 현재k번째 Option과 그위의 k-1번째 Option객체를 바꾼다.
else {
this.swapOption( selectBoxListObj, k, k-1 );
}
}
}
}
Selectbox.swapOption = function ( selectBoxListObj, k, j ) {
// 각 자리에 있는 Option객체를 임시 변수에 담는다.
var k_new_option = selectBoxListObj.options[ k ];
var j_new_option = selectBoxListObj.options[ j ];
// 원래 k,j 자리에 껍데기만 있는 Option 객체를 대입한다.
selectBoxListObj.options[ k ] = new Option();
selectBoxListObj.options[ j ] = new Option();
// k->j, j->k 로 서로 다른 곳에 객체를 대입한다.
selectBoxListObj.options[ k ] = j_new_option;
selectBoxListObj.options[ j ] = k_new_option;
}
Selectbox.downOptions = function ( selectBoxListObj ) {
alert ( '이 글을 보신분은 직접 이 함수를 구현해서 답글로 올려주세요. ^^ ' );
}
</script>
</HEAD>
<BODY>
<form>
<table border="0" class="example">
<tr>
<td>
<select name="updownlist" size="7" multiple>
<option value="Option 1"> Option 1
<option value="Option 2" selected> Option 2
<option value="Option 3"> Option 3
<option value="Option 4" selected> Option 4
<option value="Option 5"> Option 5
</select>
</td>
<td>
<input type="button" value=" Up " onClick="Selectbox.upOptions(this.form.updownlist)">
<br><br>
<input type="button" value="Down" onClick="Selectbox.downOptions(this.form.updownlist)">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
코드를 천천히 보면, 위쪽에 var Selectbox = new Object(); 이런 구문이 보이실겁니다.
이 구문은 자바스크립트를 객체처럼 사용할 수 있게 해주는 코드입니다.
세미나에 참석하신분은 모두 잘 아실거라 생각합니다.
자 그럼 일단 Selectbox라고 불리는 객체를 하나 만들었습니다.
다음은 Selectbox.upOptions = function ( selectBoxListObj ) {
이런 코드를 사용하여, 동적으로 함수를 정의 합니다.
자 우리가 사용하려는 upOptions 함수가 정의 되는군요 ^^
이제 함수의 내용을 함께 봅시다.
자 일단 함수에서는 select 박스 객체를 인자로 받고 있습니다.
select 박스 객체에서 options 를 이용해서 option들을 접근할 수 있는데요.
options의 길이만큼 for문으로 반복해서 선택된 option 들을 찾아 낼 것입니다.
주석을 보니 1번 index 부터 시작한다구 되어 있군요? 이부분은 주석만 봐도 이해가 되시리라 생각이 됩니다. ^^
그럼 1번부터 체크를 시작해서
if ( selectBoxListObj.options[ k ].selected ) // 만약 k 번째 option이 선택된 녀석이라면...
위로 올려줘야겠죠?
그럼 if문이 true가 되고, 안쪽으로 들어가겠죠...
if문 안쪽에 코드를 보니,
// 자신의 상위가 선택되어 있다면, 위로 올리지 않는다.
if ( selectBoxListObj.options[ k -1 ].selected )
{
continue;
}
이런 코드가 보이는데요. 이 부분은 잘 생각해 보시면 아주 쉬운 부분입니다.
내가 현재 k 가 1 일때... 만약 위로 올라가려고 체크를 해 봤더니?
k - 1 번째, 즉 0 번째가 선택되어 있다라는 것은 무엇을 의미 할까요?
나의 바로 위에 있는 녀석도 이동 대상이었다는 것이죠.
여기서 과거형이 중요합니다.
이동 대상이었다는 것은 이미 이동이 끝난 녀석이라는 말이기도 하구요...
이해가 되시는지 모르겠네요.
예를 다시 들어보면,
만약 k 가 2 번째라고 생각을 해봅시다.
이때, k-1 , 즉 1번째가 선택되어 있다는 것은....
1번째도, 이동 대상이었다는것이고. ( 여기서 과거형이 될 수 밖에 없는것은 k는 항상 1 번부터 순서대로 돌기 때문이죠. )
이동이 된후의 모습이죠. 실제 이동 되었는지 않 되었는지는 중요하지 않습니다.
그래서 continue를 만나 스킵 하게 됩니다.
일단 예제를 보시면, 좀더 이해가 잘 되시리라 믿습니다. ^^; ( 이해 안되시면 질문 해주세요 )
그리고 else 구문으로 간다는 것은.
자신의 위쪽에 option이 선택이 않되어 있다는 것이죠...
그럼.. 그 위에 option 과 현재의 option의 순서를 바꾸어 주면 되겠네요?
그일을 처리 하는 함수가 swapOption 입니다.
여기서 함수를 호출할때 코드를 잘 보시면, this.swapOption( selectBoxListObj, k, k-1 );
이렇게 되어 있습니다.
여기서 살펴볼것중 하나는 this 키워드를 사용하고 있다는것입니다.
여기 모든 함수들은 Selectbox 객체의 함수입니다. 즉 전역으로 선언된 함수가 아니라는 뜻이죠.
고로, 함수안에서 다른 함수를 호출하려면 this 키워드를 사용해야 합니다.
그리고 파라메터로 selectBoxListObj 객체와, 변화시켜야 할, k , ( k-1 ) 을 보내고 잇군요...
다음 swapOption 함수를 살펴 봅시다.
Selectbox.swapOption = function ( selectBoxListObj, k, j ) {
// 각 자리에 있는 Option객체를 임시 변수에 담는다.
var k_new_option = selectBoxListObj.options[ k ];
var j_new_option = selectBoxListObj.options[ j ];
// 원래 k,j 자리에 껍데기만 있는 Option 객체를 대입한다.
selectBoxListObj.options[ k ] = new Option();
selectBoxListObj.options[ j ] = new Option();
// k->j, j->k 로 서로 다른 곳에 객체를 대입한다.
selectBoxListObj.options[ k ] = j_new_option;
selectBoxListObj.options[ j ] = k_new_option;
}
주석이 너무 잘되어 있어서 별로 설명할 부분이 없는것 같네요... ^^
마지막으로 밑에 html 코드를 보시면...
일단 "Up"이라는 버튼에 onClick 이벤트를 핸들링 할 수 있는 함수를 하나 걸어놓았습니다.
바로 Selectbox 객체의 upOptions 함수입니다.
그리고 select 박스의 option 들을 선택한후, "Up" 버튼을 누르면... 실제로 선택된 녀석들이 위로 올라간것을 볼 수 있습니다.
어떤가요? 이제 좀 감이 오시나요?
너무 쉽다구요?
예. 좋습니다. 그럴줄 알고, 문제를 하나 마련 했습니다.
이 코드에는 아직 구현되지 않은 부분이 있습니다. 바로 downOptions 함수 입니다.
각자 이 코드를 사용해 보시고, 분석해 보신수, 함수를 완성해서. 답글로 달아 주세요.
자자.. 열심히 해 봅시다...
내일이면 늦으리, 지금 이순간을 붙잡으세요....
오늘은 재밌는걸 한번 해 보려고 합니다.
웹에서 select 박스를 많이 사용하는데요.
옵션중에 multiple 이라는 옵션을 사용하게 되면, 한번에 여러개를 선택할 수 있게 됩니다.
이런 형태죠? <select name="updownlist" size="7" multiple>
옆에 옵션에 size=7 이라고 주게 되면, 화면에 7칸이 보이게 한다는 뜻이구요.
위 코드를 정리해보면, 화면에는 7칸이 보이면서, 여러개를 동시에 선택할 수 있는 박스가 마들어 지는 것입니다.
그럼 오늘 해야할 일이 모죠?
바로 여러개를 선택한 상태에서 선택한 Option을 위 혹은 아래로 이동시켜 보는 것입니다.
이런 모양이 될것입니다.
위 그림과 같이 Option 2, Option 4를 선택한 가운데 "Up" 버튼을 누르면 이렇게 변화가 되야겠죠..
이게 오늘 하려는 것이 무엇인지 감이 오시죠?
자 그럼 전체적인 코드를 보겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var Selectbox = new Object();
Selectbox.upOptions = function ( selectBoxListObj ) {
// 첫번째 것은 위로 올라갈 수 없으므로,
// index를 1번부터 처리한다.
for ( var k = 1 ; k < selectBoxListObj.options.length ; k++ )
{
if ( selectBoxListObj.options[ k ].selected )
{
// 자신의 상위가 선택되어 있다면, 위로 올리지 않는다.
if ( selectBoxListObj.options[ k -1 ].selected )
{
continue;
}
// 현재k번째 Option과 그위의 k-1번째 Option객체를 바꾼다.
else {
this.swapOption( selectBoxListObj, k, k-1 );
}
}
}
}
Selectbox.swapOption = function ( selectBoxListObj, k, j ) {
// 각 자리에 있는 Option객체를 임시 변수에 담는다.
var k_new_option = selectBoxListObj.options[ k ];
var j_new_option = selectBoxListObj.options[ j ];
// 원래 k,j 자리에 껍데기만 있는 Option 객체를 대입한다.
selectBoxListObj.options[ k ] = new Option();
selectBoxListObj.options[ j ] = new Option();
// k->j, j->k 로 서로 다른 곳에 객체를 대입한다.
selectBoxListObj.options[ k ] = j_new_option;
selectBoxListObj.options[ j ] = k_new_option;
}
Selectbox.downOptions = function ( selectBoxListObj ) {
alert ( '이 글을 보신분은 직접 이 함수를 구현해서 답글로 올려주세요. ^^ ' );
}
</script>
</HEAD>
<BODY>
<form>
<table border="0" class="example">
<tr>
<td>
<select name="updownlist" size="7" multiple>
<option value="Option 1"> Option 1
<option value="Option 2" selected> Option 2
<option value="Option 3"> Option 3
<option value="Option 4" selected> Option 4
<option value="Option 5"> Option 5
</select>
</td>
<td>
<input type="button" value=" Up " onClick="Selectbox.upOptions(this.form.updownlist)">
<br><br>
<input type="button" value="Down" onClick="Selectbox.downOptions(this.form.updownlist)">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
코드를 천천히 보면, 위쪽에 var Selectbox = new Object(); 이런 구문이 보이실겁니다.
이 구문은 자바스크립트를 객체처럼 사용할 수 있게 해주는 코드입니다.
세미나에 참석하신분은 모두 잘 아실거라 생각합니다.
자 그럼 일단 Selectbox라고 불리는 객체를 하나 만들었습니다.
다음은 Selectbox.upOptions = function ( selectBoxListObj ) {
이런 코드를 사용하여, 동적으로 함수를 정의 합니다.
자 우리가 사용하려는 upOptions 함수가 정의 되는군요 ^^
이제 함수의 내용을 함께 봅시다.
자 일단 함수에서는 select 박스 객체를 인자로 받고 있습니다.
select 박스 객체에서 options 를 이용해서 option들을 접근할 수 있는데요.
options의 길이만큼 for문으로 반복해서 선택된 option 들을 찾아 낼 것입니다.
주석을 보니 1번 index 부터 시작한다구 되어 있군요? 이부분은 주석만 봐도 이해가 되시리라 생각이 됩니다. ^^
그럼 1번부터 체크를 시작해서
if ( selectBoxListObj.options[ k ].selected ) // 만약 k 번째 option이 선택된 녀석이라면...
위로 올려줘야겠죠?
그럼 if문이 true가 되고, 안쪽으로 들어가겠죠...
if문 안쪽에 코드를 보니,
// 자신의 상위가 선택되어 있다면, 위로 올리지 않는다.
if ( selectBoxListObj.options[ k -1 ].selected )
{
continue;
}
이런 코드가 보이는데요. 이 부분은 잘 생각해 보시면 아주 쉬운 부분입니다.
내가 현재 k 가 1 일때... 만약 위로 올라가려고 체크를 해 봤더니?
k - 1 번째, 즉 0 번째가 선택되어 있다라는 것은 무엇을 의미 할까요?
나의 바로 위에 있는 녀석도 이동 대상이었다는 것이죠.
여기서 과거형이 중요합니다.
이동 대상이었다는 것은 이미 이동이 끝난 녀석이라는 말이기도 하구요...
이해가 되시는지 모르겠네요.
예를 다시 들어보면,
만약 k 가 2 번째라고 생각을 해봅시다.
이때, k-1 , 즉 1번째가 선택되어 있다는 것은....
1번째도, 이동 대상이었다는것이고. ( 여기서 과거형이 될 수 밖에 없는것은 k는 항상 1 번부터 순서대로 돌기 때문이죠. )
이동이 된후의 모습이죠. 실제 이동 되었는지 않 되었는지는 중요하지 않습니다.
그래서 continue를 만나 스킵 하게 됩니다.
일단 예제를 보시면, 좀더 이해가 잘 되시리라 믿습니다. ^^; ( 이해 안되시면 질문 해주세요 )
그리고 else 구문으로 간다는 것은.
자신의 위쪽에 option이 선택이 않되어 있다는 것이죠...
그럼.. 그 위에 option 과 현재의 option의 순서를 바꾸어 주면 되겠네요?
그일을 처리 하는 함수가 swapOption 입니다.
여기서 함수를 호출할때 코드를 잘 보시면, this.swapOption( selectBoxListObj, k, k-1 );
이렇게 되어 있습니다.
여기서 살펴볼것중 하나는 this 키워드를 사용하고 있다는것입니다.
여기 모든 함수들은 Selectbox 객체의 함수입니다. 즉 전역으로 선언된 함수가 아니라는 뜻이죠.
고로, 함수안에서 다른 함수를 호출하려면 this 키워드를 사용해야 합니다.
그리고 파라메터로 selectBoxListObj 객체와, 변화시켜야 할, k , ( k-1 ) 을 보내고 잇군요...
다음 swapOption 함수를 살펴 봅시다.
Selectbox.swapOption = function ( selectBoxListObj, k, j ) {
// 각 자리에 있는 Option객체를 임시 변수에 담는다.
var k_new_option = selectBoxListObj.options[ k ];
var j_new_option = selectBoxListObj.options[ j ];
// 원래 k,j 자리에 껍데기만 있는 Option 객체를 대입한다.
selectBoxListObj.options[ k ] = new Option();
selectBoxListObj.options[ j ] = new Option();
// k->j, j->k 로 서로 다른 곳에 객체를 대입한다.
selectBoxListObj.options[ k ] = j_new_option;
selectBoxListObj.options[ j ] = k_new_option;
}
주석이 너무 잘되어 있어서 별로 설명할 부분이 없는것 같네요... ^^
마지막으로 밑에 html 코드를 보시면...
일단 "Up"이라는 버튼에 onClick 이벤트를 핸들링 할 수 있는 함수를 하나 걸어놓았습니다.
바로 Selectbox 객체의 upOptions 함수입니다.
그리고 select 박스의 option 들을 선택한후, "Up" 버튼을 누르면... 실제로 선택된 녀석들이 위로 올라간것을 볼 수 있습니다.
어떤가요? 이제 좀 감이 오시나요?
너무 쉽다구요?
예. 좋습니다. 그럴줄 알고, 문제를 하나 마련 했습니다.
이 코드에는 아직 구현되지 않은 부분이 있습니다. 바로 downOptions 함수 입니다.
각자 이 코드를 사용해 보시고, 분석해 보신수, 함수를 완성해서. 답글로 달아 주세요.
자자.. 열심히 해 봅시다...
내일이면 늦으리, 지금 이순간을 붙잡으세요....
반응형
'웹&컴퓨팅' 카테고리의 다른 글
| php.ini (0) | 2007.08.09 |
|---|---|
| 자바스크립트 (0) | 2007.08.02 |
| OS 사용율 (2) | 2007.06.21 |
| 태터툴즈 한글인식 문제 (1) | 2007.06.19 |
| MySQL에서 지원하는 데이터 타입 (1) | 2007.06.19 |