본문 바로가기

JavaScript9

[JavaScript] 팝업 날짜 지정 오늘 하루 이 창을 열지 않음 [닫기] .popup p span{font-size:20px} #popup1, #popup2, #popup3, #popup4 { position: absolute; top: 7%; max-width: 400px; width: 78%; height: auto; padding: 10px; border: 1px solid rgb(221, 221, 221); background: rgb(255, 255, 255); box-shadow: 2px 2px 6px #666; display: none; } var today = new Date(); // html 에서 data-expired 가 설정된 팝업 div 들 찾기 var popup = document.querySelectorAll(.. 2024. 2. 22.
[JavaScript] 팝업 오늘 하루 이 창을 열지 않음 [닫기] .popup p span{font-size:20px} #popup1, #popup2, #popup3, #popup4 { position: absolute; top: 7%; max-width: 400px; width: 78%; height: auto; padding: 10px; border: 1px solid rgb(221, 221, 221); background: rgb(255, 255, 255); box-shadow: 2px 2px 6px #666; display: none; } $(document).ready(function(){ var popupTime = new Date(); var y = new Date().getFullYear(); var m = new .. 2024. 2. 16.
[JavaScript] 이미지 슬라이드 소스 ?atchFileId=&fileSn=' /> 2023. 12. 5.
[Swiper] 라이브러리 포커스이동 swiper 라이브러리를 사용해서 팝업이미지들이 자동으로 재생되고 있음 키보드 tab을 눌렀을때 a링크에 포커스가 잡히면 해당 이미지가 화면에 나오도록 라이브러리와 스크립트 이용하기 . var timer = 4000; //4000 var mainSwiper = new Swiper( "#popupList", { slidesPerView: 1, autoplay: { delay: timer, disableOnInteraction: true, }, loop: true, allowTouchMove : true, effect: 'fade', fadeEffect: { crossFade: true, }, pagination: { el: ".swiper-pagination", loop: true, clickable: t.. 2023. 11. 17.
[JavaScript] onkeydown "onkeydown"은 자바스크립트 이벤트 중 하나입니다. 이 이벤트는 웹 페이지에서 키보드의 키가 눌렸을 때 발생하며, 이벤트 핸들러를 통해 해당 키 눌림에 대한 동작을 정의할 수 있습니다. 주로 키보드 입력을 처리하고 사용자 상호작용을 구현하는 데 사용됩니다. 예를 들어, 다음과 같이 HTML 요소에 "onkeydown" 이벤트 핸들러를 추가할 수 있습니다: 그리고 자바스크립트에서 이 이벤트 핸들러를 처리하는 함수를 정의할 수 있습니다 function myFunction(event) { if (event.keyCode === 13) { alert("Enter 키가 눌렸습니다."); } } 이런 식으로 "onkeydown" 이벤트를 사용하여 특정 키 눌림에 대한 반응을 구현할 수 있습니다 2023. 10. 24.
[JavaScript] onkeydown "onkeydown"은 자바스크립트 이벤트 중 하나입니다. 이 이벤트는 웹 페이지에서 키보드의 키가 눌렸을 때 발생하며, 이벤트 핸들러를 통해 해당 키 눌림에 대한 동작을 정의할 수 있습니다. 주로 키보드 입력을 처리하고 사용자 상호작용을 구현하는 데 사용됩니다. 예를 들어, 다음과 같이 HTML 요소에 "onkeydown" 이벤트 핸들러를 추가할 수 있습니다: 그리고 자바스크립트에서 이 이벤트 핸들러를 처리하는 함수를 정의할 수 있습니다 function myFunction(event) { if (event.keyCode === 13) { alert("Enter 키가 눌렸습니다."); } } 이런 식으로 "onkeydown" 이벤트를 사용하여 특정 키 눌림에 대한 반응을 구현할 수 있습니다 2023. 10. 24.
[JavaScript] 반복되는 모든 버튼에 이벤트 리스너를 등록하기 memo 저장 여러 개의 .textarea-box 클래스가 있는 경우, querySelector() 메서드는 문서 내에서 첫 번째 .textarea-box 요소만 선택하게 됩니다. 따라서 첫 번째 버튼에만 이벤트 리스너가 등록되는 것입니다. 모든 버튼에 이벤트 리스너를 등록하려면 .textarea-box 클래스를 가진 모든 요소를 선택한 후에 각각의 요소에 이벤트 리스너를 등록해야 합니다. 이를 위해서 querySelectorAll() 메서드를 사용하여 모든 .textarea-box 클래스를 가진 요소를 선택하고, 각 요소에 대해 반복문을 사용하여 이벤트 리스너를 등록해야 합니다. 아래는 모든 .textarea-box 클래스를 가진 요소에 대해 이벤트 리스너를 등록하는 코드입니다. const textar.. 2023. 7. 31.
[JS] 콜백함수 정리 콜백함수 - 정의 : 함수에 파라미터로 들어가는 함수 - 용도 : 순차적으로 실행하고 싶을 때 사용 document.querySelector('.button').addEventListener('click',function(){ "버튼 누르면 이 코드 실행해주세요~" }) 이벤트를 넣고 싶을 때 .addEventListener() 사용. addEventListener() 소괄호가 있으니까 함수임. addEventLstener('click', function() {} ) 파라미터로 함수를 사용함 -> 이것을 콜백함수라고 부름 + 다른데서 만든 함수도 콜백함수로 넣을 수 있음 document.querySelector('.button').addEventListener('click',function 함수명) fu.. 2023. 6. 29.
[JS] XMLHttpRequest HTTP 요청 전송 const xhr = new XMLHttpRequest(); //생성자 함수 호철하여 생성 xhr.open(method, url[, async]) // method:Http 요청메서드(GET,POST,PUT,DELETE 등 ) ..... xhr.send(); //HTTP 요청전송 XMLHttpRequest.prototype.open open메서드는 서버에 전송할 HTTP요청을 초기화한다. HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다. HTTP 요청 메서드 종류 목적 페이로드 GET index / retrieve 모든/특정 리소스 취득 X POST create 리소스 생성 O PUT repla.. 2023. 6. 18.
728x90

티스토리툴바