for 문으로 유사패턴 태그 만들기
http://www.mediaplayer.kr/main/bbs/html_editor.php
위 링크에서 직접 확인하세요.
에를 들어서 아래와 같은 유사패턴의 html 이 있다고 할 경우에
<input type=text id=my_1 name=my_1><br>
<input type=text id=my_2 name=my_2><br>
<input type=text id=my_3 name=my_3><br>
<input type=text id=my_4 name=my_4><br>
<input type=text id=my_5 name=my_5><br>
<input type=text id=my_6 name=my_6><br>
<input type=text id=my_7 name=my_7>
여러분들은 이걸 그냥 사용하시나요? 만일 50개가 된다면요?
저는 2개 이상의 유사패턴이 나올 경우
불문곡직하고 자바스크립트의 반복문을 사용합니다.
<script>
for (i = 1; i <= 7; i++) {
document.write("<input type=text id=my_" + i + " name=my_" + i + "><br>");
}
</script>
그런데 저렇게 반복문을 쓰면 마지막 input 다음에도 <br> 이 붙게 됩니다.
이럴 때는 변수를 하나 만들고 반복문의 마지막 값에만 진공을 주는 3항문을 만들어 해결합니다.
<script>
for (i = 1; i <= 7; i++) {
isBr = i == 7 ? "" : "<br>";
document.write("<input type=text id=my_" + i + " name=my_" + i + ">" + isBr);
}
</script>
그런데 예컨데 value 값이 다를 경우가 생길 수가 있겠지요.
<input type=text id=my_1 name=my_1 value="하나"><br>
<input type=text id=my_2 name=my_2 value="둘"><br>
<input type=text id=my_3 name=my_3 value="셋"><br>
<input type=text id=my_4 name=my_4 value="넷"><br>
<input type=text id=my_5 name=my_5 value="다섯"><br>
<input type=text id=my_6 name=my_6 value="여섯"><br>
<input type=text id=my_7 name=my_7 value="일곱">
이럴 때는 배열을 사용합니다. 단 배열의 첫항은 0이기 때문에 i - 1 값이 필요하겠지요.
[code]
<script>
myVal = ["하 나", "둘", "셋", "넷", "다섯", "여섯", "일곱"];
for (i = 1; i <= 7; i++) {
isBr = i == 7 ? "" : "<br>";
document.write("<input type=text id=my_" + i + " name=my_" + i + " value='" + myVal[i - 1] + "'>" + isBr);
}
</script>
[/code]
문자열이 길 경우 배열은 아래처럼 사용해도 됩니다.
myVal = [
"하나",
"둘",
"셋",
"넷",
"다섯",
"여섯",
"일곱"
];
위의 예는 말 그대로 빙산의 일각에 불과할 뿐입니다.
for 문은 많이 사용할수록 내공이 진화합니다.
어떤 로직이 있고 그 로직에서 여러 개의 유사패턴이 반복된다면
어떻게든 그 공통점을 추출하여 반복문으로 표현하는 습관을 가지는 것이 가장 중요합니다.^^
댓글 4개
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5036 | 웹서버 | 4년 전 | 2138 | ||
| 5035 | 웹서버 | 4년 전 | 2165 | ||
| 5034 | 웹서버 | 4년 전 | 2397 | ||
| 5033 | 웹서버 | 4년 전 | 1776 | ||
| 5032 | 웹서버 | 4년 전 | 2131 | ||
| 5031 | 웹서버 | 4년 전 | 2511 | ||
| 5030 | MySQL | 4년 전 | 2880 | ||
| 5029 | 웹서버 | 4년 전 | 7175 | ||
| 5028 | 웹서버 |
kerimdoor
|
4년 전 | 1629 | |
| 5027 | OS | 4년 전 | 6551 | ||
| 5026 | PHP |
|
4년 전 | 4637 | |
| 5025 | JavaScript |
|
4년 전 | 2401 | |
| 5024 | MySQL |
|
4년 전 | 3810 | |
| 5023 | MySQL | 4년 전 | 3027 | ||
| 5022 | PHP | 4년 전 | 2320 | ||
| 5021 | PHP |
|
4년 전 | 3247 | |
| 5020 | PHP | 4년 전 | 4301 | ||
| 5019 | PHP | 5년 전 | 4324 | ||
| 5018 | 웹서버 | 5년 전 | 6701 | ||
| 5017 | 기타 |
HappyTank
|
5년 전 | 5066 | |
| 5016 | MySQL | 5년 전 | 3083 | ||
| 5015 | 기타 | 5년 전 | 2269 | ||
| 5014 | 기타 | 5년 전 | 2831 | ||
| 5013 | 기타 | 5년 전 | 2251 | ||
| 5012 | 기타 | 5년 전 | 2259 | ||
| 5011 | 기타 | 5년 전 | 2211 | ||
| 5010 | 기타 | 5년 전 | 1770 | ||
| 5009 | 기타 | 5년 전 | 2378 | ||
| 5008 | 기타 | 5년 전 | 2008 | ||
| 5007 | 기타 | 5년 전 | 1971 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기