본 내용은 아래의 강의를 토대로 하여 작성하였습니다.
링크:opentutorials.org/course/3085
WEB2 - JavaScript - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상
opentutorials.org
1. 강의 내용
Function(함수)
코드의 양이 많아지면 웹 페이지의 크기가 커져서 비용과 시간의 소요가 커진다. 이렇게, 많은 코드를 정리 정돈하기 위해서는 함수를 사용한다. 함수는 중복된 코드를 정의할 수 있고 이로 인해서 웹 페이지의 유지 보수를 좋게 할 수 있다.
함수 문법
함수의 문법은 while문과 비슷하다.
function 함수명( ){
}
함수를 사용해서 특정 문구를 반복해서 사용한다면 아래와 같이 입력한다.
<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>
Parameter(매개변수)와 argument(인자)
사람이 자판기에서 음료수를 골라 누르는 것은 입력이고 자판기가 그 해당 음료수를 내보내는 것은 출력이라고 할 수 있다. 이러한 입력과 출력의 수학적 표현은 함수라고 할 수 있다. 함수를 사용할 때, 입력을 용이하게 하기 위해서 매개변수를 사용한다. 여기서, 함수로 전달하는 값은 인자라고 한다.
<script>
fucntion sum(left,right){
document.write(left+right+'<br>');
}
sum(2,3)
sum(3,4)
</script>
왼쪽과 오른쪽에 값을 입력하면 덧셈을 하는 함수 sum을 만들었고 아래처럼 결과가 출력된다.
Return(리턴)
1+1=2
2-1=1
1===1
좌항은 우항에 대한 표현식이다. 마지막은 ture에 대한 표현식이다. 함수를 사용할 때, 세부적인 기능을 사용하기 위해서 이런 표현식이 필요한 경우가 있다. 이를 가능하게 하는 것이 바로 리턴이다. 리턴은 표현식을 다시 출력해서 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도를 준다.
리팩토리
이제, night/day 토글 버튼의 기능을 함수로 정의해서 사용할 수 있다.
<head>
<script>
function nightDayHandler(self){
var target = document.querySelector('body')
if(self.value === 'night'){
target.style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';self.value='day';
var alist = document.querySelectorAll('a');
var i = 0 ;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue'
i = i + 1;
}}
else{
target.style.backgroundColor = 'white';
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 = 'blue'
i = i + 1;
}}}
</script>
</head>
<input type="button" value="night" onclick="nightDayHandler(this);">
주의할 점은 this를 self로 바꿔주어야 한다. this는 이벤트가 소속되어 있는 태그를 가리키도록 약속되어 있는데, 독립된 함수를 만들게 되면 this가 다른 것을 가리키도록 되기 때문이다. 유의하자.
2. 느낀점
배울 수록 점점 난이도가 올라가서 살짝 버거웠다. 하지만 다시 복습하며 정리해보니 어느 정도 머릿속에서 정리가 되는 것 같다. 하지만, 아직 리턴에 대해서는 잘 모르겠다. 좀 더 배울 필요가 있다.
3. 명령어
fucntion 함수명( ){
}
함수 정의
'programming study > JavaScript' 카테고리의 다른 글
| [생활코딩]WEB2-JavaScript (6)(2020.12.22) (0) | 2020.12.23 |
|---|---|
| [생활코딩]WEB2-JavaScript (5)(2020.12.9) (0) | 2020.12.10 |
| [생활코딩]WEB2-JavaScript (3) (2020.12.8) (0) | 2020.12.09 |
| [생활코딩]WEB2-JavaScript (2) (2020.12.8) (0) | 2020.12.08 |
| [생활코딩]WEB2-JavaScript (1) (2020.12.7) (0) | 2020.12.07 |
