HTML 이벤트 속성 (Event Attributes) 은 HTML 요소에 기능을 추가하는 데 사용됩니다. 사용자가 버튼을 클릭하거나 양식을 제출하는 등 특정 이벤트가 발생하면 JavaScript 코드를 실행할 수 있습니다. 이 랩에서는 HTML 이벤트 속성을 사용하여 웹 페이지에 상호 작용성을 추가하는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 새 파일을 만들고 기본 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML Event Attributes Lab</title>
</head>
<body></body>
</html>HTML 문서의 body에 button 요소를 추가합니다. 표시할 텍스트와 JavaScript 코드에서 참조할 수 있도록 id 속성을 지정합니다.
<button id="myButton">Click Here</button>button 요소에 onclick 속성을 추가합니다. 이 속성에는 버튼을 클릭했을 때 실행될 JavaScript 코드를 지정합니다.
<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>HTML 문서의 body에 div 요소를 추가합니다. 이 요소는 버튼을 클릭했을 때 텍스트를 표시하는 데 사용됩니다.
<div id="myDiv"></div>다음으로, 버튼을 클릭했을 때 div 요소의 텍스트를 업데이트하는 JavaScript 코드를 추가합니다.
<button
id="myButton"
onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
Click Here
</button>
<div id="myDiv"></div>HTML 문서의 body에 HTML 폼을 추가합니다. 또한, 폼이 제출될 때 실행될 JavaScript 코드를 지정하기 위해 폼에 onsubmit 속성을 추가합니다.
<form onsubmit="alert('Form Submitted!')">
<input type="text" name="firstName" placeholder="First Name" />
<input type="text" name="lastName" placeholder="Last Name" />
<br />
<button type="submit">Submit</button>
</form>HTML 에서 직접 이벤트 속성을 사용하는 대신, JavaScript 를 사용하여 HTML 요소에 이벤트 리스너 (event listener) 를 연결할 수도 있습니다.
먼저, HTML 요소에서 onclick 및 onsubmit 속성을 제거합니다.
<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<form>
<input type="text" name="firstName" placeholder="First Name" />
<input type="text" name="lastName" placeholder="Last Name" />
<br />
<button type="submit">Submit</button>
</form>다음으로, 버튼을 클릭했을 때 호출될 JavaScript 함수를 생성합니다. 이 함수는 div 요소의 텍스트를 업데이트해야 합니다.
<script>
function handleButtonClick() {
document.getElementById("myDiv").innerHTML = "Hello, World!";
}
</script>마지막으로, JavaScript 를 사용하여 버튼에 이벤트 리스너를 연결합니다.
<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
document
.getElementById("myButton")
.addEventListener("click", handleButtonClick);
</script>JavaScript 를 사용하여 이벤트 리스너를 제거할 수도 있습니다.
HTML 문서에 새 버튼을 추가합니다. 이 버튼은 첫 번째 버튼에서 클릭 이벤트 리스너를 제거합니다.
<button id="removeButton">Remove Click Event Listener</button>다음으로, 첫 번째 버튼에서 클릭 이벤트 리스너를 제거할 새 JavaScript 함수를 생성합니다.
<script>
function removeClickListener() {
document
.getElementById("myButton")
.removeEventListener("click", handleButtonClick);
}
</script>마지막으로, 클릭 시 removeClickListener() 함수를 호출하는 이벤트 리스너를 새 버튼에 연결합니다.
<button id="removeButton">Remove Click Event Listener</button>
<script>
document
.getElementById("removeButton")
.addEventListener("click", removeClickListener);
</script>이 랩에서는 HTML 이벤트 속성 (Event Attributes) 을 사용하여 웹 페이지에 상호 작용성을 추가하는 방법을 배웠습니다. 또한 JavaScript 를 사용하여 HTML 요소에 이벤트 리스너 (event listener) 를 연결하고 제거하는 방법도 배웠습니다. 이러한 도구를 사용하면 사용자 입력에 응답하는 동적 웹 페이지를 만들 수 있습니다.
