# 3. 함수와 이벤트

javascript,

class

# 목차

1. 함수의 이해
- 1.1. 매개변수,인수,return
2. 함수의 선언과 호출
- 2.1. 함수의 선언
- 2.2. 함수의 호출
- 2.3. 매개변수를 사용한 함수만들기-예제
- 2.4. 매개변수의 기본값 지정하기-예제
- 2.5. 실습문제
- 2.6. 함수의 종류
  - 2.6.1. 익명함수-예제
  - 2.6.2. 즉시실행함수-예제
  - 2.6.3. 화살표함수-예제
  - 2.6.4. 선언적 함수를 활용한 갤러리-예제
- 2.7. 콜백함수
  - 2.7.1. 예제
- 2.8. 호이스팅
  - 2.8.1. 함수의 호이스팅
    - 2.8.1.1. 예제
  - 2.8.2. 변수의 호이스팅
  - 2.8.3. 변수의 범위
    - 2.8.3.1. 지역변수 예제
    - 2.8.3.2. 전역변수 예제
  - 2.8.4. var의 호이스팅
    - 2.8.4.1. 예제
  - 2.8.5. var의 재선언과 재할당
    - 2.8.5.1. 예제
  - 2.8.6. let 과 const
    - 2.8.6.1. let-예제
    - 2.8.6.2. const-예제
3. 이벤트
- 3.1. 이벤트
  - 3.1.1. 마우스이벤트
  - 3.1.2. 키보드이벤트
  - 3.1.3. 문서로딩이벤트
  - 3.1.4. 폼이벤트
- 3.2. 이벤트처리기
  - 3.2.1. HTML 속성을 이용한 방식-버튼 클릭시 알림창표시-예제
  - 3.2.2. 버튼 클릭시 배경변경-예제
  - 3.2.3. 버튼 클릭시 상세설명 표시-예제
  - 3.2.4. DOM을 이용한 방식-버튼클릭시 글자변경-예제
4. 마무리문제

# 1. 함수의 이해

함수란 여러 동작을 묶어놓은 덩어리 입니다

# 1.1. 매개변수,인수,return

[그림으로 이해하는 매개변수,인수,return]

함수는 정해진 기능을 수행하는 기계와 같습니다. 믹서기의 예를 들어 보겠습니다.

아래의 믹서기는 어떤 것이든 재료만 넣으면 무조건 갈아서 섞어 줍니다.

이때 믹서기의 기능은 함수 입니다.

이때 재료는 인수 입니다.

이 믹서기는 재료를 넣는 투입구가 정해져 있습니다. 투입구는 매개변수 입니다.

믹서기로 섞은후 우리는 음료를 다른 그릇에 담습니다.

이때 믹서기가 생산한 결과는 리턴 이라고 합니다.

기능=함수
투입구=매개변수
결과=리턴
재료=인수

# 2. 함수의 선언과 호출

# 2.1. 함수의 선언

함수의 선언에 대해 알아보겠습니다.

함수의 선언은 믹서기 기계를 직접 만드는 것과 같습니다.

함수 선언시 가장 기본적인 방법은 함수를 만들때 이름을 붙이고 필요할때 마다 함수의 이름을 불러 실행하는 것입니다.

함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다 혹은 정의한다 라고 합니다.

함수를 선언할 때는 함수마다 서로 다른 이름을 붙여 나중에 사용할때 알아보기 쉽도록 해야 합니다.

선언할때는 예약어 function 을 사용하고 { } 안에 실행문을 작성합니다.

함수를 선언해봅시다

기본형

function 함수이름() {
	실행문;
}

function addNumber() {
	var num1 = 2;
	var num2 = 3;
	var sum = num1 + num2;
	alert('결과 값: ' + sum);
}

# 2.2. 함수의 호출

함수는 선언만으로 동작 하지 않습니다. 우리가 믹서기 제작을 마쳤다고 바로 동작하지 않는것과 같습니다. 믹서기의 전원 버튼을 눌러야 동작하는것 처럼 함수는 호출을 해야 실행됩니다. 선언은 앞으로 자주할 동작에 대해 예약을 해 놓는 것이고 동작을 하려면 함수를 불러 줘야 합니다.

