전체 글(129)
-
Day33 : scope
Scope 변수 참조의 유효범위 전역 스코프 / 지역스코프 전역 스코프 (global scope) 전역 스코프에서 선언된 변수들은 지역 스코프에서 참조 가능 지역 스코프 (local scope) 함수마다 지역 스코프가 생겨난다. 지역 스코프 안의 변수는 지역 스코프 밖에서 사용할 수 없다. 함수레벨스코프 / 블록레벨스코프 두 조건에 따라 생성될 수 있다. 함수레벨 scope 함수 내부의 scope var (o) let (o) 1 2 3 const sum = function() { var x = 0; } console.log(x) cs 결과 : undefined → var로 선언된 함수 내부에서만 유효한 변수이기 때문 블록레벨 scope 중괄호 사용할 때의 범위 (if, for) var (x) let (o..
2024.02.02 -
Day32 : querySelectorAll, classList
할 일들이 쌓여있으니 지저분하다. 더블 클릭 하면 삭제되는 기능을 추가하자. 목록을 삭제해줄 것이니까 의 remove메소드를 사용한다. 더블클릭했더니 삭제됐다. querySelectorAll() - 소괄호 안에 들어온 그 값을 기준으로 해당 태그들을 모두 가져온다. 들을 생성하고 전체 삭제 버튼을 누르면 querySelectorAll에 대한 결과로 배열이 생성된다. 반복문을 이용해서 바로 배열의 원소들을 삭제해준다. '전체 삭제' 버튼을 누르면 다 사라진다. todo-list를 계속 쓸 수 있도록 local Storage를 사용하자. todoList를 밖으로 뺀다. (#todo-list 는 를 담고 있다.) todoList.children → 의 원소를 배열로 가진다. children - 하위에 존재하고..
2024.02.01 -
Day31 : createElement, addEventListener
현재 todo-list의 결함은 수행 여부를 알 수 없는 것이다. 그러므로 수행한 일정에 대해서는 체크할 수 있는 버튼을 추가하자. 먼저 함수를 분리한다. 밑에 keyCodeCheck 함수는 입력창에 엔터키가 눌리고 내용이 있는지를 검사해서 그렇다면 위의 createTodo 함수를 실행시킨다. 입력된 할 일에 버튼을 추가할 것이기 때문에 태그 생성 메소드 createElement를 사용했다. createElement('생성할 태그') - tagName의 HTML 요소를 만들어 반환 할 일을 입력하면 button 태그가 생성되는 것을 확인했다. 새로운 버튼을 클릭했을 때 newLi 태그(li)에 담겨져 있는 이 요소에 어떠한 조작을 가하겠다. addEventListner('이벤트타입', 실행할 함수) - ..
2024.02.01 -
Day30 : createElement / appendChild
onkeydown 의 속성 중 하 해당하는 태그 영역 내에서 키보드 버튼이 눌렸을 때 동작한다. input 에 내용을 입력하고 엔터키를 누르면 리스트에 추가되도록 하고 싶다. input 에서 엔터키를 어떻게 구분하도록 할까? window 전역 객체 최상위에 가장 높은 공간에 존재 event 속성을 체크할 수 있다 *event : 이 페이지에 벌어지고 있는 어떠한 이벤트를 모두 체크할 수 있다. 'A'를 input에 입력한 뒤 event를 체크해보자 'A'의 아스키코드가 keyCode에 들어가는 것을 알 수 있다. 이를 통해 엔터키의 keyCode(13)가 나오는 경우 리스트에 추가되도록 하는 조건문을 걸면 된다. input에 들어온 값을 리스트에 추가하려면 js로 html 태그 를 생성해야한다는 말이다...
2024.01.22 -
Day29 : DOM
DOM Document Object Mode 브라우저가 html 문서를 파싱하는 과정에서 생겨나는 객체 트리구조 *파싱 : 브라우저가 html 문서를 해석하는 것 html 페이지에서 document.querySelctor 등 document를 사용하는 경우가 있는데 그 document가 바로 DOM객체를 의미한다.
2024.01.18 -
Day28 : <ul> <ol>
unordered list의 약자 순서가 없는 목록 ordered list의 약자 순서가 있는 목록
2024.01.18