목차 1. C.R.U.D 1.1 각 파트의 작업내용 요약 1.1.1. Create 1.1.2. Read 1.1.3. Update 1.1.4. Delete 2. C.R.U.D 작업과 설명 2.1. HTML 2.2. CSS 2.3. Javascript 2.3.1. Create 파트 2.3.2. Read 파트 2.3.3. Update 파트 2.3.4. Delete 파트 1. C.R.U.D 1.1 각 파트의 작업내용 요약 1.1.1 Create Create 부분에서 해결해야할 점은 내용의 저장이다. 댓글 입력폼에 내용을 입력 한 뒤 `submit`을 누르면 내용을 저장한다. 만약 입력폼이 비어있는 상태에서 `submit`을 누르면 경고 팝업을 띄운다.(alert) 댓글을 성공적으로 처리하면, 입력폼을 초기화 시..

목차 1. Counter 1.1. 계획 1.2. 실행 1.3. 확인 1.4. 개선 2. 댓글구현(C.R.U.D) 2.1. C.R.U.D 3. Create & Read 3.1. Create 3.2. Read 3.3. 코드 리팩터링 3.4. CR의 흐름 1. Counter 오늘은 `+` 버튼을 누르면 숫자가 1 증가하고, `-` 버튼을 누르면 숫자가 1 감소하는 `Counter`를 만들어 보도록하자. 어떻게 만들지 계획, 실행, 잘 작동하는지 확인하고, 작동이 안한다면 고쳐보는 순서로 진행한다. 1.1 계획 1. HTML과 CSS로 화면을 구성한다. - 을 보면 바뀌는 값은 1 부분이므로, "Value : " 부분과 숫자렌더 부분의 엘리먼트를 다르게 구성한다. - `+` 버튼과 `-` 버튼을 만든다. 2. ..

목차 1. Menu 구현하기 1.1. HTML 구성 1.2. CSS 구성 1.3. Javascript 구성 2. 버블정렬(Bubble Sort) 1. Menu 구현하기 메뉴에 커서를 올리면 서브메뉴가 나오도록 만들어보자. *구현순서* HTML : 메뉴에 커서를 올리면 서브메뉴가 나오도록 만든다. HTML : `li`안에 `ul, li`를 넣어 한 번에 나오도록 HTML을 구성한다. CSS : 취향껏 구성하되, 어느 부분에서 `display: none;`을 주어 숨겨놓을지 선택해야한다. Javascript : 부여된 CSS를 생각해서 이벤트를 줄 엘리먼트 잘 생각하기. 1.1 HTML 구성 li 안에 ul, li로 서브메뉴를 넣어 한 번에 나오도록 HTML을 구성했다. Logo 메뉴1 서브메뉴1-1 서브메..

목차 1. 구현 목표 2. 구현 코드 3. 구현 결과 1. 구현 목표 버튼을 눌러 슬라이드가 작동하도록 한다. 버튼 1, 2, 3을 만들어 각각 버튼을 눌렀을 때에 맞는 화면이 출력되도록 한다. 슬라이드의 갯수에 따라 자바스크립트를 따로 수정하지 않도록한다.(확장성) 슬라이드의 끝에 도달했을 경우에는 버튼을 눌러도 빈 화면으로 넘기지 않는다. 2. 구현 코드 HTML 버튼 1 버튼 2 버튼 3 이전 다음 CSS * { margin: 0; padding: 0; } ul, li { list-style: none; } #visual { position: relative; width: 1900px; height: 500px; margin: 0 auto; overflow: hidden; } #visual > #s..

목차 1. Event Loop 1.1. setTimeout과 setInterval 1.1.1 clearInterval 1.2. Event Loop 2. setInterval 메서드 활용하기 1. Event Loop Javascript의 환경은 힙과 콜스택으로 코드를 한 줄씩 실행 나간다. 이를 싱글스레드라고 한다. 하지만 Javascript가 작동하는 것을 보다보면, 싱글스레드 방식으로는 실행되지 않을 방식으로 로직이 구현되기도 한다. 이는 브라우저가 Js에서 제공하는 환경외의 것들을 지원해주기 떄문이다(Web APIs). 프로그래밍을 할 때, 모든 요소를 우리가 통제하기 위해서는 코드는 어떤 규칙에 의해 구현되는지 알아볼 필요가 있다. 몇가지 메서드로 이를 이해해보자. 1.1 setTimeout과 se..

목차 1. DOMContentLoaded 1.1. const box = document.querySelector(".box") // class = "box"를 선택하는 변수 console.log(box) // null 1.2 DOMContentLoaded 위의 1.1 에서 발생했던 문제점을 해소하기 위해서, "DOMContentLoaded"라는 이벤트에 대해 알아보자. 영역의 해석이 끝나는 시점을 이벤트의 발생으로 한다. 를 윗쪽에 위치시키더라도, 아랫쪽에 위치시킨 것처럼 JS의 효과를 적용시킬 수 있다. 1.2.1 DOMContentLoaded 사용방법 function init() { const box = document.querySelector(".box") console.log(box) // con..