Node.js 탐색 메뉴 샘플 code_javascript 기술 선택 및 전송
- WBOY원래의
- 2016-05-16 16:39:191146검색
HTML 인터페이스 구현
<!DOCTYPE html> <html> <head> <title>Select and Go Navigation</title> <script src="script01.js"></script> <link rel="stylesheet" href="script01.css" rel="external nofollow" > </head> <body> <form action="gotoLocation.cgi" class="centered"> <select id="newLocation"> <option selected>Select a topic</option> <option value="script06.html">Cross-checking fields</option> <option value="script07.html">Working with radio buttons</option> <option value="script08.html">Setting one field with another</option> <option value="script09.html">Validating Zip codes</option> <option value="script10.html">Validating email addresses</option> </select> <noscript> <input type="submit" value="Go There!"> </noscript> </form> </body> </html>
메뉴 탐색 구현
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}
소스코드 분석은 다음과 같습니다
1.
window.onload = initForm;
window.onunload = function() {};
창이 로드되면 initForm() 함수가 호출됩니다. 다음 줄은 일부 브라우저의 이상한 동작을 처리하기 위한 해결 방법이므로 설명이 필요합니다.
창이 언로드되면(즉, 창이 닫히거나 브라우저가 다른 URL로 이동하는 경우) 익명 함수, 즉 이름이 없는 함수를 호출합니다. 이 예에서 함수에는 이름이 없을 뿐만 아니라 아무 작업도 수행하지 않습니다. 이 기능은 onunload를 무언가로 설정해야 하기 때문에 제공됩니다. 그렇지 않으면 브라우저의 뒤로 버튼을 클릭할 때 페이지가 일부 브라우저(예: Firefox 및 Safari)에 캐시되기 때문에 onload 이벤트가 트리거되지 않습니다. onunload가 무엇이든 하도록 하면 페이지가 캐시되지 않으므로 사용자가 물러나면 onload 이벤트가 발생합니다.
익명이란 함수와 () 사이에 이름이 없다는 의미입니다. 이는 onunload를 트리거하지만 아무것도 수행하지 않도록 하는 가장 간단한 방법입니다. 모든 함수에서와 마찬가지로 중괄호에는 함수의 내용이 포함됩니다. 이 함수는 아무 작업도 수행하지 않으므로 여기 중괄호는 비어 있습니다.
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
initForm() 함수에서 첫 번째 줄은 HTML 페이지(ID는 newLocation)의 메뉴를 가져오고 selectedIndex 속성을 0으로 설정하여 주제 선택을 표시합니다.
두 번째 줄은 메뉴 선택이 변경되면 jumpPage() 함수를 호출하도록 스크립트에 지시합니다.
3.
var newLoc = document.getElementById("newLocation");
jumpPage() 함수에서 newLoc 변수는 방문자가 메뉴에서 선택한 값을 찾습니다.
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
대괄호 안의 코드로 시작하여 바깥쪽으로 작업해 보세요. newLoc.selectedIndex는 0부터 5까지의 숫자입니다(6개이기 때문입니다
메뉴 옵션. JavaScript 번호 매기기는 종종 0부터 시작한다는 점을 기억하세요. 이 번호를 받은 후 해당 메뉴 항목을 받으세요
의 값은 우리가 이동하려는 웹페이지의 이름입니다. 그런 다음 결과를 newPage 변수에 할당합니다.
5.
if (newPage != "") {
window.location = newPage;
이 조건문은 먼저 newPage가 비어 있지 않은지 확인합니다. 즉, newPage에 값이 있으면 창을
으로 이동시킵니다.
선택한 메뉴 항목에 지정된 URL입니다.