05-1 여러 동작을 묶은 덩어리, 함수

율룡이·2023년 7월 12일

JavaScript 자바스크립트 입문

JS

목록 보기

15/20

함수에 대해서

자주 실행해야 하는 기능에 포함된 명령이 여러개일 땐, 그 명령을 한번에 묶어서 사용할 수 있게 함
함수를 사용하게 되면, 각 명령의 시작과 끝을 명확히 구분할 수 있다.

함수를 정의하고 실행하기

function 예약어 선언하고, 중괄호 안에 함수에서 실행할 여러 명령을 묶는다.

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

버튼으로 함수를 실행하는 프로그램 만들기

※4장까진 바로 HTML 안에 작성했지만, 5장 이후로는 외부 파일에 연결하도록 하겠다.

1단계 [HTML 수정]

현재 HTML 작성 상태
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>함수</title>
	<link rel="stylesheet" href="css/add.css">
</head>
<body>
	<button>덧셈 계산하기</button>
</body>
</html>
덧셈 계산하기 버튼을 눌러도 실행이 되지 않는 상황이다.
→ 소스를 추가한다.

onclick

버튼을 눌렀을 때 실행할 대상인 함수를 알려주는 예약어
onclick="실행할 대상인 함수()"

2단계 [연결할 js 파일 생성]

현재 사용자 정의 함수 addNumber 함수가 선언만 된 상태기 때문에
js파일에 작성하여 연결할 것이다.
function addNumber ( ) {
	var sum = 10 + 20;
    alert(sum); //앞선 예시와 다르게 화면 출력 함수로 변경
    }

3단계 [js 파일 연결]

기존에 작성 중이던 HTML로 돌아와, 바디 태그 앞에 js 파일을 연결하도록 한다.

??
덧셈 계산하기에 연결이 안되고 옆 버튼이 하나 더 생겨버렸다.

이유는 을 < button > 안에 작성해야 하는데, 기존 < button >에 작성하지 않고 하나 더 만들어 작성했기 때문이다.