Comment on page
📗
First Experience
화면의 입력칸에 글씨를 써보세요. 여러분이 글씨를 쓰는 동시에 위에 동일한 글씨가 나타나는 것을 확인할 수 있습니다. 이번 학습 유닛에서는 자바스크립트의 세계에 입문해보겠습니다.
이전 학습 유닛에서 우리는 HTML이 웹페이지의 구조를 만들어주고 CSS가 웹페이지에 디자인을 입혀준다는 것을 배웠습니다. 자바스크립트는 웹페이지가 동적으로 움직이도록 만들어줄 수 있습니다. 동적으로 만든다는 것이 어떤 의미일까요?
자바스크립트는 HTML의 특정 요소(들)을 선택하여 다양한 "이벤트"(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을 수 있습니다. 자바스크립트는 발생하는 이벤트에 따라 HTML이나 CSS를 조작할 수도 있고 그 외에도 여러 가지를 할 수 있습니다.
위 예제의 경우, 자바스크립트를 이용하여 사용자의 키보드 입력을 감지하도록 하였고, 또 그에 따라
h1 요소를 수정하도록 하였습니다. 예제 링크에서 자바스크립트 부분을 보시면 코드가 보일 것입니다.const header = document.querySelector(".header");
const input = document.querySelector(".input");
input.onkeydown = function changeHeader () {
header.textContent = input.value;
};
현재 예제 코드에서 사용된 개념에 대해서 앞으로 몇몇 유닛에 걸쳐 설명드리겠습니다. 아직까지는 여러분이 모든 부분들에 대해 이해하기 어려울 것입니다. 하지만 곧 이해하게 되실테니 너무 걱정하지 마시고 차분히 각 유닛들을 공부하며 진행하시면 좋을것 같습니다.
우선 간략하게나마, 예제 코드에 대해 설명드리며 자바스크립트이 어떻게 웹페이지를 조작할 수 있는지에 대해 이해를 도와드리겠습니다.
- 1.HTML 요소들의 클래스명을 이용하여 각 클래스에 해당하는 요소들을 선택하고, 각각
header,input이라고 부르는 변수에 저장합니다.
const header = document.querySelector(".header");
const input = document.querySelector(".input");
- 1.키보드의 키를 누르는 이벤트(
keydown)에 대한 정보를 구독하고, 해당 이벤트가 발생했을때changeHeader라는 함수 를 호출한다.changeHeader함수가 호출되면,.header요소의 텍스트 내용을 사용자가 입력한 입력칸의 내용으로 대체한다.
input.onkeydown = function changeHeader () {
header.textContent = input.value;
};
위 코드에 대해 살펴본 후, 우리는 이제 자바스크립트로 웹페이지에 기능을 넣고 조작할 수 있다는 의미가 어떤 의미인지 조금 더 깨닫게 되었습니다.
- 1.HTML 찾기
- 자바스크립트를 이용하여 우리는
.header요소와input요소를 찾을 수 있었습니다.
- 2.이벤트에 구독하 고 응답하기
- 자바스크립트를 이용 하여 클릭이나 키를 누르는 행위 등을 감지할 수 있습니다.
- 3.HTML 수정
- 자바스크립트를 이용하여 우리는
.header요소의 텍스트를 수정하였습니다.
여러분이 지금 당장 위의 모든 코드 내용을 이해하기는 어렵습니다. 하지만, 자바스크립트를 이용하여 HTML 요소를 찾을 수 있고, 웹 화면 상의 동작들을 감지할 수 있고, HTML을 수정(삭제, 생성 등) 등의 다양한 작업을 할 수 있다는 사실만을 기억하시면 좋을것 같습니다.
Last modified 1yr ago