안뇽하세여 오늘은 자바스크립트 콜백함수에 대해 자세히 파헤쳐봅시당 ^^! 자바스크립트 콜백(callback) 함수 일단 콜백함수가 무엇인지 한 번 살펴보죠😎 🔙콜백 함수 콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 작업이 끝난 후에 호출되는 함수를 말합니다. 콜백 함수는 자바스크립트에서 비동기 처리를 구현하는 가장 일반적인 방법 중 하나입니다. 아래의 주석부분을 콜백 함수로 표현한 것입니다. // function func1(){ // document.write("1.함수 실행"); // } // function func2(){ // document.write("2.함수 실행"); // } // func1(); // func2(); function func(){ document.write("2.함..

안녕하세요~ 오늘은 저번에 했던 게임 이펙트를 이어서 작업해보겠습니다! 뮤직리스트 버튼, 뮤직리스트 닫기 버튼 // 뮤직 리스트 버튼 musicListBtn.addEventListener("click", () => { musicList.classList.add("show"); }); // 뮤직 리스트 닫기 버튼 musicListClose.addEventListener("click", () => { musicList.classList.remove("show"); }); "musicListBtn"와 "musicListClose" 두 개의 버튼에 이벤트 리스너를 추가하는 JavaScript 코드입니다. "musicListBtn" 버튼을 클릭하면 "musicList" 요소에 "show" 클래스가 추가되고, "m..

안녕하세요! 오늘은 게임 이펙트 중 뮤직듣기 작업을 진행해보겠습니다. 뮤직듣기! 스크립트_선택자 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view .image img"); const musicAudio = musicWrap.querySelector("#main-audio"); const musicP..

오늘은 제이쿼리를 이용해 드래그 효과를 만들어보도록 하겠습니다. 구조 🎮JJUL GAME WORLD🎮 2023년 4월 24일 09시 30분 15초 MUSIC MUSIC MUSIC MUSIC 현재 윈도우를 사용하고 있으며, 화면 크기는 1920 X 760입니다. 기본적으로 header에 현재 날씨를 표시할 것이고, 메인엔 커서 이미지와 icon들이 들어갑니다. 그리고 footer에는 OS를 나타내줄 것입니다. 스크립트_jquery와 gsap 제이쿼리를 연동시켜줍니다. 마우스 커서 window.onload = function(){ window.addEventListener("mousemove", e => { gsap.to(".cursor", {duration: 0, left: e.pageX - 5, top:..

오늘은 자바스크립트 문자열 10가지에 대해 알아보겠습니다! 자바스크립트 문자열 ❣️at() -문자열에서 지정된 인덱스에 해당하는 문자를 반환합니다. -이 메소드는 문자열의 charAt() 메소드와 유사하지만, 인덱스가 문자열의 범위를 벗어날 경우 undefined를 반환합니다. 문법 "문자열".at(인덱스) "javascript reference".at(); //j "javascript reference".at(0); //j "javascript reference".at(3); //a "javascript reference".at(11); //r "javascript reference".at(20); //undefined "javascript reference".at(-1); //e "javascript..

오늘은 skroll.js를 사용해서 예쁜 패럴랙스 효과를 내보겠습니다 ㅎㅎ 자바스크립트 패럴랙스 효과 -플러그인 일단 플러그인을 연동 시켜야합니다! 이렇게 플러그인을 연동시킨 다음, scrollTop값을 구해줍니다. section1 Web Story Boy Boy And div.s1-text1: "Web"이라는 텍스트를 포함하는 엘리먼트 div.s1-text2: "Story"라는 텍스트를 포함하는 엘리먼트 div.s1-img1: 5개의 div 엘리먼트를 포함하는 엘리먼트. 각각의 div 엘리먼트는 다른 이미지를 포함하며, 순차적으로 나타나고 사라집니다. div.s1-text3: "Boy"라는 텍스트를 포함하는 엘리먼트 div.s1-text4: "Boy"라는 텍스트를 포함하는 엘리먼트 div.s1-text..

오늘은 부드럽게 스크롤되는 패럴랙스 효과를 알아보겠습니당. 자바스크립트 패럴랙스 효과 1 구조 Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 한 번 포기하면 습관이 된다. 절대 포기하지 말아라. 02 Section2 꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다. 03 Section3 불가능은 오직 의지가 없는 사람에게만 존재한다. 04 Section4 불행한 사람은 다른 사람의 불행에서 위안을 얻는다. 05 Section5 사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다. 06 Section6 무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니..

자바스크립트 슬라이드 효과 슬라이드 효과 7 슬라이드 이펙트 중 썸네일과 버튼이 있는 효과입니다. 구조 prev next 스크립트_변수 설정 let images = [ "img/sliderEffect04-min.jpg", "img/sliderEffect05-min.jpg", "img/sliderEffect03-min.jpg", "img/sliderEffect09-min.jpg", "img/sliderEffect10-min.jpg" ]; images라는 변수 안에 배열 형태로 이미지를 저장해줍니다. 스크립트_함수 만들기 function imageSlider(parent, images){ }; imageSlider(document.querySelector(".slider__wrap"), images); 해당..