Event란?

이벤트란 간단하게 일어나는 사건 혹은 발생인데, 웹에서는 유저가 버튼을 클릭하거나 비디오 재생이 멈추는 등 이러한 다양한 사건들을 이벤트라고 할 수 있습니다.

Event Bubbling이란?

Event Bubbling이란 한 요소에서 이벤트가 발생했을 때 해당 이벤트가 부모 요소들로 전달되어 가는 특성을 말합니다.

<form onclick="alert('form')">
	form
	<div onclick="alert('form 안에 있는 div')">
		form 안에 있는 div
		<p onclick="alert('form 안에 있는 div 안에 있는 p')">
			form 안에 있는 div 안에 있는 p
		</p>
	</div>
</form>

이 경우 p태그 안에 요소만을 클릭해도 p의 이벤트 핸들러가 동작해 alert 창이 뜨고 클릭한 이벤트가 부모 요소들로 전달되어 div, form 각각의 이벤트 핸들러가 동작해 div의 alert 창이 뜨고, form의 alert 창의 뜸을 알 수 있습니다. 이러한 흐름을 Event Bubbling이라고 합니다.

화살표 함수

기존의 익명함수

const add = function() {
};

화살표 함수

const add = () => {
};

이 화살표 함수는 기존의 익명 함수의 장점이었던

1. 재사용이 필요 없다.
2. 메모리 관리 측면에서 효과적이다.

이러한 특징에 더해 익명 함수보다 짧고 return도 생략이 가능해졌습니다.

let sum = function(a, b) {
	return a + b;
};
//--==>> 화살표 함수
let sum = (a, b) => a + b;

기존 익명 함수의 장점을 좀 더 설명해보면, 일반 함수는 재사용을 하기 위해 사용합니다. 만약 ‘더하는 행위’를 할 때마다 더하는 식을 작성하는 게 아니라 ‘더하기 함수’를 호출하면 되고 이러한 재사용을 위해 일반 함수를 사용합니다. 하지만 익명 함수는 재사용이 필요 없는 경우여서 이름을 붙여 놓지 않고 한 번만 사용하고 끝이 납니다.

화살표 함수의 차이점

화살표 함수는 무조건 익명 함수로만 사용할 수 있고, 메서드나 생성자로 사용할 수 없습니다. 또한 this나 super에 대한 바인딩이 없습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

문자열 객체 생성하기

let 참조변수 = new String(문자형 데이터);
let t1 = new String("hello");

let 참조변수 = 문자형데이터;
let t2 = "hello";

문자열 객체의 메서드 및 속성

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

배열 객체 생성

// 방식 1
let a = new Array();
a[0] = 30;
a[1] = "연구원";
a[2] = true;

// 방식 2
let b = new Array(30, "연구원", true);

// 방식 3
let c = [30, "연구원", true];

배열 객체의 메서드 및 속성

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

수학 객체의 메서드 및 상수

종류 설명

e.g.

let num = 2.1234;

let maxNum = Math.max(10, 5, 8, 30),
roundNum = Math.round(num),
rndNum = Math.random();

cf) 난수를 발생하여 원하는 구간 정수의 값 구하기

Math.floor(Math.random()*(최댓값-최솟값+1))+최솟값;

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

Date 객체 생성

let t = new Date();
let t = new Date("2022/7/20");
let t = new Date(2022,7,20);

날짜 관련 메서드

날짜 정보를 가져올 때(GET)

getFullYear() 연도 정보를 가져옴

날짜 정보를 수정할 때(SET)

setFullYear() 연도 정보만 수정함

e.g.

let today = new Date();
let nowMonth = today.getMonth() + 1;

// cf) 현재 날짜에서 특정 날짜까지 남은 일 수 계산
let nowYear = today.getFullYear();

let theDate = new Date(nowYear, 12, 24);
let diffDate = theDate.getTime() - today.getTime();

let result = Math.ceil( diffDate / (60 * 1000 * 60 * 24) );
document.write("크리스마스 D-day: " + result + "일 남았습니다.");

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

자바스크립트의 조건식은 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식된다.

0, null, “”(빈 문자), undefined

이 값들이 조건식에 입력되면 false를 반환한다.

이 외의 값은 true 로 인식된다.

e.g.

// true로 인식되는 경우
let num1=7;
if(num1) {
	document.write(num1);
}
//--==>> 7

// false로 인식된는 경우
let num2=0;
if(num2)  {
	document.write(num2);
} else {
	document.write("0은 false로 인식됩니다.");
}
//--==>> 0은 false로 인식됩니다.

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.