[ 함수의 기본 ]
자바스크립트에서 함수는 중복되는 코드가 여러 곳에서 나올 때
중복되는 코드를 하나의 함수로 묶어 그 함수만 실행하면
원하는 값을 가져올 수 있는 기능이다.
유지보수하기 좋기때문에 다른 언어에서도 많이 사용한다.
<h1>Function</h1>
<h1>Basic</h1>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
document.write('<li>3</li>');
</script>
</ul>예를 들어 위와 같은 코드가 있고
2-1, 2-2를 반복해서 출력하고 싶다면 반복문을 사용하면 될 것이다.
하지만 아래와 같은 코드는 중간에 3이 껴있기 떄문에 반복문을 사용할 수 없을 것이다.
<h1>Basic</h1>
<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>
</ul>물론 하나하나씩 코딩을 해서 바꿀 수는 있지만 1억개를 바꿔야 한다면
굉장히 많은 시간과 노동이 필요할 것이다.
이때 사용하는 것이 함수이다.
함수를 사용하기 위해서는
script태그 안에서 function 함수명() { 중복되는 내용 } 를 사용해야한다.
위의 문제를 함수로 해결해 보았다.
<h1>Basic</h1>
<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>two라는 이름을 가진 함수를 만들었다.
그리고 { } 안에는 중복되는 코드인
document.write('<li>2-1</li>');
document.write('<li>2-2</li>'); 를 추기해 줬다.
그 후에 자신이 원하는 위치에 two()라는 함수를 위치시켜 주면
그 위치에 갔을 때 two() 함수를 호출시켜 준다.
[ Parameter(매개변수) & Argument(인자) ]
계산같은 것을 할때 아래와 같이 해도 상관 없지만 무한히 많은 수가 있을 때
이것보다 더 간단한 방법이 있다.
document.write(1+1);바로 함수를 통한 매개변수와 인자를 사용하는 것이다.
매개변수와 인자를 사용한 예를 먼저 보여주자면
<script>
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,4);
sum(5,7);
</script>여기서 매개변수는 left와 right가 된다.
다시말해, function sum(매개변수, 매개변수);
sum함수는 매개변수 2개를 가지는 함수인 것이다.
인자값은 sum함수 밖에 있는 (2, 4), (5, 7)이다.
다시말해, sum(인자값1, 인자값2) 인 것이다.
정리하자면 매개변수는 함수 밖에 있는 인자값을 받아
함수 안에 있는 document.write를 처리하는 것이다.
결과는 똑같으나 함수의 매개변수와 인자를 사용하는 것이
무한히 많은 수를 처리하기에는 더 적합하다.
[현재 만드는 웹 페이지에 적용]
주/야간 버튼의 기능을 함수로 구현하였다.
<!doctype html>
<html>
<head>
<title>WEB1-JavaScript</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="style.css">
<script>
function DayandNight(self){
var target = document.querySelector('body');
if(self.value === '야간모드로 변경'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = '주간모드로 변경';
var alist = document.querySelectorAll('a');
var i= 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = '야간모드로 변경';
var alist = document.querySelectorAll('a');
for(var i = 0; i < alist.length; i++){
alist[i].style.color = 'blue';
}
}
}
</script>
</head>
<body>
<h1><a href = "index.html">WEB</a>
<input type="button" value="야간모드로 변경" onclick ="DayandNight(this);">
</h1>
<div id="grid">
<ol>
<li><a href = "1.html">HTML</a></li>
<li><a href = "2.html">CSS</a></li>
<li><a href = "3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>JavaScript이란 무엇인가?</h2>
<p>
자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 연관성은 약하다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 자바스크립트는 ECMA스크립트(ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5(ES5)까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.
</p>
<div>
</div>
</body>
</html>https://opentutorials.org/course/3085/18851
함수 - 생활코딩
함수의 기본 소스코드 변경사항 매개변수(parameter)와 인자(argument) 소스코드 변경사항 리턴 4:04초의 결과가 붉은색 5가 아닌 붉은색 23이 된 이유는 자바스크립트는 문자와 숫자를 더하면 숫자를
opentutorials.org
'WEB' 카테고리의 다른 글
| [HTML/CSS] HTML과 CSS로 네이버 로그인 화면 만들어 보기(JS x) (2) | 2022.07.18 |
|---|---|
| [WEB/JS] 자바스크립트 객체 이해하기(선언, 반복문) (0) | 2022.07.13 |
| [WEB/JS] 배열/반복문(for문, while문) (0) | 2022.07.11 |
| [WEB/JS] 조건문 & 웹페이지 주/야간 모드 설정2 (0) | 2022.07.08 |
| [WEB/JS] 웹페이지 주/야간 모드 설정1 (0) | 2022.07.07 |
