웹마스터 팁
배열 활용하기(초급)
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 위의 주소에 기본 이미지를 넣으세요 사진들어가는 자리</div>
</td>
<td>
<div id="propile"> 이름 또는 인적사항</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];
}
과 같이 쓰면 포문안에서 배열로 차례 차례 인식할수 있습니다
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
휴대폰 결재 설치 1 (다날 휴대폰 결재) | 한꼬마 | 2002.11.24 |
모닝샵 이용해서 쇼핑몰 만들기 (화면 꾸미기 1)
[4]
![]() | 한꼬마 | 2002.11.24 |
모닝샵 이용해서 쇼핑몰 만들기 (상품 목록)
![]() | 한꼬마 | 2002.11.22 |
모닝샵 이용해서 쇼핑몰 만들기 (웹페이지 만들기1)
[8]
![]() | 한꼬마 | 2002.11.22 |
모닝샵 이용해서 쇼핑몰 만들기 (제품 관리)
[4]
![]() | 한꼬마 | 2002.11.21 |
모닝샵을 이용하여 쇼핑몰 만들기 (카테고리)
[1]
![]() | 한꼬마 | 2002.11.21 |
모닝샵 이용해서 쇼핑몰 만들기 (설치에서 쇼핑몰 환경 설정)
[7]
![]() | 한꼬마 | 2002.11.20 |
모닝샵 이용해서 쇼핑몰 만들기 (서론) [5] | 한꼬마 | 2002.11.19 |
[My생각] 쿠키와 보안에 대한 재미있는 생각!! [1] | 박용구 | 2002.11.18 |
세계 인구 구하기~; [23] | AT4u | 2002.11.16 |
초보의 초보를위한 강의 PHP를 활용한 페이지 암호걸기 #3 [10] | 아이쿠 | 2002.11.15 |
초보의 초보를위한 강의 PHP를 활용한 페이지 암호걸기 #2 [8] | 아이쿠 | 2002.11.13 |
초보의 초보를위한 강의 PHP를 활용한 페이지 암호걸기 #1
[9]
![]() | 아이쿠 | 2002.11.13 |
(GD) 이미지 대칭 축소 함수 [5] | 민이 | 2002.11.08 |
제로보드로 유료 사이트 만들기 (결제 정보 저장) [1] | 한꼬마 | 2002.11.06 |
제로보드로 유료 사이트 만들기 (폼만들기) [3] | 한꼬마 | 2002.11.06 |
정규표현식 쓰지 않고 자동링크하기!! 한글주소까지 문제없슴돠~~!! [6] | 우트라 | 2002.11.05 |
제로보드로 유료 사이트 만들기 (회원 db 수정) 수정 #1
[7]
![]() | 한꼬마 | 2002.10.31 |
Freechal.com 과 같은 형태의 아바타를 만들자. [6] | 다솜아빠 | 2002.10.31 |
제로 카운터(zero counter)에서 총 접속자 숫자 조정하기 (Easy 버젼) [13] | 미카엘 | 2002.10.31 |