이 랩에서는 JavaScript 를 사용하여 폼 입력 이벤트를 처리하는 방법을 배우고, 대화형이며 사용자 친화적인 입력 필드를 만드는 데 중점을 둡니다. 이 랩은 학습자가 HTML 구조를 설정하고, onfocus 및 onblur와 같은 동적 이벤트 처리 기술을 구현하며, 사용자 상호 작용을 향상시키기 위해 사용자 정의 스타일을 적용하는 과정을 안내합니다.
단계별 프로세스는 기본 텍스트가 있는 입력 필드를 생성하고, 사용자 상호 작용에 따라 입력 텍스트를 지우고 복원하는 JavaScript 를 작성하며, CSS 를 통해 시각적 피드백을 적용하는 내용을 다룹니다. 랩이 끝나면 참가자는 폼 입력을 프로그래밍 방식으로 조작하고, 사용자 경험을 개선하며, 이벤트 기반 웹 개발에 대한 실용적인 기술을 습득하게 됩니다.
이 단계에서는 JavaScript 이벤트 처리를 시연할 폼 입력에 대한 기본 HTML 구조를 생성합니다. JavaScript 이벤트를 사용하여 동적으로 조작될 기본 텍스트가 있는 간단한 입력 필드를 설정합니다.
WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 새 파일을 만듭니다. 먼저 입력 필드가 있는 기본 HTML5 구조를 생성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
</body>
</html>이 HTML 구조의 주요 요소를 살펴보겠습니다.
nameInput의 id를 가진 간단한 입력 필드를 만들었습니다.form-input을 추가했습니다.이 HTML 파일을 브라우저에서 열 때의 예시 출력:
이제 입력 필드는 다음 단계에서 JavaScript 이벤트 처리를 추가할 준비가 되었습니다. 다음 단계에서 onfocus 및 onblur 이벤트를 시연하기 위해 이 구조를 사용합니다.
이 단계에서는 입력 필드가 포커스를 받을 때 기본 텍스트를 지우는 onfocus 이벤트를 구현하기 위해 JavaScript 를 추가합니다. WebIDE 에서 index.html 파일을 열고 이벤트 처리 로직이 포함된 <script> 태그를 포함하도록 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
onfocus="clearDefaultText(this)"
/>
</div>
<script>
function clearDefaultText(input) {
// Check if the current value is the default text
if (input.value === "Enter your name") {
// Clear the input field
input.value = "";
}
}
</script>
</body>
</html>주요 변경 사항을 살펴보겠습니다.
onfocus 속성을 추가하여 입력이 포커스를 받으면 clearDefaultText() 함수를 호출합니다.clearDefaultText() 함수는 현재 값이 기본 텍스트인지 확인합니다.예시 상호 작용:
이 접근 방식은 사용자가 자신의 정보를 입력할 준비가 되었을 때 기본 텍스트를 제거하여 깔끔한 사용자 경험을 제공합니다.
이 단계에서는 사용자가 텍스트를 입력하지 않고 입력 필드를 벗어날 경우 기본 텍스트를 복원하는 onblur 이벤트 핸들러를 추가하여 입력 필드를 개선합니다. WebIDE 에서 index.html 파일을 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
onfocus="clearDefaultText(this)"
onblur="restoreDefaultText(this)"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
// If the input is empty, restore the default text
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>이 단계의 주요 변경 사항:
onblur 속성을 추가하여 입력이 포커스를 잃을 때 restoreDefaultText() 함수를 호출합니다.restoreDefaultText() 함수를 생성했습니다.
trim() 사용).예시 상호 작용:
이 접근 방식은 다음을 통해 부드러운 사용자 경험을 제공합니다.
이 단계에서는 입력 필드가 포커스를 받을 때 동적 스타일을 추가하여 사용자 경험을 향상시킵니다. WebIDE 에서 index.html 파일을 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #4caf50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
onfocus="clearDefaultText(this)"
onblur="restoreDefaultText(this)"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>주요 스타일 변경 사항:
.form-input 클래스에 대한 CSS 추가:
:focus 의사 클래스 스타일 추가:
예시 시각적 변경 사항:
이 스타일 지정은 사용자에게 시각적 피드백을 제공하여 입력 필드의 상호 작용 경험을 향상시킵니다.
이 마지막 단계에서는 보다 강력한 사용자 경험을 만들기 위해 추가 유효성 검사 및 이벤트 처리를 통해 입력 필드를 개선합니다. WebIDE 에서 index.html 파일을 다음 코드로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
margin-bottom: 20px;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
width: 300px;
}
.form-input:focus {
outline: none;
border-color: #4caf50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
#validationMessage {
color: #4caf50;
font-weight: bold;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
onfocus="clearDefaultText(this)"
onblur="restoreDefaultText(this)"
oninput="validateInput(this)"
/>
</div>
<div id="validationMessage"></div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
function validateInput(input) {
const validationMessage = document.getElementById("validationMessage");
if (input.value.length > 0 && input.value !== "Enter your name") {
// Basic validation: check name length
if (input.value.length < 2) {
validationMessage.textContent = "Name is too short!";
validationMessage.style.color = "red";
} else if (input.value.length > 20) {
validationMessage.textContent = "Name is too long!";
validationMessage.style.color = "red";
} else {
validationMessage.textContent = "Valid name entered!";
validationMessage.style.color = "#4CAF50";
}
} else {
validationMessage.textContent = "";
}
}
</script>
</body>
</html>이 단계의 주요 개선 사항:
oninput 이벤트를 추가했습니다.validateInput() 함수를 생성했습니다.
예시 상호 작용:
이 접근 방식은 다음을 보여줍니다.
이 랩에서는 참가자가 동적 텍스트 조작을 통해 대화형 입력 필드를 생성하여 JavaScript 를 사용하여 양식 입력 이벤트를 처리하는 방법을 배웁니다. 이 랩은 학습자가 기본 입력 값을 사용하여 HTML 구조를 설정하고, 사용자 상호 작용을 향상시키기 위해 onfocus 및 onblur 이벤트를 구현하고, 입력 필드가 선택될 때 시각적 피드백을 제공하기 위해 CSS 스타일을 적용하는 과정을 안내합니다.
단계별 접근 방식은 반응형 HTML 레이아웃 생성, JavaScript 이벤트 리스너를 사용하여 입력 동작 수정, 사용자 인터페이스 개선을 위한 CSS 스타일 적용을 포함한 기본적인 웹 개발 기술을 다룹니다. 이러한 실용적인 단계를 따르면 참가자는 핵심 웹 기술을 사용하여 보다 직관적이고 사용자 친화적인 양식 상호 작용을 만드는 데 실질적인 경험을 얻게 됩니다.
