JavaScript
-
Map() 으로 임시 저장소 만들기JavaScript 2023. 10. 20. 09:20
라디오 버튼으로 탭을 만들 때, html 요소의 값만 저장해서 변경할 수 있는 기능을 만들고 싶었다. 이미지1 이미지2 회사명 선택 a b c d let radioMap = new Map(); radioMap.set(1, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); radioMap.set(2, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); let currentRadioValue = parseInt(document.querySelector('input[type="radio"][name="imageTabs"]:checked').value); const ima..
-
이벤트를 바인딩하는 2가지 방법JavaScript 2023. 10. 20. 08:34
이벤트를 바인딩할 때 기본적으로 이벤트를 걸고싶은 요소에 eventListener를 추가하거나, 태그 내부에 함수를 추가하는 것으로 걸 수 있다. 만일 특정 요소에 동적으로 이벤트를 부여하는 상황에서, 렌더링 시 문제가 발생해서 이벤트가 바인딩되지 않고 있다면 어떻게 이벤트를 걸 것인가? 워드프레스의 숏코드를 활용하여 요소에 이벤트를 부여하는 과정에서, 간헐적으로 이벤트가 바인딩되지 않는 상황이 발생했다. 1. 요소에 이벤트를 걸기 jQuery('#buttonId').unbind().bind('click', function () { popupObject.showPopup(); }); 위와 같이, 특정 버튼 요소에 팝업 이벤트를 바인딩하는 함수가 있다. 이 경우 버튼에 직접 이벤트를 바인딩 하기 때문에, ..
-
form에 이미지 파일 전송하기JavaScript 2023. 9. 21. 09:28
form 태그에 이미지 파일과 text 데이터를 담은 json을 넣어서 php 서버로 request 하고 response를 받아보자 1. 이미지 파일 업로드, 변수에 저장하기 -> 일반적인 문자, 숫자와 다르게 이미지, 동영상 등의 미디어 파일이나 json 형태의 데이터를 원본 그대로 전송하고 싶다면, blob 객체로 만들어서 전송해야한다. 이미지를 가져오려면 input에 file 타입을 선언하고 파일의 형식을 accept에 지정해줘야한다. multiple 속성을 선언하면 여러개의 파일을 가져올 수 있다. const text1 = document.querySelector("#text1"); const text2 = document.querySelector("#text2"); const userImg = ..
-
submit 이벤트 수정 시 유의사항JavaScript 2023. 4. 27. 14:49
form 태그 내부에 있던 submit 버튼을 눌렀을 때, 여러가지 작업을 진행한 후 form을 submit 하려고 했다. 이 과정에서 Uncaught TypeError: appointmentForm.submit is not a function 에러가 발생했다. jsp js > 처음에는 .submit() 함수에 Uncaught TypeError 가 발생해서 form 태그를 잘못 가져온 줄 알았다. 하지만, 사용하고자 하는 버튼의 타입은 submit인데, js에서 click 이벤트를 줘서 발생한 에러였다. - 다음과 같이 이벤트의 종류를 submit으로 바꾸고 나니, .submit() 메소드가 실행된다. ** 기본적으로 이벤트를 가지고 있는 요소의 이벤트 내용을 바꾸고싶다면, 다음과 같이 이벤트의 이름을 ..
-
jquery에서 여러개의 요소에 event를 지정하는 방법JavaScript 2023. 4. 26. 11:54
$("#특정요소").on("click",function(event){ event 실행문 } jquery를 이용해서 특정 요소에 event 태그를 넣는 방법은 다음과 같다. 만약, 이벤트를 넣어줘야하는 특정 요소가 복수의 경우는 어떻게 할 것인가? 위의 태그를 그대로 사용하면, 복수의 특정 요소 중 첫 번째 요소에만 이벤트가 적용된다. 그렇기 때문에, 복수의 요소들에게 같은 이벤트를 부여하고 싶다면, id 가 아닌 클래스를 이용하는 것이 바람직하고 다음과 같은 방법을 이용할 수 있다. $("#특정요소가 있는 위치").on("이벤트종류","특정요소의 클래스명",function(event){ 이벤트 실행문 } 예시)