초급개발자의공부노트

1. paintTodo 함수 수정 1.1 X 버튼을 누르면 삭제를 하기 위해 delBtn에 이벤트리스너를 달아준다. 1.2 이벤트 리스너는 클릭이 발생했을 때 삭제를 하는 함수인 deleteToDo 를 넣었다. 2. deleteToDo(event) 함수 생성 2.1 이벤트 객체의 target에 접근하여 해당 객체를 얻는다. (버튼이 선택되었지만 부모가 누구인지 알 수 없다.) 2.2 해당 버튼에 대해서 부모를 찾는다. (parentNode) 2.3 toDoList 에 접근하여 도큐먼트에 있는 해당되는 li 요소를 removeChild 한다. 2.4 cleanToDos 변수를 하나 선언하고 toDos를 let 으로 변경한다. 2.5 filter는 array의 모든 아이템을 통해 함수를 실행한다. 즉 tru..

1. saveToDos() 함수 생성 - 이 함수는 localStorage 에 toDos 라는 key를 가지고 데이터를 저장하는 함수이다. - 여기서 JSON(JavaScript Object Notation)을 이용하여 오브젝트 형태인 데이터를 string 으로 저장한다. 2. paintTodo(text) 함수 - newId 라는 변수를 하나 생성하여 toDos(배열)의 길이만큼 +1을 더하여 Id 값을 부여하였다. - 그다음 li 요소에 id 라는 이름으로 newId를 지정함. - 텍스트와 id를 저장하는 오브젝트를 하나 만들어서 오브젝트가 배열에 push 를 하게된다. - 그 다음 saveToDos 함수를 이용하여 localStorage에 저장하게 한다. 3. loadToDos() - 이 함수는 새로..

todoList 만들기 1. index.html 파일 수정(일부) 1.1 form 하나를 만들고 class 명을 준다. 그 다음 텍스트 입력창을 하나 만든다. 1.2 ul을 하나 만들고 class 명을 준다. 1.3 마지막으로 todo.js 라는 파일을 하나 만들고 파일을 html 에서 포함시킨다. 2. todo.js 파일 2.1 우선 함수를 4개 만든다. init() , loadToDos(), handleSubmit(event), paintTodo(text) 2.2 그 다음 querySelector 로 js-toDoForm, input , js-toDoList 를 가져와 각각의 변수들에 담는다. 2.3 init() 초기화 함수 2.4 loadToDos() - 이 함수는 로컬 스토리지에있는 데이터를 가져..

노마드 코더의 모멘텀 클론코딩3-2 1. gretting.js 파일에 각각의 함수 추가 1.1 askForName() , handleSubmit(event) , saveName(text) 1.2 askForName 함수는 localStorage 에 아무런 데이터가 없을 때 인풋 값을 보여주게 하는 함수이다 1.3 그리고 form 에 대해서 submit 이 발생했을 때 handleSubmit 이라는 함수를 실행한다. 1.4 handleSubmit 함수에서는 event라는 이름의 매개변수를 받는다. 1.5 preventDefault() 라는 함수는 브라우저에서 엔터를 눌렀을 때 새로고침을 일어나지 않게 한다. 1.6 그다음 input 값의 value를 얻어 currentValue 라는 변수에 저장하고, 이전..

노마드 코더의 모멘텀 클론코딩3 이 단계에서 할 것 : User Name 을 입력받아 컴퓨터에 저장한다. 1. index 파일 수정 1.1 아래와 같이 index.html 파일에 form 과 input 을 넣고 form에 대해 클래스를 지정한다. 1.2 h4 태그를 선언하고 class 를 지정한다. 2. grettings.js 파일 생성 및 CSS 수정 2.1 먼저 html 파일에서 선언했던 요소들을 쓰기위해 querySelector 로 가져와야 한다. 2.2 먼저 부모요소인 도큐먼트에있는 js-form 이라는 클래스를 가져오고 그 다음 자식요소인 input 을 가져온다. 2.3 함수를 총 3개(paintGreeting, loadName, init) 을 만들어 주고 아래와 같이 코딩한다. 2.4 먼저 i..

