728x90
자바스크립트를 배우는 과정에서 좋은 참고자료가 될 것 같아 정리한 글이다.
다음과 같이 목록에서 하나씩 추가 또는 삭제할 수 있는 간단한 투두리스트를 만들어보자.
사전에 준비된 html, css를 가지고 시작한다.
주의해야 하는 부분??
window.onload = function(){...}
-> html이 다 로드되고 나서 js파일이 동작하게 한다. 지금과 같이 js파일을 head에서 연결해주는 경우 꼭 필요한 함수이다.
document.getElementsByClassName('...')[0] :
-> getElementsByClassName()는 getElementById와 다르게 Nodelist를 반환한다. class가 id와 다르게 html상에서 중복되어 사용될 수 있기 때문인데, 따라서 클래스이름으로 가져오는경우에 뒤에 인덱스를 붙여서 몇번째 class인지 표시해줘야 한다. (우리는 어차피 table__table이라는 클래스가 1개이므로 [0]을 사용하여 가져온다.)
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<head>
<script type="text/javascript" src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div id="App">
<div id="title" onclick="titleClickHandler(this)">
<h1>TO-DO LIST</h1>
</div>
<div id="table">
<table class="table__table">
<th>날짜</th>
<th>내용</th>
<th>삭제</th>
</table>
</div>
<div id="add-item">
<input type="text" name="" id="schedule" placeholder="일정 입력" />
<button id="add-button">추가</button>
</div>
</div>
</body>
|
cs |
Javascript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
window.onload = function() {
var add_button = document.getElementById('add-button');
var schedule = document.getElementById('schedule');
var now = new Date();
add_button.onclick = function(){
var tableRef = document.getElementsByClassName('table__table')[0];
//table에 행추가
var newRow = tableRef.insertRow();
var date_cell = newRow.insertCell(0);
var cont_cell = newRow.insertCell(1);
var del_cell = newRow.insertCell(2);
//각 cell에 내용 삽입
date_cell.innerHTML = now.toLocaleDateString();
cont_cell.innerHTML = schedule.value;
del_cell.innerHTML = '<button style="width:20px;height:20px;"></button>';
schedule.value='';
//삭제버튼 이벤트
del_cell.onclick = function(){
var del = confirm("정말 삭제하시겠습니까?");
if(del===true){
newRow.remove();
}
};
}
//enter시 추가
schedule.addEventListener("keypress",function(event){
if(event.key === 'Enter'){
event.preventDefault();
add_button.click();
schedule.value='';
}
})
}
|
cs |
728x90
'Languages > Javascript' 카테고리의 다른 글
| [Javascript] 간단한 mbti 설문 만들기 (0) | 2022.07.02 |
|---|---|
| [Javascript]간단한 자소서 글자수 계산기 만들기 (0) | 2022.06.27 |
댓글