JavaScript만으로 위와같이 input칸에 입력을 하고, 'Add Goal'버튼을 누르면 아래에 입력값이 나오도록 하는 간단한 앱을 만들어보자.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" />
<button>Add Goal</button>
</div>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
html코드를 보면 body요소 안에 input, button, 그리고 ul태그가 있고,
자바스크립트 파일인 app.js를 연결시켜주었다.
js코드에서는
app.js
const buttonEl = document.querySelector('button'); //button태그에 접근
const inputEl = document.querySelector('input'); //input태그에 접근
const listEl = document.querySelector('ul'); //ul태그에 접근
function addGoal() {
const enteredValue = inputEl.value; //1.input태그에 입력값을 가져온다. value프로퍼티를 갖는다.
//순수 JS로, JS에 내장되어있다. 사용자가 input에 입력한 값을 추출한다.
const listItemEl = document.createElement('li'); //2.li요소를 생성한다. 브라우저에 내장된 메서드. JS로 새 DOM요소를 프로그래밍 방식으로 생성하게 한다.
listItemEl.textContent = enteredValue; //3.생성한 li요소에 input태그에 입력한 값을 추가. 텍스트내용을 설정. <li></li>안에 내용 설정.
listEl.appendChild(listItemEl); //4.input에 입력한 값을 추가한 li요소를 ul태그의 마지막 자식요소로 추가한다.(그래서 추가하면 리스트 마지막에 추가된다)
//appendChild대신, append해도된다.
inputEl.value = '';//5.input태그의 입력값은 빈 문자열로 변경한다.
}
buttonEl.addEventListener('click', addGoal);//두번째 인자는 click이 발생할때 실행되는 함수.button을 'click'하면 addGoal함수가 실행된다.
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section1] 8. Vue vs 순수 JS (0) | 2023.06.23 |
|---|---|
| [Udemy Vue 완벽가이드 Section1] 7. Vue로 앱 재구축하기 (0) | 2023.06.23 |
| [Udemy Vue 완벽가이드 Section1] 4. Vue 대안 알아보기 (0) | 2023.06.17 |
| [Udemy Vue 완벽가이드 Section1] 2. 'Vue.js'란 무엇인가? (2) | 2023.06.16 |
| [Udemy Vue 완벽가이드 Section5] 63. 템플릿 이해하기 (0) | 2023.01.29 |
