패스트캠퍼스

Q. DOM? : Document Object Model의 약어. 여기서 ‘document’란 HTML에 들어있는 여러가지 object model을 뜻하는데, ‘object model’이란 div, span, input… 등의 요소들을 말하는 것임. 그렇다면 ‘API’

spurs 변수에 붙어있는 하나의 method, 그 뒤에 붙어있는 method, 그 뒤에 붙어있는 method가 마치 chain 형식으로 연결되어 있음. : method chaining여기서 인지해야 하는 부분은, 각 메소드가 하는 역할 보다도 메소드들을 붙여 사용할

작은 따옴표큰 따옴표백틱이 셋으로 표현 가능.백틱을 사용하여 문자 데이터를 만드는 것을 '템플릿 리터럴(template literal)'이라고 한다.위 코드의 결과는 당연히 0.3이 나와야 할 것 같지만이러한 부동소수점 오류가 발생한다. 컴퓨터는 기본적으로 0, 1의

if문 조건에 true를 넣어주면, 당연히 중괄호 사이에 있는 코드가 실행된다. 반대로 false를 넣을 경우, 조건을 만족하지 못하기 때문에 콘솔창에 아무것도 출력되지 않는다.그런데, 꼭 true 값(boolean)이 아니더라도, 코드가 실행된다. 결과적으로 if 조

덧셈뺄셈곱셈나눗셈나머지 구하기거듭제곱여기서 +, -, \*, /, %, &\*\*\*잘 출력됨. 이 방식이 굉장히 많이 사용된다고 한다. 연산자의 위치에 따라 값이 달라짐. 감소연산자도 마찬가지!값의 반대로 출력됨.객체, 배열 데이터는 참이므로 false 출력.즉,

구조분해할당은 배열, 객체에 사용할 수 있다.'tottenham'이라는 배열이 있고, 각 요소를 각각의 변수에 할당하고 싶다면↑ 이렇게 각각을 인덱싱하여 데이터를 꺼내야 한다. 하지만 좀 더 간단한 방법이 있음. 바로 '구조분해할당'.이게 바로 '구조분해할당'이다. 위

자바스크립트의 선택적 체이닝은 망원경이라고 생각하면 쉬울 것 같다. 선택적 체이닝을 사용하면, 객체 안에 있는 속성이나 메서드를 쉽게 접근할 수 있습다. 이 망원경을 이용해서 찾으려는 것이 없다면, 오류를 일으키지 않고 그냥 undefined를 반환한다. 따라서 코드를

'child2'라는 id를 가진 요소가 출력된다. 만약, 여러 요소가 검색되는 경우에는 가장 먼저 찾은 요소를 반환하게 됨. 만약, 해당 id를 가지는 요소를 찾지 못할 경우 'null' 반환.querySelector는 'CSS 선택자'로 검색한 요소를 하나 반환한다.

이번 게시물의 기준이 되는 HTML 코드.이 메소드는 메모리에만 존재하는 새로운 HTML 요소를 생성해서 반환한다.콘솔 창에는 잘 출력되지만,element 창에서 확인하면 아무 요소도 추가되지 않은 것을 볼 수 있음.즉, 이 메소드는 실제 HTML에 요소를 추가하는 것

이 속성은 요소의 각 'data-' 속성 값을 얻거나 저장한다.이 속성은 요소의 태그 이름을 반환한다.이 속성은 대문자로 태그 이름을 반환함이 속성은 요소의 'id' 속성 값을 얻거나 지정한다.child 클래스를 가진 첫 번째 요소에는 id 값을 지정하지 않았다. 그렇

이번 게시물의 기준이 되는 HTML 코드.이 속성을 사용하면 현재 화면(뷰포트)의 크기를 얻을 수 있다.주황색 네모 영역의 width와 height가 출력된 것.이 속성은 페이지의 좌상단 기준, 현재 화면(뷰포트)의 수평 혹은 수직 스크롤 위치를 얻을 수 있다.페이지의

이벤트 추가 및 제거 index.html 코드 style.css 코드 child 요소의 높이가 부모 요소의 높이보다 길기 때문에 overflow auto가 적용되어 스크롤이 생겼다. 1. addEventListener() : 대상에 이벤트 청취(Listen)

addEventListener의 세 번째 인수로 once 옵션을 추가할 경우, 이벤트는 한 번 발생하게 된다. parent 요소를 계속 클릭하더라도 콘솔창에 'Parent!'는 한 번 출력됨. 다음으로, passive 옵션을 추가할 수도 있음.passive 옵션은

HTML 구조.CSS 구조.아직 HTML 코드에는 'active'라는 클래스는 없는 상태.child 요소를 클릭할 시, 'active' 클래스가 없으면 추가하고, 있으면 제거하는 'toggle' 기능을 사용.child 요소를 한 번 더 누르면 내부 색이 다시 바뀜.더블

HTML 코드event.key 속성은 내가 input 창에 입력하는 문구 그대로 출력됨. enter, shift, esc 등 모두 출력 가능.키를 누르고 있는 상태에서는 아무것도 출력 x. 키보드에서 손을 떼면 해당 문구 출력. 입력된 값이 그대로 출력됨!과거에는 ke

HTML 코드.CSS 코드.↑ focus가 될 시, form의 테두리 색 변경.↑ blur 될 시, form의 테두리는 투명하게 변경됨.값을 입력하는 즉시, 바로바로 콘솔창에 해당 문구가 출력됨. 이번에는 'input'을 'change' 이벤트로 바꿨음. 인풋 창에 무

HTML 코드.child1 요소를 클릭하면 child2번에 적용해 놓은 것들이 출력됨. 해당하는 요소의 이벤트 리스너를 통해 실제 해당 이벤트를 화면에서 click, wheel, keydown을 실행하지 않더라도... dispatchEvent라는 메소드를 통해서 강제로

내가 알고 있는 HTML 구조가 그대로 출력됨.경고 메시지가 뜸.에러 메시지가 뜸.HTML 구조를 그대로 출력하는 것이 아니고 객체 데이터처럼 출력함. body에서 사용할 수 있는 속성, 메소드를 확인할 수 있음. 만약, count 메소드를 실행할 때 아무런 이름도 추