테이블 안에 td 태그내부에 img 태그로 이미지를 불러옴 > 이후 img 태그에 각각 id 를 부여하여 innerHTML 을 사용하여 이미지를 display:none 으로 표현하고자 하였으나 실패 > innerHTML 은 해당 태그 안의 HTML 코드 자체를 변경하는 기능이므로 변경하고자 하면 img 태그에 id 를 부여해서 변경하는 것이 아닌 img 태그를 가지고 있는 부모 태그인 td 에 id 를 부여하여 변경하여야 했음.... > 태그 내에 있는 코드 자체를 변경하는 것이 innerHTML 이므로 만약 img 를 변경하고 싶다면 혹은 제거하고 싶다면 img 가 속해있는 부모 태그에서 사용해야 한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// return 값을 하나만 전달 가능
function testFunc01() {
let num = 95;
let txt = "안녕하세요";
return num, txt;
}
const result = testFunc01();
document.write(result + "<hr>");
// 배열로 담아서 return 값을 여러개 전달
function testFunc02() {
let num = 95;
let txt = "안녕하세요";
const arr = [num, txt];
return arr;
}
const result2 = testFunc02();
document.write(result2 + "<hr>");
document.write(result2[0] + "<hr>");
document.write(result2[1] + "<hr>");
// Object 타입으로 return 값을 여러개 전달
function testFunc03() {
let num = 95;
let txt = "안녕하세요";
const arr = { num: num, txt: txt };
return arr;
}
const result3 = testFunc03();
// 콘솔에서 result3 이 가지고 있는 키와
// 키에 담긴 값을 확인한 뒤 사용
console.log(result3);
document.write(result3 + "<hr>");
document.write(result3["num"] + "<hr>");
document.write(result3.txt + "<hr>");
</script>
</body>
</html>
코드 실행
매개변수의 갯수가 다르거나 가변적일 경우 함수에서 처리하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function test01(x, y) {
console.log("첫번째 함수 실행!!!");
}
function test01(x) {
return x;
}
document.write("함수 호출 인자 없음 : " + test01() + "<br>");
document.write("함수 호출 인자 1 : " + test01(10) + "<br>");
document.write("함수 호출 인자 2 : " + test01(10, 20) + "<br>");
// 오버로딩 불가능....!!! 무조건 나중에 선언된 함수로 적용됨
function test02(x, y, z) {
document.write(`${x}, ${y}, ${z}<br>`);
if (z == undefined) {
// 매개변수가 갯수가 부족할 경우의 로직 생성
sum = x + y;
} else {
sum = x + y + z;
}
return sum;
}
let r1 = test02(10, 20);
let r2 = test02(10, 20, 30);
document.write(`매개변수 2개 : ${r1}<br>`);
document.write(`매개변수 3개 : ${r2}<br>`);
// arguments 를 사용하여 여러개의 가변적인 매개변수 받기
function test03() {
console.log(arguments.length);
let i,
sum = 0;
for (i = 0; i < arguments.length; i++) {
sum = sum + arguments[i];
document.write(arguments[i]);
}
return sum;
}
let r3 = test03(10, 20);
let r4 = test03(10, 20, 30);
document.write(`매개변수 2개 : ${r3}<br>`);
document.write(`매개변수 3개 : ${r4}<br>`);
</script>
</body>
</html>
함수 표현식
함수 표현식 ( 익명함수, 즉시 실행 함수 )
익명함수 - 한번 사용되고 사라짐 ( 메모리공간에서 삭제 )
일반 함수 - 선언되면 메모리 공간을 미리 잡아먹고 사용할때 꺼내서 쓴다
즉시 실행 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
(function test() {
alert("즉시 실행 함수!!!!");
})();
let result = (function test1() {
return "서버로부터 데이터를 받아와 화면에 보여줌";
})();
document.write(result + "<br>");
// 초기화 해주는 함수
let name = "홍길동";
let result02 = (function test02(n) {
let db = n + "님의 정보 입니다";
return db;
})(name);
document.write(result02 + "<br>");
</script>
</body>
</html>
즉시 실행 함수 코드 실행
★ 익명 함수 ★
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function test(x, y) {
return x + y;
}
document.write(test(1, 2) + "<br>");
// 함수를 변수로 설정하고 1회만 사용하고 버리는 익명함수
let sumFunc = function (x, y) {
return x + y;
};
document.write(sumFunc(10, 20) + "<br>");
// 함수를 변수로 설정하고 1회만 사용하고 버리는 익명함수
// 더 간단한 표현식
let sumFunc1 = (x, y) => x + y;
document.write(sumFunc1(100, 200) + "<br>");
// 여러 줄을 표현해야 할 땐 중괄호로 묶어서 표현해야 한다
// 중괄호로 여러 줄을 표현하는 경우 무조건 return 이 들어가야 한다
// 어떤 값이 반환 값인지 명시해줘야 함!!!
let sumFunc2 = (x, y) => {
let num = 100;
return x + y + num;
};
document.write(sumFunc2(1000, 2000) + "<br>");
// 중괄호로 묶었을때 리턴값이 없으면 undefined 를 반환
const result01 = () => {
10 + 20;
};
const result02 = () => 10 + 20;
const result03 = () => (10 + 20);
document.write("<hr>");
document.write(result01() + "<br>");
document.write(result02() + "<br>");
document.write(result03() + "<br>");
</script>
</body>
</html>
익명 함수 코드 실행
실습 예제
실습 예제
예제 풀이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 입력 함수
let inputNum1 = (x) => Number(prompt(x));
// 출력 함수
let print = (x) => document.write(x);
// 두 수를 입력받아 큰 수를 출력하는 함수
let moreBig = (x, y) => {
if (x > y) {
return x;
} else {
return y;
}
};
print(moreBig(inputNum1("첫번째 수 입력"), inputNum1("두번째 수 입력")));
document.write("<hr>");
// 입력 받은 값이 짝수인지 홀수인지 판별하는 함수
let evenNum = (x) => {
if (x % 2 != 0) {
return "홀수";
} else {
return "짝수";
}
};
print(evenNum(inputNum1("홀, 짝 판별할 수 입력")));
document.write("<hr>");
// 입력 받은 값이 3의 배수인지 판별하는 함수
let multipleThree = (x) => {
if (x % 3 != 0) {
return `${x}는 3의 배수가 아닙니다`;
} else {
return `${x}는 3의 배수입니다`;
}
};
print(multipleThree(inputNum1("3의 배수인지 판별할 수 입력")));
document.write("<hr>");
// 수를 입력 받아 소수인지 판별하는 함수
let decimal = (x) => {
var arr = [];
for (var i = 1; i <= x; i++) {
if (x % i == 0) {
arr.push(i);
}
}
if (arr.length == 2) {
return `${x}는 소수 입니다.`;
} else {
return `${x}는 소수가 아닙니다.`;
}
};
print(decimal(inputNum1("소수인지 판별할 수를 입력하세요")));
document.write("<hr>");
// 절댓값을 구하는 함수를 정의하시오
let absolute = (x) => {
if (x >= 0) {
return x;
} else {
return x - x * 2;
}
};
print(absolute(inputNum1("절댓값을 구할 수를 입력하세요")));
</script>
</body>
</html>
