5/9(2) 생활코딩

오늘의 진도:

 WEB2 - JavaScript

  함수예고~함수의 활용

 

1. 함수(function) 예고

(1) 함수의 기본

함수는 수납상자처럼 코드들을 정리정돈하기 위한 도구이다.

 

야간모드 버튼을 함수로 만들어보자.

야간모드 코드를 잘라내서

head 안에 script 태그 안에 붙여넣었다.

(꼭 head 안에 할 필요는 없다.)

 

그리고 이것을 nightDayHandler라는 이름의 함수로 만들었다.

 

nightDayHandler 뒤의 괄호 안에 self를 쓰고,

기존의 this들을 모두 self로 바꾸었다.

 

body에 input에 onclick에

nightDayHandler라고 쓰고 괄호 안은 this로 바꿨다.

이렇게 하면 nightDayHandler라는 함수를 실행시키라는 뜻이 된다.

 

2. 함수

(1) 함수의 기본

2-1과 2-2를 함수로 만들어보자.

 

먼저 해당 script 안에

two라는 함수를 만들어주고 그 밑에 2-1과 2-2를 붙여넣는다.

 

그리고 기존의 2-1와 2-2 자리를 two라는 함수로 바꾼다.

그러면 똑같은 결과가 나온다.

 

(2) 매개변수(parameter)와 인자(argument)

함수는 입력과 출력으로 이루어져 있는데,

입력에 해당하는 것이

매개변수(parameter)와 인자(argument),

 

출력에 해당하는 것이

리턴(return)이다.

 

script 태그 안에

document.write(1+1);

를 입력하면 2가 출력된다.

onePlusOne이라는 함수를 만들고

그 내용을 document.write(1+1);로 하고

 

onePlusOne();을 입력하면 같은 결과가 출력된다.

 

이번에는 더하기를 하는 함수를 만들어보자.

※ // 뒤는 주석이라서 실행되지 않는다.

 

sum이라는 함수를 만들었고,

왼쪽에는 left, 오른쪽에는 right라는 매개변수(parameter)를 정의해준다.

 

※ 여기서 document를 documen이라고 잘못 썼다.

 콘솔에 들어가면 에러를 알려준다.

 

그리고 left와 right를 더한 값을 출력하도록 한다.

 

5와 7이라는 결과가 출력되었다.

 

여기서, 함수로 전달하는 2와 3이라는 값을

인자(argument)라고 부른다.

(3) 리턴

표현식(expression)이 무엇인가.

1+1 = 2에서

1+1은 2에 대한 표현식이다.

 

2-1 = 1에서

2-1은 1에 대한 표현식이다.

 

1===1의 값이 true일 때,

1===1은 true에 대한 표현식이다.

 

함수도 마찬가지다.

저번시간에 만들었던 sum 함수를 실행시키면 

document.write가 실행이 되겠지만,

 

sum을 실행시키면 5가 나온다.

얘가 5가 되는 표현식으로 만들고 싶다. (?)

그러기 위해서는 return을 알아야 한다.

 

만약 sum의 결과를 빨간색으로 표시하고 싶다면, 

기존의 식(위 위 그림)을 다음(위의 그림)과 같이 바꿔줘야 할 것이다.

 

이 때 sum2라는 이름으로 새로운 함수를 만들어주고

return 값을 좌항+우항으로 만들어준다.

이렇게 하면 document.write 안에 left+right를 쓸 필요가 없고

sum2로 대체할 수 있다.

↑ 위의 기존 식과 비교해보자.

또한 출력값의 글자색이나 글자 크기를 바꿀 때도 훨씬 더 간편하게 쓸 수 있다.

↑ 위의 기존 식과 비교해보자.

3. 함수의 활용

night 버튼을 함수를 이용해서 리팩토링해보자.

1-(1)에서 한 것처럼 하면 된다.

 

this와 self 작업을 하지 않으면,

처음 클릭했을 때는 night 모드로 바뀌지 않고,

그 다음부터는 잘 작동하기는 하는데

버튼 이름이 night에서 day로 바뀌지 않는다.

 

∵ onclick이라는 이벤트 안에서 this는

이 이벤트가 소속된 태그(input id="night_day")를 가리키도록 약속되어 있는데,

 

우리가 독립된 함수를 만들게 되면

독립된 함수 안의 this는 더 이상 input 버튼이 아니고 전역객체를 가리키게 된다.

웹브라우저에서는 윈도우가 된다.

 

그래서 input을 가리키게 하기 위해서

body의 nightDayHandler 뒤의 괄호에 this를 써준다.

 

그러면 nightDayHandler라는 함수가 실행될 때,

함수에 적혀있는 self라는 매개변수를 this로 바꾸게 된다.