많이 쓰게 될 메소드 Array.from(), 유사배열과 배열
1. 유사배열이란? DOM요소로 여러개를 가져와서 콘솔에 찍어봤다. className을 work-box라고 가진 div인데 총 3개이다. 배열로 들어와서 콘솔에 찍어볼 수 있다. console.log(workBox[1])이렇게 찍어보면 1번째 요소를 가져올 수도 있다. 여기까진 배열하고 똑같다. map메소드를 이용해서 요소를 순서대로 하나씩 콘솔에 찍어보려 했는데 map을 사용할 수 없다. 배열은 map을 쓸수 있는데? 배열처럼 보이지만 사실 key로 숫자를 가지고 있고, length값을 가지고 있는 객체를 유사배열객체라고 한다. 그래서 map, filter, reduce같은 메소드를 사용할 수 없는 것이다. 그럼 내가 손으로 객체에 숫자를 key로 가지고 length값을 가지는 객체를 만들면 유사배열이..
todolist 모두 정리
이번에 만든 todolist는 데이터베이스를 사용하지 않고 localStorage를 사용해서 작업했다. 로컬스토리지도 JSON으로 데이터를 주고 받는 것은 동일하다 혼자 처음부터 끝까지 만들어보고 총정리 하는 내용 단순한 submit 이벤트 등록. 봐야할 점은 input value를 todovalue로 저장하고 Object를 만들었다. 나중에 삭제하거나 수정할때를 생각해보면 각 데이터에 id가 있어야 구분할수 있으므로 객체형태로 만들고 id를 부여했다. toDos는 let으로 선언한 빈 array이다. let toDos = []; toDos가 계속해서 update되므로 let으로 선언했다. submit이 발생될때마다 그 object가 toDos배열에 push될것이고, 그 후 saveTodo가 실행되면 그..
document keydown event
오래간만의 front end 작업 영상에 들어가는 controller의 기능을 만들고 css까지 마치고 나서 유튜브처럼 영상을 클릭하거나 스페이스바를 눌렀을때 영상을 재생하고 멈추는 기능을 추가해보라는 코드첼린지가 있었다. 다행히 클릭은 아주 쉬웠다. video element를 getElementById를 통해 받아와서 click이벤트를 만들었다. 그리고 클릭할때 비디오가 멈춰있으면 재생시키고, 재생되고 있으면 멈추는 함수를 만들었다. 여기서 paused()는 getter이고 pause()는 setter이다. 그리고 스페이스바를 눌렀을때 이벤트를 찾아보니 keydown이라는 이벤트를 찾아서 등록해줬다. const handleKeydown = (event)=>{console.log(event)}를 찍어보니..
연습문제 오답노트. 문자열 대문자로 바꾸는 함수
문장의 각 단어의 맨 앞 철자를 모두 대문자로 바꿔주는 함수 만들기 1. 문자열을 각 단어들의 배열로 바꾸기 -> 띄어쓰기를 기준으로 문자열을 split으로 나눈다. 배열을 얻을수있다. 위에서 splitStr은 배열형태이다. 2. 배열의 각 요소의 첫번째 알파벳을 대문자로 바꾸기 -> 배열의 인덱스를 for문으로 돌아가며 각 요소를 가져온다. 그리고 charAt(0)으로 첫번째 알파벳을 선택하고 대문자로 만들어준다. 그러고 나면 대문자 알파벳 하나만 있기 때문에 두번째 알바벳부터 slice로 잘라서 뒤에다가 더해준다. 3. 다시 문자열로 바꾸기 -> 이것들을 빈 배열에 차곡차곡 쌓았다가. 배열의 join메소드를 사용해서 문자열로 만들어 준다. 1. 문자열을 각 단어들의 배열로 바꾸기 2. 배열의 각 요소..
반복문 break, continue의 차이
반복문을 돌다가 조건에 맞아 break를 만나면 다음 코드를 실행하지 않고 반복문을 멈추고 나간다. continue를 만나면 다음 코드를 실행하지 않고 반복문의 처음으로 돌아간다. 연습문제 1부터 10까지 반복하면서 짝수만 싹 더해서 출력하는 코드를 만들어라. 위에 내가 한거. i가 1부터 10까지 반복하는데, 2로 나눠서 나머지가 없으면(짝수면) sum에 i를 중첩해서 더하고 짝수가 아니라면 처음으로 돌아가라. 라는 뜻으로 else에 continue를 넣었는데 의미가 없는건가? continue대신 break를 넣어봤을때 0밖에 안나오는 것으로봐서 의미가 없지는 않았지만 굳이 추가할 필요는 없다.
addEventListener 함수 실행 시 브라우저가 하는일
loginForm.addEventListener("submit", onLoginSubmit); 마지막에 이 코드에서 브라우저가 하는 일 loginForm에서 submit이벤트가 발생하면 onLoginSubmit이라는 함수를 실행한다. 여기서 중요한 점은 onLoginSubmit함수를 실행할때 그냥 onLoginSubmit() 이렇게 실행하는게 아니라는 점. 브라우저는 addEventListener의 이밴트를 실행할 때 함수의 첫번째 attribute로 항상 "방금일어난 이밴트에 대한 정보"를 제공한다. 사실은 onLoginSubmit(이밴트에 대한 정보) 를 실행하게 되는 것이다. function onLoginSubmit(event) { event.preventDefault(); console.log(e..