📝 TIL

[TIL] JS DOM 이벤트, 이벤트 리스너, 노드, Easy PHP

✍ Today I Learned [Travel] 다시 만들어보기 이벤트가 발생하는 대상과, 바뀌어야 하는 대상, 이벤트 시점을 잘 생각하자. 변경해야 하는 css가 많은 경우 미리 class를 만들어 놓고 상황에 맞게 add(), remove() 메서드를 사용한다. 뭔가 찝찝하다 싶으면 항상 더 좋은 코드가 무엇인지 고민하기. HTMLCollection은 forEach() 메서드를 지원하지 않기 때문에 getElementByClassName()으로 불러온 값은 forEach() 메서드를 사용할 수 없다. (querySelectorAll()은 가능) [로그인 유효성 검사] onkeydown - 버튼이 눌렸을 때(input 요소에 글씨가 나타나기 전) onkeyup - 버튼이 올라왔을 때(input 요소에 ..

[TIL] JS HTML DOM

✍ Today I Learned DOM(Document Object Model)이란? XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. W3C 표준 객체모델이고, 다음과 같은 계층구조로 표현된다. W3C DOM 표준은 3가지 모델로 구분된다 1) Core DOM 2) HTML DOM 3) XML DOM 자바스크립트는 Document 객체를 이용하여 HTML, CSS 대부분의 요소에 접근, 변경할 수 있다. document.getElementById("id")는 무엇을 return 하는가? 주소 값, 엘리먼트, 객체, 태그 (전부 비슷한 의미) getElementById - 단일 Element를 return / getElementsByTagName - 복수 Elements를 return(HT..

[TIL] JS 숫자 야구 게임, BOM, 쿠키

✍ Today I Learned [숫자 야구 게임] 페이지가 리로딩되기 전까지의 게임이 기록되어야 하기 때문에 랜덤 숫자 생성은 버튼으로 하는 것이 좋다. if문에서는 실행될 확률이 높은 조건절을 위쪽으로 배치하는 것이 좋다. 나는 3S 상황이 가장 위쪽에 올라와있었는데 Out 상황의 확률이 더 높으므로 둘의 순서를 바꿔주었다. 기록을 측정하기 위해 시작 시간을 변수에 할당하는 시점은 함수의 가장 마지막 부분이어야 한다. 전역 변수의 선언이나 초기화는 스크립트의 시작 부분에서 하는 것이 좋다. 유저의 기록을 Map 구조에 저장했었는데 Index로 접근하여 정렬하는 것이 까다로운 관계로 Array와 Object의 조합으로 변경하는 것이 좋을 것 같다. 그러면 sort() 메서드를 이용해서 정렬할 수 있다...

[TIL] JS 함수, 클로저, call(), apply(), bind(), 구조분해할당

✍ Today I Learned [함수 Functions] 익명 함수란? 말 그대로 이름이 없는 함수. 예를 들면 함수 표현식에서 사용되는 함수는 변수를 통해 호출하기 때문에 함수 이름이 필요하지 않다. const x = function (a, b) {return a * b}; let z = x(4, 3); 함수를 만들어내는 자바스크립트 내장 함수 Function() 생성자를 사용하여 함수를 만들 수도 있다. 그러나 위의 익명 함수 코드와 동일하게 작동하기 때문에 굳이 사용할 필요는 없다. const myFunction = new Function("a", "b", "return a * b"); let x = myFunction(4, 3); 자바스크립트는 초기화가 아닌 선언만 호이스팅 되기 때문에 변수 선..

[TIL] JS 정규표현식, 생성자 함수, 프로토타입

✍ Today I Learned [정규 표현식 Regular Expression] 정규 표현식이란? 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 패턴이다. /검색패턴/플래그 search(/str/flag) - 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 첫 번째 문자열의 인덱스를 반환, 찾지 못하면 -1 반환 indexOf()와 다른 점은? search()는 시작 위치를 지정할 수 없다 indexOf()는 정규표현식을 사용할 수 없다 replace(/str/flag) - 지정된 값을 다른 값으로 바꾸고 새 문자열로 반환. 첫 일치 항목만 대체하고, 대소문자를 구분한다. 정규식을 함께 사용하면 더 편리하다. match(/str/flag) - 해당 문자열에서 인수로 전달받은 정규 표현식과 ..

[TIL] JS 클래스, JSON

✍ Today I Learned 스스로 하지 않으면 발전은 없다! 분발하자! [Style Guide] operator 양쪽에 공백 두기 변수 이름 시작에 숫자나 대문자 X 달러($) 기호로 이름을 시작하지 않기 파일명은 소문자로 하는 것을 추천 [Best practices] 전역 변수, new, ==, eval() 가급적 사용하지 않기 변수는 상단에 선언하고, 선언하면서 초기화 객체, 배열 선언은 const 자바스크립트는 자동형변환 되는 경우가 많으므로 언제나 데이터 타입에 유의하기 switch 문은 언제나 default로 끝내기 eval() 함수 사용하지 않기 [Mistakes] = 할당 연산자와 == 비교 연산자 헷갈리지 말기(할당은 할당 값을 반환) switch문은 타입까지 비교하는 엄격한 비교를 ..

[TIL] JS 퀴즈 파티

✍ Today I Learned [travel 링크 이동 없이 이미지 바꾸기] document에 addEventListner를 걸었을 경우, 페이지 내 어떤 곳이든 클릭될 수 있기 때문에 조건문으로 범위를 잡아줘야 한다. contains() 메서드는 class에 해당 값이 존재하는지를 true or false로 반환한다. let targetCls = e.target.classList.contains('click'); // true or false 반환 [퀴즈 1 영화 제목 입출력하기] 입력하자마자 바로 출력(HTML에 결괏값 데이터 쌓기) -> innerHTML로 배열[배열.length-1] 버튼뿐만 아니라 입력 창도 disabled HTMLElement.focus() 메서드는 지정된 요소로 포커스를 설..

[TIL] JS 데이터 타입, 형변환, 호이스팅, 엄격모드, this

✍ Today I Learned undefined - 값이 할당되지 않아 '타입'이 정해지지 않은 것을 의미한다. (정의되지 않은 변수, 값이 할당되지 않은 변수) null - object 타입이며, '값'이 정해지지 않은 것을 의미한다. typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true typeof로는 배열(또는 Date)인지 아닌지 확인할 수 없다. (이럴 땐 isArray() 사용) 빈 객체로 초기화하고 싶을 때? string은 "", number는 0, array는 [], object는 {}, 나머지는 null 설정 Number()는 빈 문자열은 0으로 반환,..