la terre en paix, on y peut reposer son âme.

function selectClick(){
 var form = document.basicInfoForm;
 var idx = form.shopNo.length;
 var opt = form.shopNo.options;
 for(var i=0; i<form.unselect.length; i++){
  if(form.unselect.options[i].selected==true){
   if(idx>0){
    for(var j=0; j<idx; j++){
     if(form.unselect.options[i].text==form.shopNo.options[j].text){
      alert('이미 선택한 shop입니다.');
      return ;
     }
    }
    alert('선택한 shop에 매장이 추가됩니다.');
    form.shopNo.length += 1;
    opt[idx] = new Option(form.unselect.options[i].text, form.unselect.options[i].value, false, false);
    form.unselect.selectedIndex =-1;
    return ;
   }else{
    alert('선택한 shop에 매장이 추가됩니다.');
    form.shopNo.length += 1;
    opt[idx] = new Option(form.unselect.options[i].text, form.unselect.options[i].value, false, false);
    form.unselect.selectedIndex =-1;
   }
  }
 }
}

function unSelectClick(){
 var form = document.basicInfoForm;
 var idx = form.unselect.length;
 var idx2 = form.shopNo.length;
 alert(idx2);
 
 if(idx2==null||idx2==''){
  alert('선택한 shop이 없습니다.');
  return ;
 }
 
 for(var i=0; i<idx2; i++){
  if(basicInfoForm.shopNo.options[i].selected==true){
   var shopNo = basicInfoForm.shopNo.options[i].value;
   var result = confirm('선택한 shop에서 본 매장이 삭제됩니다. 삭제하시겠습니까?');
   if(result==true){
    $.ajax({
     url: '/display/collection/deleteShopAjax.do',
     method: 'post',
     data: 'no='+'${basicInfo.collectionNo }'+'&shopNo='+shopNo,
     success: function(html){
      alert('매장과 shop의 연결이 삭제되었습니다.');      
      },
     error: function(){
      alert('Ajax popup open fail.');
      }
    });
    basicInfoForm.shopNo.options[i] = null;
    idx2 -= 1;
    i -= 1;
   }else{
    return ;
   }
  }
 }
}

왼쪽 메뉴를 선택해서 오른쪽 메뉴로 옮길 때

function selectClick(){
 var idx = basicInfoForm.shopName.length;
 var opt = basicInfoForm.shopName.options;
 
 for(var i=0; i<basicInfoForm.unselect.length; i++){
  if(basicInfoForm.unselect.options[i].selected==true){
   if(idx>0){
    for(var j=0; j<idx; j++){
     if(basicInfoForm.unselect.options[i].text==basicInfoForm.shopName.options[j].text){
      alert('이미 선택한 shop입니다.');
      return ;
     }else{
      basicInfoForm.shopName.length += 1;
      opt[idx] = new Option(basicInfoForm.unselect.options[i].text, basicInfoForm.unselect.options[i].value);
      basicInfoForm.unselect.options[i] = '';
      i -= 1;
     }
    }
   }else{
    basicInfoForm.shopName.length += 1;
    opt[idx] = new Option(basicInfoForm.unselect.options[i].text, basicInfoForm.unselect.options[i].value);
    basicInfoForm.unselect.options[i] = '';
    i -= 1;
   }
  }
 }
}

function unSelectClick(){
 var idx = basicInfoForm.unselect.length;
 var idx2 = basicInfoForm.shopName.length;
 
 if(idx2==null||idx2==''){
  alert('선택한 shop이 없습니다.');
  return ;
 }
 
 for(var i=0; i<idx2; i++){
  if(basicInfoForm.shopName.options[i].selected==true){
   basicInfoForm.shopName.options[i] = null;
   idx2 -= 1;
   i -= 1;
  }
 }
}

Ajax.Request로 하면 oncomplete으로 해당 업데이트 페이지를 연결해주는 함수가 있어야 하지만 Ajax.Updater를 사용하면 업데이트할 영역을 함수 내에 지정해주면 된다. 

function handleItem(param, id, total){
  var md = '';
  var li = 'md_cate'+id;
  
  for(var i=0;i<total;i++){
   md = 'md_cate'+(i+1);
   $(md).removeClassName('sel');
  }
  $(li).addClassName('sel');
  itemAjax(param);
 }

 function itemAjax(param){
  var url = '처리할 url;
  new Ajax.Updater(
  {success:'md_item_list', failure:'md_item_list'},//출력되는 영역
  url,
  {
   method:'POST',
   parameters: {disp_no:param}
  });
 }

버튼에 마우스오버하면 아래 화면이 변경될 때 사용.

그냥 아무 생각없이...메뉴가 많아지면 Ajax를 사용하는 편이 낫다.

function divRolling(obj){
  var div1 = $('new01');
  var div2 = $('new02');
  var div3 = $('new03');

  var img1 = $('img1');
  var img2 = $('img2');
  var img3 = $('img3');

  var path1 = '바뀌기 전 이미지경로';
  var path2 = '바뀐 후 이미지경로;

  if(obj=='2'){
   img1.src = path2;
   img2.src = path1;
   img3.src = path2;
   div1.hide();
   div3.hide();
   div2.appear({duration:0.3});
   return false;
  }else if(obj=='3'){
   img1.src = path2;
   img2.src = path2;
   img3.src = path1;
   div1.hide();
   div2.hide();
   div3.appear({duration:0.3});
   return false;
  }else{
   img1.src = path1;
   img2.src = path2;
   img3.src = path2;
   div2.hide();
   div3.hide();
   div1.appear({duration:0.3});
   return ;
  }
 }

1. 페이지를 로드할 때 동적으로 웹페이지의 컨텐트를 생성하는 경우에는 body 태그 안에 위치시키는 것이 좋다.

2. 함수 안에서 정의하고 page이벤트에 사용되는 자바스크립트 코드는 head 태그 안에 위치시키는 것이 좋다.
그렇게 해야 body 태그 안의 내용을 읽어들이기 전에 로드되기 때문이다.

DOM으로 컨텐트를 생성한 후 페이지 내의 엘리먼트에 붙이는 방법도 있다.

프로토타입