제이쿼리, 자바 기초

자바스크립트 입문 다지기

이번 시간에는 이름과 지역을 입력할 수 있는 창을 만들어보았다.
지역을 부산, 서울, 제주도로 바꿀때마다 하위 동네 탭에 있는 목록도 함께 바뀌는 구조다.

상위 목록을 선택함에 따라 하위 목록도 변환시키는 창을 자바스크립트로 구현해보자.

자바스크립트의 핵심을 잊지말자.

화면상에서 사용자의 Input 값을 핸들링하거나
특정 객체를 보이거나 안보이게 만들거나
스타일을 조정하는 것이 기본 핵심이다.

우선 bootstrap에서 css와 javascript, jquery를 각각 호출해왔다.

참고로 css는 head 부분에 임포트 해주고
script는 body 하위에 임포트했다.
html이 먼저 그려지고 나서, script가 구동되어야, 사용자, 유저입장에서는 더 빠릿하고 좋은 체감을 느낄 수 있기 때문이다.
반대라면, 느린듯한 느낌을 받는다.

그럼 다음은 html을 구성해보자.

   <div class="container">
        <div>
            이름 : <input type="text" id="name"></div>
        <div>
            지역 :
            <select id="city" onchange="change_city()"></select>
        </div>
        <div>
            동네 :
            <select id="region_02">
                <option value="">강남</option>
                <option value="">홍대</option>
            </select>
            <select id="region_051" style="display: none;">
                <option value="">해운대</option>
                <option value="">서면</option>
            </select>
            <select id="region_064" style="display: none;">
                <option value="">서귀포</option>
                <option value="">제주시</option>
            </select>
        </div>
        <button type="button" onclick="regist();">log-in</button>
    </div>

사용자 입력값을 받기 위해 이름 인풋을 생성해주고
지역은 선택할 수 있도로 셀렉트 태그를 만들어줬다.

이때,을 적용해주고, citychage함수를 넣고 빈칸으로 둔다.
이 부분을 자바스크립트로 동적으로 채울 예정이다.

다음은 상위 도시 셀렉트에 따른 하위 셀렉트를 만들어준다.
비슷한 방법으로 설정해주고, 지역번호를 id 값으로 할당했다.
이때 스타일 display: none;을 할당해줘야하는데, 그렇지 않으면 이렇게 보이게 된다.

마찬가지로 로그인 버튼에도 아직 만들지 않은 함수를 지정해주고 만들어둔다.
이제 동적으로 만들어보자.

city 목록 데이터에서 호출하기

매번 새로운 도시를 업데이트할 수 있으니, 함수로 처리해서 불러오도록하자.
먼저, 일일이 손으로 추가해주는 방식이 있고
오브젝트에서 배열을 활용해 추가해주는 방식이 있다.

1안

<script>
        function load_city() {
             $("#city").append('<option value="02" selected>서울</option>')
             $("#city").append('<option value="051">부산</option>')
             $("#city").append('<option value="064">제주도</option>')
         }

load_city();
</script>

$('')이 방식은 제이쿼리를 임포트했을때 가능한 방법으로, documnet.queryselctor와 똑같다. 그저 표기만 더 간단하게 바꾼 것이다.
여기에 append를 추가해주고 옵션과 벨류가 딸린 값을 그대로 추가해주는 것이다.
이렇게 했을 경우에 정상적으로 목록이 출력되는 것을 확인할 수 있다.

이방법도 좋긴 하지만, 필드가 커지고, 프로젝트 데이터가 늘어날수록 관리 유지보수가 힘들어진다는 단점이 있다.
그래서 이보단 간단하게 작성하는 법이 있다.

2안
서버에서 오브젝트를 건내받았다 치고, 반복문을 통해 더 쉽게 관리할 수 있다.

