본문 바로가기
반응형

Embedded/JavaScript60

[JavaScript] 날짜 /** * 올해가 몇 년도인지 계산 */ const thisYear = document.querySelector('.this-year') thisYear.textContent = new Date().getFullYear() getFullYear() · 년도를 출력하는 함수입니다. getMonth() · 월을 출력하는 함수입니다. · 단, 0부터 시작합니다. 1월 -> 0 · 그래서 +1 해줘야 현재 월을 알 수 있습니다 getDate() · 날짜를 출력하는 함수입니다. getDay() · 요일을 출력하는 함수입니다. · 월요일 = 1, 화요일 = 2, 수요일 =3, 목요일 = 4, 금요일 = 5, 토요일 6, 일요일 7 그런데 년도를 가져오는 함수는 왜 뜬근없이 getFullYear()일까? getYea.. 2023. 10. 22.
[JS] 함수 function random(min, max) { // `.toFixed()`를 통해 반환된 '문자 데이터'를, // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환 return parseFloat((Math.random() * (max - min) + min).toFixed(2)) } // 부유하는(떠 다니는) 요소를 만드는 함수 function floatingObject(selector, delay, size) { gsap.to( selector, // 선택자 random(1.5, 2.5), // 애니메이션 동작 시간 { delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정. y: size, // `transform: tr.. 2023. 10. 22.
[JS] forEach const myArr = [1, 2, 3, 4, 5]; myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); 위 코드를 실행한 결과는 다음과 같다. 2023. 10. 22.
[JS] addEventListener addEventListener() document의 특정요소event를 등록할 때 사용합니다. [ 자주 사용하는 이벤트의 종류 ] click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다. focus – HTML요.. 2023. 10. 22.
[JS] querySelector querySelector함수를 이용해서 html에 있는 요소를 불러올 수 있다. [js] const searchEl = document.querySelector('.search') const searchInputEl = searchEl.querySelector('input') // 검색창 요소를 클릭하면 실행. searchEl.addEventListener('click', function () { searchInputEl.focus() }) // 검색창 요소 내부 실제 input 요소에 포커스되면 실행. searchInputEl.addEventListener('focus', function () { searchEl.classList.add('focused') searchInputEl.setAttribut.. 2023. 10. 22.
[JavaScript] const & let const는 상수이다. 상수의 값은 재할당할 수 없다. 예를 들어보자 // MY_FAV를 상수로 정의하고 그 값을 7로 함 const MY_FAV = 7; // 에러가 발생함 MY_FAV = 20; // 7 출력 console.log("my favorite number is: " + MY_FAV); 그 외에는 기본적으로 let을 사용한다. 원래는 var를 사용했다고 하는데 수많은 문제점과 그로 인해 버그를 일으킬 수 있다는 이유로 현재는 var보다 let을 쓴다고 한다. 2023. 10. 22.
[JS] Lodash 이것 또한 자바 스크립트 라이브러리 중 하나이다. CDN은 이거! 그런데 얘는 잘 안 사용하는 듯... 2023. 10. 11.
[JS] ScrollMagic 이쯤되니까 대체 사용하는 JS 라이브러리가 몇 개여;;;; 물론 편하기는 한데… 라이브러리라는 말 써서 뭔가 있어보이기는 한데, 결국에는 여기저기서 긁어왔습니다^_^ 아닌가… 이거 맞는건가… 그래도 결과물만 좋으면 되니까 말이지… https://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position. scrollmagic.io 이 코드를 다들 CDN이라고 부르더라... 기억하자. CDN!!! Ex ) /** * 요소가 화면에 보여짐 여부에 따른 요소 관리 */ // 관리할 요소.. 2023. 10. 11.
[JS] Swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper에는 다양한 옵션들이 있습니다. 옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나, 아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다. 사용 방법 사이트 접속해서 다운 받기 alpha가 아닌 파일 다운 받기 사이트 링크로 파일 불러오기 4. 기본 레이아웃 추가 Sl.. 2023. 10. 11.
[JS] GSAP 웹 개발하는데 생각보다 이곳 저곳에서 소스를 많이 긁어오는구나 싶다… 임베디드 했을 때는 이런거 없이 전부 코딩했었는데, 새롭다! GSAP 바로가기 ↓↓↓↓↓↓↓↓↓ https://greensock.com/docs/v3/Installation GSAP Greensock에서 제공해주는 자바스크립트 애니메이션 라이브러리라고 한다. 상당히 복잡한 애니메이션 구현이 가능해서 매우 인기라고 한다. 사용방법은 이전 것보다 살짝 복잡하다. 우선 저 사이트로 들어가서 GSAP을 설치해야한다. 그 다음 원하는 플러그인을 고르면 코드가 보여지는데, 이 코드를 사용하면 된다. HTML에 위에 코드까지 적으면, JavaScript에서 하기와 같이 사용이 가능하다. /** * 페이지 스크롤에 따른 요소 제어 */ // 페이지 .. 2023. 10. 11.
반응형