SMALL 프론트엔드 개발자/JS29 자바스크립트 javascript 5스크롤이벤트window --> scroll /// 스크롤이벤트 window --> scroll window.addEventListener('scroll',function() { 실행코드; }); * { margin:0; padding:0; box-sizing: border-box; } header { width: 100%; height: 150px; background-color: rgba(0,0,0,.5); font-size: 70px; text-align: center; position: fixed; left:0; top:0; } header.active { background-color: #f00; } main { width: 1000px; height: 3000px; background-color: #fc0; font-size: 300.. 2023. 4. 4. 자바스크립트 javascript 4. forEach ///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> Document * { margin:0; padding:0; } .box, .box1 { width: 100px; height: 100px; background-color: #f00;.. 2023. 3. 31. 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 DOCTYPE html> Document .tit { border: 2px solid #fc0; font-size: 30px; } .txt { height: 100px; font-size: 50px; background-color: aquamarine; } .tit1.active{ background-color: #f00; } .tit2.active{ background-color: rgb(20, 9, 124); } .tit3.active{ background-color: rgb(76, 192, 30); } 제목1 내용1 제목2 내용2 제목3 내용3 // for 반복문 /* for(초기값 설정; 조건설정; 증감식) { 실행코드 } */ // 1부터 10까지 콘솔창에 출력하기 for(let i =1;i <.. 2023. 3. 31. 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(2) 이벤트사용하기 DOCTYPE html> Document 클릭1 클릭2 클릭3 #box { width: 80%; height: 100px; border: 1px solid #000; } #box1 { width: 300px; height: 100px; background-color: #fc0; display: none; } //btn1 가져오기 const btn1 = document.getElementById('btn1'); //btn1에 클릭이벤트 생성 btn1.onclick = function() { alert('이벤트 테스트중입니다'); } //btn2 가져오기 const btn2 = document.getElementById('btn2'); // btn2에 이벤트리스너 적용하기 btn2.addEventListen.. 2023. 3. 31. 이전 1 ··· 3 4 5 6 7 8 다음 LIST
