비

for 문으로 유사패턴 태그 만들기

· 2022-05-06 (금) 11:43:48 · 2841 · 4

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개

감사합니다
2022-05-21 (토) 12:33:46
@방지턱 감사합니다
감사합니다. 비타주리님의 자바스크립트 코드는 여러번 보고 많이 배웁니다.
2022-09-02 (금) 15:55:27
감사합니다~
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
PHP 23-07-20 조회 2,144
기타 23-07-20 조회 1,477
PHP 23-07-20 조회 1,598
23-06-23 조회 1,741
23-07-04 조회 1,685
23-07-19 조회 1,372
23-07-17 조회 1,747
23-07-15 조회 1,675
23-07-07 조회 2,162
23-07-07 조회 1,673
PHP 23-07-19 조회 1,351
PHP 23-07-18 조회 2,777
PHP 23-07-17 조회 2,585
PHP 23-07-16 조회 3,307
PHP 23-07-15 조회 1,602
JavaScript 23-07-15 조회 1,789
JavaScript 23-07-14 조회 1,555
JavaScript 23-07-13 조회 1,592
PHP 23-07-13 조회 1,646
기타 23-07-12 조회 1,503
JavaScript 23-07-12 조회 1,527
JavaScript 23-07-11 조회 1,613
JavaScript 23-07-10 조회 1,495
JavaScript 23-07-09 조회 1,759
JavaScript 23-07-08 조회 1,349
기타 23-07-08 조회 1,638
PHP 23-07-07 조회 1,577
JavaScript 23-07-06 조회 1,324
PHP 23-07-05 조회 3,080
PHP 23-07-04 조회 1,585