dukDukz
21.04.12 forEach / callback 함수 / 익명함수 본문
1. head 안에 script 써도 동작되게 하는 법
window.addEventListener('DOMContentLoaded', init);
function init() {
let gnb = document.querySelectorAll(".gnb>li");
console.log(gnb);
}js를 위에다가 써도 동작되게 window. ~~ DOMContentLoaded 써준다
이렇게 선언한걸 함수 안에 넣어주면 된다.
widow는 거의 최상위 객체
window.addEventListener('Event : string', function);
DOMContentLoaded = 모든 페이지의 로드가 끝나면
2. 반복문 forEach - 배열에서 많이 쓴다.
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(forFn); //Array.forEach(callback함수);
}
function forFn(){
console.log('a');
}forFn을 li의 길이만큼 반복하게 된다. 그래서 li의 길이만큼 console 에 'a'가 찍히게 된다.
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(forFn); //Array.forEach(callback함수);
}
function forFn(value, index){
console.log(index, value);
}(x,y) x는 항상 value값이고 y는 항상 index값이다. 인자명은 마음대로 설정 가능
배열 ['ABC','EEE','TTT','CCC']; 준다고 하면,
ABC를 value 에
key값 0번은 index에 주게 된다.
이렇게 반복해서 돌아가는 것이 callback 함수이다.
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(forFn); //Array.forEach(callback함수);
}
function forFn(x) {
console.log(x);
}
보통은 이렇게 인자값 하나 value값만 쓰므로 이렇게 가져온다.
for문으로 쓴다면?
더보기
이렇게 for문으로 쓰는걸 forEach 로 쓴다.
for(let i = 0; i<gnb.length; i++){
console.log(i,gnb[i]);
}
3. callback 함수와 익명함수
window.addEventListener('DOMContentLoaded', init);
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
console.log(ele);
ele.addEventListener('mouseenter',menuover);
//mouseover 라는 event를 여기서 준다.
//menuover 라는 callback 함수를 준다.
});
//콜백함수
function menuover(event){
//mouseover 될때마다 '마우스 오버'를 콘솔에 찍어라
console.log('마우스 오버');
console.log(event);
console.log(event.currentTarget);
}
}익명함수 - 함수이름이 없는 함수가 익명함수이다.
함수이름을 선언하지 않고도 사용이 가능하다.
이 익명함수가 반복되어 실행된다 첫번째 ele 가 실행되고 즉 value 값을 찍어준다는 것이다.
window.addEventListener('DOMContentLoaded', init);
//init() 도 callback 함수임
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
ele.addEventListener('mouseenter', menuover);
ele.addEventListener('mouseleave', menuout);
});
function menuover(event){
//전체를 나타나게 함
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
ele.classList.add('on');
})
}
//하나만 사라지게함
function menuout(event){
let snb = event.currentTarget.querySelector('.snb');
snb.classList.remove('on');
}
}
window.addEventListener('DOMContentLoaded', init);
//init() 도 callback 함수임
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
ele.addEventListener('mouseenter', menuover);
ele.addEventListener('mouseleave', menuout);
});
function menuover(event){
//전체를 나타나게 함
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
ele.classList.add('on');
})
}
//전체를 사라지게 함
function menuout(event){
let snb = document.querySelectorAll('.snb');
snb.forEach(function(ele){
ele.classList.remove('on');
})
}
}
//콜백함수 하나로 줄인것
window.addEventListener('DOMContentLoaded', init);
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
ele.addEventListener('mouseenter', menu);
});
function menu(event) {
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function (ele) {
if (event.type == "mouseenter") {
ele.classList.add('on');
} else {
ele.classList.remove('on');
}
});
}
}
전체 코드
callback.html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
#wrap {
width: 100%;
}
#header {
width: 1200px;
height: 100px;
margin: 0 auto;
}
.gnb {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
background: green;
}
.gnb>li {
width: 30%;
}
.gnb>li>ul.snb {
display: none;
}
.gnb>li>ul.on {
display: block;
}
</style>
<script>
/* window.addEventListener('DOMContentLoaded', init);
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
ele.addEventListener('mouseenter', menu);
});
/*
이벤트함수
인자값은 event2
value
event2가 많은 data 값들을 반환해줌 그중에 type 이 있음 이걸로 비교해서 class에 on 추가
function menu(event2) {
console.log(event2);
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function (ele) {
if (event2.type == "mouseenter") {
ele.classList.add('on');
} else {
ele.classList.remove('on');
}
});
}
}*/
window.addEventListener('DOMContentLoaded', init);
//init() 도 callback 함수임
function init() {
let gnb = document.querySelectorAll(".gnb>li");
gnb.forEach(function (ele) {
ele.addEventListener('mouseenter', menuover);
ele.addEventListener('mouseleave', menuout);
});
function menuover(event){
//전체를 나타나게 함
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
ele.classList.add('on');
})
}
//전체를 사라지게 함
function menuout(event){
let snb = document.querySelectorAll('.snb');
snb.forEach(function(ele){
ele.classList.remove('on');
})
}
}
</script>
</head>
<body>
<!--drop menu 및 navi 간단히 만드는 법-->
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb on">
<li>menu 1-1</li>
<li>menu 1-2</li>
<li>menu 1-3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>menu 2-1</li>
<li>menu 2-2</li>
<li>menu 2-3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>menu 3-1</li>
<li>menu 3-2</li>
<li>menu 3-3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>menu 4-1</li>
<li>menu 4-2</li>
<li>menu 4-3</li>
</ul>
</li>
<li>menu5
<ul class="snb">
<li>menu 4-1</li>
<li>menu 4-2</li>
<li>menu 4-3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>'웹 개발 > JAVASCRIPT' 카테고리의 다른 글
| 210403 여러 슬라이더를 하나의 function으로 동작시키기 (0) | 2021.04.13 |
|---|---|
| 21.04.12 ① display : flex; ② 단위 vw ③ 레이어 팝업 ④모바일ver (0) | 2021.04.13 |
| 2021.03.31 JS Object 객체란? (0) | 2021.03.31 |
| 2021.03.31 Javascript 기본기 2_ let과 const 형변환 (2) | 2021.03.31 |
| 2021.03.30 Javascript 기본 문법 (0) | 2021.03.30 |
'웹 개발/JAVASCRIPT' Related Articles
more
