var color =["green", "aqua", "blue", "black"]
var i = 0;
function changeColor(){
i++; //1
if(i>=color.length) i = 0;
var bgColor = document.getElementById("bgCol");
bgColor.style.backgroundColor = color[i];
var pColor = document.getElementsByTagName("p")[0];
pColor.style.color ="white";
var hColor = document.getElementsByTagName("h2")[0];
hColor.style.color ="white";
}
function bgWhite(){
var bgColor = document.getElementById("bgCol");
bgColor.style.backgroundColor = "white";
var pColor = document.getElementsByTagName("p")[0];
pColor.style.color ="black";
var hColor = document.getElementsByTagName("h2")[0];
hColor.style.color ="black";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>생성자 함수와 자동호출 함수</title>
<style>
.pClass {font-weight : bolder;}
</style>
</head>
<body>
<h2>JavaScript Functions</h2>
<p class="pClass">자바스크립트에서는 함수 생성자를 통하여 함수를 생성할 수 있다.</p>
<p id="demo"></p>
<p class="pClass">자바스크립트에서는 자동 호출 함수를 이용하여 호출하지 않아도 생성할 수 있다.</p>
<p id= "demo2"></p>
<script>
const myFunction = new Function("a", "b","return a * b");
// const myFunction = function (a, b) {
// return a * b;
// }
document.getElementById("demo").innerHTML
= "myFunction(4,3)호출 결과: " + myFunction(4, 3);
// 익명 함수 선언 및 실행 : 즉시실행함수
// 익명 함수 뒤에 또 다른 ()소괄호를 기술하면 실행됨.
(function (a,b) {
document.getElementById("demo2").innerHTML
= "자동호출 함수 실행 " + a + b ;
})("값은: ", 1);
// 자바스크립트의 즉시실행함수 형식 :
// (function(매개변수 기술...) {실행코드 기술; ...})(매개변수갯수만큼 기술);
</script>
</body>
</html>
arguments
함수를 호출할 때 매개인자의 정보를 배열로 저장하는 객체
arguments[인덱스번호]
arguments = [ 4, 5, 6 ]
arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>arguments객체</title>
<script>
function fnc() {
document.write("fnc()호출");
}
function fnc(a) {
document.write("fnc(a)호출: ", a);
}
function fnc(a, b) {
document.write("fnc(a,b)호출: ", a, ", ", b, "<br>");
}
fnc();
fnc(1);
fnc(5, 3);
//자바스크립트에서는 함수 오버로딩이 되지 않기에
//매개변수갯수가 다르더라도 마지막에 기술된 함수를 호출한다.
</script>
</head>
<body>
<h2>arguments객체</h2>
<p>자바스크립트 함수의 내장객체이며, 매개변수의 정보를 가지고 있다.</p>
<p id="demo"></p>
<p id="demo2"></p>
<script>
// arguments : 함수를 호출할때 매개인자의 정보를 배열로 저장하는 객체
// 자바스크립트에서 제공하는 내장 객체
function myFunction(a, b) {
return (
"0번째 매개변수의 값은 " +arguments[0] +"이며, 총 매개변수의 개수는 " +
arguments.length +"개이다.");
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
// arguments = [4,3]
// 함수의 매개변수를 일치시키지 않아도 arguments객체를 통해
// 해당 매개변수를 가져올 수 있다.
function findMax() {
// arguments= [4,5,6];
// Infinity : 양의 무한대 값을 나타내는 숫자형 값
// -Infinity : 음의 무한대 값을 나타내는 숫자형 값
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
if (arguments[i] > max) max = arguments[i];
}
return max;
}
// arguments = [4,5,6];
document.getElementById("demo2").innerHTML = findMax(4, 5, 6);
</script>
</body>
</html>
arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>argument</title>
</head>
<body>
<h1>함수의 오버로딩</h1>
<script>
function addNum(x) {return x;}
function addNum(x, y, z) {return x + y + z;}
function addNum(x, y) {return x + y;}
document.write("인수가 3개 모두 전달되면 반환값은 " + addNum(1, 2, 3) + "입니다.<br>")
document.write("인수가 2개만 전달되면 반환값은 " + addNum(1, 2) + "입니다.<br>")
document.write("인수가 1개만 전달되면 반환값은 " + addNum(1) + "입니다.<br>")
document.write("인수가 아무것도 전달되지 않으면 반환값은 " + addNum() + "입니다.")
function sum(){
var result = 0; //10 ->30
for (var i = 0; i < arguments.length; i++){
// result = result + arguments[i];
result += arguments[i];
}
return result;
}
console.log("arguments객체를 이용한 오버로딩 처리");
console.log("인수가 2개(10,20)인 함수 호출 결과: " + sum(10,20));
console.log("인수가 3개(10,20,30)인 함수 호출 결과: " + sum(10,20,30));
console.log("인수가 4개(10,20,30,40)인 함수 호출 결과: " + sum(10,20,30,40));
console.log("인수가 5개(10,20,30,40,50)인 함수 호출 결과: " + sum(10,20,30,40,50));
</script>
</body>
</html>
