1. 함수(function)
항상 공부를 할 때 과장되게 코드가 1억개 짜리 굉장히 복잡한 코드라고 생각하면서 접근해야한다.
코딩을 하다가 새로고침해도 적용이 안되면 코드가 잘못된 것이니 개발자도구 console로 들어가면 어떤 것이 잘못됐는지 알려준다. 보고 고치면 끝~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
</script>
</body>
</html>
만약에
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
이렇게 나열을 해야할 때 1억개가 있다고 생각하면 답이 없다.
반복문을 쓰면 될까 했지만 이것은 연속적으로 반복되는 것이 아니기에 쓸 수가 없다. 여기서 쓸 수 있는 것은 '함수'!
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
함수의 이름은 two 이다. 그리고 밑에는 재사용하고 싶은 코드를 복붙. 그리고 밑에 중복된 코드를 two라고 바꾼다. 그러면 위에 코드랑 같은 화면이 뜨지만 내부적으로는 완전히 다른 메커니즘을 갖게 된다.
웹브라우저는 이 코드를 보면 function을 보고 그리고 중괄호를 본 다음에 아 이사람은 two라는 함수를 만들려고 하는 거구나를 인식하고 그 밑에 있는 것이 그 함수의 내용이구나라고 기억한다.
그리고 two();를 쓰면 똑같이 기억해낸다.
2. 매개변수
컴퓨터 프로그래밍에서 매개변수(영어: parameter 파라미터[*])란 변수의 특별한 한 종류로서, 함수 등과 같은 서브루틴[1]의 인풋으로 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다
매개변수 (컴퓨터 프로그래밍) - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍에서 매개변수(영어: parameter 파라미터[*])란 변수의 특별한 한 종류로서, 함수 등과 같은 서브루틴[1]의 인풋으로 제공되는 여러 데이터 중 하
ko.wikipedia.org
함수는 '입력'과 '출력'으로 이루어져있는데,
입력에 해당되는 것이 '매개변수(parameter)', '인자(argument)'
<h2>Parameter & Arguments</h2>
<script>
function onePlusone(){
document.write(1+1+'<br>');
}
onePlusone();
function sum(left, right){
document.write(left+right+'<br>'):
}
sum(2,3);
sum(3,4);
</script>
2
5
7
여기서 '<br>' 줄바꿈 태그를 사용하는 이유는 만약에 그냥 쓸 경우
<script>
function onePlusone(){
document.write(1+1);
}
onePlusone();
function sum(left, right){ /*---매개변수*/
document.write(left+right):
}
sum(2,3); /*---인자 */
sum(3,4);
</script>
257
우리가 여기서 위에처럼 목록태그인 <ol>이나 <ul>을 안썼기 때문에
줄바꿈 없이 나온다. SO 목록태그나 줄바꿈 태그를 써야한다.
부모태그<ol>자녀태그<li>
or
부모태그<ul>자녀태그<li>
or
<br>
or
<p>
sum(2,3); 여기에서 우리가 함수로 전달하는 2와 3이라는 값을 우리는 인자(argument)라고 부른다.
sum(left, right); 처럼 이 값을 받아서 함수 안으로 매개해주는 변수들을 매개변수(parameter)라고 부른다.
이 두가지는 함수로 들어오는 입력값과 관련된 것이다.
Q: document.write(left+right+'<br>'); 에서 1. <br>에 작은 따옴표가 왜 들어가야 하나요? 이전 영상들에서부터 궁금했던 것입니다. 따옴표안에 들어간다면 문자열로 표기한다는 거 같은데, 태그도 출력할때 따옴표에 넣어야 하는건가요? 2. 비슷한 맥락으로 '<br>'를 연결할 때 +가 사용된 것이 이해되지 않습니다.
A:
1. 문자열은 작은따옴표('문자열')나 큰따옴표("문자열")로 묶어주어야 합니다. 태그도 전부 문자열로 생각하셔야 합니다. 자바스크립트에서->html로 보내야 하는 문자열 말이죠.
2. document.write() 함수에서요, () 괄호 안에는 변수,숫자,문자열이 들어갈 수 있습니다. 변수나 숫자는 따옴표를 치면 안됩니다. 문자열은 따옴표를 쳐줘야 해요. 그럼 예제를 다시 볼까요.
document.write(left+right+'<br>')을 보면, left는 숫자를 값으로 가질 변수입니다, right도 변수죠.
하지만 <br> 안에는 아무 의미도 없는 html 그 자체의 <br>일 뿐입니다. 그래서 문자열로 취급하여 '<br>'로 표기합니다.
만약 변수 left가 1이고, right가 2라면 (left+right)만 들어가면, left의 숫자값과 right의 숫자값을 더한 3이 출력됩니다. 그러나 만약 ('left'+'right')라고 한다면 이것은 문자열끼리 더하라는 뜻이므로, 'leftright'라고 출력됩니다.
다시 돌아가보죠. document.write(left+right+'<br>')은 left의 숫자값1과, right의 숫자값2를 더한 값 3에 <br>이라는 문자열이 뒤에 가서 그냥 붙습니다. 따라서 html로 표현될때는 3<br> 이 되는 것입니다.
3. 출력(return)
리턴 함수는 함수의 갯수를 줄여줄 수 있다.
표현식(expression)
1+1은 2에 대한 표현식. 1===1은 ture라는 값에 대한 표현식
<h2>Return</h2>
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
</script>
Q. 왜, sumColorRed 함수에선 덧셈(2+3)이 아닌 문자열을 더하듯이(23) 되나요?
A. 그것은 document.write( ); 안쪽에 들어있는 요소들의 자료형 때문입니다. 우선 javaScript 는 숫자+숫자 = 숫자/ string+string=string 입니다. 그렇다면 숫자+string 은 뭐가 될까요. 정답은 string입니다. 예를 들어 1+'1' = "11" 이 됩니다. '같은 연산 순위이면 왼쪽부터' 원칙에 의해, 자료형으로 인식한다고 보시면 됩니다.
이제 다시 sumColorRed 함수를 보면 현재 함수 내부는 '<div ... >' + left + right + '</div ...>' 인데요 여기서 left + right 앞뒤로 위치하고 있는 '<div ... >' 와 '</div ...> 가 string 자료형이기 때문에 left와 right 가 숫자이더라도 string으로 바꾸어 인식하여 결과값이 5 가 아닌 2와 3이 서로 붙어 있는 23으로 나오게 됩니다. 다만 '<div ... >' + (left + right) + '</div ...>'와 같이 (left+right)의 덧셈을 괄호를 해주는 경우 숫자의 계산이 먼저 이루어져 5라는 값이 발생한 후 string과의 덧셈이 이루어지므로 올바른 결과인 5가 나오는 것을 확인할 수 있습니다.
보다 쉽게 이해하기 위해서 괄호를 하지 않는 경우는 document.write('<div style = "color: red">', left, right, '</div><br>'); 으로 인식하여 결과가 23 이 나오고 괄호를 하는 경우는 document.write('<div style = "color: red">', (left+right), '</div><br>');인 것으로 인식하여 결과가 5가 나오게 된다고 생각하면 될 것 같습니다. document.write()와 관련된 내용은 아래 링크에서 확인하실 수 있습니다. https://developer.mozilla.org/ko/docs/Web/API/Document/write
Q. 그러면 괄호를 사용해서 나온 5란 값은 숫자가 아니라 문자로 인식이 되고 있는 상황인 것이지요?
A. 넵 그렇게 이해하시면 될 것 같습니다. 혹시 몰라서 부가 설명을 조금 덧붙이자면
function sumColorRed(left, right){ document.write(left+right);
document.write('<div style="color:red">'+left+right+'</div><br>');
document.write('<div style="color:red">'+(left+right)+'</div><br>');
}
이렇게 하면 어떻게 출력될까요?
답은 5 23 (빨강) 5 (빨강) 입니다. 차례대로 숫자 덧셈 -> 출력 문자로 결합 -> 출력 숫자 덧셈 -> 문자로 결합 -> 출력 이 됩니다.
A. 빨간색의 23에 관한 설명들(이전 댓글들)이 핀트가 조금 잘못되어서 남깁니다.
number + string = string은 맞으나, '같은 연산 순위이면 왼쪽부터' 원칙에 의해,
string + number + number + string은 ((string + number) + number) + string의 순서로 연산됩니다.
따라서, '<div~>' + 2 + 3 + '</div>' => 'div~>2' + 3 + '</div>' => '<div~>23' + '</div>' => '<div~>23</div>'
++function sumColorRed(left, right) { document.write('<div style = "color:red">'+ (left+ right)+ '</div><br>'); } write 메서드가 파라미터를 문자열로 보느냐 숫자로 보느냐의 문제인것 같은데 괄호 넣어주어서 문자열인지 number형인지 확실하게 해주시면 되는듯 합니다.(left+ right)
4. 함수의 활용
3.html에서 <body>에 있는 input 태그를 잘라내서
function nightDayHandler(){
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day'
} else {
target.style.backgroundColor = 'pink';
target.style.color = 'white';
this.value = 'night';
}
}
<head><script></script></head> 사이에 함수를 추가하고 넣어보자. 그러면 버튼이 작동은 하는데 night가 day로 안 바뀌는 것을 볼 수 있다.
why?
<input type="button" value="night" onclick="
var target = document.querySelector('body');
nightDayHandler();
">
여기서 this는 onclick이라는 이벤트가 소속된 이 태그를 가리키도록 약속되어 있는데
우리가 독립된 함수를 만들게 되면, <script>안에 있는 this는 더이상 input버튼이 아니고 전역객체를 가리키게 된다.
웹브라우저에서는 윈도우가 된다.(?)
그래서 이 this의 값을 input을 가리키게 하기 위해 nightDayHandler가 실행될 때 여기에 this값을 줘야 한다.
<input type="button" value="night" onclick="
nightDayHandler(this);
">
그럼 이 this 값은 function nightDayHandler() 여기로 들어오는 매개된, 매개할 때 쓰는 '매개변수' 이다. 고로, this들을 self라는 이름의 매개변수로 바꾼다.
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value === 'day'
} else {
target.style.backgroundColor = 'pink';
target.style.color = 'white';
self.value === 'night';
}
}
그럼 night/day로 잘 바뀌는 걸 볼 수 있다. nightDayHandler라는 함수의 내용을 바꾸면 1억개가 있어도 쉽게 바꿀 수 있다.
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| <유튜버 - 생활코딩> WEB2 - JavaScript 34~ JS파일로 쪼개서 정리 하기 (0) | 2021.01.25 |
|---|---|
| <유튜버 - 생활코딩> WEB2 - JavaScript 29~ 33객체 (0) | 2021.01.22 |
| <유튜버 - 생활코딩> WEB2 - JavaScript 14~ (0) | 2021.01.19 |
| <유튜버 - 생활코딩> WEB2 - JavaScript (0) | 2021.01.16 |
| <유튜버 - 생활코딩> WEB2 - CSS - 2 (0) | 2021.01.13 |
