24. 함수 예고
- 함수의 장점
- 유지보수 쉬워짐
- 코드의 길이가 짧아짐
- 같은 함수 사용 시, 두 코드가 논리적으로 같다는 것을 한 번에 알 수 있음
- 적절한 이름 붙여주면 이 코드가 어떤 일을 하는지 한 눈에 알 수 있음
25. 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<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>
<h2>Parameter & Argument</h2>
<h2>Return</h2>
</body>
</html>
26. 함수-매개변수와 인자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<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>
<h2>Parameter & Argument</h2>
<script>
function onePlusOne() {
document.write(1 + 1 + '<br>');
}
onePlusOne();
function sum(left, right) { // 매개변수 Parameter
document.write(left + right + '<br>');
}
sum(2, 3); // 5 인자 Argument
sum(3, 4); // 7
</script>
<h2>Return</h2>
</body>
</html>
27. 함수-리턴
- 함수는 입력과 출력으로 이루어져 있음
- parameter와 argument는 입력
- return은 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<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>
<h2>Parameter & Argument</h2>
<script>
function onePlusOne() {
document.write(1 + 1 + '<br>');
}
onePlusOne();
function sum(left, right) { // 매개변수 Parameter
document.write(left + right + '<br>');
}
function sumColorRed(left, right) { // 매개변수 Parameter
document.write('<div style="color:red">' + left + right + '</div><br>');
}
sum(2, 3); // 5 인자 Argument
sumColorRed(2, 3);
sum(3, 4); // 7
</script>
<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>
</body>
</html>
28. 함수 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>WEB1 - JavaScript</title>
<script>
function nightDayHandler(self) {
let target = document.querySelector('body'); // 변수 사용
if (self.value === 'night') { // this 사용해서 코드 간결하게
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
let alist = document.querySelectorAll('a');
let i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
let alist = document.querySelectorAll('a');
let i = 0;
while (i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
nightDayHandler(this)" />
<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>
<h2>JavaScript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Exercitationem accusantium quibusdam voluptatem
consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
</p>
</body>
</html>
부스트코스 [자바스크립트의 시작] 강의 공부 기록
300x250
'LEARN > JAVASCRIPT' 카테고리의 다른 글
| [JS] JavaScript 객체 기본 (0) | 2022.03.20 |
|---|---|
| [JS] JavaScript 활용 (0) | 2022.03.19 |
| [JS] JavaScript 객체 소개 (0) | 2022.03.18 |
| [JS] Javascript 제어문 (0) | 2022.03.16 |
| [JS] 웹과 JavaScript (0) | 2022.03.15 |
