| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- 서블릿
- 즐거운자바
- JavaScript
- 가상클래스 선택자
- 깃헙
- spring
- 김성박
- 자바
- 즐거운 자바
- EDWITH
- 다시보자
- datalist
- 속성 선택자
- nth-of-type()
- 다시볼 것
- 상속
- nth-child()
- ES6
- vmin
- 웹개발
- HTML Templating
- 보충필요
- 부정 선택자
- 소스트리
- 가상요소 선택자
- optgroup
- 복합 선택자
- 부스트코스
- vmax
- jsp
- Today
- Total
목록JavaScript (13)
기억의 DataBase
Event와 Function 브라우져는 사용자의 다양한 행동(Event)을 인식 할 수 있고, 이에 따른 동작(function)을 실행할 수 있다. 마우스 > 휠을 동작, 3초간 머무름, 클릭, 더블 클릭 등등 키보드 > 한글작성, 영어작성, 썻다가 지움, 특수문자입력 등등 addEventListener 검색창을 클릭하면, 검색창이 사라짐 addEventListener의 첫번째 인자는 Event Type(유저의 행동), 두번째 인자는 function(브라우져의 동작)으로, 두번째 인자를 Call Back 함수, Event Handler, Event Listener라고 부름 콜백 함수와 addEventListener를 분리하는 방식도 가능(onclick과 유사한 방식) ※ Event Type 모음 더 다양..
DOM 브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. 결국 HTML element는 Tree 형태로 저장됩니다. 자바스크립트는 DOM의 속성들을 삭제하고, 추가하는 역할을 할 수 있음 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공하여, 자바스크립트가 요소를 찾는 것을 도움 출처 : https://www.edwith.org/boostcourse-web/lecture/16699/ getElementById() 구글의 검색창 id가 "f"이므로 getElementById로 선택한 후 style을 변경하여 보이지 않게 함 querySelecto..
setTimeout() window.setTimeout >> window는 생략 가능(window는 전역객체이기 때문에) ex) function hi()를 인자로 받아 1초 뒤에 실행하는 Code(지연실행이 필요할 때 활용하면 좋다.) setTimeout은 인자로 함수를 받는다.(자바스크립트는 함수를 인자로 받을수도, 리턴할 수도 있다.) CallBack 함수 나중에 실행되는 함수를 callback 함수라고도 하는데, 보통은 즉시 실행되지 않고, 나중에 혹은 실행되지 않을 수도 있다. setTimeout과 같은 함수는 비동기적으로 실행되는데, 동기적인 다른 실행이 끝나고 난 후 실행됨(main이 끝나고, Call Stack으로 올림) 출처 : https://www.zerocho.com/category/J..
자바스크립트에서 false가 되는 경우 null undefined ""(공백문자) 0 NaN var firstName = firstName || 'J'; firstName에 인자가 들어오지 않으면, undefined로 false가 되어 'J'가 할당된다 Call Stack 출처 : https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec 함수 호출 관계는 다음과 같습니다. bar() → foo() 메모리에서는 우측의 Call Stack에서와같이 순서대로 쌓이게 됩니다. bar 함수에서 foo를 호출한 후, foo 함수의 결과를..
undefined ※ NULL과 undefined은 무엇이 다른가? undefined -> 변수를 선언만 하고 값을 할당하지 않음. 즉, 자료형이 결정되지 않은 상태이다. (선언하지 않은 변수도 콘솔이나 기타 메세지에는 undefined라고 뜨지만, undefined라는 값을 가지는 것은 아니다.) null -> 변수를 선언하고, 'null'이라는 빈 값을 할당한 경우이다. (이 '빈 값'의 경우 자료형에 따라 여러가지가 있지만, null은 객체형 데이터-ex: array, object-의 빈 값을 의미한다. 문자열(string)의 경우 "'', 숫자(number)의 경우 0이 빈값이고, 이들 빈값 모두는 if문에서 false로 형변환된다.) 다시말해서, undefined는 자료형이 결정되지 않은 변수이..
삼항연산자로 if문을 대신하기 switch문 - case가 한정되었을 때 사용하면, 가독성 측면에서 더 좋을 수 있다 주어진 case외의 경우를 처리하는 경우는 default :로 처리하고, 각각의 경우는 break;로 닫아줘야 함 반복문(for, while) -> foreach나 for-of/for-in의 내용도 추가 루프문을 돌릴 때마다 Array의 길이를 계산해야 하므로 성능이 저하됨 Array의 길이는 고정된 것이므로, 초기값 설정시 같이 변수화해서, 조건문 체크시 다시 계산하지 않도록 함 아니면, 변수로 미리 위에서 선언해서 사용하는 것도 깔끔한 Code ex) var len = arr.length; for문을 역으로 하면 성능이 더 좋을 수 있다는데, 초기변수를 0으로 설정할 필요가 없어서인가..