JavaScript 초보자 튜토리얼(5강 계속)_기본 지식

JavaScript에서 라디오 버튼의 사용법은 체크박스의 사용법과 유사합니다. 차이점은 HTML의 응용 프로그램에 있습니다. 체크박스는 스위치입니다. 확인란이 선택된 경우 다시 클릭하여 선택을 취소할 수 있습니다. 그러나 라디오 버튼이 선택된 경우에는 다른 라디오 버튼을 선택해야만 선택을 취소할 수 있습니다. 예:

이 예에서는 라디오 버튼을 선택 취소하려면 다른 라디오 버튼을 클릭해야 합니다. 다음 프로그램을 다시 살펴보세요.

조명 끄기
Light on
 

  첫 번째 라디오 버튼 상자가 선택되면 offButton() 함수가 호출됩니다. 함수는 다음과 같습니다.

function offButton()
{
var the_box = window.document.form_1.radio_1;

if (the_box.checked == true)
{
          window.document.form_1.radio_2.checked = false;

이 예는 이전 체크박스 예와 매우 유사합니다. 주요 차이점은

창입니다. document.form_1.radio_2.checked = false;

이 줄 지시문은 JavaScript에 이 버튼을 클릭할 때 다른 버튼을 닫도록 지시합니다. 다른 버튼의 기능은 다음 버튼과 매우 유사하므로:

function onButton()

{

var the_box = window.document.form_1.radio_2;

if (the_box .checked == true)
{
window.document.form_1.radio_1.checked = false }

}

메뉴는 우리가 배운 가장 특이한 형태의 옵션입니다. 기본 형식에는 다음 메뉴와 목록 메뉴의 두 가지가 있습니다. 다음은 예입니다.

이상한 점은 이 메뉴에는 이름이 있지만 그 안에 있는 옵션에는 이름이 없다는 것입니다. 예를 들어 HTML의 경우 첫 번째 메뉴는 다음과 같습니다.

probiscus

거미

; 여우원숭이

침팬지

> 오랑우탄 ;

이 메뉴의 이름은 pulldown_1이지만 각 옵션에는 이름이 없습니다. 그래서 각 옵션을 호출하기가 조금 어렵습니다.

다행히도 배열은 옵션을 호출하는 데 도움이 될 수 있습니다. 다음 메뉴에서 두 번째 옵션을 변경하려면

window.document.form_1.pulldown_1.options[1].text = 'new_text';

이렇게 하면 됩니다. 메뉴 요소에는 메뉴에 있는 모든 옵션의 배열인 옵션 속성이 있기 때문입니다. 선택 항목 변경을 클릭한 다음 드롭다운 메뉴를 사용하여 선택 항목이 변경되었는지 확인하세요. 이제 두 번째 옵션은 *thau*가 되어야 합니다.

메뉴에는 option 속성 외에 selectedIndex라는 속성도 있습니다. 옵션을 선택한 후 selectedIndex 속성은 선택한 옵션의 배열 인덱스 번호(일련 번호)가 됩니다. 두 번째 목록 메뉴에서 옵션을 선택하고 인덱스 번호를 확인하세요. 배열의 첫 번째 옵션에는 인덱스가 0이라는 점을 기억하세요.

색인을 확인하세요.

폼 이름은 form_1, 목록 메뉴 이름은 list_1 입니다. selectedIndex 속성 값은 window.document.form_1.list_1.selectedIndex입니다.

selectedIndex를 다음과 같이 설정할 수도 있습니다.

window.document.form_1.list_1.selectedIndex = 1;

두 번째 옵션을 강조 표시합니다.

선택한 항목의 색인 번호를 얻으면 해당 내용을 찾을 수 있습니다.

var the_select = window.document.form_1.list_1;

var the_index = the_select .선택된 인덱스;

var the_selected = the_select.options[the_index].text;

selectedIndex 속성은 유용하지만 여러 옵션을 동시에 선택하면 어떻게 되나요?

메뉴 요소의 핸들러는 onChange()입니다. 메뉴가 변경되면 프로세서가 활성화됩니다.

이 예를 시도하고 아래 댓글을 읽어보세요.

제가 가장 좋아하는 동물은...

상대적으로 복잡한 JavaScript 프로그램에 댓글을 달겠습니다. 먼저 양식 자체를 살펴보겠습니다.

selectedIndex].text);">
                                    ' 옵션                         ;/select>

🎜>                                                                  ;그레이하운드옵션>      ~                                           다음 메뉴에 대한 핸들러는 swapOptions() 함수를 호출합니다. 이 기능은 헤더
에 정의되어 있으며 해당 매개변수는 - 선택한 동물 유형입니다.

헤더에 정의한 처음 몇 개의 배열:

var dogs = new Array("poodle","puli","greyhound");

var fish = new Array("송어", "고등어", "농어");

var Birds = new Array("robin", "hummingbird", "crow");

주의하세요 이 배열의 이름은 드롭다운 메뉴의 이름과 일치합니다. 곧 그 이유를 이해하게 될 것입니다. 이제 드롭다운 메뉴가 변경될 때 호출되는 함수를 살펴보겠습니다.

function swapOptions(the_array_name)

{

var number_select = window.document.the_form.the_examples;

var the_array = eval(the_array_name);

setOptionText(window.document.the_form.the_examples, the_array);

}

이 함수의 정의에는 the_array_name이라는 하나의 매개 변수가 포함됩니다. 드롭다운 메뉴를 열고 "Fish"를 선택하면 the_array_name은 "Fish" 문자열과 동일합니다.

함수 본문의 첫 번째 줄에는 두 번째 양식 요소인 목록 메뉴를 참조하는 변수가 포함되어 있습니다.

2행에서는 eval()이라는 새로운 개념이 도입되었습니다. eval()은 다소 이상하므로 나중에 설명하겠습니다. 2행에 있는 이러한 명령의 결과는 the_array 변수가 이전에 정의한 배열 중 하나와 동일하다는 것입니다. the_array_name이 "Fish"인 경우 the_array는 Fish 배열과 동일합니다. 이것이 어떻게 수행되는지 이해하려면 eval을 배우십시오.

3행에서는 또 다른 함수 setOptionText()를 정의합니다. setOptionText()는 the_array를 목록 메뉴에 할당하는 데 사용됩니다. 다음은 함수 내용입니다.

function setOptionText(the_select, the_array)

{

for (loop=0; loop {

the_select.options[loop].text = the_array[loop];

}

}

이 함수는 메뉴 요소에 대한 참조와 배열이라는 두 가지 매개변수를 사용합니다. 1행에서는 모든 메뉴 요소를 반복하는 for 루프를 설정합니다. 메뉴 요소의 options 속성은 메뉴의 모든 옵션으로 구성된 배열입니다. 배열이므로 length 속성을 사용하여 배열의 요소 수를 찾을 수 있습니다. 첫 번째 루프 동안 루프 변수 값은 0입니다. 루프의 주요 값은 다음과 같습니다.

the_select.options[0].text = the_array[0];

드롭다운 메뉴에서 "Fish"를 선택하면 the_array[ 0]은 "송어"이므로 이 명령줄은 목록 메뉴의 첫 번째 옵션을 "송어"로 변경합니다. 다음에 반복하면 루프는 1이 되고 목록 메뉴의 두 번째 옵션은 "mackerel" 입니다.

이 예를 이해했다면 JavaScript에 대한 더 깊은 이해가 있는 것입니다.

여기까지가 기본 튜토리얼이고, 고급 튜토리얼은 추후 공개될 예정이니 지켜봐주세요.