jsonp 관련
* jQuery ajax 로 jsonp 요청시 크롬 개발자도구 상태 Content-type 없음 Accept는 */* 이 됨 network 탭에서 xhr이 아닌 script로 조회됨. method type에 관계 없이 get 요청이 됨.
Category Archives: JavaScript
jQuery ajax 로 파라미터를 전달할 때 사용하는 $.param() 함수의 이상동작에 대하여
javascript object를 query string으로 변환해 주는 jQuery의 $.param() 함수 사용중, 값이 배열인 데이터를 query string으로 변환할 때 파라미터명 뒤에 “[]” 문자열이 붙는 현상이 있었다. 이 때, $.param() 함수의 두 번째 인수로 true 값을 주니 이 현상을 해결할 수 있었다. (ex: var qryStr = $.param(jsonObj, true); )
javascript 정규식 치환 (replace()) 함수의 두 번째 인수로 function을 넣어서 escapeHtml() 함수 작성하는 예제
– 출처: http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery – javascript replace() 함수의 두 번째 인수로 함수를 넣을 수 있다는 것을 처음 알았다. ^ㅁ^; var entityMap = { “&”: “&”, “<“: “<”, “>”: “>”, ‘”‘: ‘"’, “‘”: ”’, “/”: ‘/’ }; function escapeHtml(string) { return String(string).replace(/[&<>”‘\/]/g, function (s) { return entityMap[s]; }); }
jQuery Deffered 에 관한 개념 정리
* Promise 객체 – Promise 객체는 $o.promise()로 생성하거나 $.when()의 인수로 넣어질 경우 생성된다. – Promise 객체가 되면 객체에서 일어나는 일들을 모니터링하여, 이벤트가 종료되면 done()을 호출한다. (ex: fadeOut())
jQuery에서 엘리먼트에 바인딩된 이벤트 조회하기
//이벤트 조회(추출) var events = $._data($(‘#div1’)[0], ‘events’); //바인딩된 이벤트 해제하기 $(‘#div1’).unbind(‘click’); //click 이벤트 해제 * 참고 jQuery를 사용하여 이벤트를 조회하는 것이나, 아니면 이벤트를 해제하는 것이나, 모두 jQuery를 통하여 바인딩된 이벤트만 조회/해제할 수가 있다. html 코드에 직접 등록한 이벤트의 경우에는 조회도 해제도 불가한 것으로 보인다. 그렇기 때문에 이벤트를 바인딩할 때는 나중을… Read More »
jqGrid의 페이징 기능 사용시, jqGrid의 기본 페이징 파라미터명과 서버의 페이징 파라미터 명이 다를 경우, 서버쪽 페이징 파라미터명을 jqGrid가 맞춰줄 수 있도록 하는 설정
var P_PAGE = ‘pageNo’; //페이지번호 파라미터명 var P_TOTALCNT = ‘totRows’; //전체 조회 건수 파라미터명 var P_ROWSPERPAGE = ‘fetchRows’; //rowsPerPage 파라미터명 var P_TOTALPAGE = ‘totalPage’; //jqGrid 기본 설정 $.extend($.jgrid.defaults, { prmNames: { page: P_PAGE, rows: P_ROWSPERPAGE, totalrows: P_TOTALCNT }, jsonReader: { root: ‘data’, //응답객체 이름 page: P_PAGE, total: P_TOTALPAGE, records: P_TOTALCNT,… Read More »
IE8에서 input text 에 포커스(focus)를 줄 때 커서가 한 번 깜빡 하고 사라지는 문제에 대한 해결
아래와 같이 처리해 주자. setTimeout(function(){ $(‘#id’).focus(); }, 0);
jQuery UI dialog 를 닫을 때, cannot call methods on dialog prior to initialization; attempted to call method 'close 에러가 발생하는 경우
이 케이스에 대해서 인터넷에 여러가지 말들이 많이 있지만, 내 경우에는, 이미 기존 페이지에 include 되어 있던 javascript 라이브러리 들이, Dialog를 띄우면서 또 한 번 같은 document 내에 로딩되면서, Dialog를 생성했던 javascript context가 사라져 버린 경우였었다. 결국 dialog 내에 로딩되는 페이지에서 javascript 라이브러리가 include 되는 부분을 모두 제거했더니, Dialog도 잘 닫히고, 아무 문제가 없었다. … Read More »
[책펌] 센차터치(Sencha Touch)에서 간단한 박스 레이아웃 구성하는 예제
– 출처: 센차터치2+폰갭 프로그래밍 – * 코드 Ext.application({ requires: [‘Ext.Panel’], launch: function(){ var panel = new Ext.create(‘Ext.Panel’, { fullscreen: true, layout: { type: ‘vbox’, //세로로 배열하는 레이아웃 align: ‘stretch’ //꽉 차게 늘여서 맞춘다 }, items: [ { flex: 1, //flex 값은, 같은 위상의 컴포넌트들끼리 화면을 점유하는 상대적인 비율을 의미하는 값이다. style: ‘background-color:red; font-size:… Read More »
센차터치(Sencha Touch)에서 상단, 하단에 고정된 영역(bar)를 만들고 싶을 때
컨테이너의 items 배열에 docked 속성(top, bottom…)이 들어 있는 패널을 정의하면 된다.
[책펌] 센차터치(Sencha Touch)에서 뷰(view)파일 정의하고 로딩하는 예제
– 출처: 센차터치2+폰갭 프로그래밍 – * 어플리케이션 파일 (app.js) Ext.application({ name: ‘HelloSenchaTouch’, requires: [], //아래와 같이 view 항목에 클래스명만 넣을 경우, app.view 패키지에 HelloView.js 파일이 들어있다는 전제가 요구됨. //별도의 패키지에 파일이 존재할 경우 FQN(Full Qualified Name)을 넣어야 함. views: [‘HelloView’], launch: function(){ Ext.Viewport.add(Ext.create(‘HelloSenchaTouch.view.HelloView’)); } }); * 뷰(view) 파일 (app/view/HelloView.js) Ext.define(‘HelloSenchaTouch.view.HelloView’, { extend: ‘Ext.Panel’,… Read More »
[책펌] 센차터치(Sencha Touch)에서 컨테이너에 컴포넌트를 삽입하는 두 가지 방법
– 출처: 센차터치2+폰갭 프로그래밍 – * Container의 items속성을 사용하여 Component를 삽입 Ext.application({ name: ‘Sencha’, requires: [‘Ext.Panel’], launch: function(){ Ext.create(‘Ext.Panel’, { fullscreen: true, html: [‘I am Container’].join(” “), items: [{ //컴포넌트 삽입 xtype: ‘panel’, style: ‘background-color:white’, html: [‘I am Component<br> I am added’].join(‘ ‘) }] }); } }); * Component를 별도로 생성 후 Container에… Read More »
[책펌] 센차터치(Sencha Touch)에서 라이브러리 동적 로딩(requires)을 위한, 패키지 경로 및 네임스페이스 설정 예시
– 출처: 센차터치2+폰갭 프로그래밍 – ※ 예제 파일 경로 /index.html => base 문서/js/app.js => 센차 어플리케이션 js 파일 (index.html에서 로딩)/js/package1/sub1.js => 로딩할 모듈 app.js //네임스페이스 지정 Ext.ns(‘main’); Ext.application({ name: ‘Path’, //실험 결과, requires의 기준경로는 application을 로딩한 html파일이 있는 곳이다. requires: [ ‘Ext.Panel’, ‘Ext.Toolbar’, ‘js.package1.sub1’ //사용자정의 모듈 로딩 ], launch: function(){ main.panel = new… Read More »
[책펌] 센차터치(Sencha Touch) 클래스 상속 및 사용자정의 이벤트 활용 예제
– 출처: 센차터치2+폰갭 프로그래밍 – Ext.application({ name: ‘EventExtend’, requires: [‘Ext.Panel’, ‘Ext.Button’], launch: function(){ //Ext.Button을 상속한 userButton 클래스 정의 Ext.define(‘userButton’, { extend: ‘Ext.Button’, config: { //config에 지정된 속성은 getter, setter가 자동생성된다. width: 200, height: 200, text: ‘가운데로’, listeners: { tap: function(){ this.fireEvent(“pupu”); //사용자정의 이벤트 pupu를 트리거 함. } } } }); var panel = Ext.create(‘Ext.Panel’,… Read More »
[링크] ES5(ECMAScript 5)를 지원하지 않는 실행환경(브라우저)에서 ES5의 API를 실행할 수 있도록 해 주는 라이브러리 (그러나 완벽하지는 않음)
https://github.com/es-shims/es5-shim/
[링크] 브라우저별 ES5(ECMAScript 5) API 호환 여부
http://kangax.github.io/es5-compat-table/
[링크] javascript bind() 함수에 대하여
코어 자바스크립트 의 bind 함수 [MSDN] bind 메서드(Function)(JavaScript) Binding Scope in JavaScript (Robert Sosinski)
[링크] 호이스팅(hoisting) 이란?
http://buzzon.tistory.com/m/32
[링크] javascript 디자인 패턴(design pattern)
http://blog.javarouka.me/p/blog-page_28.html
[링크] Front-end 개발자 문제은행
https://github.com/Songhun/Front-end-Developer-Interview-Questions/tree/master/Korean