JavaScript
-
[Javascript] 이중배열을 filter로 조건에 해당하는 것 추출하기JavaScript 2023. 10. 27. 09:14
js의 Array가 제공하는 함수 중 filter는 기존 array에서 filter의 조건에 해당하는 새로운 배열을 반환하는 함수이다. 이 filter를 사용할 때 조건을 디테일하게 조절하는 방법을 기록으로 남긴다. 예시) 이중배열 Array a에서 Array b의 값과 일치하는 항목들만 반환하는 방법 const a = [[1,2,3], [4,5,6], [7,8,9]]; const b = [[1,2,3], [4,5,3], [7,8,9]]; const c = a.filter(x => { let temp = x.join(''); let tempCnt = 0; b.forEach(e => { let temp2 = e.join(''); if(temp2 === temp) tempCnt ++; }) if(tempCn..
-
[JavaScript] filter로 두 배열이 같은지 비교JavaScript 2022. 12. 3. 09:43
두 배열이 같은 값으로 이루어져 있는지 판단해야 할 때가 있다. 이떄 필터를 사용해 판단할 수 있는 함수를 하나 만들어 보았다. function isSameArr(arr1, arr2){ //두 배열의 길이가 다르면 if(arr1.length !== arr2.length){ return false; } // 길이가 같은 경우 비교 else if(arr1.length === arr2.length){ let filter = arr1.filter(x => arr2.includes(x)); console.log(filter); if(filter.length === arr1.length){ return true; } else return false; } }
-
[JavaScript] 숫자 문자 상관없이 배열 오름,내림차순 정렬하기 (Array sort 활용)JavaScript 2022. 11. 24. 22:38
JavaScript 의 array.sort()는 기본적으로 오름차순 정렬을 지원한다. 하지만 우리는 언제나 오름차순 정렬만 필요한게 아니다. 그래서 sort()는 option을 제공하는데, sort() 내부에 조건을 주어, 오름 내림차순을 조정할 수 있다. 간단한 function을 하나 선언해두면, 필요할 떄 오름내림 차순으로 정렬된 배열을 얻을 수 있다. 예시 사용결과 위의 예시에서 사용한 sortArr function sortArr(arr, sortType){ arr.sort(function(a, b){ if(sortType === 'desc'){ //내림차순 정렬 if(a > b) return -1; if(a < b) return 1; else return 0; } else if(sortType =..
-
[JavaScript] input에 키입력 받았을 때 다음 Element에 값 옮기기(엑셀 복붙 쪼개기)JavaScript 2022. 11. 15. 23:40
input에 값을 입력받았을 때, 다음 탭, 다음 칸으로 이동이 필요한 경우에 대해 기록으로 남긴다. 이번 상황의 경우 엑셀에서 복사한 값을 그대로 입력하고자 하였는데, 복사해서 텍스트를 확인해보니 A\tB 와 같이, "탭"으로 열을 구분하여 복사된 것을 확인하였다. 이와 같은 상황일 때, 나는 저 B가 복붙과 동시에 다음칸에 입력되었으면 하였다. 일단 keyup을 이벤트로 붙였고, 입력된 값을 좀 전에 확인한 바와 같이 \t로 쪼갰다. 그 다음 입력값에서 \t를 인식하면 맨 첫칸에 A, 다음칸에 B를 입력한다. **적용결과 ** 엑셀에서 복붙할 때 다음 행은 ' '으로 구분한다. 즉, 여러 행, 여러 열의 값들을 복붙할 경우에는 와 같이 사용할 수 있겠다.
-
[JavaScript] 특정문자 감지 및 추출 (간단한 정규식)JavaScript 2022. 11. 15. 21:41
페이지 제작중 간혹, input tag에 특정한 조건만 입력하도록 요구받을 때가 있다. 한글만, 영어만, 숫자만 등등.. 간단한 정규식을 활용하면 입력받은 내용을 감지하여 분기처리 및 원하는 것만 추출할 수 있다. 감지예시 추출예시 : 문장에서 한글만 남기고 전부 제거 예시2 : 이모지 제거 이모지 감지 정규식 : let sReg = /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g
-
[JavaScript] 동적으로 새로 붙인 Element 이벤트 붙이기 (addEventListener)JavaScript 2022. 9. 30. 22:22
화면작업을 하다보면 최초 화면호출 이후, 동적으로 추가로 붙인 Element에도 이벤트를 동작시킬 필요가 있는데, 호출당시에 선언했던 이벤트가 새로 만들어진 Element를 대상으로 인식하지 않는 현상을 겪을 수 있다. 예시 결과: 당초예상대로라면, 기존버튼을 클릭하면 새버튼xx가 새로 생성되고 새로운 버튼을 클릭하면 console.log()가 동작해야한다. 하지만, 이 상태로는 기존버튼만 동작할 뿐, 새버튼은 동작하지 않는다. 이유는 버튼 Element가 새로 만들어지기 전, 아직 존재하지 않는 버튼만 이벤트가 붙어있는 상태로 인해 발생하는 현상이다. 즉, Element 생성이후 이벤트가 붙는다면 javascript가 해당 Element의 이벤트를 인식하는 것을 확인할 수 있다.. 코드수정 > 수정 후..
-
[JavaScript] dataset으로 값 저장하기 ("data-xxx")JavaScript 2022. 9. 23. 08:13
간혹 작업하다보면, Object에 담긴 값들을 체크박스나 라디오 같은 곳에 저장해두고 꺼내쓸 일이 있다. 이때 dataset을 이용하면 편리하게 원하는 값들을 저장해두고 꺼내쓸 수 있다. 가령 위와 같은 html과 object들이 있다고 가정하고, 각 체크박스들에 이름과 스케일, 전화번호등등을 박아놓고 싶다면 아래와 같이 하면 될 것이다. 결과 각 input 태그에 data-xxx 형태로 Object의 모든 값들을 저장해보았다. 현재 input 안의 data-xxx를 꺼내쓸땐 inputTag.dataset.xxx (Element.dataset.xxx) 로 원하는 값을 꺼내쓸 수 있다. ***새롭게 알게된 사실 하나는 document.getElementsByTagName으로 얻어온 HTMLCollectio..
-
[JavaScript] 이미지확대축소JavaScript 2022. 9. 18. 15:54
javascript를 이용하여 이미지확대 축소를 할 수 있다. 코드예시 let tg = document.getElementsByClassName("tg")[0]; let imgPath = document.getElementsByClassName("tg")[0].getAttribute("data-image"); let photo = document.getElementsByClassName("photo")[0]; photo.style.backgroundImage = `url(${imgPath})`; //이미지 확대 (마우스 갖다댐) tg.addEventListener("mouseover", function(){ photo.style.transform = `scale(2)`; //2배확대 }) //이미지 축소..