프로그래밍 공부 일기

2020년 11월 11일
항목을 선택하면 다른 페이지로 이동하는 풀다운 메뉴를 만들었습니다.

출력 결과

코드

html 파일은 일본어용, 영어용, 중국어용의 3개 준비합니다.
각 html 파일의 option 태그에 selected 속성을 사용하지 않고 만들었습니다.

index.html

 <section>
        <form action="" id="form">
            <select name="select">
                <option value="index.html">日本語</option>
                <option value="english.html">英語</option>
                <option value="zh.html">中国語</option>
            </select>
        </form>
        <h2>日本語のページ</h2>
    </section>

script.js

const lang = document.querySelector('html').lang;

if(lang === 'ja') {
    document.querySelector('option[value="index.html"]').selected = true;
} else if(lang === 'en') {
    document.querySelector('option[value="english.html"]').selected = true;
} else if(lang === 'zh') {
    document.querySelector('option[value="zh.html"]').selected = true;
}


document.getElementById('form').select.onchange= function () {
    location.href = document.getElementById('form').select.value;
}

코드 해설 (자신용)

script.js

document.getElementById('form').select.onchange= function () {
    location.href = document.getElementById('form').select.value;
}

document.getElementById('form').select 는 id 속성이 form인 요소를 가져오고 form 요소 내에서 name 속성이 select인 value 속성의 값을 가져옵니다.

.onchange 는 현재와 다른 이 선택되었을 때(예: 일본어→영어, 일본어→중국어)에 발생하는 이벤트입니다.

location.href = document.getElementById('form').select.value; 는 먼저 id 속성이 form인 요소를 가져옵니다. 그런 다음 form 요소 내에서 name 속성이 select인 양식 파트의 값을 가져옵니다. 그 취득한 값을 location.href 에 대입합니다.

location.href 에서 URL을 다시 작성 중입니다. 브라우저는 URL이 변경되면 즉시 새 페이지를 보려고 하므로 즉시 다음 페이지로 이동할 수 있습니다.

script.js

const lang = document.querySelector('html').lang;

이번의 경우, document.querySelector() 그래서 요소형 셀렉터를 취득하고 있습니다.

html는 html 태그의 lang 속성 (예 : ja, en, zh)을 가져옵니다.

script.js

if(lang === 'ja') {
    document.querySelector('option[value="index.html"]').selected = true;
} 

.lang 는 value 속성의 값이 index.html인 option 요소를 가져옵니다.

document.querySelector('option[value="index.html"]') 는 취득한 option 요소에 selected 속성을 추가합니다. .selected = false로 설정하면 selected 속성이 삭제됩니다.

다른 else if 문도 역할은 위와 같습니다.

주의점

위의 if 문이 없으면 일본어에서 영어, 일본어에서 중국어로 페이지를 이동할 수 있지만 영어에서 일본어, 중국어에서 일본어 페이지로 이동할 수 없습니다.

.onchange 이벤트는 현재와 다른 option 요소가 선택되었을 때 발생합니다.

이번의 경우, 어느 페이지를 선택해도, 최초로 풀다운 메뉴로 선택되고 있는 것은 「일본어」입니다.

즉, 일본어 페이지에서 영어 페이지로 이동하고, 또 일본어 페이지로 돌아가려고 해도 .onchange 이벤트가 발생하지 않고, 돌아갈 수 없게 됩니다.

아래에 if문을 쓰지 않았을 때의 거동을 올립니다.

참고 자료

확실한 힘이 익히는 JavaScript 「초」입문 제2판