개발/Javascript & jQuery
-
[Javascript] 조건에 따라 Object key & value 할당하는 쿨한 방법개발/Javascript & jQuery 2023. 1. 8. 22:04
특정 조건을 만족할 때만 Object에 특정 key에 값을 저장하는 새로운 방법을 알게 되어 까먹기 전에 적어본다 const [selected, setSelected] = useState(''); // 선택된 selected 값에 따라 newObj에 각기 다른 key: value를 추가 const newObj = { ...(selected === '1' && { first: 'first test' }, ...(selected === '2' && { second: 'second test' }, };
-
실수에서 정수만 추출하기개발/Javascript & jQuery 2021. 2. 6. 20:46
실수값에서 소수점 이하 부분을 버리고 정수값만 추출해야 할 때 아래 2개의 옵션이 있다. 1. toFixed() 활용 자바스크립트의 Number 내장객체에서 제공하는 toFixed 함수를 활용 매개변수를 지정하지 않으면 기본값으로 0을 사용하게 된다. 1 2 3 4 const num = 123.456; console.log(num.toFixed()); // "123" console.log(num.toFixed(0)); // "123" cs 2. Math.trunc() 활용 자바스크립트의 Math 내장객체에서 제공하는 trunc 함수를 활용 1 2 3 const num = 123.456; console.log(Math.trunc(num)); // 123 cs
-
동적으로 생성한 태그에 이벤트 적용하기개발/Javascript & jQuery 2019. 7. 20. 11:27
고객의 변덕으로 인해 체크박스를 동적으로 생성하여 출력한 뒤 체크박스를 선택할 때마다 문구를 자동 완성하여 출력해주도록 코드를 짰다. 평소와 다름없이 1 2 3 4 $('input[name=chkBox]').on('click', function(){ console.log(this); }); Colored by Color Scripter cs 를 써봤는데 콘솔창에 아무것도 안 찍힌다. 원래 아래처럼 쓰면 동적으로 생성된 태그에 안 먹히고 위처럼 선언하면 되는게 아니었나...? 1 2 3 $('input[name=chkBox]').click(function(){ console.log(this); }); Colored by Color Scripter cs 이 onClick 이벤트를 $(document).rea..
-
ajax로 파일(multipart/form-data) 전송하기개발/Javascript & jQuery 2019. 4. 17. 22:51
AS-IS 소스에서는 사용자가 선택한 파일을 업로드하는 소스를 1 2 3 4 Save Colored by Color Scripter cs 이런 식으로 구현했으나 TO-BE로 전환하면서는 파일 업로드 후 자바스크립트 단에서 콜백함수를 호출하도록 만들고 싶어서 방식을 조금 바꿔봤다. 1 2 3 4 Save Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(function(){ $('#uploadBtn').on('click', function(){ uploadFile(); }); }); function uploadFile(){ var form = $('#uploadForm')[0]; var form..
-
동적으로 추가된 셀렉트박스에서 원하는 옵션 선택하기개발/Javascript & jQuery 2019. 3. 6. 11:13
동적으로 셀렉트 박스에 옵션을 생성하여 추가해준 후,특정 이벤트 발생에 따라 원하는 옵션을 선택해줘야 할 때가 아주 많이 발생한다... 그럴 때는 당황하지 말고 이렇게 12345//옵션 순서를 알 경우 : 선택하고자 하는 옵션 순번을 명시하여 선택$("#selectBox option:eq(n)").prop("selected", true); //해당 옵션의 value를 알 경우 : 선택하고자 하는 value를 명시하여 선택$("#selectBox").val("값").prop("selected", true);cs 해주면 된다. 처음에는 attr()을 써서 시도해보았으나 안되길래 찾아봤더니 동적으로 추가된 요소에 대해서는 attr() 이 안 먹는 모양
-
팝업창 하나만 띄우기개발/Javascript & jQuery 2019. 2. 14. 09:11
팝업창을 띄우는 함수가 여러개 있으며이미 띄워진 팝업창이 있으면 팝업창을 닫고 새 팝업창을 띄워야 하는 경우전역변수를 하나 선언해두고 이 변수를 이용해서 팝업창을 열면 된다. 무슨 말이냐고 하면 12345678910111213141516171819var win; function popup1(){ if(win != null){ win.close(); } win = window.open('url1', 'name', 'x', 'y', 'width', 'height'); win.focus();} function popup2(){ if(win != null){ win.close(); } win = window.open('url2', 'name', 'x', 'y', 'width', 'height'); win.foc..
-
[jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기개발/Javascript & jQuery 2019. 1. 24. 12:24
jqGrid를 쓰다보면 언젠가 아래 이미지처럼 그리드의 행마다 수정 삭제 버튼을 넣어줘야 하는 경우가 생길 수도 있다. 출처는 요 아래http://trirand.com/blog/jqgrid/jqgrid.html → Functionality > Formatter actionshttp://www.guriddo.net/documentation/guriddo/javascript/user-guide/formatters/ 실제 소스에 적용한다면 이런 느낌으로 들어간다. 123456789101112131415161718192021222324252627282930 $$("#list").jqGrid({ url: "url", datatype : "json", mtype: "post", colNames:[ ' ', 'id'..
-
jqGrid 위키문서 정리 - 플러그인 특징 및 설치개발/Javascript & jQuery 2018. 4. 23. 11:39
준비 중인 프로젝트에서 jqGrid를 사용하는데 내가 유일한 초기 투입 개발자니까 미리 준비하면 좋겠다고 하셔서 공부를 시작했다.요기에 정리되어 있는 공식문서를 공부할 겸 따로 정리해본당 → http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features 1. 특징1) 기본 그리드• UI테마에 기초한 CSS 사용 : jQueryUI의 테마를 활용하여 그리드를 표현→ jQueryUI 테마 다운로드 필요• 페이징 : 페이징 기능을 사용하여 데이터 출력 가능하며, 한 페이지에 총 몇 행을 출력할지는 개발자가 지정할 수 있음• 사용자가 컬럼 너비 조정 가능• 데이터 정렬 : 사용자가 헤더를 클릭하여 데이터 정렬 가능. 개발자가 특정 타입을 기준으로 데이터 정렬하도록 지..