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..
21.12.28 어려웠던 부분 정리
노마드코더님 강의를 들으면서 이해가 어려웠던 부분 정리 위 코드는 querySelector로 hello클래스의 h1태그를 h1변수로 받아와서 h1.addEventListener로 "클릭했을때 handleTitleClick함수를 실행한다."는 코드이다. 클릭할때마다 파란색과 토마토색이 왔다갔다 변화되는 코드인데 h1.style.color가 너무 많이 반복되니 더 깔끔하고 좋은 코드를 만들어 보자. 이렇게 바꾼다고 하셨는데 let newColor부터 이해가 어렵다. 이를 이해하기 위해 알아야 할것. 1. currentColor는 getter로써, 최근 color값을 복사하는 역할이므로 const로 선언하는 것이 의미상 적절 2. newColor는 if조건문을 거치면서 변수에 대입된 색상값을 h1.style...
return과 console.log
console.log 와 return의 차이 처음에 책보면 전부다 console.log로 가르쳐줘서 이 기능이 이렇게 되는건 알겠는데.. 콘솔에 찍히는거 확인하는게 코딩이랑 무슨상관이지? 라는 생각을 했었다. 처음에 return으로 데이터를 받는 법을 알려주고 그걸 눈으로 확인하고 싶을 때 console.log를 찍어본다. 라고만 알려줘도 참 이해하기 쉬울것 같다. 콘솔로그를 하면 콘솔에 찍긴 찍지만 데이터가 들어있는 상태는 아님 그래서 undefined가 나옴 리턴을 해주면 콘솔에 찍히진 않지만 실제 데이터가 들어간 것을 확인할 수 있다. 즉 뭔가 코딩으로 데이터를 받아서 처리하려면 콘솔로그가 아니라 리턴으로 해야한다. 그리고 중요한거, 리턴을 하고나면 함수는 끝난다. 리턴을 만나서 되돌아가고 그런개념..