0808 HTML5 & JavaScript 수업
0809 수업
index.html
설명 : 메인 인덱스 역할을 한다. 다양한 HTML 예제로 이동할 수 있는 링크가 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
<body>
<h1>HTML and JavaScript Examples</h1>
<ul>
<li><a href="dom.html">DOM Manipulation</a></li>
<li><a href="event.html">Event Handling</a></li>
<li><a href="form.html">Form Handling</a></li>
<!-- More links to other files -->
</ul>
</body>
dom.html
이 파일에서는 DOM(Document Object Model)을 조작하는 방법을 다룬다. 자바스크립트를 사용해 HTML 요소를 동적으로 수정하는 예제를 포함하고 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
<body>
<h1>DOM Manipulation</h1>
<p id="text">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("text").innerHTML = "Text has been changed!";
}
</script>
</body>
event.html
이 파일에서는 자바스크립트로 이벤트를 처리하는 방법을 설명한다. 클릭 이벤트와 같은 사용자 인터랙션을 처리하는 방법을 다루고 있다.
주요 코드:
1
2
3
4
<body>
<h1>Event Handling</h1>
<button onclick="alert('Button Clicked!')">Click Me</button>
</body>
event1.html
좀 더 복잡한 이벤트 처리를 다룬다. 이벤트 리스너를 사용해 여러 요소에 이벤트를 적용하는 방법을 설명한다.
주요 코드:
1
2
3
4
5
6
<body>
<h1>Advanced Event Handling</h1>
<button id="btn">Click Me</button>
<script src="js/event.js"></script>
</body>
form.html
이 파일에서는 기본적인 폼 처리를 다룬다. 사용자가 입력한 데이터를 자바스크립트를 통해 처리하는 방법을 설명한다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<h1>Form Handling</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
let name = document.getElementById("name").value;
if (name == "") {
alert("Name must be filled out");
return false;
}
return true;
}
</script>
</body>
form1.html
이 파일에서는 폼 데이터를 자바스크립트를 통해 유효성 검사를 하는 방법을 설명한다. 입력 값이 특정 조건을 만족하는지 확인하는 로직이 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<h1>Form Validation</h1>
<form onsubmit="return validateEmail()">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" value="Submit">
</form>
<script>
function validateEmail() {
let email = document.getElementById("email").value;
if (email.indexOf("@") == -1) {
alert("Invalid email address");
return false;
}
return true;
}
</script>
</body>
form2.html
이 파일에서는 폼을 제출할 때 발생하는 다양한 이벤트를 처리하는 방법을 설명한다. 제출 전후의 동작을 자바스크립트로 제어하는 예제가 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<h1>Form Submit Events</h1>
<form onsubmit="handleSubmit(event)">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script>
function handleSubmit(event) {
event.preventDefault();
let username = document.getElementById("username").value;
alert("Form submitted! Username: " + username);
}
</script>
</body>
js/event.js
이 자바스크립트 파일은 이벤트 처리 로직을 정의한다. HTML 파일에서 이벤트 리스너를 등록하고, 이벤트 발생 시 실행될 함수를 포함하고 있다.
주요 코드:
1
2
3
document.getElementById("btn").addEventListener("click", function() {
alert("Button was clicked!");
});
This post is licensed under CC BY 4.0 by the author.