Javascript Project
1. 구구단
*애플리케이션의 목적 :
사용자의 요구에 대응하는 서비스를 만든다. '예외 처리'가 아주 중요!!
1.1 예외 처리 :
* 입력된 값이 숫자인지 체크:
isNaN()
typeof1.1.1isNaN()
숫자가 아닐시 true return
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN
1.1.2typeof
변수가 number일경우 'number'라는 스트링 반환
2. 할일 목록
<body>
<h1 id="title">할 일 목록</h1>
<button id="addBtn">목록추가</button>
<ul id="todo">
<li>제목1</li>
<li>제목2</li>
<li>제목3</li>
<li>제목4</li>
</ul>
<script>
//변수 초기화
const title = document.getElementById("title");
const addBtn = document.getElementById("addBtn");
const todo = document.getElementById("todo");
const list = document.querySelectorAll("li");
//목록추가 이벤트
addBtn.addEventListener("click", function(e) {
const inputText = prompt("텍스트 입력");
if (!inputText || inputText === "") {
return;
}
const li = document.createElement("li");
li.appendChild(document.createTextNode(inputText));
todo.appendChild(li);
});
//이벤트 위임, 동적으로 생성된 'li' 엘리먼트
//에게도 이벤트를 전달하기 위해서
todo.addEventListener("click", callback);
function callback(e) {
if (e.target && e.target.nodeName === "LI") {
title.innerText = e.target.innerText;
const siblings = e.target.parentNode.childNodes;
siblings.forEach(el => {
if (el.nodeType === Node.ELEMENT_NODE) {
el.removeAttribute("class");
}
});
e.target.setAttribute("class", "active");
}
}
</script>
</body>3. 계산기
3.1 Form
:정보를 입력받는 태그
사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자