노마드 코더의 모멘텀 클론코딩 2 여기서 알아야 할 것 : setInterval , 삼항연산 setInterval 함수 - 아래 사진과 같이 첫번째 인자로 실행할 함수를 넣고, 두번째 인자로는 실행시간(간격)을 넣는다. - 여기서 실행시간은 밀리세컨드 단위이기 때문에 1초마다 실행하려면 1000을 넣어야 한다. 삼항연산 - 아래와 같이 innerText 를 보면 작은 if문이라고 생각하면 된다. - 만약 시간이 10보다 작으면 True 일때는 0${hours} , False 일 경우는 그냥 시간을 출력한다. 결과 - 1초 마다 시간이 계속 업데이트 된다.

노마드 코더의 모멘텀 클론코딩 index.html - 우선 div 를 하나 선언하여 class 를 부여함. - div 안에 자식요소로 h1 태그를 넣음 clock.js - clock.js 파일에서는 먼저 도큐먼트에있는 클래스를 가져와 clockContainer 에 넣음 - 그 다음 clockContainer 안에 자식요소로 있는 h1 태그를 clockTitle에 넣음 - 그다음 함수를 하나 선언하여 Date 클래스를 선언하여... 이하 생략, 솔직히 기본적인 클래스를 선언하고 사용하는거라서 굳이 설명 안해도 될거같음. - 마지막으로 h1 태그의 innerText 에 접근하여 현재 시간을 출력한다. 여기서 새로고침을 하면 현재시간으로 업데이트 된다.

if-else (조건문) - 모든 프로그래밍 언어에서 볼 수 있는 조건문임 - 형식은 아래와 같음 물론 else if 도 있지 응용 먼저 css 파일을 아래와 같이 고침 index.js 파일 - rgb 값은 js 에서 console 로 색상을 찍어보면 나오는데 #34495e 와 같은색임 - init 이라는 초기화 함수 안에 색상을 BASE_COLOR로 지정하였고, 클릭 이벤트가 발생했을 때 handleClick 을 호출 한다. - currentColor 라는 변수 안에 현재 색상을 넣고, if 문으로 만약 BASE_COLOR 와 같으면 OTHER_COLOR 로 색상 변경 - else 인 경우는 그 반대로 실행 근데 위의 같은 방식경우 css를 건드리는거라 별로 ...... 아래 방식은 DOM

Event handlers - 자바스크립트는 이벤트에 반응하기 위해서 만들어 졌다. - 여기서 이벤트는 웹 사이트에서 발생하는 것이다. - 브라우저 크기 변경.. input .. 등등 window - window 객체는 브라우저 객체의 최상위객체로 브라우저에 대한 정보를 제공하는 다른 객체들을 가지고 있다. - 아래는 자주 사용하는 객체들임 window.open() 새로운 창을 오픈 window.alert() 경고용 대화창을 보여줌 prompt() 질의응답창을 띄움 confirm() 확인/취소값을 띄우고 true/false값을 반환한다 moveTo() 창의 위치를 이동시킨다 eval() 문자열로 입력된 숫자를 숫자로 변환, 계산해준다 focus() focus효과를 준다 valueOf() 오브젝트 값을 반..

DOM - 자바스크립트로 HTML 요소에 접근할 때 사용한다. - 아래와 같이 HTML 파일이 있고, h1 에 id로 title을 주었다. - 자바스크립트에서는 아래와 같이 접근한다. - document.getElementById("title"); 을 사용하여 해당 요소를 가져온다. - 크롬의 콘솔을 확인해 보면 아래와 같다. (title.innerHTML 은 잠시 지운 상태) - DOM 객체로 자바스크립트에서 바꾸면 아래와 같이 title이 변경된다.. 소스 코드도 살펴보면 아래와 같다. - 원본 HTML파일의 소스 코드는 바뀌지 않는다. - DOM 객체로 접근하면 매우 다양한 일을 할 수 있다.. - getElementById 말고도 아래와 같이 선택자들이 있다.