목록Javascript (15)
낭만 프로그래머
Kendo UI 의 Grid를 Server Side 페이징 처리를 해보자 중요한 부분을 요약하면 Kendo UI Grid에서 설정을 한 후 Client에서 skip, page, take, pageSize를 보내오면 Server에서는 total, data를 보내면 된다. (page는 0부터 시작이 아니라 1부터 시작이다) MSSQL에서는 2012버전부터 페이징 처리를 위한 문법을 제공한다 Script 파일 var listDataSource = new kendo.data.DataSource({ transport: { ... read: function(options) { $.ajax({ url: "/api/getActionList.do", contentType: 'application/json', dataTy..

자바스크립트를 사용하여 브라우저 넓이와 높이를 가져오자 보통은 이 값을 가지고 브라우저가 리사이즈 될때 내부에 있는 UI Component 크기를 변경하는 작업을 주로 한다 window.screenTop : 브라우저 위에서 위치 window.screenLeft : 브라우저 왼쪽에서 위치 window.innerWidth : 브라우저 화면의 너비 window.innerHeight : 브라우저 화면의 높이 window.outerWidth : 브라우저 전체의 너비 window.outerHeight : 브라우저 전체의 높이
CSS를 사용하는 경우에 우선순위에 의하여 내가 적용한 폰트가 산발적으로 적용되는 경우가 있다. 이를 해결하기 위하여 강제로 전체 적용하는 방법을 알아보자 * { font-family: "Nanum Gothic" !important; }
웹페이지에 Google Map API를 간단히 사용할 수 있는 gmap3라는 javascript 라이브러리를 소개한다. 1. gmap3를 이용하기 위해서는 Google Map API Key가 필요하다. 없을 시에는 발급을 받도록 하자 구글 지도 API 키 발급 받는 방법 (Maps JavaScript API) - 코스모스팜 블로그 홈페이지에 구글 지도를 삽입하려면 API 키를 발급받아야 합니다. Maps JavaScript API 사용 설정과 API 키 발급 과정에 대해서 설명하겠습니다. 과정은 조금 복잡할 수도 있기지만 쉽게 따라 하실 수 있도록 자세히 설명해보겠습니다. blog.cosmosfarm.com 2. 라이브러리를 다운로드 https://gmap3.net/ GMAP3 gmap3 is the u..
입력후 엔터(Enter) 키를 눌렀을 때 이벤트를 발생하고 싶을 경우에 사용하면 된다. 예로 로그인 할때 패스워드를 입력하고 엔터를 눌렀을 때 로그인을 해야 될 때 1. 이벤트 발생시 수행할 함수를 작성 function enterkey() { if (window.event.keyCode == 13) { // 엔터키가 눌렸을 때 } } 2. 이벤트 대상에 작성 참조 : https://cofs.tistory.com/12
브라우저에서 뒤로 가기를 누를 경우 캐시가 사용되어 질 때가 있는데 그럴 때 서버에서 페이지를 다시 호출하지 않는 문제가 있다. 예를 들어 로그인을 한 상태에서 뒤로가기를 누를 시에 캐시를 사용하여 페이지를 불러 들여진다. 서버에서 페이지를 호출해야 로그인 여부에 따라서 UI가 변경 되는데 난감했던 사례가 바로 이것이다. 그래서 구글링해서 찾았다. 100%로는 아니지만 만족 스럽니다. ㅎㅎ 참조 : http://chomman.github.io/blog/programming/web/%EB%A9%94%ED%83%80%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%BA%90%EC%8B%9C%EB%A5%BC-%EA%B4%80%EB%A6%AC%ED%95%..
JQuery의 ajax 사용시에 Post방식으로 Form 안의 input 값들을 넘겨야 할 경우에 간단하게 사용 될 수 있다. jQuery("#Form ID").serialize() function login() { jQuery.ajax({ type: "POST", url: 'restapi/login.do', data: jQuery("#loginForm").serialize(), success: function(msg) { if(msg.status == 'ok') { window.location.replace('index.jsp'); } else { alert(msg.message); } }, fail: function() { ; } }); }
1. Atom 설치https://atom.io/ 2. angular 프로젝트 생성 ng new study 3. Atom 실행 cd study atom . 4. atom-typescript 패키지 설치- atom-typescript 로 검색 후 설치 5. linter 패키지 설치- linter 로 검색 후 설치참고 : https://github.com/steelbrain/linter 6. editorconfig 패키지 설치- editorconfig 로 검색 후 설치참고 : https://github.com/sindresorhus/atom-editorconfig 7. file-icons 패키지 설치- file-icons 로 검색 후 설치참고 : https://github.com/file-icons/atom