반응형 JavaScript5 자바스크립트 이벤트 디버깅 방법 자바스크립트를 통해 UI를 구성하면서 단순 스크립트명만으로 찾기도 어려우며, 분석하기에 난의도가 있습니다. 소스에 "debugger"을 작성하면 분석에 편리하지만, 해당 소스를 찾아서 작성하기란 쉬운 일이 아닙니다. 간단하게 디버깅할 수 있는 방법을 알려드립니다. 1. Element 속성에 이벤트가 명시된 경우 개발자 도구를 이용하여 확인하였을 때 객체에 이벤트(onclick 등) 이벤트가 명시된 경우라면, 해당 부분을 더블클릭으로 html 수정이 가능합니다. "debugger;" 문구를 해당 이벤트 앞에 추가 후, 클릭을 하면 디버그 모드가 실행됩니다. 2. JavaScript 함수 임의 실행 스크립트 함수를 실행하려면 Console 창에 실행하고자 하는 함수 앞에 "debugger;"을 추가하여 함수.. 2023. 3. 8. [JS] HTML 페이지 출력 [JS] HTML Print 창HTML 페이지 출력 해당 영역의 html을 새로운 창에 표시 후 window.print() 호출 크롬의 경우 Print 창이 뜬 상태에서 바로 닫힘 현상으로 인해 event로 창 닫힘 처리 function Print(elem) { var print_win = window.open('', 'PRINT', 'height=400,width=600'); // Print를 위한 css추가 print_win.document.write(''); print_win.document.write('' + document.title + ''); // 출력 대상 Element print_win.document.write(document.getElementById(elem).innerHTML); .. 2020. 11. 10. JavaScript로 z-index 구하기 레이어 팝업을 올리기 위해서 화면의 최대 z-index를 구하려고 했지만 style에서 정의된 것이 아닌 외부 CSS 파일에 정의된 z-index를 가지고 올 수 없었다. (jQuery를 사용하는 환경에 너무 익숙해졌다) document.defaultView.getComputedStyle(el, null)의 경우 활성화 스타일, 속성 값이 모두 연산된 결과를 돌려주므로, 스크립트 등으로 속성을 변경하였다고 해도 문제없이 가져온다. const fnMaxZIndex = () => { let els = [...document.querySelectorAll('body *')]; let maxZindex = 1; els.forEach( (el) => { let zIndex = document.defaultView.. 2019. 12. 21. [UI] handlebars.js [UI] handlebars.js[UI] handlebars.js 우연히 SNS를 살펴보고 있다가 VIEW를 어떤 것을 사용하는지? 에 대한 글 아래로 답글이 달린 것 중에 thymeleaf, handlebars.js, freemarker 등이 올라왔다.올해 확인하였을때는 backbon 뿐이었는데, 다양한 장점을 가진 UI Template Egene이 나타나고 있는듯하다. 그중 우선 handlebars를 우선 테스트 하였다. UI를 Javascript로 Front 단에서 처리하는 점이 마음에 들어서. 개인적으로 Front 코드를 Back 단에서 작성하는 점은 마음에 들지 않는다.아래 작성한 내용 http://jsfiddle.net/nakanara/sbyoymy1/2/ 1. handlebars 사용하기 h.. 2015. 7. 8. 이전 1 2 다음 반응형
