JAVASCRIPT 함수 기능 (1)
함수 생성 방법 : function 함수명() {}
함수 호출 방법 : 함수명();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
console.log("프로그램 시작!!!");
function test() {
console.log("text 함수 실행");
}
console.log("함수 지나옴");
test();
console.log("프로그램 종료!!!");
function localVal() {
let num = 20000;
if (true) {
num += 10000;
console.log("if : " + num);
}
console.log("localVal : " + num);
}
localVal();
let num = 1234;
function localVal01() {
console.log("localVal01 : " + num);
}
function localVal02() {
console.log("localVal02 : " + num);
}
localVal01();
localVal02();
</script>
</body>
</html>
실행 결과
JAVASCRIPT 함수 기능 (2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
/*
sumFunc();
function sumFunc() {
const n1 = prompt("수 입력");
const n2 = prompt("수 입력");
const sum = Number(n1) + Number(n2);
document.write(`${n1} + ${n2} = ${sum}<br>`);
}
*/
/*
const n1 = prompt("수 입력");
const n2 = prompt("수 입력");
sumFunc(n1, n2);
function sumFunc(n1, n2) {
const sum = Number(n1) + Number(n2);
document.write(`${n1} + ${n2} = ${sum}<br>`);
}
*/
const n1 = prompt("수 입력");
const n2 = prompt("수 입력");
const sum = op(n1, n2);
sumFunc(n1, n2, sum);
function op(n1, n2) {
const sum = Number(n1) + Number(n2);
return sum;
}
function sumFunc(n1, n2, sum) {
document.write(`${n1} + ${n2} = ${sum}<br>`);
}
</script>
</body>
</html>
실행 결과
JAVASCRIPT 함수 기능 (3)
* return으로 여러개 값을 돌려주려면 배열 or object 타입 사용 가능
꺼내오는 방법 : 함수명[인덱스] or 함수명["키 값"] or 함수명.키 값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function testFunc01() {
let num = 95;
let txt = "안녕하세요";
return num, txt;
}
const result = testFunc01();
document.write(result + "<hr>");
function testFunc02() {
let num = 95;
let txt = "안녕하세요";
const arr = [num, txt];
return arr;
}
const result2 = testFunc02();
document.write(result2 + "<br>");
document.write(result2[0] + "<br>");
document.write(result2[1] + "<hr>");
function testFunc03() {
let num = 95;
let txt = "안녕하세요";
const arr = { num: num, txt: txt };
return arr;
}
const result3 = testFunc03();
console.log(result3);
document.write(result3["num"] + "<br>");
document.write(result3.txt + "<hr>");
</script>
</body>
</html>
실행 결과
JAVSCRIPT 함수 기능 (4)
* 함수 이름이 같으면, 인자 개수가 달라도 마지막 함수만 실행
* arguments를 통해 매개변수의 개수 제한없이 받아올 수 있다
<!DOCTYPE html>
<html lang="en">
<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>`);
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>
실행 결과
JAVASCRIPT 즉시 실행 함수
즉시 실행 함수 표현식 : (function 함수명(){})();
* 즉시 실행 함수에 값을 전달해 줄 때, (값); 방식으로 전달해준다
<!DOCTYPE html>
<html lang="en">
<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>
실행 결과
JAVASCRIPT 익명 함수
익명 함수 표현식 : let 변수명 = function(){}; 또는
let 변수명 = () => ; 또는
let 변수명 = () => {};
* =>표현식을 쓸 때 중괄호를 쓰게 되면 return을 추가해야 한다
<!DOCTYPE html>
<html lang="en">
<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>");
let sumFunc = function (x, y) {
return x + y;
};
document.write(sumFunc(10, 20) + "<br>");
let sumFunc1 = (x, y) => x + y;
document.write(sumFunc1(100, 200) + "<br>");
let sumFunc2 = (x, y) => {
let num = 100;
return x + y + num;
};
document.write(sumFunc2(1000, 2000) + "<br>");
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>
실행 결과
Quiz01
풀이 과정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let input = () => {
let num1 = Number(prompt("첫번째 수 입력"));
let num2 = Number(prompt("두번째 수 입력"));
const arr = { num1: num1, num2: num2 };
return arr;
};
let result01 = (n1, n2) => {
if (n1 > n2) {
return n1;
} else {
return n2;
}
};
let arr = input();
document.write("큰 수 : " + result01(arr.num1, arr.num2) + "<hr>");
let input02 = () => {
let num1 = Number(prompt("수(홀, 짝) 입력"));
return num1;
};
let result02 = (n) => {
if (n % 2 == 0) {
return "짝수 입니다.";
} else {
return "홀수 입니다.";
}
};
////////////////////////////
let num2 = input02();
document.write("수는 " + result02(num2) + "<hr>");
let input03 = () => {
let num1 = Number(prompt("수(3의 배수) 입력"));
return num1;
};
let result03 = (n) => {
if (n % 3 == 0) {
return "3의 배수 입니다.";
} else {
return "3의 배수가 아닙니다.";
}
};
num3 = input03();
document.write("수는 " + result03(num3) + "<hr>");
let input04 = () => {
let num1 = Number(prompt("수(소수) 입력"));
return num1;
};
let result04 = (n) => {
for (i = 2; i <= n; i++) {
if (n % i == 0) {
if (i == n) {
return "소수 입니다";
} else {
return "소수가 아닙니다";
}
}
}
};
num4 = input04();
document.write("수는 " + result04(num4) + "<hr>");
let input05 = () => {
let num1 = Number(prompt("수(절대값) 입력"));
return num1;
};
let result05 = (n) => {
return Math.abs(n);
};
let num5 = input05();
document.write("수의 절대값 : " + result05(num5) + "<hr>");
</script>
</body>
</html>
실행 결과
JAVASCRIPT event (1)
onclick="" : 클릭 할 경우 실행
ondblclick="" : 더블클릭 할 경우 실행
onmouseover="" : 마우스를 위에 올렸을 때 실행
document.getElementById(" "); : id값이 일치하는 태그값을 얻어오겠다는 뜻
* 얻어온 태그 활용 법 : id값.기능
document.getElementByClassName(" "); : 클래스명이 일치하는 태그값을 얻어오겠다는 뜻
document.querySelector(" "); : id또는 클래스기 일치하는 태그값을 얻어오겠다는 뜻
window.onload : 페이지가 호출되면 자동으로 실행
메소드.addEventListener("방식", 실행 할 메소드) : 해당 메소드를 어떤 방식을 동작 했을때 선택한 메소드 실행
.innerHTML : html 형식으로 적용
.innerText : text 문자 형식으로 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#h3 {
color: red;
}
</style>
</head>
<body>
<script>
//function clickEvent(){}
const clickEvent = () => {
//alert("클릭");
const name = document.getElementById("name");
console.log(name);
/*
name.value = "안녕하세요";
name.style.background = "red";
*/
const name1 = document.querySelector("#name2");
console.log(name1);
name1.value = name.value;
name.value = "";
};
window.onload = () => {
//alert("onload");
//document.getElementsByClassName("btn");
const btn = document.querySelector(".btn");
console.log(btn);
btn.addEventListener("click", innerTest);
};
const innerTest = () => {
const txt = document.getElementById("text");
let msg = "<h3 id='h3'>내용바꾸기</h3>";
txt.innerHTML = msg;
//txt.innerText = msg;
};
</script>
<input type="text" id="name" placeholder="input name" /><br />
<input type="text" id="name2" placeholder="input name" /><br />
<input type="button" onclick="clickEvent()" value="클릭" />
<input type="button" class="btn" value="클릭2" />
<br />
<label id="text">텍스트 값</label>
</body>
</html>
실행 결과
JAVASCRIPT event (2)
onmousedown="" : 마우스 클릭했을 때
onmouseup="" : 마우스 클릭 후 땠을 때
onmousemove="" : 마우스가 움직일 때
onmouseover="" : 마우스가 들어왔을 때
onmouseout="" : 마우스가 나갔을 때
* onload() = html 실행 후 실행된다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
const myMousedown = () => {
document.getElementById("span").innerHTML = "마우스 DOWN";
};
const myMouseup = () => {
document.getElementById("span").innerHTML = "마우스 UP";
};
let cnt = 0;
const myMousemove = () => {
cnt++;
document.getElementById("count1").innerHTML = cnt;
};
const myMouseover = () => {
cnt++;
document.getElementById("count2").innerHTML = cnt;
};
const myMouseout = () => {
document.getElementById("count2").innerHTML = "마우스 나감";
};
</script>
</head>
<body>
<div onmousedown="myMousedown()" onmouseup="myMouseup()">
<span id="span">이벤트 알아보기</span>
</div>
<div
onmousemove="myMousemove()"
style="background: gray; width: 100px; height: 100px"
>
<span id="count1">0</span>
</div>
<div
onmouseover="myMouseover()"
onmouseout="myMouseout()"
style="background: gray; width: 100px; height: 100px"
>
<span id="count2">0</span>
</div>
</body>
</html>
실행 결과
JAVASCRIPT event (3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 100px;
height: 200px;
}
</style>
<script>
onload = () => {
//alert("execute");
let img = document.getElementById("myImg");
img.addEventListener("mouseover", changeFunc01);
img.addEventListener("mouseout", changeFunc01);
};
let num = 0;
changeFunc01 = () => {
const arr = ["image.png", "image2.png"];
let myImg = document.getElementById("myImg");
let myImg02 = document.getElementById("myImg02");
myImg.src = arr[num];
myImg02.src = arr[num];
//num = num == 0 ? 1 : 0;
if (num == 0) {
num = 1;
} else {
num = 0;
}
};
</script>
</head>
<body>
<img id="myImg" src="image.png" /><br />
<img
id="myImg02"
src="image.png"
onmousedown="changeFunc01()"
onmouseup="changeFunc01()"
/><br />
</body>
</html>
실행 결과
Quiz02
풀이 과정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
}
footer {
background-color: pink;
width: 280px;
height: 50px;
padding-left: 120px;
}
</style>
<script>
let num = 1;
changeFunc = (n) => {
let myImg = document.getElementById("myImg");
if (n == 0) {
num == 1 ? (num = 8) : num--;
myImg.src = `최근상품0${num}.jpg`;
} else {
num == 8 ? (num = 1) : num++;
myImg.src = `최근상품0${num}.jpg`;
}
};
</script>
</head>
<body>
<div>
<img
id="myImg"
src="최근상품01.jpg"
style="width: 400px; height: 400px"
/>
<footer>
<button onclick="changeFunc(0)">이전 사진</button>
<button onclick="changeFunc(1)">다음 사진</button>
</footer>
</div>
</body>
</html>
실행 결과
Quiz03
풀이 과정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>겔러리</title>
<style>
* {
margin: 0;
}
img {
width: 100px;
height: 100px;
}
.img {
border: 1px solid gray;
width: 100px;
height: 100px;
position: relative;
}
.flex {
display: flex;
}
span {
position: absolute;
background: orange;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
<script type="text/javascript">
const images = [
"resources/images/최근상품01.jpg",
"resources/images/최근상품02.jpg",
"resources/images/최근상품03.jpg",
"resources/images/최근상품04.jpg",
"resources/images/최근상품05.jpg",
"resources/images/최근상품06.jpg",
"resources/images/최근상품07.jpg",
"resources/images/최근상품08.jpg",
];
window.onload = function init() {
console.log("init");
let msg = "<div class='flex'>";
for (let i = 0; i < images.length; i++) {
msg += `<div class="img" id="${i}" onMousemove="imgOver(${i})" onMouseout="imgOut(${i})">`;
msg += `<img src="${images[i]}" >`;
msg += "</div>";
if (i + 1 == Number(images.length / 2))
msg += "</div><div class='flex'>";
}
const wrap = document.getElementById("wrap");
wrap.innerHTML = msg;
};
const imgOver = (index) => {
const span = document.getElementById(index);
span.innerHTML = `<span onMousemove="imgOver(${index})">선택</span>`;
};
const imgOut = (index) => {
const div = document.getElementById(index);
div.innerHTML = `<img src="${images[index]}">`;
};
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
실행 결과
