Javascript 20

Table - td index 설정

간혹 html table에서 특정 열을 선택하고 싶을때가 있다. 보통은 nth-child(n) 선택자를 쓴다거나 tr을 for문, filter를 사용하여 td의 index() 값이 일치하는 항목을 선택하는 방식으로 기능을 구현할 수 있다. 하지만 이는 colspan, rowspan이 적용된 cell에 대해선 원하는 index가 선택되지 않게 된다. HTMLTableCellElement의 cellIndex 값은 cell을 감싸고있는 tr 내에서의 index값을 지정하기 때문이다. 0 => cellIndex : 0, 원하는 index값 : 0 1 => cellIndex : 1, 원하는 index값 : 1 3 => cellIndex : 2, 원하는 index값 : 3 4 => cellIndex : 3, 원하는..

Javascript 2020.09.22

Image Lazy Loading

다수의 이미지가 존재하는 화면의 경우엔 이미지가 한꺼번에 로딩이되며 랜더링 속도가 저하된다. 그리고 사용자가 모든 이미지를 다 보지 않을 경우엔 불필요한 이미지가 로딩되어 데이터가 낭비된다. 랜더링 성능 향상 및 불필요한 데이터 낭비를 줄이기 위해 화면에 보여지는 항목만 이미지만 로딩될 수 있도록 조치가 필요한다. 1. img 태그에 src 지정하지 않기. 2. 이미지 로딩 1) 스크롤 이벤트를 이용 2) 화면에 보여질 Y축 포지션 값(bottomPos)을 설정 3) 화면에 보여질 img 항목들을 필터링 4) img의 top 포지션값이 bottomPos보다 작을 경우 src값을 설정 5) opacity값을 변경하여 화면에 표시 (opacity : 0 -> 1)로 변경 // Simple Image Lazy..

Javascript 2019.10.04

Array.sort

array.sort([compareFunction]) array.sort(function(nextIndexValue, currentIndexValue){ .. compare nextIndexValue to currentIndexValue.. return 0 or 1 or -1 }) 1. array.sort() - compareFuntion이 지정되어 있지 않으면 각 요소들을 문자열로 변환 후 유니코드 포인트 순서로 문자열을 정렬한다. - 기본 오름차순 ※ 문자열로 변환 후 값을 비교하게 되므로 9, 80은 "9", "80"으로 변경되어 "80", "9" 순으로 정렬되어진다. 2. array.sort(compareFuntion) - paremeter로 2개의 배열의 값을 가져오게된다. - 첫번째 인자는 현..

Javascript 2019.05.08

Eclipse - Emmet (Zen Coding) Plugin 추가

이클립스에서는 Zencoding자체를 지원하지 않기 때문에 Plugin을 설치해야한다. 1. 이클립스 > Help > Install New Software… 클릭 2. Work With에 http://emmet.io/eclipse/updates를 입력 후 Enter!!! 3. 잠시 관련 정보를 조회한 후 Emmet항목이 조회되면 체크박스 선택 후 [Next] 버튼을 클릭한다. 4. 설치되는 항목의 상세정보를 보여주는데 특별한 내용이 없으므로 [Next] 버튼을 클릭한다. 5. Licenses 관련 내용을 읽고 'I accept the terms of the license agreement'를 선택 한 후 [Finish]버튼을 클릭하면 설치가 진행된다. 6. 설치 중간쯤 보안경고 관련창이 뜨는데 [Inst..

Javascript 2018.07.23

[Jquery] click 이벤트 활성화, 비활성화

$(selector).on('click', function(){ //TODO 클릭시 로직 수행 }); $(selector).off('click'); jQuery의 .on 메서드를 통해 이벤트핸들러를 등록 .off 메서드를 통해 이벤트 핸들러를 해제한다. 참고로 이렇게도 사용이 가능하다. $(selector).off('click').on('click', function(){ //TODO 클릭시 로직 수행 }); selector에 등록된 이전 click 이벤트 핸들러를 해제하고 다시 click 이벤트를 등록한다. 가끔 특정 함수 내부에 click 이벤트를 등록하는 로직이 실행되도록 해야하는 경우가 있다. 함수가 여러번 호출된다면 click 이벤트 등록이 매번 실행이 되어 난 클릭을 한번했는데 클릭 이벤트가 ..

Javascript 2015.03.05

Windows8.1 + IE11 화면배율 자동변경 문제!

1. 증상 : 모니터에서 노트북 모니터로 IE창을 이동시 화면배율이 자동으로 150% 변경되어짐. 이로 인해 매번 100%로 다시 조정해야하는 번거로움이 발생. 2. 원인 : IE11에서 각 모니터간의 배율을 자동으로 조정하는 기능 때문에 발생되는 문제. 3. 해결 : http://answers.microsoft.com/ko-kr/ie/forum/ie11-iewindows8_1/%EC%9C%88%EB%8F%84%EC%9A%B0-81-%EC%9D%98/632eeabf-79f7-43c5-845e-82313e91b767

Javascript 2014.10.31

JSON.parse() - Uncaught SyntaxError: Unexpected token

var str = {"test":"테스트 테스트"} ; JSON.parse(str); Uncaught SyntaxError: Unexpected token textarea와 같이 엔터(\n)가 포함되어 있을 가능성이 있는 paramter를 parse 하게 되면 위와 같은 에러메시지가 발생한다. 결론부터 말하자면 \n을 \\n으로 변경해주어야 정상적으로 parse가 수행되어진다. function replaceNewLineChars(value) { if (value != null && value != "") { return value.replace(/\n/g, "\\n"); } else { return value; } }

Javascript 2014.10.24

JSP 언어관련사항

JSP 에서 언어 설정 정보를 가져오는 방법엔 여러가지가 있다. request.getLocale().toString() - 헤더에 설정된 언어설정을 가져온다. 브라우저 상에 우선 설정된 언어를 가져온다. navigator.language - 브라우저에 설정된 언어설정을 가져온다. 무슨 차이냐 하겠지만.. 브라우저의 언어설정은 ko로 해놓고 브라우저 환경설정에서 en을 우선시해놓았다면.. request.getLocale().toString() 의 결과값은 en이고 navigator.language의 결과값은 ko 이다. 혼돈을 막기 위해선 navigator.language를 사용하는게 더 맞을 듯 싶다. 참고로 navigator.language는 IE에서는 지원하지 않는 듯 하다. 대신 navigator...

Javascript 2013.04.11
반응형