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

변수는 숫자, 문자열, 객체 매개변수가 될 수 있다는 것을 배웠습니다. Javascript에는 또 다른 중요한 부분인 배열이 있습니다.
배열은 목록입니다. 목록, URL, 색상 목록 등 다양한 목록을 배열에 저장할 수 있습니다.
여기서는 색상 배열을 생성합니다.
var colors = new Array("red","blue","green")
이제 배열이 생겼습니다. 이를 사용하여 무엇을 할 수 있습니까? 배열의 장점은 배열의 개별 요소를 숫자로 호출할 수 있다는 것입니다. 첫 번째 요소의 번호는 0이며 다음과 같은 방법으로 호출할 수 있습니다.
var the_element = colors[0];
이 JavaScript 명령 줄이 실행되면 변수 the_element에 할당된 값은 문자열입니다. "빨간색". 이름을 쓰고 순서 번호를 대괄호 안에 넣어 배열의 요소를 호출할 수 있습니다. 배열의 두 번째 요소의 시퀀스 번호는 1입니다.
배열이 생성되면 배열 값을 추가하고 수정할 수 있습니다. 색상 배열의 첫 번째 요소를 빨간색에서 보라색으로 변경하려면 다음과 같이 하면 됩니다.
colors[0] = "purple"
배열은 루프에서 자주 사용됩니다. 배열과 루프의 적용은 아래에서 논의됩니다.
배열은 배열의 각 요소를 반복하여 특정 기능을 수행할 수 있기 때문에 매우 유용합니다. 다음은 URL 배열의 요소를 반복하는 예입니다.
먼저 이 예제를 작동하려면 몇 가지 변수를 선언해야 합니다.
var url_names = new Array("hits.org","awaken.org","bianca.com")
var a_url
다음으로 배열의 각 요소를 반복하고 각 URL을 열고 사용자가 경고 상자의 확인 버튼을 클릭할 때까지 기다립니다.
for(loop=0; loop {
// URL 이름을 만듭니다(예: http://www.php.cn/
a_url = "http://www." url_names[loop] "/";
// 창 열기
var new_window=open(a_url,"new_window","width=300,height=300")
// 클릭을 기다립니다
Alert("hit ok for the next site");
}
먼저 루프가 0에서 url_names.length 변수로 이동하는 것을 볼 수 있습니다. 배열 이름 뒤에 .length를 붙이면 배열에 요소가 몇 개 있는지 알 수 있습니다. 단, 배열 요소의 개수는 배열의 마지막 요소의 인덱스 번호(시퀀스 번호)와 다릅니다. 배열에 3개의 요소가 있는 경우 배열의 길이는 3이지만 배열의 마지막 요소의 인덱스 번호는 array[2]입니다. 이는 배열의 첫 번째 요소의 인덱스 번호가 array[0]이기 때문입니다. 배열 호출을 수행할 때 "개체를 찾을 수 없음"과 같은 오류 메시지가 표시되고 코드에 배열이 있는 경우 배열 요소의 인덱스 번호와 배열의 요소 수를 혼동했을 가능성이 있습니다.
또한 배열 끝에 .length를 배치하는 것은 객체에 일부 속성을 연결하는 것과 약간 비슷하다는 점을 알 수 있습니다. 이는 배열 자체가 객체이고 길이가 배열의 속성이기 때문입니다.
배열 용어 객체의 또 다른 표현은 새 배열을 생성하려면 새 명령어를 사용해야 한다는 것입니다. 위의 예에서 url_names = new Array(...)는 실제로 다음과 같이 해석될 수 있습니다. 새 배열을 생성하고 url_names를 사용하여 이에 대한 참조를 만듭니다. 이렇게 "new"라는 단어를 사용하면 새로운 객체가 생성되는 것을 알 수 있습니다.
루프의 1번째 줄은 변수를 생성합니다. 할당된 값은 문자열입니다.
a_url = "http://www." url_names[loop] "/"
루프가 시작되면 변수 loop의 초기 값은 0입니다. url_names 배열의 첫 번째 요소는 "hits.org" 문자열이므로 첫 번째 루프에서 변수 a_url은 "http://www.hits.org/" 문자열과 동일합니다.
루프의 다음 줄은 URL
var new_window=open(a_url,"new_window","width=300,height=300");창을 열 때마다 동일한 이름을 지정하므로 새 URL로 이동할 때 많은 창이 열리지 않습니다. 위의 예에서 창 이름 "new_window"를 제거하면 루프를 통과할 때마다 새 창이 열립니다.
루프의 3번째 줄은 경고 상자를 열고 사용자가 확인 버튼을 클릭하기를 기다립니다.
배열에는 문자열뿐만 아니라 다른 요소도 포함될 수 있습니다. 배열은 JavaScript 문서 개체 모델의 다양한 측면에 적용될 수 있습니다. 이 지식은 다음 강의에서 다루겠습니다.
다음은 onClick="" 링크의 코드입니다.
varchange=prompt('어떤 이미지(0 또는 1)를 변경하시겠습니까?','')
window.document.images[change ].src='3.jpg';
이 예에서는 배열이 DOM에 어떻게 개입하는지 보여주기 위해 이미지 교환을 사용합니다. 이 예제를 시도해보고 소스 코드를 살펴보세요.
document.image_name.src = 'some_image.gif';
이를 위해서는 각 이미지에 이름을 지정해야 합니다. 교환하려는 사진의 이름은 모르지만 HTML 페이지의 순서는 알고 있는 경우. 이미지는 DOM 번호로 지정할 수 있습니다.
HTML 파일의 첫 번째 이미지는 document.images[0]이고, 두 번째 이미지는 document.images[1] 등입니다. 문서에 이미지가 몇 개 있는지 알고 싶다면 이미지 배열 길이(document.images.length)를 확인하면 됩니다. 예를 들어 웹 페이지의 모든 그래픽을 Spacer GLF 이미지로 변경하려면 다음과 같이 하면 됩니다.
for(loop=0; loop {
document.images[loop].src = 'spacer.gif'
}
명확합니까?
그렇군요. 다음 시간에는 함수에 대해 배워보겠습니다.
함수는 프로그래밍에서 배워야 할 마지막 기본 구성 요소입니다. 모든 프로그래밍 언어는 함수입니다. 함수는 매번 호출 가능하며 다시 작성할 필요가 없는 것입니다.
빨리 읽는 법을 배우고, 한 번 클릭하면 현재 시간을 알려주는 긴 텍스트 링크를 사용하고 싶다면.
예를 들어... time!
소스 코드를 살펴보세요.
Time!
여기에서 JavaScript가 어떻게 작동하는지에 대한 자세한 내용은 중요하지 않습니다. 나중에 다시 검토해 보겠습니다.
중요한 것은 너무 길다는 것입니다. 이러한 시간 링크가 10개 이상 있으면 매번 이 프로그램을 잘라내어 붙여넣어야 합니다. 이로 인해 HTML이 길고 보기 흉해집니다. 또한 이 프로그램을 변경하려면 10곳에서 변경해야 합니다.
프로그램을 10번 복사하는 대신 실행할 함수를 작성할 수 있습니다. 여기서 기능 사용법을 사용하면 편집하고 읽기가 쉽습니다.
타이밍 함수 작성 방법을 참고하세요.
이 HTML 페이지에는 AnnounceTime이라는 함수가 포함되어 있습니다. 링크에서 annoumnceTime 호출:
Time!
다음과 같이:
아래쪽 선은 2과와 같습니다. :
Hello!
이를 링크에서 경고 대화상자 호출이라고 합니다. 함수는 메소드와 비슷합니다. 유일한 차이점은 메소드가 객체에 연결된다는 점입니다. 이 경고 예제에서 개체는 창 개체입니다.
다시 함수 자체로 돌아가 보겠습니다. 소스코드를 보면 해당 함수가 HTML 파일의 헤더에 위치해 있는 것을 알 수 있습니다.
                                                                                                 <script> <br/>           <!-- 나 숨기기 <br/>               function announceTime() <br/>              { <br/>                  //날짜, 시간, 분 가져오기 및 초 <br/>                   var the_date = new Date(); <br/>                   var the_hour = the_date.getHours(); <br/>                   var the_ Minute = the_date.getMinutes(); <br/>                    var the_second = the_date.getSeconds(); <br/>                  //문자열과 함께 알림 <br/>                 var the_time = the_hour   ":"   the_ 분   ":"   the_second; <br/>                   alert("현재 시간은 다음과 같습니다."   the_time); <br/>               } <br/>            // 보여주세요 --> <br/>            </script>
        
        
        ...