함수를 부르는 것을 호출 한다라고 합니다.

이전 예제에 이어서 작성해 봅시다

function addNumber() {
	var num1 = 2;
	var num2 = 3;
	var sum = num1 + num2;
	alert('결과 값: ' + sum);
}
addNumber();
addNumber();

# 2.3. 매개변수를 사용한 함수만들기-예제

매개변수를 사용한 함수를 작성해봅시다

코드

설명

function addNumber(num1, num2) {
	const sum = num1 + num2;
	return sum;
	//return num1 + num2;//합을 바로 반환
}
const result = addNumber(2, 3);
document.write('두 수를 더 한 값 : ' + result);

자바스크립트 해석기가 function 이라는 키워드를 만나면 함수의 선언부 라는것을 인식하고 함수블록 `을 해석합니다. 아직 실행하지 않습니다.
6번의 addNumber(2, 3) 을 만나면 해석해 두었던 addNumber() 함수를 실행합니다.
addNumber() 함수는 매개변수 num1에 인수 2를 매개변수 num2에 인수 3 을 넘기고 두 수의 합을 sum 변수에 저장합니다.
return sum 함수의 실행이 완료되면 결과를 함수의 호출지점인 5번의 const result 에 전달합니다.
전달받은 결괏값을 result 상수에 저장합니다.
document.write('두 수를 더 한 값 : ' + result); result의 값을 화면에 출력합니다.

# 2.4. 매개변수의 기본값 지정하기-예제

function multiple(a, b = 5, c = 10) {
	return a * b + c;
}
const result1 = multiple(5, 10, 20);
document.write(`multiple(5, 10, 20)을 실행하면 결과는${result1}입니다<br>`);
const result2 = multiple(10, 20);
document.write(`multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는${result2}입니다<br>`);
const result3 = multiple(30);
document.write(`multiple(30)을 실행하면 두번째,  세번째 매개변수는 기본값을 사용하고 결과는${result3}입니다<br>`);

# 2.5. 실습문제

이전에 작성한 🔗1부터10까지 더하는 함수[06] 예제를 참고하여 사용자가 입력한 숫자까지 계속 더하는 함수를 만들어보세요

/*컨닝하지 말고 양심껏 하세요*/

🔗 MDN

prompt 함수로 반환받은 결괏값은 string 자료형으로 반환되므로 숫자연산이 불가합니다.

숫자 자료형으로 변환해주는 parseInt() 함수를 사용하세요

# 2.6. 함수의 종류

지금까지 alert(), log() 등의 함수를 사용하여 화면에 매번 다른 결괏값을 출력하는 명령을 수행했습니다.

이렇게 입력되는 내용을 (재료) 를 바꿔서 여러번 사용할수 있는 성질을 함수의 '재사용성' 이라고 합니다.

🔗설명PPT열기

자바스크립트의 함수 4종

명명함수(Function Declarations) : function 키워드로 선언하는 방식 (호이스팅 발생)
익명함수(Function Expressions) : 변수에 할당하는 방식
즉시실행함수(IIFE, Immediately Invoked Function Expression) : 선언과 동시에 실행하는 방식
화살표함수(Arrow Functions) : 축약표기방식

명명함수를 제외한 다른 함수들은 호이스팅이 발생하지 않습니다.

함수표현식

자바스크립트의 함수는 자료형 중의 하나로 취급되며 모든 식의 값으로 취급될수 있습니다.

🔗함수 4종 다시보기 4가지 방식의 함수중 2~4번에 은 함수를 표현식으로 다루는 방식입니다.

# 2.6.1. 익명함수-예제

익명함수는 이름이 없는 함수를 의미합니다.

선언시 이름을 붙이지 않으며 변수에 할당하여 실행합니다.

Code [11]

Result

const sum = function (a, b) {
	return a + b;
};
document.write(`함수 실행 결과\u00A0\u00A0\u00A0\u00A0: ${+sum(10, 20)}`);

template literal 내에서 공백을 여러개 표시할때에는 \u00A0 를 작성합니다

# 2.6.2. 즉시실행함수-예제

일반적으로 함수는 선언후 필요할 때 호출하여 실행합니다.

하지만 상황에 따라 딱 한번 실행해야 하는 함수일 경우 선언과 동시에 실행을 시킬수 있습니다.

기본형

매개변수가 없을떄

매개변수가 있을떄

(function (매개변수) {
	실행문;
})();

(function (매개변수) {
	실행문;
})(인자, 인자);

매개변수가 없는경우

[12] Js

Css

(function () {
	let userName = prompt('이름을 입력하세요.');
	document.write(`안녕하세요? <span class='accent'>${userName}</span>님!`);
})();

body {
	padding-top: 20px;
	text-align: center;
}
.accent {
	font-weight: bold;
	font-size: 1.2em;
	color: #00f;
}

매개변수가 있는경우

(function (a, b) {
	// 함수 선언을 위한 매개변수
	sum = a + b;
})(100, 200); // 마지막에 함수 실행을 위한 인수
document.write(`<h1>함수실행결과:${sum}</h1>`);

# 2.6.3. 화살표함수-예제

익명함수를 줄여쓰는 방식입니다

기본형

(매개변수) => {
	실행문;
};

익명함수를 작성하여 화살표 함수로 변경해 봅시다.

매개변수가 없는 경우-basic
const hi = function () {
	return '안녕하세요';
};

alert(hi()); //호출

[Step1] - function 생략

[Step2] - function,return,중괄호생략

const hi = () => {
	return '안녕하세요?';
};

const hi = () => '안녕하세요?';

매개변수 하나-basic
let hihi = function (user) {
	document.write(`${user}님, 안녕하세요?`);
};

hihi('망고'); //호출

[Step3]

[Step4] - 소괄호생략

let hihi = (user) => {
	document.write(`${user}님, 안녕하세요?`);
};

let hihi = (user) => {
	document.write(`${user}님, 안녕하세요?`);
};

매개변수 여러개-basic
let sum = function (a, b) {
	return a + b;
};
document.write(`두 수의 합 :${sum(10, 20)}`);

[Step5]

[Step6]

let sum = (a, b) => {
	return a + b;
};

let sum = (a, b) => a + b;

# 2.6.4. 선언적 함수를 활용한 갤러리-예제

파일다운로드

# 2.7. 콜백함수

함수는 매개변수(parameter)를 넣을 수 있습니다.
함수는 값을 반환할 수 있습니다

자바스크립트에서 콜백(callback) 함수는 다른 함수의 인자로 전달되어, 해당 함수의 실행이 완료된 후에 호출되는 함수를 말합니다. 이러한 콜백 함수는 비동기적인 처리를 위해 많이 사용됩니다.

간단히 콜백 함수는 다른 함수에 매개변수(parameter)로 들어가는 함수로 이해하면 쉽습니다.

# 2.7.1. 예제

코드1 에서는 callback.html 문서를 생성하여 스크립트를 작성해 보겠습니다.
코드2 에서는 콜백 함수를 사용하는 내장함수를 사용해 보겠습니다.

콜백함수를 활용하는 setTimeOut/setInterval

setTimeOut

clearTimeOut

지정시간 이후에 콜백함수를 실행 합니다. 🔗MDN 기본형 setTimeout(함수,시간)

setTimeout(function () {
	document.write('1초 후에 실행됩니다');
}, 1000);

setTimeOut 을 취소합니다. 🔗 MDN 기본형 clearTimeout(timeoutID)

const stop1 = setTimeout(() => {
	document.write(`1초 후에 두번째 실행됩니다.`);
}, 1000);
clearTimeout(stop1);

setInterval

clearInterval

기본형 setInterval(함수,시간) 지정시간 마다 콜백함수를 실행합니다.

setInterval(function () {
	document.write('1초마다 실행됩니다.');
}, 1000);

기본형 clearInterval(intervalID) 🔗MDN

const stop2 = setInterval(() => {
	document.write('1초마다 두번째 실행됩니다.');
}, 1000);
clearInterval(stop2);

setTimeout, setInterval 종합예제 입니다.

let id;
let count = 0;
id = setInterval(() => {
	document.write(`1초마다 실행됩니다(${count}번째)<br>`);
	count++;
}, 1 * 1000);

setTimeout(() => {
	document.write('타이머를 종료합니다.');
	clearInterval(id);
}, 5 * 1000);

# 2.8. 호이스팅

호이스팅이란 끌어올림을 말합니다. 당근마켓의 끌올 기능처럼 우선해서 읽히는 것입니다.

# 2.8.1. 함수의 호이스팅

웹브라우저에서 자바스크립트 소스를 해석할때 함수 선언부분을 가장 먼저 합니다.

그래서 개발자가 원하는 곳에 함수를 선언해 놓기만 하면 선언 위치와 무관하게 함수를 실행할수 있습니다.

아래의 예시를 비교해 보면 함수를 호출, 선언하는 위치가 다르지만 둘다 문제없이 실행되는것을 볼수 있습니다.

# 2.8.1.1. 예제

caseA

caseB

addNumber();
function addNumber() {
	//실행문
}

function addNumber() {
	//실행문
}
addNumber();

이런 현상을 호이스팅 이라고 합니다.

호이스팅은 명명함수에 발생합니다.

호이스팅이 발생할 경우 함수의 선언 위치는 프로그램 흐름에 영향을 주지 않습니다.

때문에 일반적으로 한 파일내에 여러 함수 선언시 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아놓고 필요할때 마다 호출해서 사용합니다.

# 2.8.2. 변수의 호이스팅

함수 뿐 아니라 호이스팅이 발생하는 것은 변수에도 존재합니다. 변수의 호이스팅에 대해 알아보겠습니다.

자바스크립트의 2023년 현재 표준 버전은 ES6 이며 최신 버전은 ES13 (ECMAscript 2022) 입니다.

변수를 선언하기 위해 사용하는 키워드인 let,const는 ES6에 새로 추가되었으며 이전에는 var 키워드만 사용하였습니다.

let과 const 의 등장배경과 더불어 let,const,var 의 특징에 대해 학습하겠습니다.

# 2.8.3. 변수의 범위

변수나 함수,객체는 유효한 범위가 있습니다. 우리는 그것을 스코프(scope) 라고 부릅니다.

# 2.8.3.1. 지역변수 예제

함수 내에서 var 키워드와 함께 선언된 변수를 지역변수라고 부르며 지역 변수는 선언된 함수 내에서만 스코프를 가집니다.

지역변수 선언하기

function addNumber() {
	var sum = 10 + 20;
}
addNumber();
console.log(sum);

변수 sum 이 정의 되지 않았다는 메시지가 출력됩니다

함수 내에서 선언된 변수는 함수내에서만 유효하므로 함수 밖에서 접근할수 없습니다.

# 2.8.3.2. 전역변수 예제

전역변수는 적용범위의 제한 없이 스크립트 소스코드 전체에서 유효범위를 갖습니다.

전역변수는 함수 밖에서 선언하거나 함수 내에서 var 키워드 없이 선언시 사용할수 있습니다.

전역변수 선언하기

var total; //전역 변수
function addNumber() {
	var sum = 10 + 20; // 지역 변수
	multi = 10 * 20; // 전역 변수
	total = sum + multi;
}
addNumber();
console.log(multi);
document.write(`<h1>${total}</h1>`);

# 2.8.4. var의 호이스팅

var 변수는 자바스크립트 해석기에서 따로 기억을 합니다.

그렇기 때문에 해석시 끌어올림(hosting) 현상이 발생하게 됩니다.

변수를 실행하기 전이지만 해석기에서 변수의 존재를 미리 저장해 두기 때문에 아래와 같은 문제가 발생하게 됩니다.

# 2.8.4.1. 예제

hoisting

설명

var x = 10;

function displayNumber() {
	console.log('x is ' + x);
	console.log('y is ' + y);
	var y = 20;
}
displayNumber();

호이스팅이 발생하여 변수 y가 8번에서 선언되었음에도 선언은 되었으나 값이 미정인 상태라는 의미의 undefined 가 확인된다.

# 2.8.5. var의 재선언과 재할당

var 키워드로 선언한 변수는 호이스팅 외에도 재선언과 재할당이 가능합니다.

선언 : 변수를 생성하기 위해 식별자를 지정하는 단계

할당 : 변수에 값을 넣는 단계

초기화 : 변수의 식별자에 값의 할당을 완료한 단계

# 2.8.5.1. 예제

설명

function addNumber(num1, num2) {
	return num1 + num2;
}
var sum = addNumber(10, 20);
console.log(sum);
sum = 50;
console.log(sum);
var sum = 100;
console.log(sum);

# 2.8.6. let 과 const

var 변수의 유연함으로 인해 프로그램의 작성시 예상치 못한 버그가 잦았으며 디버깅 시 원인을 찾는 것 또한 어려웠습니다.

그래서 ES6에서 블록레벨 에서만 사용할수 있는 let과 const 가 등장하게 되었습니다.

블록이란 { } 를 의미합니다.

# 2.8.6.1. let-예제

let 키워드를 사용하여 변수를 선언해 봅시다. 1부터 10까지 더하는 함수를 작성합니다.

function calcSum(n) {
	//1-블록변수 선언
	let sum = 0;
	//2-전역변수 선언
	sum2 = 0;
	for (let i = 1; i < n + 1; i++) {
		sum += i;
	}
	console.log(`블록변수sum:${sum}`);
	//3-변수sum 값 재할당
	sum = 100;
	console.log(`sum변수 재할당:${sum}`);
	//4-sum의 재선언
	//let sum=5;
}
calcSum(10);
console.log(`전역변수sum2:${sum2}`);

let 변수는 같은 식별자로 재선언이 불가하므로 표시된 부분은 콘솔창에서 중복선언이라는 메시지의 오류가 반환됩니다.

호이스팅-같은 문서에 이어서 코딩
var x = 10;
function displayNumber() {
	console.log('x is ' + x);
	console.log('y is ' + y);
	let y = 20;
}
displayNumber();

설명

결과

let 변수는 호이스팅이 발생하지 않으므로 우측과 같이 y 변수는 초기화 되지 않았다는 콘솔오류가 출력됩니다.

# 2.8.6.2. const-예제

const 키워드를 사용하여 변수(상수)를 선언해봅시다.

[호이스팅1]

결과

const currentYear = 2020;
console.log(currentYear);
const currentYear;
console.log(currentYear);

3행의 currentYear 은 1행에서 이미 선언한 식별자 이므로 다시 사용할수 없습니다.

콘솔메시지에 이미 선언되었다는 메시지와 함께 오류가 반환됩니다.

[호이스팅2]

결과

const currentYear = 2020;
console.log(currentYear);
currentYear = 2100;
console.log(currentYear);

3행의 currentYear 은 1행에서 이미 초기화 하였으므로 값을 재할당 할수 없습니다.

콘솔메시지에 초기화 할수없다는 메시지와 함께 오류가 반환됩니다.

변수사용팁

전역변수는 최소한으로 사용합니다.
- 전역변수는 접근이 용이해 편리하지만 예상치 못한 곳에서 값이 변경될수 있으므로 버그가 발생할 확률이 높습니다.
var 변수는 함수의 시작부분에 선언합니다.
- var 변수는 호이스팅이 발생하므로 함수의 시작부분에 선언하는것이 유지보수 하기 편하고 버그발생도 줄일수 있습니다.
for 문에서 변수 사용시 var 키워드는 사용하지 않습니다.
- for 문 내의 중감식은 for문의 블록 내에서만 사용되는데 종종 var 변수로 선언하기도 합니다. var은 호이스팅이 발생하므로 다른 함수의 변수와 충돌을 일으킬수 있으니 let 키워드를 사용합니다.

# 3. 이벤트

자바스크립트에서 이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다.

사용자의 마우스 클릭, 키보드 입력, 페이지 로딩 완료, AJAX 요청 완료 등과 같은 다양한 상황에서 이벤트가 발생할 수 있습니다.

웹브라우저나 사용자가 행하는 어떤 동작을 이벤트라 칭하며 웹 브라우저 내에 새로운 페이지를 불러오는것도 이벤트에 해당합니다.

웹문서 영역 내에서 이루어 지는 동작에 한해 이벤트라 하며 웹문서 영역을 벗어나 클릭하는 행위는 자바스크립트의 이벤트가 아닙니다.

# 3.1. 이벤트

🔗MDN

# 3.1.1. 마우스이벤트

이벤트 이름	설명
`click`	사용자가 요소를 클릭했을 때 발생합니다.
`dblclick`	사용자가 요소를 더블 클릭했을 때 발생합니다.
`mousedown`	사용자가 마우스 버튼을 눌렀을 때 발생합니다.
`mouseup`	사용자가 마우스 버튼을 놓았을 때 발생합니다.
`mousemove`	마우스 커서가 요소 위에서 움직일 때마다 발생합니다.
`mouseover`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서도 반응)
`mouseenter`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서는 반응하지 않음)
`mouseout`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다. (하위 요소에 대해서도 반응)
`mouseleave`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다.(하위 요소에 대해서는 반응하지 않음)

# 3.1.2. 키보드이벤트

이벤트 이름	설명
`keydown`	키보드의 키를 누르는 순간 발생합니다.
`keyup`	키보드의 키를 놓는 순간 발생합니다.
`keypress`	문자키가 눌렸을 때 발생합니다. 'keydown'과 'keyup' 사이에서 발생하며, 특수키에는 반응하지 않습니다.

# 3.1.3. 문서로딩이벤트

이벤트 이름	설명
`DOMContentLoaded`	HTML 문서의 파싱이 완료되었고, DOM 트리가 완성되었을 때 발생합니다. 외부 리소스(images, stylesheets 등)의 로딩 상태와는 무관합니다.
`load`	페이지와 모든 관련 리소스(images, stylesheets 등)가 완전히 로드되었을 때 window 객체에서 발생합니다.
`beforeunload`	사용자가 페이지를 벗어나려 할 때 window 객체에서 발생합니다. 이를 활용하여 사용자에게 페이지를 벗어나지 않도록 경고할 수 있습니다.
`unload`	사용자가 페이지를 벗어났을 때 window 객체에서 발생합니다.
`resize`	문서 화면 크기가 바뀌었을때 이벤트가 발생합니다.
`scroll`	문서 화면이 스크롤 되었을때 이벤트가 발생합니다.

# 3.1.4. 폼이벤트

이벤트 이름	설명
`submit`	폼 데이터가 서버로 제출되기 전에 발생합니다. 이 이벤트의 기본 동작은 페이지를 새로고침하는 것이지만, preventDefault 메소드를 사용하여 중단할 수 있습니다.
`reset`	폼의 리셋 버튼이 클릭되었을 때 발생합니다.
`focus`	요소가 포커스를 받았을 때 발생합니다.
`blur`	요소가 포커스를 잃었을 때 발생합니다.
`change`	사용자가 입력 필드의 값을 변경하고 포커스를 잃었을 때 발생합니다.
`input`	사용자가 입력 필드에 값을 입력할 때마다 발생합니다.

# 3.2. 이벤트처리기

이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다.

웹 페이지에서 사용자의 상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지 로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을 처리하기 위해 이벤트 처리기를 사용합니다.

이벤트 처리기의 3가지 기본문법

html 속성으로 설정
dom 프로퍼티로 설정
addEventListener 메서드로 설정

HTML 속성으로 설정

<button onclick="console.log('Button clicked!')">Click me</button>

DOM 프로퍼티로 설정

document.querySelector('button').onclick = function () {
	console.log('Button clicked!');
};

addEventListener 메서드 사용 [강추 👍]

여러 개의 이벤트 리스너를 동일한 요소와 이벤트에 대해 추가할 수 있습니다.

document.querySelector('button').addEventListener('click', function () {
	console.log('Button clicked!');
});

# 3.2.1. HTML 속성을 이용한 방식-버튼 클릭시 알림창표시-예제

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자바스크립트 이벤트</title>
		<link rel="stylesheet" href="css/function.css" />
	</head>
	<body>
		<ul>
			<li>
				<a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a>
			</li>
			<li>
				<a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a>
			</li>
			<li>
				<a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a>
			</li>
		</ul>
		<div id="result"></div>
	</body>
</html>

a:link,
a:visited {
	color: black;
	text-decoration: none;
}
ul {
	list-style: none;
	width: 500px;
	margin: 10px auto;
	padding: 0;
}
li {
	display: inline-block;
	width: 120px;
	border: 1px solid #ccc;
	padding: 10px 15px;
	font-size: 16px;
	text-align: center;
}
#result {
	width: 500px;
	height: 300px;
	margin: 30px auto;
	border: 2px solid #ccc;
	border-radius: 15px;
}
p {
	width: 80%;
	padding: 10px;
	line-height: 2em;
}

# 3.2.2. 버튼 클릭시 배경변경-예제

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자바스크립트 이벤트</title>
		<link rel="stylesheet" href="css/function.css" />
	</head>
	<body>
		<ul>
			<li>
				<a href="#" onclick="changeBg('green')">Green</a>
			</li>
			<li>
				<a href="#" onclick="changeBg('orange')">Orange</a>
			</li>
			<li>
				<a href="#" onclick="changeBg('purple')">Purple</a>
			</li>
		</ul>
		<div id="result"></div>
		<script>
			<!-- 스크립트작성 -->
		</script>
	</body>
</html>

a:link,
a:visited {
	color: black;
	text-decoration: none;
}
ul {
	list-style: none;
	width: 500px;
	margin: 10px auto;
	padding: 0;
}
li {
	display: inline-block;
	width: 120px;
	border: 1px solid #ccc;
	padding: 10px 15px;
	font-size: 16px;
	text-align: center;
}
#result {
	width: 500px;
	height: 300px;
	margin: 30px auto;
	border: 2px solid #ccc;
	border-radius: 15px;
}
p {
	width: 80%;
	padding: 10px;
	line-height: 2em;
}

function changeBg(color) {
	var result = document.querySelector('#result');
	result.style.backgroundColor = color;
}

# 3.2.3. 버튼 클릭시 상세설명 표시-예제

아래의 코드를 복사하여 시작하겠습니다.

16.html

css/event.css

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자바스크립트 이벤트</title>
		<link rel="stylesheet" href="css/event.css" />
	</head>

	<body>
		<div id="item">
			<img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
			<button class="over" id="open">상세 설명 보기</button>
			<div id="desc" class="detail">
				<h4>이벤트 처리기(event handler)</h4>
				<p>이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. 웹 페이지에서 사용자의 상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지 로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을 처리하기 위해 이벤트 처리기를 사용합니다.</p>
				<button id="close">상세 설명 닫기</button>
			</div>
		</div>
		<script>
			function showDetail() {
				document.querySelector('#desc').style.display = 'block'; // 상세 설명 부분을 화면에 표시
				document.querySelector('#open').style.display = 'none'; // '상세 설명 보기' 단추를 화면에서 감춤
			}

			function hideDetail() {
				document.querySelector('#desc').style.display = 'none'; // 상세 설명 부분을 화면에서 감춤
				document.querySelector('#open').style.display = 'block'; // '상세 설명 보기' 단추를 화면에 표시
			}
		</script>
	</body>
</html>

#item {
	position: relative;
	width: 500px;
	height: auto;
	padding: 15px 20px;
	margin: auto;
}
button {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	border: 1px solid #ccc;
	font-size: 0.8em;
}
.over {
	position: absolute;
	left: 30px;
	bottom: 30px;
}
.detail {
	width: 400px;
	text-align: left;
	line-height: 1.8;
	display: none;
}

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자바스크립트 이벤트</title>
		<link rel="stylesheet" href="css/event.css" />
	</head>

	<body>
		<div id="item">
			<img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
			<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
			<div id="desc" class="detail">
				<h4>이벤트 처리기(event handler)</h4>
				<p>이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. 웹 페이지에서 사용자의 상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지 로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을 처리하기 위해 이벤트 처리기를 사용합니다.</p>
				<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
			</div>
		</div>
		<script>
			function showDetail() {
				document.querySelector('#desc').style.display = 'block'; // 상세 설명 부분을 화면에 표시
				document.querySelector('#open').style.display = 'none'; // '상세 설명 보기' 단추를 화면에서 감춤
			}

			function hideDetail() {
				document.querySelector('#desc').style.display = 'none'; // 상세 설명 부분을 화면에서 감춤
				document.querySelector('#open').style.display = 'block'; // '상세 설명 보기' 단추를 화면에 표시
			}
		</script>
	</body>
</html>

html속성을 사용하여 이벤트핸들러를 처리한 예시 였습니다.

# 3.2.4. DOM을 이용한 방식-버튼클릭시 글자변경-예제

아래의 코드를 복사하여 시작합니다.

16.html

css/function.css

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>자바스크립트 이벤트</title>
		<link rel="stylesheet" href="css/function.css" />
	</head>
	<body>
		<button id="change">글자색 바꾸기</button>
		<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>

		<script></script>
	</body>
</html>

a:link,
a:visited {
	color: black;
	text-decoration: none;
}
ul {
	list-style: none;
	width: 500px;
	margin: 10px auto;
	padding: 0;
}
li {
	display: inline-block;
	width: 120px;
	border: 1px solid #ccc;
	padding: 10px 15px;
	font-size: 16px;
	text-align: center;
}
#result {
	width: 500px;
	height: 300px;
	margin: 30px auto;
	border: 2px solid #ccc;
	border-radius: 15px;
}
p {
	width: 80%;
	padding: 10px;
	line-height: 2em;
}

방법 1 : 요소를 변수로 지정 & 미리 만든 함수 사용
let changeBttn = document.querySelector('#change');
changeBttn.onclick = changeColor;

function changeColor() {
	document.querySelector('p').style.color = '#f00';
}

방법 2 : 요소를 따로 변수로 만들지 않고 사용
document.querySelector('#change').onclick = changeColor;
function changeColor() {
	document.querySelector('p').style.color = '#f00';
}

방법 3 : 직접 함수를 선언
document.querySelector('#change').onclick = function () {
	document.querySelector('p').style.color = '#f00';
};

# 4. 마무리문제

🔗16예제 를 응용하여 상세설명을 열고 닫는 함수를 DOM 방식으로 수정해 보세요

다음 조건을 참고하여 매개변수로 전달받은 두수의 값이 같으면 곱하고 다르면 더하는 함수 sumMulti() 를 작성하세요.

그후 인자로 5,10 을 전달할때와 10,10 을 전달할때의 실행결과를 콘솔창에 표시하세요.

조건

함수의 선언은 function sumMulti(x,y) 로 합니다.
if~else 문을 사용하여 두수의 값을 비교합니다.
값의 비교시 비교연산자는 === 를 사용합니다.

프롬프트 창에서 두수를 입력받아 크기를 서로 비교한 후 더 큰 숫자를 알림창으로 표시하는 함수를 작성하세요.

그후 인자로 5,10 을 전달할때와 10,10 을 전달할때의 실행결과를 콘솔창에 표시하세요.

조건

프롬프트 창에서 입력받은 두수를 각각 num1, num2 변수에 저장합니다.
함수 선언시 함수명은 자유롭게 지정하고 매개변수는 2개를 사용합니다.
if~else 문을 사용하며 값의 비교시 비교연산자는 === 를 사용합니다.
두수가 같을경우 '같습니다' 를 출력합니다.

함수 호이스팅 이벤트