여기서 뭘 얻어갈려 하지 마셔요

DOM이란?웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔, 브라우저가 트리구조로 만든 객체 모델을 의미하며메모리에 웹 페이지 문서 구조를 트리구조로 표현해서, 웹 브라우저가 HTML 페이지를 인식하게 해준다.DOM에서 제공하는 API를 통해 DOM 트리를 조작할 수 있다. * document 는 브라우저에서 제공하는 window 객체의 한 부분 (JS 자체 요소 X) 웹 페이지 빌드 과정 (CRP: Critical Rendering Path)브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있는데웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다  CSSOM이란?  CSS Object ModelJS에서 CSS를 조작할 수 있는 A..

forwhilelet i = 0do { console.log(`Number ${i}`) i++ } while (i  *continue : 현재 루프를 skip *break :  루프 자체를 stop  배열 반복// LOOP THROUGH ARRAYconst items = [1, 2, 3]// FORfor (let i = 0; i   작동 여부for forEachbreak문○Xawait○△  평균적인 속도는 for가 forEach보다 조금 더 빠르지만코드에서 중요한 건, 가독성(readability)이기 때문에 큰 차이가 아니라면목적과 가독성에 맞추어 선택하자

Math.E = 𝑒 ≈ 2.718자연로그의 밑 값 e Math.PI = 𝜋 ≈ 3.14159원의 둘레와 지름의 비율 Math.random()0 이상 1 미만의 부동소숫점 의사 난수를 반환// 1부터 n 사이의 정수 난수 생성Math.floor(Math.random() * n + 1)Math.ceil(Math.random() * n)// min부터 max 사이의 정수 난수 생성Math.random() * (max - min) + min     [JS/알고리즘] 백준1085. 최솟값 최댓값C++ 로 알고리즘을 처음 배워서 for문으로 구하는 방식만 알고 있었는데 아니 이게 웬 걸 우리 JS에겐 Math 라이브러리가 있었다. 4ms 시간이 단축됐다. Math.min(value1, value2, ...) M..

const ⭐️ (ES6)중복선언 ✕  재할당 ✕constant '상수'never gonna updated∴ default (always)  [JS] const인 array, object 요소 수정 가능한 이유원시자료형 Primitive Values : 변수에 값을 직접 할당 string, number, bigint, boolean, undefined, symbol, null 📦 저장 1) 실제 값은 STACK 메모리에 저장 2) 변수는 STACK 속 데이터의 주소/위치를 바라봄 📑 복사 1)119taeyoung.tistory.com let (ES6)중복선언 ✕  재할당 ⃝will be updated∴ 필요시 (sometimes) - 변수의 scope를 최대한 좁게 하여  var (legacy)중복선..

style에 적합한 도구는 CSSanimation에 적합한 도구는 JS step 1. Find the element.step 2. Listen for an event.step 3. React to that event. (show, hide, change color of sth, ...) const h1 = document.querySelector("div.hello:first-child h1")function handleTitleClick() { // change color const currentColor = h1.style.color // getter let newColor if (currentColor === 'blue') { newColor = 'tomato' ..

console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다.동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다. console 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 Window, 워커에서는 WorkerGlobalScope(en-U)가 속성으로 포함하고 있습니다.Window.console의 형태로 노출되어 있으므로 간단하게 console로 참조할 수 있습니다. console.log('Hello World')console.log(1998)console.log(true)var obj = { key: 'value' }console.log(obj)console.table(obj)..

element 객체 내부의 property들 중 이름이 on- 으로 시작하면 모두 eventJS는 모든 event listen 가능 event :어떤 행위를 하는 것. do something eventListener :JS에게 무슨 event를 listen하고싶은지 알려주어 listen함 title.addEventListener("click") :누군가 title을 click하는 것을 listen할 것임 → click하면 취할 액션 정의 const h1 = document.querySelector("div.hello:first-child h1")function handleTitleClick() { h1.style.color = "blue"}function handleMous..

document 우리가 JS에서 HTML에 접근할 수 있는 방법 브라우저에 이미 존재하는 객체 HTML이 app.js를 로드하기 때문에 존재하는 것 HTML은 CSS, JS를 가져와 브라우저와 연결해주는 접착제 같은 존재 HTML과 상호작용하기 위해 JS를 사용하고, HTML의 element들을 JS로 변경하고 읽을 수 있다. JS는 HTML에 접근하고 읽을 수 있다. + 변경 document.title document.title = "new title" JS는 HTML의 항목들을 읽어올 수 있고, 추가할 수 있다. document.body JS에서는 HTML을 표현하는 Object를 보여준다. 우리는 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경한다. Grab me! Grab me! c..

(legacy) prompt() 사용자의 답변을 받기 위해서, 브라우저로 할 수 있는 가장 직접적인 방법 사용자가 응답하기 전까지 코드의 실행을 멈추게 함 + CSS 적용할 수 없음 → 브라우저랑 JS는 여전히 지원하지만 사람들은 더 이상 쓰지 않는다. → 어떤 브라우저는 이런 팝업을 제한하기도 함 function은 내부에서 외부로 실행된다. isNaN() return boolean typeof 15 → number 👉 isNaN: false typeof '15' → string 👉 isNaN: true typeof parseInt('15') → number typeof parseInt('abcd') → NaN if - else if - else condition은 boolean 타입이어야함 if (co..

Basic Data Types Data Type : JS가 이해할 수 잇는 데이터의 종류들  1. Numberinteger 정수 1float 실수 0.1 2. String : text<p data-ke-size="size16"..