1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<!-- 텍스트를 변경할 대상 요소 -->
<p id="demo">JavaScript can change HTML content.</p>
<!-- 색상과 텍스트를 변경하는 버튼 -->
<button type="button" onclick='
// #demo 요소의 내용을 "Hello JavaScript!"로 변경
document.getElementById("demo").innerHTML = "Hello JavaScript!";
// 배경색을 빨간색으로 변경
document.body.bgColor="red"'>Change</button>
<!-- 원래 텍스트와 배경색으로 복원하는 버튼 -->
<button type="button" onclick='
// #demo 요소의 내용을 초기 상태로 복원
document.getElementById("demo").innerHTML = "JavaScript can change HTML content.";
// 배경색을 초기 상태로 복원
document.body.bgColor=""'>Reset</button>
</body>
</html>2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
자바스크립트는 인터프리터 언어이며, 이는 코드를 실행할 때 즉석에서 해석한다는 의미입니다.
자바스크립트에서의 객체는 모든 요소가 객체로 취급됩니다.
-->
<script>
// 자바스크립트가 페이지의 모든 요소가 로드된 후 실행되도록 설정
window.onload = function() {
// 콘솔에 현재 문서의 body 요소를 출력
console.dir(window.document.body);
// id 값을 사용하여 HTML 요소를 참조
var demo = document.getElementById('demo');
var clickBtn = document.getElementById('clickBtn');
var resetBtn = document.getElementById('resetBtn');
// 클릭 버튼이 클릭되었을 때 실행될 함수 설정
clickBtn.onclick = function() {
// 콘솔에 클릭된 것을 로그로 출력
console.log("클릭되었다!");
// #demo 요소의 내용을 변경
demo.innerHTML = "<h2>버튼이 클릭 되었다!</h2>";
// 배경색을 분홍색으로 변경
document.body.bgColor = "pink";
}
// 리셋 버튼이 클릭되었을 때 실행될 함수 설정
resetBtn.onclick = function() {
// #demo 요소의 내용을 초기 상태로 복원
demo.innerHTML = "JavaScript can change HTML content.";
// 배경색을 초기 상태로 복원
document.body.bgColor = "";
}
}
</script>
</head>
<body>
<!-- 초기 상태의 텍스트를 가진 p 요소 -->
<p id="demo">JavaScript can change HTML content.</p>
<!-- 클릭 시 텍스트와 배경색을 변경하는 버튼 -->
<button type="button" id="clickBtn">Click</button>
<!-- 초기 상태로 복원하는 버튼 -->
<button type="button" id="resetBtn">Reset</button>
</body>
</html>
버튼 클릭 이벤트를 처리하여 HTML 콘텐츠와 배경색을 변경하는 방법을 보여준다.
window.onload 이벤트로 페이지가 로드되면 실행되며, getElementById로 요소를 선택한다.
버튼 클릭 시 콘솔에 메시지를 출력하고, demo 요소의 내용을 변경하며, 배경색을 핑크로 바꾼다.
리셋 버튼 클릭 시 내용과 배경색을 초기화한다.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
// 메모 입력 필드와 대상 요소, 버튼 요소를 참조
var memoTxt = document.getElementById('memoTxt');
var demo = document.querySelector('#demo');
var clickBtn = document.querySelector('#clickBtn');
var resetBtn = document.querySelector('#resetBtn');
// 클릭 버튼에 클릭 이벤트 리스너 추가
clickBtn.addEventListener('click', function(event) {
// 1. 메모 입력 필드에서 데이터를 가져옴
var memoTxtVal = memoTxt.value;
// 2. 가져온 데이터를 #demo 요소의 텍스트로 변경
demo.innerHTML = memoTxtVal;
// 3. 메모 입력 필드를 초기화하고 포커스를 설정
memoTxt.value = "";
memoTxt.focus();
});
}
</script>
</head>
<body>
<!-- 메모 입력 필드 -->
메모: <input type="text" id="memoTxt" value="안녕 세계">
<!-- 변경된 내용을 표시할 p 요소 -->
<p id="demo">JavaScript can change HTML content.</p>
<!-- 메모 내용을 #demo에 표시하는 버튼 -->
<button type="button" id="clickBtn">Click</button>
<!-- (현재 기능 없음) 리셋 버튼 -->
<button type="button" id="resetBtn">Reset</button>
</body>
</html> querySelector를 사용하여 요소를 선택하고,
버튼 클릭 시 입력된 메모를 표시하는 방법을 보여준다.
window.onload 이벤트로 페이지가 로드되면 실행되고,
querySelector로 CSS 선택자를 사용해 요소를 선택한다.
버튼 클릭 이벤트가 발생하면 입력된 텍스트를 demo 요소에 표시하고, 입력 필드를 초기화한다.4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
// 메모 입력 필드와 텍스트 표시 요소, 버튼 요소를 참조
var memoTxt = document.getElementById('memoTxt');
var demo = document.querySelector('#demo');
var clickBtn = document.querySelector('#clickBtn');
var resetBtn = document.querySelector('#resetBtn');
// 이벤트 핸들러 함수를 정의
var handleEvent = function(event) {
// 메모 입력 필드의 값을 #demo 요소에 추가
demo.innerHTML += "<br>" + memoTxt.value;
// 입력 필드를 초기화하고 포커스를 설정
memoTxt.value = "";
memoTxt.focus();
}
// 클릭 버튼에 클릭 이벤트 리스너 추가
clickBtn.addEventListener('click', handleEvent);
// 메모 입력 필드에서 키보드 입력 이벤트 처리
memoTxt.addEventListener('keyup', function(event) {
// Enter 키가 눌렸는지 확인
if (event.keyCode === 13) {
// 이벤트 핸들러 함수를 호출
handleEvent(event);
}
});
}
</script>
</head>
<body>
<!-- 메모 입력 필드 -->
메모: <input type="text" id="memoTxt" value="안녕 세계">
<!-- 텍스트를 표시할 p 요소 -->
<p id="demo">JavaScript can change HTML content.</p>
<!-- 메모를 #demo에 추가하는 버튼 -->
<button type="button" id="clickBtn">Click</button>
<!-- (현재 기능 없음) 리셋 버튼 -->
<button type="button" id="resetBtn">Reset</button>
</body>
</html>
입력 필드에서 Enter 키를 눌렀을 때 이벤트를 처리하는 방법을 보여준다.
window.onload 이벤트로 페이지가 로드되면 실행되고,
getElementById와 querySelector로 요소를 선택한다.
Enter 키가 눌리면 메모를 demo 요소에 추가하고, 입력 필드를 초기화한다.
클릭 이벤트와 Enter 키 이벤트 모두 동일한 함수에서 처리된다.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script>
// 초기 todo 목록
var todoList = [
{ seq: 101, title: "여기다가 1" },
{ seq: 102, title: "todo 목록 2" },
{ seq: 103, title: "todo 목록 3" }
];
// 페이지가 로드되면 실행되는 함수
window.onload = function() {
// HTML 요소를 변수에 참조
var todoTxt = document.getElementById('todoTxt');
var todoTable = document.getElementById('todoTable');
var addBtn = document.getElementById('addBtn');
var seq = 104; // 새로 추가될 항목의 고유번호
// todo 목록을 테이블에 출력하는 함수
function displayTodoList() {
var html = '';
todoList.forEach(function(item) {
// 각 항목을 테이블의 행으로 추가
html += '<tr><td>' + item.seq + '</td><td>' + item.title + '</td></tr>';
});
// 테이블의 tbody에 HTML을 삽입
todoTable.innerHTML = html;
}
// 할 일을 추가하는 함수
function addTodo() {
var todoTxtVal = todoTxt.value;
if (todoTxtVal) {
// 새 할 일을 목록에 추가
todoList.push({ seq: seq++, title: todoTxtVal });
// 입력 필드를 비우고 포커스를 설정
todoTxt.value = '';
todoTxt.focus();
// 목록을 업데이트하여 화면에 표시
displayTodoList();
}
}
// 추가 버튼 클릭 시 할 일을 추가하는 이벤트 핸들러
addBtn.addEventListener('click', addTodo);
// 입력 필드에서 Enter 키 입력 시 할 일을 추가하는 이벤트 핸들러
todoTxt.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
addTodo();
}
});
// 초기 todo 목록을 화면에 표시
displayTodoList();
}
</script>
</head>
<body>
<h2>Todo List</h2>
<!-- 할 일을 입력할 텍스트 필드 -->
<input type="text" id="todoTxt" placeholder="할 일을 입력하세요">
<!-- 할 일을 추가하는 버튼 -->
<button id="addBtn">추가</button>
<!-- todo 목록을 표시할 테이블 -->
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>할 일</th>
</tr>
</thead>
<tbody id="todoTable">
</tbody>
</table>
</body>
</html>간단한 Todo List를 구현하는 방법을 보여준다.
초기 todo 목록을 배열로 정의하고, 페이지가 로드되면 displayTodoList 함수로 목록을 테이블에 출력한다.
addBtn 클릭 또는 Enter 키 이벤트가 발생하면 addTodo 함수가 실행되어 새로운 항목을 목록에 추가,
테이블을 업데이트한다. addTodo 함수는 입력된 텍스트를 가져와 목록에 추가하고 입력 필드를 초기화한다
