| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
| [OSX] Eclipse에서 PHP 로컬 개발/테스트 환경 구축하기 (4) | 2008.08.30 |
|---|---|
| Enabling PHP and Apache in Leopard (2) | 2008.08.19 |
| 간단한 소켓통신 (0) | 2006.10.13 |
| 간단한 대화식 프로그램 (0) | 2006.07.24 |
| 시스템 모니터링 툴 (0) | 2006.07.17 |
| euc인코딩 (0) | 2007.01.09 |
|---|---|
| 위기지학(爲己之學) (0) | 2006.11.29 |
| JAVA(JSP)가 좋은점이 무엇이냐... (1) | 2006.10.28 |
| Sort Algorithm (0) | 2006.10.24 |
| 웹해킹 - SQL 인젝션 (0) | 2006.10.14 |
| 애니메이션 - 데스노트 (1) | 2006.11.13 |
|---|---|
| 영화 - 데스노트 1편 (0) | 2006.11.13 |
| 타짜 (2) | 2006.10.26 |
| 식스틴 블럭 (16 Blocks, 2006) (0) | 2006.10.08 |
| 달콤살벌한연인 (0) | 2006.08.17 |
selectbox 에 항목을 추가 삭제 할때 자동으로 정렬을 해주는 방법이다.
만들때는 생각을 안했는데 해 놓고 보니 MVC or MVP 패턴과 닮았다.
Smalltalk의 영향인가...
항목(item)에 대한 Model 객체(Array)가 있고
Model에 변화가 생기면 View를 바꾼다.
function refreshList(){
var listObj = document.getElementById('list');
clearList();
keyword_list.sort();
var arr_text = '';
for(var i=0; i<keyword_list.length; i++){
var newOpt = document.createElement('OPTION');
newOpt.value = keyword_list[i];
newOpt.text = keyword_list[i];
arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
listObj.add(newOpt);
}
document.getElementById('arrayDesc').innerHTML = arr_text;
}
전체 소스를 보자....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript">
<!--
var keyword_list = new Array();
function itemAdd(){
var keywordObj = document.getElementById('keyword');
if(keywordObj.value == ''){
keywordObj.focus();
return false;
}
keyword_list.push(keywordObj.value);
keywordObj.value = '';
keywordObj.focus();
refreshList();
}
function refreshList(){
var listObj = document.getElementById('list');
clearList();
keyword_list.sort();
var arr_text = '';
for(var i=0; i<keyword_list.length; i++){
var newOpt = document.createElement('OPTION');
newOpt.value = keyword_list[i];
newOpt.text = keyword_list[i];
arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
listObj.add(newOpt);
}
document.getElementById(arrayStat).innerHTML = arr_text;
}
function itemRemove(){
var listObj = document.getElementById('list');
if(listObj.selectedIndex < 0){
return false;
}
keyword_list.splice(listObj.selectedIndex,1);
refreshList();
}
function clearList(){
var listObj = document.getElementById('list');
while(listObj.length > 0){
listObj.remove(0);
}
}
//-->
</script>
</head>
<body>
<input type="text" id="keyword" value="" />
<input type="button" value="추가" onClick=" itemAdd();" />
<hr />
<div>
<div style="width: width: 120px; padding: 0; float: left;">
<select id="list" size="10" style="width: 100px;">
</select><input type="button" value="삭제" onClick=" itemRemove();" />
</div>
<div id="arrayStat" style="border: solid 1px #D9D9D9; width: 120px;"></div>
</div>
</body>
</html>
* 오른쪽에 보이는 레이어(arrayStat)는 Model의 상태를 나타내는 역할을 한다.
아무래도 배열을 쓰고 Model이 바뀔때마다 View를 초기화 하고 다시 뿌려주니
많은 데이터를 처리할때는 속도가 걸림돌이 될 것 같다.
| CSS Box Model (0) | 2006.11.30 |
|---|---|
| Ajax + Drag&Drop 활용 사이트 (0) | 2006.11.10 |
| 레이어의 높이 고정시키기 - overflow (0) | 2006.10.19 |
| 이벤트 추가 - addEventListener/attachEvent (2) | 2006.10.09 |
| xmlhttprequest로 값 전송시 한글 인코딩/디코딩 (0) | 2006.07.18 |
asOrderedCollection
| 가계부 만들기 - 07 (0) | 2006.11.16 |
|---|---|
| 가계부 만들기 - 06 (0) | 2006.11.16 |
| 객체를 배열로 만들어주는 Array with: (0) | 2006.10.30 |
| 사용자의 실수를 막아주는 queryCommand: (0) | 2006.10.28 |
| 가계부 만들기 - 05 (0) | 2006.10.11 |
| 청첩장 (0) | 2006.11.29 |
|---|---|
| 자동변속기 운전 요령 (0) | 2006.11.17 |
| 얌전한놈이 더 무서운법... (0) | 2006.10.30 |
| 여동생의 출산 (0) | 2006.10.22 |
| 돌아가는 키보드라.... (0) | 2006.10.11 |
| 자동변속기 운전 요령 (0) | 2006.11.17 |
|---|---|
| 10월의 마지막 밤 (0) | 2006.10.31 |
| 여동생의 출산 (0) | 2006.10.22 |
| 돌아가는 키보드라.... (0) | 2006.10.11 |
| 바탕화면과 아이콘이 이쁜 외국사이트 (0) | 2006.10.10 |
| |||
| |||
| [경제야놀자]4. 채권형 펀드 유의점 (0) | 2006.10.30 |
|---|---|
| [경제야놀자]3. 채권형펀드 (0) | 2006.10.30 |
| [경제야놀자]2. 펀드 (0) | 2006.10.30 |
| [경제야놀자]1. 통장쪼개기 (0) | 2006.10.30 |
| 채권 (0) | 2006.07.30 |
| |||
| |||
| [경제야놀자]5. 주식형 펀드 (0) | 2006.10.30 |
|---|---|
| [경제야놀자]3. 채권형펀드 (0) | 2006.10.30 |
| [경제야놀자]2. 펀드 (0) | 2006.10.30 |
| [경제야놀자]1. 통장쪼개기 (0) | 2006.10.30 |
| 채권 (0) | 2006.07.30 |
