이제 컴퓨터 프로그래밍의 기본을 알았습니다. 문서 개체 모델(Document Object Model-DOM)을 계속해서 연구해 보겠습니다. DOM의 클릭 관계는 각 창 개체의 Document 개체인 창 개체로 시작됩니다. 우리는 Document 개체에 초점을 맞추고 이를 사용하여 사용자로부터 정보를 얻고 새 정보를 동적으로 표시하는 방법을 살펴보겠습니다.
우리는 이미 파일 개체의 속성인 이미지 배열을 살펴보았습니다. 레슨 3에서는 src 속성을 변경하여 파일의 첫 번째 이미지를 수정할 수 있습니다.
예:
window.document.images[0].src='some_new_picture.gif';
이 명령은 문서의 첫 번째 이미지를 새 이미지로 변경합니다. some_new_picture.gif라는 이미지입니다. DOM에서 이미지 배열의 각 이미지도 객체입니다. 따라서 Images[0].src 명령어는 객체처럼 작동합니다. 즉, Image 배열의 Image에서 객체 image[0]를 호출하고 해당 src 속성을 설정합니다. 번역하려면: 창에서 문서 속성을 호출하고, 문서의 이미지 배열에서 첫 번째 이미지를 호출하고, 해당 src 속성을 some_new_picture.gif 이미지로 설정하세요.
Image 객체에는 다른 많은 흥미로운 속성이 있습니다. 예를 들어 JavaScript가 다른 작업을 수행하기 전에 이미지가 완전히 로드되었는지 확인할 수 있습니다. 그러나 우리는 이후 수업에서 이러한 속성에 대해서만 이야기할 수 있습니다. 오늘은 피드백 양식과 JavaScript에서 이를 사용하는 방법에 대해 이야기하겠습니다.
피드백 양식은 HTML 1.0 사양의 일부입니다. 많은 사람들이 그것에 대해 잘 모릅니다. 많은 사람들은 이것이 클라이언트측 CGI 프로그래밍을 통해서만 가능하다고 생각합니다. 실제로 CGI 프로그래머가 아니더라도 피드백 양식은 많은 기능을 제공합니다. JavaScript를 사용하여 피드백 양식에 다양한 기능을 추가할 수 있습니다. 그리고 클라이언트 CGI의 도움이 필요하지 않습니다.
피드백 양식의 작동 방식을 이해하지 못한다면 HTML 소개에서 관련 과정을 수강하세요. 그럼 이 수업을 공부해 보세요.
우선 자바스크립트에서는 피드백 양식도 객체 배열에 저장됩니다. window.document.images[0]을 통해 이미지 배열의 첫 번째 이미지를 호출할 수 있으며, window.document.forms[0]을 사용하여 피드백 양식 배열의 첫 번째 양식을 호출할 수도 있습니다. 이미지의 이름을 지정하고 피드백 양식의 이름도 유사하게 지정할 수 있습니다. 예를 들어 피드백 양식
이 다음과 같이 프로그래밍된 경우:
다음 두 가지 중 하나에서 양식을 참조할 수 있습니다. 방법:
var the_form = window.document.forms[0];
var the_same_form = window.document.first_form;
양식 내의 요소를 참조해야 하는 경우가 더 많습니다. 예를 들어 위 예의 텍스트 필드입니다.
링크 위로 마우스를 밀어서 어떤 일이 일어나는지 확인하세요.
그렇습니다. 그렇지 않습니다.
텍스트 필드의 값을 변경하면 이러한 놀라운 변화를 이룰 수 있습니다.
텍스트 필드의 링크를 다음으로 변경합니다.
폼이 첫 번째 폼을 호출하고 값을 'Clap clap!'으로 설정한다는 뜻입니다. 두 번째 줄도 비슷한 효과를 냅니다. 이는 이미지의 src를 변경하는 것과 매우 유사합니다. 단지 텍스트 필드가 값을 변경한다는 것뿐입니다.
비슷한 방법을 사용하여 텍스트 영역의 값을 변경할 수 있습니다.
1부 2부
양식 코드:
