멋사 8주차

9/9 (월)

변수

var - 재할당 가능
let - 재할당 불가능 / ES6에 나옴 --> 가급적 사용
const - 상수 : 변수에 있는 값을 바꿀 수 없음

type

• strong typed language
  • 코드 타입 지정
  • 타입 고정됨
• weakly typed language
  • 자바스크립트
  • 코드 타입 지정x
  • 타입 유추

null vs defined

• null - 값
  객체에 할당되는 값으로 type은 고정됨
  객체가 선언 되었으나 초기화 되지 않음
• undefined - 타입
  자바스크립트에만 있음
  값이 할당 안돼서 타입이 설정 안된 경우 (타입을 모르는 경우)

연산자 우선 순위

let data1 = 10;
let data2 = 10;

let result1 = data1++; --> 할당 후 증가
let result2 = ++data2; --> 증가 후 할당

console.log(data1, result1); // 11 10
console.log(data2, result2); // 11 11

---

9/10 (화)

---

9/11 (수)

변수 호이스팅

변수가 호이스팅 되면 값이 할당되기 전까지 undefined로 초기화된다.

(let, const로 선언된 변수는 호이스팅 지원x)

함수 호이스팅

함수 선언 위치와 함수의 이용 위치가 변경되어 코드 아랫 부분에 선언된 함수를 코드 윗 부분에서 호출할 수 있도록 지원이 된다.

스코프

같은 영역에서 실행되는 코드를 { }로 묶어서 개발한다.

함수 레벨 스코프는 함수 내에서 선언된 변수만 지역 변수로 인정되는 것이다.
블록 레벨 스코프는 모든 블록 내에서 선언된 변수가 지역 변수로 인정되는 것이다.

var	let	const
함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프

var x = 10;
let y = 10;

if (true) {
	x = 20; --> 지역 변수 인정x (함수 아니라서)
  	y = 20; --> 지역 변수 인정o
}

--> x = 10 
--> y = 20

중복 선언

같은 동일한 이름으로 변수가 중복되어 선언되는 것이다.
중복 선언은 스코프와 관련 있으며 동일 스코프내에서 중복인지, 다른 스코프에서 중복인지에 따라 다르다.

var	let	const
중복 선언 o	중복 선언 x	중복 선언 x

var x = 10;
var x = 20; --> O

let y = 10; 
let y = 20; --> X

---

9/12 (목)

이벤트 프로그래밍

이벤트 프로그래밍 따로 정리

이벤트 프로그래밍 구조

애플리케이션에서 이벤트 처리를 하기 위해서는 이벤트 소스와 이벤트 핸들러를 리스너로 연결해야 한다.

• 이벤트 소스 - 이벤트 발생 객체
• 이벤트 핸들러 - 이벤트 처리 내용
• 리스너 - 이벤트 소스와 이벤트 핸들러를 연결

이벤트 연결하는 방법

이벤트를 연결하는 방법은 다양하지만 그 이유에 대해서 알아야한다.

프로그램을 짜면서 여러가지 이벤트를 만들 것이니 그 이벤트와 이벤트 발생 객체를 연결해줘야 원하는 요소에 원하는 이벤트를 연결할 수 있다.

💡 이벤트 연결 방법 3가지

• addEventListener() - 모든 이벤트
• DOM 노드에서 이벤트 등록 - 사용자 이벤트만
• 자바스크립트에서 onXXX로 이벤트 등록

• addEventListener()

  

이벤트 핸들러 (이벤트 콜백 함수): 이벤트 시 콜 된다는 의미로 이벤트 콜백 함수라고 불리기도 한다.

내가 직접 하는게 아니라 특정 상황이 되었을 때 콜백한다.

• DOM 노드에서 이벤트 등록

  

화면을 구성하는 각 태그에 이벤트를 등록하고 싶다면 HTML 문서의 태그에서 직접 이벤트 핸들링을 할 수 있다.

잘 사용되지는 않는다.

• 자바스크립트에서 onXXX로 이벤트 등록

  

onXXX에서 XXX는 각 이벤트를 식별하기 위한 이름이다.

• onclick - 클릭 이벤트 등록
• onload - 브라우저 로딩 이벤트 등록

마우스 이벤트

모든 마우스 이벤트는 이벤트 함수에 mouseEvent 타입의 객체가 전달되며, 이 객체의 정보를 이용해 이벤트가 발생한 지점의 좌표 값을 얻을 수 있다.

• offsetX, offsetY - 이벤트가 발생한 DOM 노드 내에 서의 좌표
• pageX, pageY - 브라우저 창의 좌표

이벤트 종류	설명	추가
click	마우스 클릭	( mousedown & mouseup 합친 기능 )
dbclick	마우스 더블 클릭
mousedown	마우스 버튼을 누르는 순간
mouseup	마우스 버튼을 떼는 순간
mousemove	마우스 이동
mouseenter	마우스 포인터가 들어오는 순간	버블링x
mouseleave	마우스 포인터가 나가는 순간	버블링x
mouseover	마우스 포인터가 들어오는 순간	버블링o
mouseout	마우스 포인터가 나가는 순간	버블링o

💡 버블링
이벤트가 발생한 DOM노드 이외에 그 상위 노드에도 이벤트가 전파되는 것

window 이벤트

이벤트	설명
copy	브라우저에서 복사했을 때
cut	브라우저에서 잘라내기 했을 때
paste	브라우저에서 붙여넣기 했을 때
load	브라우저에서 문서 로딩이 완료 되었을 때
error	브라우저에서 문서 로딩에 실패했을 때
resize	브라우저 창의 크기가 변경될 때

resize 이벤트

브라우저 창의 크기가 변경되는 순간의 이벤트이며, 이벤트 처리 함수에서 innerWidth, innerHeight로 브라우저 창의 크기를 획득할 수 있다.

Form 이벤트

HTML 문서에서 사용자 데이터를 입력받기 위해 <input>``<textarea> 등의 태그를 이용하여 이 입력 태그를 묶어서 한번에 처리 하기 위한 태그가 form이다.

• form 태그에 거는 이벤트 (입력 태그 전체) - submit, reset
• 입력 요소에 거는 이벤트 (각 입력 태그) - change, focus, blur

이벤트	설명	이벤트 구분
submit	form 데이터가 제출되는 순간	form 태그에 거는 이벤트
reset	form 데이터가 reset 되는 순간	form 태그에 거는 이벤트
change	입력 데이터가 변경되는 순간	입력 요소에 거는 이벤트
focus	입력 요소가 포커스를 가지는 순간	입력 요소에 거는 이벤트
blur	입력 요소가 포커스를 잃어버리는 순간	입력 요소에 거는 이벤트

---

9/13 (금)

배열

여러개의 데이터를 하나의 변수로 활용하기 위한 프로그래밍 기법으로, 배열을 이용한다는 것은 객체를 선언하고 그 객체에 여러 개의 데이터를 담아 이용하겠다는 의미이다.

배열 선언 방법

• []표기법
  

• Array 생성자
  

데이터 개수 파악

let array = [10, 20];
console.log(array.length) // 2

배열 데이터 획득 - forEach

array.forEach((data, index) => {
  console.log(`array[${index}] = ${data}`)

배열 데이터 추가

array.push(30);
console.log(array) // 10, 20, 30

배열의 함수들

함수	설명	추가	사용법
concat()	두 배열을 합쳐 하나의 배열을 만드는 함수		let array3 = array1.concat(array2)
join()	배열 데이터를 구분자로 연결해 문자열로 만드는 함수		let result = array.join('-')
push()	배열에 데이터를 추가	맨 뒤에 추가	array.push(30, 40)
unshift()	배열에 데이터를 추가	맨 앞에 추가	array.unshifht(30, 40)
pop()	배열의 데이터를 제거	맨 뒤의 데이터 제거	array.pop()
shift()	배열의 데이터를 제거	맨 앞의 데이터 제거	array.shift()
splice()	지정된 위치의 데이터 획득		array.splice(2, 0, "hello", "world")
slice()	특정 위치의 데이터 획득		array.slice(1, 4)
forEach()	배열의 데이터 개수만큼 함수 반복 실행	⭐️⭐️⭐️⭐️⭐️
filter()	조건에 만족하는 배열 데이터만 추출	⭐️⭐️⭐️⭐️⭐️
every()	배열의 데이터가 특정 조건에 모두 만족하는 지 판단
map()	배열의 데이터로 함수를 실행, 반환 값을 모아서 배열로 만드는 함수	⭐️⭐️⭐️⭐️⭐️

🎯 splice

중간 특정 위치에 데이터를 추가하거나, 제거 혹은 교체해야하는 경우에 사용하는 함수이다.

데이터 추가

array.splice('데이터 추가되는 위치', '교체하는 데이터 개수', '추가하는 데이터(여러개 가능)')

데이터 교체

데이터 삭제

🎯 slice

배열의 데이터를 획득할 때 사용한다.
인덱스 사이의 데이터 여러개를 한번에 획득할 수 있으며, 획득한 데이터를 배열로 반환한다.

• 매개변수를 1개만 지정하면 - 그 인덱스 위치의 데이터부터 오른쪽의 모든 데이터가 획득
  

🎯 filter

배열의 데이터 중 조건에 맞는 데이터만 추출하고자 할 때 사용한다.
배열의 개수 만큼 순차적으로 매개변수에 지정된 한함수가 호출된다.

매개변수의 함수에서 true를 반환하는 데이터만 추출해서 결과를 반환한다. (배열로)

💡 객체 만드는 방법

• 객체 리터럴
• 함수 생성자
• 클래스

  ---