JavaScript(62)
-
Javascript DOM
DOM (Document Object Model) DOM (문서 객체 모델) 은 메모리에 웹 페이지 문서구조를 트리구조로 표현해 브라우저가 페이지를 인식하게 해준다. JS 를 이용해 요소들을 제어할 수 있다. 조작 DOM API 를 이용해 조작할 수 있다. 응애 나 애기버튼 /* document는 브라우저에서 제공하는 window 객체의 이다. */ const button = document.querySelector('.button'); button.onclick = function(){ this.style.backgroundColor = 'blue'; } 웹 페이지 빌드 과정 (Critical Rendering Path CRP) 1. 렌더 엔진이 문서를 읽어 파싱, DOM tree 생성 2. DOM C..
2023.05.16 -
Javascript window 객체 ( Window Object )
window 객체는 브러우저에 의해 자동 생성되고 이 객체는 js 의 객체가 아니다. 브라우저에 대한 정보를 알 수 있고 제어할 수 있다. var 로 변수나 함수를 선언하면 window 객체에 프로퍼티가 된다. alert(), prompt(), confirm() 등은 window 객체이다. window 객체는 너무 많은 친구들이 있기때문에 링크에서 필요에따라 찾아서 쓰는 것을 추천함 링크 : https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. developer.mozilla.org
2023.05.16 -
Javascript 반복문( Loop )
1. for for (let i = 0; i < 10; i++) { if (i === 5) { console.log( "반짝이는 5번 입니다. continue 때문에 더 실행되지 않고 다음 반복으로 넘어갑니다." ); continue; } if (i === 8) { console.log("8 번입니다. break 때문에 반복문을 탈출해 종료됩니다."); break; } console.log(i + "번 입니다."); } /* === 실행 결과 === 0번 입니다. 1번 입니다. 2번 입니다. 3번 입니다. 4번 입니다. 반짝이는 5번 입니다. continue 때문에 더 실행되지 않고 다음 반복으로 넘어갑니다. 6번 입니다. 7번 입니다. 8 번입니다. break 때문에 반복문을 탈출해 종료됩니다. */ ..
2023.05.16 -
Javascript 타입
기본 : Boolean, String, Number, null, undefined, Symbol - 기본 타입들은 호출스택 메모리 공간 사용 - 고정된 크기의 메모리로 저장, 데이터가 변수에 할당된다. 객체 : Object, Array, function 등등 - 힙 사용 - 데이터 크기가 정해지지 않는채로 호출스택에 저장되고 데이터의 값이 힙에 저장되고 변수에 힙 메모리 주소값이 할당된다. - js 는 느슨한 타입의 동적 언어이다. 특정 타입과 연결되지 않고 모든 타입의 값으로 할당 , 재할당이 가능하다. - 같은 변수가 여러개의 타입을 가질 수 있고 타입을 명시하지 않아도 된다. // 기본 타입 const myname = "muyeon"; console.log(myname); console.log(ty..
2023.05.16 -
Javascript 호이스팅(Hoist)
- 뭔가를 끌어올린다 라고 생각하면 됩니다. - JS 에서 호이스팅은 코드가 실행되기 전에 변수, 함수 선언 이 지역범위(로컬 범위) 의 맨 위로 끌어 올려지는 경우입니다. 1. var - 많이 이상해보이지만 호이스팅 때문에 오류가 나지 않습니다. - JS 인터프리터는 변수 생성과 할당값을 분할합니다. 선언부분은 코드 실행 전 범위의 맨 위로 호이스팅 초기 값은 undefined 가 할당됩니다. console.log(hoisting); var hoisting = "hi hoisting"; console.log(hoisting); /* === 실행 결과 === undefined hi hoisting */ 2. 함수 호이스팅 - 함수도 바로출력 hoistingFunc(); function hoistingFu..
2023.05.16 -
Javascript 스코프(Scope)
1. var (function-level scope) - 함수 안에서 선언된 변수는 함수 안에서만 유효하다. 외부는 X function varScope() { if (true) { var a = "var 스코프"; console.log(a); } console.log(a); } func(); console.log(a); // 에러발생 /* === 실행 결과 === var 스코프 var 스코프 Uncaught ReferenceError: a is not defined */ 2. let / const (block-level scope) - 코드 블록 {} 내부에서 선언된 변수는 블록안에서만 유효. 외부는 X function blockScope() { if (true) { let a = "block scope..
2023.05.16