<script>
        function load_city() {
            let city = [{
                value: "02",
                name: "서울"
            },
            {
                value: "051",
                name: "부산"
            },
            {
                value: "064",
                name: "제주도"
            }
            ];
            for (let i = 0; i < city.length; i++) {
                if (i == 0) {
                    $('#city').append('<option value="' + city[i].value + '" selected> ' + city[i].name + ' </option > ');
                }
                else {
                    $('#city').append('<option value="' + city[i].value + '">' + city[i].name + '</option>');
                }
            }
        }
        load_city(city);
</script>

먼저 반복문 내부에는 세가지 조건이 있다. 순서대로, 반복문 시작 조건, 종료시킬 조건, 해당 반복문을 종료시키기 위해서 만드는 조건이다.
처음은 [0]으로 시작하게 만들어 첫번째 array인 서울을 가져갈 수 있도록 만들었다.
두번째 조건인 city.length는 3개가 들어있어 3을 가르키지만, 실제로 데이터상으로 인덱스는 0부터 시작하기에 모든 객체를 포함할 수 있다.
여기에 i++는 실제로 i=i+1과 같은 식이므로, 3번 반복하면 자연스럽게 종료되는 방식이다.

여기에, If문을 붙여, i==0이 참이면 append 시켜서 계속해서 반복된다.
0이니 서울이 들어오고, 다음 반복에는 1 더해져 부산이 들오온다. 그리고 1또 더해져서 제주도가 들어오고
이때 i는 array의 수보다 적으면 False가 되도록 설정해뒀기에, 멈추게 된다.

중간에는 city와 array배열을 추가해뒀고, .value와 .name을 설정해서 계속해서 값이 바뀌게 된다.
확인해보면 똑같은 결과를 알 수 있고, 원하는 도시와 지역번호를 추가하면 계속해서 만들 수 있다.

region 목록 city에 반응하게 만들기

그렇다면 하위 목록이 상위 셀렉트에 반응하게 하려면 어떻게 하면 좋을까?
여기에 디스플레이 none을 활용해서 만들어보았다.
실제로는 다 있지만, 눈에만 안보이는 방식이다.

<script>
        function change_city() {
            let city = document.getElementById("city").value;
            document.getElementById("region_02").style.display = "none";
            document.getElementById("region_051").style.display = "none";
            document.getElementById("region_064").style.display = "none";
            document.getElementById("region_" + city).style.display = ""; // 시티에서 가져온 밸류를 적용하면, 선택에 따라 변동하는 모습을 볼 수 있다. 
        };
</script>

해당 기능은 셀렉트 태그를 지정했을때 발생한다. 이를 Onchage로 할당하면 된다.
이후, 함수 이름을 체인지 시티로 할당한다.

우선 변수를 지정한다. city라는 변수를 지정해 모든 시티의 밸류 값을 일괄로 지정해주고
아래 세줄은 다른 디스플레이를 모두 none 처리해주는 방식이고
마지막은 이후 ""표시를 줌으로, none을 지워주는 코드다.

마지막 선택자는 +를 활용해 city의 value를 city에 할당해줬으니 city를 적어주자.
이때, city.value의 타입은 string이므로 바로 적어줄 수 있다.
매번 콘솔로그로 데이터타입을 확인한 후 진행하자.

이렇게 설정해두면 위에서 선택한 지역번호에 따라 하위 목록이 새롭게 지정된다.


지역에서 선택한 value를 시티체인지 함수에서 활용해, 뒤에 붙은 지역 번호와 일치한다면 디스플레이 none을 제거해주는 방식이다.

자바스크립트 활용

마지막으로 button에 할당한 regist 함수를 만들어보자,
onclick을 할당해주고 함수를 적용했으니
스크립트 태그에서 나머지를 채워보자.
로그인을 누르면 이름과 지역명을 알려주는 방식이다.

<script>
     function regist() {
            alert(document.getElementById("name").value);
            alert(document.getElementById("city").value);
            }
</script>

위 태그에서 이름 인풋의 id를 'name'을 할당했고
slect태그의 Id값을 'city'로 할당해준다.

이 상태에서 이름을 입력하고 로그인을 눌러주면
이름과 함께, city의 밸류가 출력된다.