안녕하세요! 보라해바라기입니다.
저는 어제부터 온라인 교환학생 수업을 듣고 있는데요 ^_^
오늘 조별 발표가 있는 날이었어요.
저는 어제 알바때문에 시간이 많이 없어서 시간을 쪼개서 겨우 완성했것만...
오늘 교수님의 몸 상태가 안 좋으셔서 갑작스런 휴강을 하게 되었어요...!
맨 처음에는 허탈하더군요 ㅠㅠ
어제 하루가 너무 정신없이 휘몰아치기도 했고 급하게 할 필요가 없었는데 말이죠.
뭔가 손해봤다는 생각도 들고요..
하지만! 어짜피 다음 주에 발표를 할 것이고 무엇보다도 코딩 공부를 할 시간이 생겼잖아요?
그래서 좋게 생각하기로 했어요 ㅎㅎ
그러면 저의 소소한 에피소드와 함께 렛츠 기릿-!
1. 함수 : 기초
함수라는 말은 수학 시간에 많이 들어보셨을텐데요!
JS에서도 함수는 효율적인 코드를 짜는데 도움을 준답니다 ㅎㅎ
<ul>
<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>
</ul>
위 예시에서는 2-1과 2-2를 목록으로 출력하는 함수를 선언한 후
1 과 3 뒤에 함수를 불러왔어요!
그 결과는 다음과 같답니다!
1과 3뒤에 함수가 실행되어 2-1, 2-2 가 연달아 위치하고 있어요 ㅎㅎ
2. 함수 : 매개변수와 인자
매개 변수는 함수를 선언할 때 사용하는 변수를 일컫는 말로 parameter라고 해요!
인자는 함수를 실제로 사용할 때 넣는 값으로 argument라고 한답니다.
또한 매개변수와 인자는 입력의 역할을 합니다!
<script>
function onePluesOne(){
document.write(1+1+'<br>');
}
onePluesOne();
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3);
sum(3,4);
</script>
위 예시에서 left와 right는 매개변수, 2,3,4는 인자가 되는 것입니다.
또한 각 결과는 2, 5, 7이 나온답니다!
3. 함수 : Return
함수에 값을 입력했으면 출력을 해야 값이 함수를 통한 값이 보여지겠죠?
이와 같이 출력을 담당하는 것이 Return입니다.
<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>
즉, sum2 함수는 left 변수에 입력된 인자와 right 변수에 입력된 인자의 합을 산출하게 되는 것이죠 ㅎㅎ
4. 함수의 활용
함수를 활용하여 우리가 저번 시간에 구현한 주/야간모드의 중복을 최소화할 수 있어요!
즉, 함수를 통해 코드의 리팩토링이 가능하다는 말이죠 ㅎㅎ
<head>
<title>보해의 인생_Future</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'ivory';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'violet';
i = i + 1;
}
} else {
target.style.backgroundColor = 'ivory';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'purple';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<input type="button" value="night" onclick="
nightDayHandler(this);
">
저번 시간에 반복문을 이용해 만들었던 주/야간모드에 함수를 부가하여
Head 부분에 함수를 선언, 정의하고 body에서는 그 함수를 호출하는 방식으로 리팩토링을 하였답니다!
주의할 점은 this는 event와 관련된 키워드이기에 함수에 적용되지 않고
함수에는 this와는 다른 (여기서는 self) 변수를 매개 변수로 지정해야 합니다!
그 후 this를 인자로 사용하면 제대로된 함수가 구현되는 것이죠 ㅎㅎ
코드 중복의 최소화는 여러 문법에 의해 이루어진다는 것을 깨달은 날이었습니다!
오늘은 여기서 글 마무리하도록 하겠습니다.
좋은 하루 보내세요^_^
'JavaScript' 카테고리의 다른 글
| [JavaScript] 생활코딩 34 ~ 37 _ JS파일, Library, Framework, UI, API (0) | 2021.07.18 |
|---|---|
| [JavaScript] 생활코딩 29 ~ 33 _ 객체 (쓰기와 읽기, 반복문, property, method, 활용) (0) | 2021.07.17 |
| [JavaScript] 생활코딩 19~23 _ 배열, 반복문과 그 활용 (0) | 2021.07.14 |
| [JavaScript] 생활코딩 12~18 _ 제어 태그 선택, 비교연산자, 불리언, 조건문, 리팩토링 (0) | 2021.07.13 |
| [JavaScript] 생활코딩 6~11 _ 문자열과 숫자, 변수와 대입연산자, 웹브라우저의 제어(CSS) (0) | 2021.07.12 |
댓글