ESTsoft/프론트엔드 오르미 1기

객체지향 프로그래밍객체지향 프로그래밍이란?객체지향- 프로그래밍 방법론 중 하나- 프로그램을 작성할 때 객체들을 만들어 서로 소통하도록하는 방법 객체- 자바스크립트 객체: 키, 값 쌍으로 이루어진 데이터의 묶음- 객체 지향의 객체: 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것const me = { name: 뽀로로, address: '제주도 제주시 성산일출봉', phoneNum: '010-1234-1234', canWalk: function() { console.log('뽀로로가 걷는다.'); }}- 뽀로로를 객체로 표현- 객체는 행동과 상태를 가짐- 행동은 메소드, 상태는 프로퍼티 const me = { name: '뽀로로', address: '제주도 제주시 성산일출봉'..

이벤트 객체- 이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송됨 버튼1 버튼2 버튼3 const btnFirst = document.querySelector('.btn-first');btnFirst.addEventListener('click', (event) => { console.log(event);}); 이벤트 흐름- 브라우저 화면에서 이벤트가 발생하면 브라우저는 가장 먼저 이벤트 대상을 찾기 시작함 캡처링 단계- 브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM트리를 따라 내려감 버블링 단계- 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 ..

DOM DOM API란?DOM= HTML문서의 내용의 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 언어 node= DOM 각각의 요소와 속성, 콘텐츠를 표현하는 단위 API= Application Programming Interface -> 주문서 Node 예시) DOM을 탐색해 봅시다! DOM 탐색해보기 DOM 트리 접근해보기 DOM 제어 명령어  DOM 트리에 접근하기- document 객체를 톻해 HTML문서에 접근 가능- document는 브라우저가 불러온 웹페이지를 나타냄- DOM 트리의 진입점 역할을 수행// 해당하는 Id를 가진 요소에 접근하기document.getElementById();// 해당하는 모든 요소에 접근하기document.getElem..

Map & SetMap- Map 객체는 키-값 쌍을 가지는 객체 자료형의 한 종류let m = new Map();// Map에 값을 넣기// set메서드는 m에 값을 넣은 결과를 반환m.set('하나', 1);m.set(1, '하나');m.set(true, 1);m.set(false, 0);// Map의 값에 접근하기console.log(m.get('하나')); // 1console.log(m.get(true)); // 1// Map의 값이 있는지 확인하기console.log(m.has('하나')); // true -> 값이 있음 = true// Map의 값을 제거하기console.log(m.delete('하나')); // true -> 키를 제거하면 true 반환console.log(m.has('하나'..

함수심화콜백함수- 함수에 매개변수로 전달되어 실행되는 함수를 의미function sum(x, y, 콜백함수) { 콜백함수(x + y); return x + y;}function documentWriter(s) { document.write('콜백함수', s); // 콜백함수 30}sum (10, 20, documentWriter); - map 사용을 통한 콜백함수let arr = [1, 2, 3, 4, 5];arr.map(제곱)function 제곱(x) { return x ** 2;}arr.map(x => x ** 2); // [1, 4, 9, 16, 25] - forEach 사용을 통한 콜백함수let arr = [1, 2, 3, 4, 5];arr.forEach(e => console.log(e*..

this- 객체를 가리키는 참조 변수- 호출되는 위치에 따라 다른 값을 출력함 this = windowfunction a() { console.log(this)}a(); // window - this = myObjlet myObj = { val1: 100, func1: function() { console.log(this); // [val: 100, func1: f] }}myObj.func1(); 전역 컨텍스트- 전역 컨텍스트에서 this는 전역객체, 브라우저에서는 window를 가리킴console.log(this); // window -> 브라우저에서는 window 객체 함수 호출- 일반 함수 내부에서는 this를 전역 객체를 가리킴function foo() { console.log(th..

조건문삼항연산자- 간단한 if-else문을 한 줄로 표현할 수 있는 연산자 기본구조(조건식) ? (조건식이 참일 때 실행할 코드) : (조건식이 거짓일 때 실행할 코드)let item = true ? 'apple' : 'gold';console.log(item); // apple true ? console.log("true") : console.log("false"); // truefalse ? console.log("true") : console.log("false"); // falseconst result = false ? console.log("true") : console.log("false"); console.log(result); // undefinedlet num = 10;const item..

객체객체(Object)의 의미- 배열처럼 여러 개의 데이터를 한 변수에 저장할 수 있는 자료형- 객체와 배열의 차이점  ◽ 배열이 값에 접근하기 위해 자동으로 부여되는 인덱스 번호를 사용했다면,     객체는 특별한 키(key)를 통해 원하는 값(value)에 접근할 수 있도록 키와 값의 쌍으로 이루어져 있음 객체 생성방법- 객체를 생성하기 위해 중괄호( { } )를 사용- 여러 개의 키(key)와 값(value) 쌍으로 이루어져 있음- 각 key와 value는 콜론( : )으로 구분- key - value의 쌍은 프로퍼티(property)라고 표현- key는 문자열이나 심볼값으로 사용- value은 자바스크립트에서 사용한 모든 값이 나올 수 있음- 프로퍼티 값이 함수라면, 키와 값의 쌍을 메서드(met..

숫자 (Number)- 정수와 실수를 표현하기 위해 사용되는 자료형let num1 = 2;let num2 = 2.3;console.log(typeof num1, typeof num2); //number number 숫자형 특징- 배정밀도 64비트 부동소수점 형식을 따름- 여러 연산 가능- 정수, 실수 외에도 특수 값 존재  ◽ 정수 : 양의 정수 / 음의 정수 / 0  ◽ 실수 : 소수점을 포함하는 모든 수  ◽ 유효숫자 : 수의 정확도에 영향을 주는 수 * 0.1 + 0.2 != 0.3console.log(0.1 + 0.2); // 0.30000000000000004- 0.1 + 0.2가 0.3이 아닌 이유  ◽ 숫자를 저장하는 형식 때문  ◽ 10진수의 소수를 2진수로 전환하는 과정에서 무한소수화가 ..

변수 호이스팅- 의미  ◽  끌어올리기  ◽ 변수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상  ◽  코드에서 변수를 선언하기 전에 해당 변수를 사용할 수 있는 것처럼 보이는 현상 - TDZ  ◽  Temporal Dead Zone  ◽  코드상에 let, const로 선언된 변수와 상수는 TDZ(임시 접근불가구역)에 배치됨  ◽  값들은 선언에 대한 초기화가 실행된 후에 TDZ에서 제거되어 사용 가능한 상태가 됨   ◽  TDZ는 접근이 불가능하기 때문에, 초기화 전에 TDZ에 배치된 변수에 접근하려고 하면 에러 발생 - 호이스팅에서 var const let의 차이점  ◽  var선언은 전역범위 / 함수 범위 -> 범위 내에서 업데이트 및 재선언 가능  ◽  let과 const선언은 블록 범위..