웹마스터 팁

배열 활용하기(초급)

2007.12.03 21:21

예뜨락

질문란에 올라온걸 답해주면서 필요하신 분들이 있을듯 해 카피합니다

활용 :사진과 프로필을 배열로 받아두고 해당 번호를 입력했을때 출력하기

1번을 쓰고 눌렀을때 1번 학생의 사진과 이름출력 10번 쓰고 눌렀을때 10번사진 출력 이름 출력

<script type="text/javascript">
  var baseURL="http://www.zeroboard.com/modules/editor/components/emoticon/tpl/images/msn/";
  var isPICTURE=new Array();
      //가로 안에 홑따옴표 그림주소 원화표시위에 있는 바표시(구분자) 이름으로 넣으면 됩니다
      //아래와 같은 방법으로 복사해서 그림주소 이름만 바꿔 넣으면 됩니다
      isPICTURE.push('msn001.gif|아무개');
      isPICTURE.push('msn002.gif|아무개2');
      isPICTURE.push('+ 'msn003.gif|아무개3');
      isPICTURE.push('msn004.gif|아무개4');
      isPICTURE.push('msn005.gif|아무개5');
      isPICTURE.push('msn006.gif|아무개6');


//출력 함수
function pirntPIC(){
    var inlNUM =document.getElementById("inNUM").value;
    inlNUM=parseInt(inlNUM-1);//숫자와 배열을 매칭시키기 위해 빼기1을 해줌

    //입력창이 비어 있으면 알러트 후 리턴 시킴
    if(inlNUM==null){
       alert("임의의 수를 입력하세요 !");
       document.getElementById("inNUM").focus();
       return;
    }
    //없는 번호일 때
    if(!isPICTURE[inlNUM]){
       alert("없는 번호입니다 !   nn전체 입력범위는 "+isPICTURE.length+"번 까지입니다");
       document.getElementById("inNUM").focus();
       return;
    }
    var picSRC=isPICTURE[inlNUM].split("|")[0];
    var propile=isPICTURE[inlNUM].split("|")[1];
    document.getElementById("pictureIN").src=baseURL+picSRC;//사진 출력
    document.getElementById("propile").innerHTML =propile;//해당학생의 프로필또는 이름 출력
}

</script>




번호를 입력하세요: <input type="text" id="inNUM" value=""><br />
<input type="button" value="출력" onclick="pirntPIC();"><br />
 <table border="1" width="380">
    <tr>
        <td colspan="2">
            <p>소갯말</p>
        </td>
    </tr>
    <tr>
        <td>
        <img src="http://www.zeroboard.com/modules/editor/components/emoticon/tpl/images/yellow/yellow_emoticon%20(9).gif" id="pictureIN" />
        <div &nbsp;위의 주소에 기본 이미지를 넣으세요 사진들어가는 자리</div>
        </td>
        <td>
        <div id="propile">&nbsp;이름 또는 인적사항</div>
        </td>
    </tr>
</table>
 






위에서 눈여겨 볼것은
  var isPICTURE=new Array();   
  isPICTURE.push('msn001.gif|아무개');

위의 부분입니다
새로운 배열을 지정해 준다음
push()함수를 이용해서 새로 만든 배열에 하나씩 밀어 넣습니다
배열에 밀어넣을때 쓰고자하는 것들을 구분자등을 이용해서 밀어넣었다는 것에 신경을 쓰고 보셔야 합니다
위에서 쓴 구분자는 |  명칭이 생각이 안나는데 원화표시(백슬러시) 위에 있는 바입니다
구분자를 통해 넣었기 때문에 
다시 쓰기 위해서는 구분자를 기준으로 쪼개줘야 합니다

 var picSRC=isPICTURE[inlNUM].split("|")[0];
  var propile=isPICTURE[inlNUM].split("|")[1];

위와 같이 쪼개주면 처음 들어온 것은 이미지로 다음 들어온 것은 이름으로 가져다 쓰실수 있습니다
만약에 인풋창에
1을 입력했다면
inNUM엔 0이란 숫자가 들어갑니다
위에서 들어온 숫자에 -1을 해줬기 때문입니다

※ 배열은 무조건 0부터 시작합니다

for문으로 돌린다면

for(i=0;isPICTURE.length;i++){
     var picSRC=isPICTURE[i].split("|")[0];
     var propile=isPICTURE[i].split("|")[1];
}
과 같이 쓰면 포문안에서 배열로 차례 차례 인식할수 있습니다

제목 글쓴이 날짜
플레쉬 마우스 오버하면└---┘ 이런식으로 나오는 것 자바스크립트로 제어하기 Sena㏇ 2007.02.24
비밀번호 입력해야 해당 페이지 보이기 [3] 이명우 2007.02.28
Light box 이용하기.. [10] 이진수 2007.03.12
자바스크립 동영상 플레이어 2 (네이버 발췌) [4] 이진수 2007.03.28
간단한 검색 창입니다. [3] sunholic 2007.03.31
웬 소리가????(하이퍼링크 효과음) [7] 김민환 2007.04.08
스크립트 객체로 AJAX 구현하기 [12] nextini 2007.08.20
링크 클릭시 점선 → 링크, 이미지, form 태그 동시 적용 [2] 펠릭스 2007.11.28
배열 활용하기(초급) 예뜨락 2007.12.03
프린트소스 인데요.. [1] 이영훈346 2007.12.12
간단한 Ajax 메모 [1] file 엔시™ 2007.12.31
주민등록번호로 성별/나이/연령대 구분 [4] file 강병기 2008.01.09
Javascript 달력 - 거트 캘린더 [4] file 강세임 2008.01.10
자신의 홈피에 날씨를 달아보자. [2] Rising.kr 2008.01.21
자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. [1] Rising.kr 2008.01.21
자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] Rising.kr 2008.01.21
동적 테이블 (행추가, 특정행 삭제) Juny. 2008.02.20
동적 INPUT june44.myid.net/ 2008.03.31
프레임홈일때 부분프레임 무단링크 방지하기 [3] gosoo99 2008.04.08
웹페이지에 마우스 따라다니는 예쁜 시계를 넣자 [5] gosoo99 2008.04.08