SMALL
///forEach()
---> 배열의 각요소에 함수를 한번씩 실행.
형식>
배열데이터 3개 있을경우
배열요소.forEach(funciton(매개변수1, 매개변수2, 매개변수3){
실행코드
});
배열0. 실행코드
배열1. 실행코드
배열2. 실행코드
매개변수1 = element
매개변수2 = index
매개변수3 = array
매개변수명은 사용자가 임의로 작성가능 ,매개변수 순서는 변경X
element = e
index = i
array = arr
forEach(funciton(e,i,ar){
})
<!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;
}
.box, .box1 {
width: 100px; height: 100px;
background-color: #f00;
margin-bottom: 30px;
}
.list3 li:nth-child(1).active {
background-color: #0f0;
}
.list3 li:nth-child(2).active {
background-color: #f00;
}
.list3 li:nth-child(3).active {
background-color: #00f;
}
.list3 li:nth-child(4).active {
background-color: #ff0;
}
.list4 {
width: 500px;
border: 10px solid #000;
padding: 30px;
}
.list4 li {
width: 100px;
height: 40px;
background: #fc0;
list-style: none;
transition: width 0.5s ease-in-out;
}
.list4 li:not(:first-child) {
margin-top: 20px;
}
.list4 li.on {
width: 500px;
}
.ani {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left:100%; top:50%;
transition: left 1s ease-in-out;
}
.ani.on {
left:50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<ul class="list">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul class="list1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul class="list2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul class="list3">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul class="list4">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul class="list5">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<div class="ani">냉무</div>
<script>
const box = document.querySelector('.box'); // 단수
const box1 = document.querySelectorAll('.box1'); // 복수 = 배열
const list = document.querySelector('.list li'); // 단수 -> 첫번째값만 가져옴
const list1 = document.querySelectorAll('.list1 li'); // 복수
const list2 = document.querySelectorAll('.list2 li');
const list3 = document.querySelectorAll('.list3 li');
const list4 = document.querySelectorAll('.list4 li');
const ani = document.querySelector('.ani');
const list5 = document.querySelectorAll('.list5 li');
console.log(box);
console.log(box1);
console.log('--------------구분선----------------');
console.log(list);
console.log(list1);
console.log(list2);
box.style.backgroundColor = '#00ff00';
// 인덱스 접근 [인덱스번호]
box1[0].style.backgroundColor = '#0000ff';
list.style.display = 'none';
// list1[0].style.display = 'none';
// list1[1].style.display = 'none';
// list1[2].style.display = 'none';
// list1[3].style.display = 'none';
// length = 배열길이, 데이터 개수
// 항상 인덱스 번호는 length보다 1이 작다.
// 배열길이는 1부터 시작
// 인덱스는 0부터 시작
for (let i = 0; i < list1.length; i += 1) {
console.log(i);
// 1. i = 0을 대입 i는 0
// 2. i가 4보다 작은지 검사 (참) 만약에 거짓이면 종료
// 3. 콜솔창에 i를 출력 = 0을 출력
// 4. i에 1을 더해서 다시 i에 대입 i는 2가됨.
// 1번부터 다시 반복
list1[i].style.display = 'none';
}
const colors = ['red','green','blue','pink'];
// list2[0].style.backgroundColor = colors[0];
// list2[1].style.backgroundColor = colors[1];
// list2[2].style.backgroundColor = colors[2];
// list2[3].style.backgroundColor = colors[3];
for (let i = 0; i < list2.length; i += 1) {
list2[i].style.backgroundColor = colors[i];
}
/*
list3[0].addEventListener('click',function(){
// element.classList.add('클래스이름')
// 클래스만들기
list3[0].classList.add('active');
});
list3[1].addEventListener('click',function(){
// element.classList.add('클래스이름')
// 클래스만들기
list3[1].classList.add('active');
});
list3[2].addEventListener('click',function(){
// element.classList.add('클래스이름')
// 클래스만들기
list3[2].classList.add('active');
});
*/
for (let i = 0; i < list3.length; i += 1) {
list3[i].addEventListener('click',function(){
list3[i].classList.add('active');
});
}
for (let i = 0; i < list4.length; i += 1) {
list4[i].addEventListener('click', function(){
list4[i].classList.add('on');
});
}
// 창 로딩...................
window.addEventListener('load',function(){
ani.classList.add('on');
});
// addEventListener(매개변수1,매개변수2)
// 매개변수1 = 이벤트명
// 매개변수2 = 실행할 함수 = CallBack 함수
// 배열에만 적용가능....
list5.forEach(function(element,index,array){
console.log(element);
console.log(index);
console.log(array);
list5[index].style.backgroundColor = colors[index];
});
</script>
</body>
</html>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 6 .DOM요소 클래스 제어하기 (0) | 2023.04.04 |
|---|---|
| 자바스크립트 javascript 5스크롤이벤트window --> scroll (0) | 2023.04.04 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 (0) | 2023.03.31 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(2) 이벤트사용하기 (0) | 2023.03.31 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(1) (0) | 2023.03.31 |
댓글