자바스크립트15

• 

  [jQuery] 체크 이벤트 강제 발생 시키기 목차화면에 체크박스가 2개 있고, 체크박스의 change 이벤트를 감지하여 두 체크박스가 모두 체크되었을 때만 버튼을 활성화시키는 기능이 있다.그런데, 사용자가 직접 체크박스를 체크했을 때는 이벤트가 잘 감지되었지만, 함수 호출로 동적으로 체크박스를 체크한 경우는 감지되지 않는 문제가 있었다.이유는 기본적으로 체크박스를 동적으로 조작하면 이벤트가 발생하지 않기 때문에 그렇다.그래서 trigger.('이벤트명')으로 이벤트를 강제로 발생시켜 해결 했다.수정 전function check(checkId, target) { document.getElementById(target).classList.add('d-none'); $("#" + checkId).prop('checked', true); .. IT/development 2025. 1. 11.

• 

  [javascript] javascript this javascript에서의 this에 대해 숙지해보았다.(함수 호출 방식에 의해 결정되는 this)refrerence: https://www.youtube.com/watch?v=tDZROpAdJ9w&t=754s IT/development 2024. 6. 1.

• 

  [development] chrome development tool debugging 1 크롬 개발자 도구 조건 중단점 걸기(특정 조건일 때만 브레이크 포인트 활성화)더 이상 루프문 브레이크포인트에서 i를 수동으로 계속 증가 시키지 않아도 된다. IT/development 2024. 6. 1.

• [jQuery] 공통으로 선택자 처리 목차 거창할 건 없고 매개변수로 넘긴 문자열 앞에 "#"를 붙여서 아이디 선택자로 만들어서 처리한다. 소스를 보면 바로 이해가 된다. html 상단 탭에 클릭 이벤트를 줬고 2개의 매개변수를 넘긴다. 전체메뉴 인기메뉴 특별메뉴 script 구분자를 받아서 서버로 넘겨서 구분자에 해당되는 데이터를 조회, tartget id명을 받아서 "#"를 붙여 선택자로 처리, 이러면 function 여러개 만들 필요 없이 저 function 하나로 처리가 가능하다.(화면에서 하나의 테이블만 바라보고 테이블에 구분자 컬럼이 있음) 누구나 알고 있을 수 있지만 그래도 메모한다. function getMenuList(gubun, target) { $.ajax({ url: '/info/selectMenuList.do', ty.. IT/development 2024. 1. 21.

• 

  [JavaScript] selectbox 동적 표시 상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다. 예를 들면 아래와 같은 상황이다. 광역지자체에 따라 그 하위 지자체 목록이 표시 1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다. 상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다. 관리 광역지자체 관리 기초지자체 전체 function fn_get_LocalGovInstCode(){ //광역지자체코드 var selectedValue = $("#mngWideAreaLocgovCd").val(); $.ajax({ url: '/locgov/selectLoc.. IT/development 2024. 1. 21.

• [jQuery] 전체 체크박스 체크 테이블의 th의 체크박스 선택 시 tbody의 td의 checkbox를 전체 체크하는 간단한 예제다. 번호 성명 아이디 function fn_chkAll(obj){ if($(obj).is(':checked')){ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', true); }else{ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', false); } } IT/development 2024. 1. 21.

• 

  [JavaScript] 객체 해체 할당(Object Destructuring Assignment)(feat. ES6) ES6부터 지원하는 기능 중 하나인 객체 해체 할당 객체에서 바로 변수에 값을 한번에 할당할 때 사용(코드의 가독성 및 객체의 속성을 더 쉽게 추출) //객체의 구조가 복잡하거나 여러개의 속성을 한번에 추출할 때 유용하게 사용됨 const person = { name: '어흥', age: 50 }; //객체해체할당을 통해 객체의 속성값을 바로 변수에 할당 const { name, age } = person; //변수명 변경도 가능(아래는 person객체의 name값을 uname이라는 변수에 할당하는 예시) //const { name: uname } = person; console.log(name); // '어흥' console.log(age); // 50 //객체 해체 할당 미사용 const person.. IT/development 2023. 10. 4.

• [JavaScript] 자식 팝업창에서 부모창의 함수 호출(javascript 위주) 부모창에서 자식창을 아래처럼 팝업으로 열었음(html 코드는 생략) parent.html //버튼 클릭 시 child라는 팝업 호출 $("#btn").on("click", function() { //팝업 호출(openPopUp()이라는 공통함수에서는 팝업 호출한다고 가정) const popup = openPopUp("/child", 1100, 700, "child"); }); //자식 팝업에서 호출하는 함수(자식창에서 넘어온 사업자번호, 고객명을 부모의 필드에 적용) function chooseClient(clientBizNo, clientNm) { $("#clientBizNo").val(clientBizNo); $("#projClientNm").val(clientNm); } child.html /** .. IT/development 2023. 8. 13.

• [JavaScript] 동등연산자(==, !=)와 일치연산자(===, !==) 동등연산자와 일치연산자의 차이 간단히 테스트 😎 JavaScript에서 동등연산자(==, !=)를 사용할 경우 자동으로 형변환을 해서 비교하기 때문에 값만 맞으면 맞다고 하고 일치연산자(===, !==)를 사용할 경우 값과 타입까지 비교를 한다. 동영상을 보면 변수 one에는 정수 1이 들어 있고 변수 two에는 문자열 '1'이 들어 있는데 ==를 사용할 경우 true가 나오고 ===인 경우는 false가 return되는게 확인 되었다. 정확한 비교를 위해선 일치연산자를 쓰도록 하자.(비교 연산자 때문에 삽질할 미래의 너에게 하는 말) IT/development 2023. 7. 24.

• 

  [JavaScript] 동적 엘리먼트 onclick 문자열 구현 하려고 하는 기능은 동적으로 만든 엘리먼트에 onclick 이벤트를 추가 후 매개변수에 문자열을 넣는 것이다. 순번 아이디 결과 원하는데로 "문자열"이 잘 전달되었다. \" 이스케이프는 따옴표를 나타내는 문자열이라고 인식시킨다. IT/development 2023. 7. 5.

• [JavaScript] validation IT/development 2023. 6. 25.

• [JavaScript] 현재날짜와 특정날짜 비교 // 입력일("yyyymmdd" 형식)과 현재날짜를 비교 후 boolean type으로 return function isPreviousDay(dt) { //입력 날짜 년월일 const year = dt.substring(0, 4); const month = dt.substring(4, 6); const date = dt.substring(6, 8); //yyyy-mm-dd 포맷 세팅("-"를 붙이지 않으면 Invalid Date로 세팅됨) const inputDt = new Date(year + "-" + month + "-" + date); console.log("inputDt : " + inputDt); //현재날짜 const now = new Date(); console.log("now : " + .. IT/development 2023. 6. 13.