[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "자바스크립트 기초-넷째마당: 15 함수와 이벤트"

15-1 함수 알아보기

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

함수: 동작해야 할 목적대로 묶은 명령.

함수 사용하면 시작과 끝 명확하게 구별 가능. 묶은 기능에 이름 붙여 같은 이름으로 명령 실행.

 

함수를 사용하는 이유

자바스크립트에 들어 있는 함수를 가져다 사용하거나, 자신이 필요한 명령을 직접 함수로 만들어 사용.

 

함수 선언 및 호출

함수 만들 때 이름 붙이고, 필요할 때마다 함수 이름 사용해 실행.

함수 선언한다, 함수 정의한다: 함수가 어떤 명령을 처리할지 미리 알려주는 것.

함수 선언할 때: 에약어 (function) + 중괄호{실행할 명령}

function 함수명() {
	명령
    }

함수 선언만으로 함수 실행 x. 함수 선언한 후, 실행하는 코드 작성.

함수 실행하려면 미리 선언한 함수명 사용.

함수 호출한다, 함수 실행한다: 선언한 함수 사용하는 것.

함수명( ) 또는 함수명(변수)

 

함수 선언과 실행 순서

자바스크립트 소스 해석시 함수 선언 부분 가장 먼저.

① 함수 호출 먼저.

addNumber( );

function addNumber() {
	...
    }

② 함수 선언 먼저.

function addNumber( ) {
	...
    }
    
addNumber( );

 

 

 

---

 

 

15-2 var를 사용한 변수 특징

변수의 적용 범위 스코프 알아보기

스코프: 변수를 선언하고 사용할 때 변수가 적용되는 범위. 이 영역 주의.

지역변수(=로컬변수): 한 함수 안에서만 사용 가능.

전역변수(=글로벌변수): 스크립트 소스 전체에서 사용할 수 있는 변수.

 

함수 안에서만 쓸 수 있는 지역변수

함수 안에서 선언하고 함수 안에서만 사용.

지역변수 선언하려면 예약어 var와 함께 변수 이름 지정.

var로 선언한 변수는 함수 안에서만 사용 가능.

 

스크립트 안에서 자유롭게 쓸 수 있는 전역변수

적용범위 제한하지 않고 스크립트 소스 코드 전체에서 사용 가능.

함수 밖에서 선언, 함수 안에서는 var예약어 빼고 선언. 

<script>		
	function addNumber() { 								
		var sum = 10 + 20;	// 지역 변수
     	 multi = 10 * 20;       	// 전역 변수
		}
    addNumber();
    console.log(multi);    
</script>

 

var와 호이스팅

호이스팅: 끌어 올린다. 상황에 따라 변수의 선언과 할당을 분리해 선언 부분을 스코프의 가장 위쪽으로 끌어 올리는 것. (소스 해석 의미)

<script>		 
    var x = 10;

		function displayNumber() { 								
      console.log("x is " + x);
      console.log("y is " + y);      
      var y = 20;
		}
    displayNumber();
</script>

var를 사용한 변수는 따로 기억. 선언한 것과 같은 효과.  => "호이스팅"

 

변수의 재선언과 재할당

var를 사용한 변수는 재선언, 재할당 가능.

<script>		
		function addNumber(num1, num2) { 								
			return num1 + num2;		   // 두개의 수 더하기				
		}
		var sum = addNumber(10, 20);  		   // sum 변수 선언, 함수 호출
    console.log(sum); 
    sum = 50;						   // sum 변수 재할당
    console.log(sum);
    var sum = 100;					   // sum 변수 재선언
    console.log(sum);
 </script>

 

 

---

 

15-3 let과 const 등장

let을 사용한 변수 특징

예약어 var와 let, const의 큰 차이: 스코프의 범위.

var: 함수 영역(레벨)의 스코프

let, const: 블록 영역의 스코프.

 

블록 안에서만 쓸 수 있는 변수

let 예약어: 변수를 선언한 블록{}에서만 유효함. 블록 벗어나면 사용 불가능.

전역 변수를 선언하고 싶다면 let 예약어 x, 변수이름과 초깃값만 할당하면 됨.

 

재할당은 가능하지만 재선언은 할 수 없는 변수

let 예약어: 재할당 가능, 변수 재선언 불가능. 같은 변수 이름 중복 사용 불가능.

 

호이스팅 없는 변수

var 예약어: 선언하기 전 실행하더라도 undefined 값.

let 예약어: 선언하기 전 사용할 경우 오류 메시지.

 

const를 사용한 변수의 특징

const로 선언한 변수 = 상수 변수(상수: 프로그램 안에서 변하지 않는 값)

변하지 않는 값을 변수로 선언할 때 사용.

재선언, 재할당 불가능.

블록 레벨의 스코프.

 

변수 때문에 생기는 오류를 줄이려면 let, const 사용 좋음.

값이 자주 바뀌는 값: let

재할당 없는 변수: const

 

구분 var, let, const(상수변수)

스코프	함수 레벨	블록 레벨	블록 레벨
재할당	가능	가능	불가능
재선언	가능	불가능	불가능

 

자바스크립트 변수 사용하는 법

1. 전역 변수는 최소한 사용

 -오류 발생 줄임

2. var변수는 함수의 시작 부분에 선언

 -호이스팅 등과 같은 오류 줄임

3. for문에서 카운터 변수를 사용할 때에는 var 사용 x.

4. ES6를 사용한다면 예약어 var < let 사용 좋음.

 

 

---

 

15-4 재사용할 수 있는 함수 만들기

매개 변수, 인수, return 알아보기

매개변수: 함수를 선언할 부터 외부에서 값을 받아 줄 변수를 미리 만드는 것. 괄호안에 배개 변수 이름 넣음.

매개변수 이름 붙이는 방법 일반 변수 이름 붙이는 법과 같음.

매개 변수: 선언된 함수 안에서만 사용 가능. 여러개 사용시 매개변수 이름 사이에 쉼표 찍어 나열.

 

함수 선언할 때 매개변수 지정하기

값을 반환한다: 결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야 함.

인수: 매개변수가 있는 함수를 호출할 때 실제 값 부분.

 

매개변수 기본값 지정하기

함수에서 매개변수 변숫값을 넘겨받지 못했을 때 넘겨받는 인수에 따라기본값 사용.

 

<script>		
	function addNumber(num1, num2){ 								
			return num1 + num2;						
		}
    var result = addNumber(2, 3);
    document.write("두 수를 더 한 값 : " + result);
</script>

 

 

---

 

15-5 함수 표현식

익명함수

이름이 없는 함수. 선언할 때 이름 붙이지 않음.

함수 자체가 식. 함수를 변수에 할당 가능. 다른 함수의 매개변수로 사용 가능.

function(매개변수) {명령}

	<script>		
    var sum = function(a, b){
      return a + b;
    }
    document.write("함수 실행 결과 : " + sum(10, 20) );
  </script>

 

즉시 실행 함수

한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행.

함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석.

(function( ) { 명령 } ( ));

(function( 매개변수 ) { 명령 } (인수));

	<script>		
    (function() {
      var userName = prompt("이름을 입력하세요.");
      document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
    }());
  </script>	
  
  
  	<script>		
    (function(a, b){   // 함수 선언을 위한 매개변수
      sum = a + b;      
    }(100, 200));       // 마지막에 함수 실행을 위한 인수 
    document.write("함수 실행 결과 : " + sum);
  </script>	

 

화살표 함수

ES6부터 지원하는 방법.

화살표 기호 (⇒) 왼쪽에는 매개변수를, 오른쪽에는 함수를 작성함.

익명함수일 경우에만 사용 가능.

 

매개변수가 없을 경우

<매개변수가 없는 함수>
const hi = function() {
    return "안녕하세요?";
       }
       
<매개변수가 없는 화살표 함수>
const hi = () => {return "안녕하세요?"};

<매개변수가 없는 화살표 함수(중괄호 생략)>
const hi = () => "안녕하세요?";

 

매개 변수가 1개인 경우

<매개변수가 1개인 함수>
let hi = function(user) {
    document.write (user + "님, 안녕하세요?");
     }

<매개변수가 1개인 화살표 함수>
let hi = (user) => { document.write (user + "님, 안녕하세요?"); }

 

매개 변수가 2개인 경우

<매개변수가 2개인 함수>
let sum = function(a, b) {
      return a + b;
       }

<매개변수가 2개인 화살표 함수>
let sum = (a, b) => { return a + b }

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

 

 

---

 

15-6 이벤트와 이벤트처리기

이벤트 알아보기

이벤트: 웹 브라우저나 사용자가 행하는 어떤 동작. 웹 문서 영역 안에서 이루어지는 동작.

 

마우스 이벤트

종류	설명
click	HTML 클릭할 때
dbclick	HTML 더블클릭할 때
mousedown	요소 위에 마우스 버튼 눌렀을 때
mousemove	요소 위에 마우스 포인터 움직일 때
mouseover	마우스 포인터가 요소 위로 옮겨질 때
mouseout	마우스 포인터가 요소 벗어날 때
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때

 

키보드 이벤트

종류	설명
keydown	키를 누르는 동안
keypress	키를 눌렀을 떄
keyup	키에서 손을 뗄 때

 

문서로딩 이벤트

종류	설명
abort	완전히 로딩되기 전에 불러오기 멈췄을 때
error	정확히 로딩되지 않았을 때
load	로딩 끝나면
resize	화면 크기가 바뀌었을 때
scroll	화면이 스크롤되었을 때
unload	벗어날 때

 

폼이벤트

종류	설명
blur	폼요소에 포커스를 잃었을 때
change	목록이나 체크 상태 등이 변경되면
focus	폼요소에 포커스가 놓였을 때
reset	폼이 리셋되었을 때
submit	버튼 클릭했을 때

 

이벤트 처리기 알아보기

이벤트처리기(=이벤트 핸들러): 웹 문서에서 이벤트가 발생하면 처리하는 함수

기본적인 방법: 이벤트가 발생한 HTML 태그에 이벤트 처리기 직접 연결.

<태그 이벤트명 = "함수명">

 

버튼 클릭하면 이미지 바꾸기

<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>
		function changeBg(color) {
			var result = document.querySelector('#result');
			result.style.backgroundColor = color;
		}
	</script>
</body>

 

 

 

---

 

 

15-7 DOM을 이용한 이벤트 처리기

이벤트 처리기: HTML이 주체가 되어 자바스크립트의 함수 사용.

DOM: 자바스크립트가 주체가 되어 HTML요소를 가져와 이벤트 처리기 연결.

웹 요소.onclick = 함수;

 

 

 

 

---

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB