소금인형 - SW개발자?

file이 어떤 종류의 파일인지를 확인할때, MIME타임을 사용하면 가장 정확하다. javascript에서 file.type 속성을 이용하면 좋지만, 브라우저별로, 해당 값을 넘져주기 않을 때가 있어서, 확장자의 명으로 체크하는 방법을 메모해 둔다. 파일의 타입이 pdf인지 비교를 할때, Edge에서 file.type에서 이상한 결과가 나올때가 있다. if(file.type == 'application/pdf' || file.name.toLowerCase().endsWith('pdf')) { //code to execute } file.name.toLowerCase().endWith('pdf') endWidth() 끝부분이 다음과 같이 끝나면, true를 넘겨준다. 참고: https://stackover..

Javascript의 null 과 empty string등 비교 이런식으로 no 연산 var value2 = "" if ( !value2 ) { console.log("비어 있음"); //결과는 여기가 실행. } else { console.log("값이 있음"); } 자바스크립트 자료형에서 false로 반환되는 값은 "", null, undefined, 0, NaN 이 있고 "나머지는 모두 true" if ('' || null || undefined || 0 || NaN) { // ... } else { console.log("여기가 실행"); //결과는 여기가 실행됨. }특정값이 빈 배열( [] ), 빈 객체( {} )가 있을 수 있으며, 0은 실제 비어 있지 않는 특정값 0을 의미 할수도 있지만, 이..

Javascript에 이벤트 리스너 추가하기 addEventListener에서 함수에 parameter를 전달하고 싶다면, 익명을 함수를 사용해야 합니다. var in = document.querySelector('#upload');in.addEventListener( 'change', function(){chooseFile('AA')} ); function chooseFile(t){..생략..} 참고: https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener 함수에 파라미터가 없을때, in.addEventListener( 'change', chooseFile ); function chooseFile(){ .. 생략.. }

Javascript를 통해서, 현제 페이지 이름 가져오기, http://test.com/a.html&a=11 => a.html를 가져온다. https://developer.mozilla.org/en/DOM/window.location alert(location.pathname) If you don't want the leading slash, you can strip it out. location.pathname.substring(1) 참조: Get the page file name from the address bar 페이지 이름 가져오기 var path = window.location.pathname; var page = path.split("/").pop(); console.log( page ); ..

Javascript에서 replace를 사용하면, 처음 발견된 1개의 String(문자)만 처리됩니다. 모든 문자(String)에 변경을 위해서는, replaceAll함수를 선언해서 사용하면 처리된다. (사용예) var foo = fooString.replaceAll('찾는문자열', '변경문자열'); [ Regular Expression Based Implementation ] String.prototype.replaceAll = function(search, replacement) { var target = this; return target.replace(new RegExp(search, 'g'), replacement); }; [ Split and Join (Functional) Implementa..

DIV에 이미지를 좌,우 상하 정렬하고 싶을 때가 있다.해당 방법은 간단하지만, 쉽게 구현하는 방법이다.CSS와 Javascript을 이용한 방법입니다. 이미지 CSS + Javascript .mainBtn { min-width: 120px; } .mainImg { width: 122px; max-height: 80px; margin-left:auto; margin-right:auto; text-align: center; vertical-align: middle; } .mainImgFrame { width: 122px; height:80px; border: 1px solid #e9e9e9; background-color: #e9e9e9; } function addPadding(obj){ //(80-$('..

https://stackoverflow.com/questions/13434973/how-can-i-get-id-class-or-name-attr-an-element-with-jquery JavaScript $(function () { $('div').click(function () { var elem = $(this); alert('Class: ' + elem.attr('class')); alert('Id: ' + elem.attr('id')); alert('Name: ' + elem.attr('name')); });​​​​ }); HTML CSS ​div { width: 100px; height: 100px; border: 1px solid black; }​ JSfiddle: http://jsfiddl..

javascript에서 2 decimal (소수점 2자리)로 round하려면, 해당 함수가 없답니다. 방법은 다음과 같이 하면 처리가 가능합니다. [방법1] 곱셈 나눗셈 방식 Math.round(num * 100) / 100 해당 방식으로 하면, 신기하게, 소수점 2자리에서 짤리게 됩니다. 참고: http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places [방법2] .toFixed()를 이용한 소수점 반올림 var twoPlacedFloat = parseFloat(yourString).toFixed(2) 결과 값 >> parseFloat("1.555").toFixed(2); "1.55" parseFloat("1.556").t..

(인터넷 브라우저)윈도우 창을 줄이거나, 늘리면, Google Chart사이즈는 변동이 없습니다. Google Chart 내용은 HTML5/SVG객체 기반으로 되어 있기에, 자동으로 사이즈가 변경이 안된답니다. 이를 해결하기 위해서, $(window) 객체에 resize함수 처리를 추가해 줘서, 사이즈에 맞게 다시금 drawing 작업을 추가해 주면, 브라우저의 창의 사이즈가 변경되는 동시에, Google Chart도 사이즈가 변경되게 됩니다. [Chart 사이즈만 변경하기] 윈도우 사이즈를 변경 시, Javascript을 이용해서, Redrawing으로 처리하면, 이쁘게 변경이 된답니다. //create trigger to resizeEnd event $(window).resize(function() ..

jQuery UI을 이용한 Date Picker만들기 Date: jQuery Calendar Plugin 들DEMO Page / jQuery Event Calendar Plugin examples | jQuery Event Calendar Plugin downloadhttp://www.vissit.com/jquery-event-calendar-plugin-english-version

Grid DB Paging https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.toolbar.Paging 화면 페이지 예제 기본 소스Ext.onReady(function(){ var store1 = Ext.create( 'Ext.data.Store', { autoLoad: true, pageSize: 5, fields: ['idx','title','contents','author','create_date'], proxy: { type: 'ajax', api: { read: '/json/post.php' }, reader: { type: 'json', rootProperty: 'data' } } } ); Ext.create( 'Ext.grid.Panel..

Ext.grid.Panel 에 .reconfigure() 함수 처리 이벤트 발생시(버튼을 클릭시등) 그리드의 영역에 다른 데이터 형태의 값을 넣을 때. 사용되는 함수(=메서드)한페이지에 다양한 Grid 결과를 사용할때 유용하다. Ext.grid.Panel클래스의 reconfigure([store],[columns]) 메서드 사용 grid 또는 tree에 새로운 store와 columns으로 재구성한다. [ 사용방법 ] Ext JS Docs: reconfigure 그리드객체.reconfigure(store,columns); 실제적으로, 한개만 설정도 가능하다.그리드객체.reconfigure(store);// or그리드객체.reconfigure(columns);// or그리드객체.reconfigure(nul..

Grid + AJAX(JSON) 만들기Grid에 JSON포멧의 Ajax통신을 통한 데이터를 자져오는 처리에 대해서 만들어 본다. data: config값을 proxy: config로 변경합니다. autoLoad: true 또한 추가한다. (즉시 출력시 설정 / 특정 이벤트를 받은 다음에 데이터 출력을 위해서는 autoLoad: false로 지정) proxy 속성: 통신 방식에 따라 여러가지 타입 지원- type: 'memory' 서버 통신이 이루어지지 않을 경우 사용되는 타입- type: 'ajax' 서버통신에서 응답을 받아 데이터를 로드하는 방식- type: 'jsonp' 다른 도메인간의 Ajax통신을 하여 응답값을 주고 받을 때 사용되는 방식 / 전송시, callback parameter가 별도로 필..

Ext.grid.Panel그리드(Grid)는 표 형식의 데이터를 나타내는 컴포넌트로, 참 많이 사용됩니다.여기서 컬럼에 어떤 field를 뿌려줄지 dataIndex configs로 정의를 해줘야 한다. 설정이 없으면, combox 에 dispalyField/valueField 미정의시 처럼 화면에 나오지 않게 된다.Ext.onReady(function(){ Ext.create( 'Ext.grid.Panel', { title: 'Grid 예제', columns : [ {flex: 1, text:'첫번째', dataIndex:'first'},{flex: 1, text:'두번째', dataIndex:'second'} ], store : Ext.create( 'Ext.data.Store', { fields: [..

dataview 레이아웃 구성을 사용하기 위해 Bootstrap(부트스트랩)을 함께 사용해 봅니다.기존의 ExtJS CSS 부분의 다음의 Bootstrap CDN링크를 넣어준다. 부트스트랩 CDN 패널 안에 xtype:dataview 코드 작성tpl config 은 html config와 다른 속성입니다. (java의 JSTL와 흡사, 내부에 반복/조건문 사용 가능)Ext.onReady(function(){ Ext.create( 'Ext.Panel', { title: 'Dataview List', items: [{ xtype: 'dataview', tpl: new Ext.XTemplate( '', ' 목록 1', ' 리스트 2', ' 리스트 3', '' ) }], renderTo: Ext.getBody(..

콤보 박스(xtype:combo) 데이터를 화면에 출력을 하려면, 데이터스토어(Ext.data.Store)에 대해서 알아야 합니다. 데이터 스토어 정의 : 스토어 클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화 합니다. 스토어는 프로시를 경유하여 데이터를 로드하고, 또 그 안에 포함되어 있는 모델/인스턴스를 정렬 필터링 및 조회가기 위한 기능을 제공합니다.스토어의 작성은 간단합니다. 데이터 스토어는 여러 컴포넌트에서 사용이 되고 있습니다. Store클래스 사용하는 컴포넌트콤보박스 : Ext.form.field.ComboBox데이터뷰 : Ext.view.View그리드 : Ext.grid.Panel트리 : Ext.tree.Panel (Ext.data.TreeStore: Store개념은 동일하나 사용되는 ..

폼 필드 (form 필드) 일반적으로 태그 형식을 사용한다. xtype: 'textfield' xtype: 'filefield' xtype: 'textfield', inputType:'password' xtype: 'checkbox xtype: 'textarea'value : 'yes'는 입력값을 표시fileLavel:'text' 은 입력창 앞에 오는 Label 형식으로 쓰인다.* 슬라이더 / 컬러피커 등의 다양한 유요한 폼필드는 Plug 형태의 클래스를 적용해서 사용이 가능하다. 폼 패널을 이용한 Server 데이터 전송은 따로 작업이 필요하다.SelectBox와 동일한 콤보 박스는 Store라는 데이터저장소 개념의 이해가 필요하다.Ext.onReady(function(){Ext.create('Ext...

탭 패널 개념 Ext.tab.Panel하나의 영역에 여러개의 패널 탭으로 나눠서 클릭시 해당 존재하는 화면 출력 tab > 하위 패널 개념 Tab 패널 만들기Ext.create( 'Ext.tab.Panel', { width: 480, height: 200, items : [ { title: 'Tab 1', html: 'Tab 1 Body' }, { title: 'Tab 2', html: 'Tab 2 Body' }, { title: 'Tab 3', html: 'Tab 3 Body' } ], renderTo: Ext.getBody()}); 탭의 화면 Tab 패널안에 items 넣기Ext.create('Ext.tab.Panel', { width: 480, height: 200, items : [ { title..

윈도우 (Window)창 제어하기 모달창 / 레이어 팝업 autoSwho:true를 하면, 생성시 자동으로 보여지게 된다. (Default: false)Ext.create('Ext.window.Window',{width: 300, height:200, autoShow:true}); autoShow:falsevar winObj = Ext.create('Ext.window.Window',{width: 300, height:200, autoShow:false}); ...{ xtype : 'button', text : 'default button', handler : function() { winObj.show(); }} maximizable: true - 최대창 버튼 (Default: false)modal: ..

ExtJS의 메시지창 일반 자바스크립트에서는 alert, confirm, prompt 메시지 창을 사용합니다. Alert: Message Box일반적인 알림메시지창Ext.Msg.alert( '제목부분', '내용부분입니다.', function(){ /* OK버튼 클릭시 핸들링 */ } ); Confirm: Message Box확인 메시지 창Ext.Msg.confirm( '제목부분', '내용부분입니다.', function(btn){ /* OK버튼 클릭시 핸들링 */ if(btn == 'yes') alert('YES')else alert('NO');} ); Toast: Message Boxmessage: 'closable' - 창닫기 버튼 없음align: 속석으로 나타나는 위치을 설정 ( t / tr / br..

기본 페널(Panel)width, height 설정한 예제Ext.onReady(function(){ Ext.create('Ext.Panel', { width: 300, height: 300, renderTo: Ext.getBody() }); }) 기본패널(Panel) + Title + htmltitle 값으로는 TEXT와 HTML이 가능하다.html값에는 패널 안에 html이 입력됩니다.Ext.onReady(function(){Ext.create('Ext.Panel', { width: 300, height: 300, title : 'Title Configs', html : 'HTML BODY PAGE Html TAG', renderTo: Ext.getBody() }); }) 기본패널(Panel) + it..

이벤트 핸드로는 2가지 : handler / listenerslisteners는 json Array형태로 선언해 주면 된다. 예제 버튼 클릭하면, Alert창 띄우기{ xtype: 'button', text: 'EventTEST', // handler : function () { // Ext.Msg.alert('Title','Click!!'); // } listeners : [{ click : function() { Ext.Msg.alert('Title', 'Click2'); } }] } Event 화면

ExtJS 기본 구조기본 문법은 JSON 규약을 따름단일 속성: "{}"다중 속성: "[{},{}] ExtJS onReady : HTML 페이지가 출력 된 후, 수행Ext.onReady(function (){// 코드 위치}); Ext.create('클래스명',{},콜백) Ext.define된 클래스를 사용할때 사용가능Ext.create('Ext.panel.Panel',{}); Configs 이해하기컴포넌트마다 지원하는 Config(속성)이 다양한 속성을 가지고 있으며, 해당 속성값을 객체 생성시 설정이 가능하다.해당 속성을 누르면, 해당 속성의값의 타입(ex: Number, String)을 확인할 수 있습니다. 원하는 위치에 출력하기 (renderTo)Ext.create를 이용해서, 생성시 화면에 출력..

ExtJS 시작하기ExtJS 프레임워크 다운르도 > Sencha 홈페이지 1. 사이트 다운로드http://www.sencha.com/legal/GPL/ >> ExtJS선택 / 이메일 2. 회신 메일에서 다운로드메일로 ext-5.1.1-gpl.zip을 받을 수 있습니다. 3. 압축해제 4. 해당 부분 복사./build/packages//build/ext-all.js 5. 예제 파일 만들기 참고: http://mongodev.tistory.com/3 Theme 관련packages/ext-theme-XXX 형태의 디렉토리에 있다.aria: Black classic: Bluecrisp: ExtJS 5부터 지원crisp-touchgray: Grayneptune: ExtJS 4부터 지원 neptune-touch: ..

Sencha User Group을 운영하고 계시는 김종광님이 올려준 동영상의 소개해준 Link들입니다.동영상 URL : http://olc.oss.kr/lec/detail.jsp?lec_idx=417 (목차: 19번 "센차 입문자를 위한 핵심 가이드" ) Touch 2.2.1 Sencha Docs동영상: http://docs.sencha.com/touch/2.2.1/#!/video/class-system Class System Intro to Layouts Tabs and Toolbars MVC in Depth Part 1 MVC in Depth Part 2 >Doc 문서 중에 http://docs.sencha.com/touch/2.3.1/#!/guideOverview > Introduction to S..

ExcellentExport.jsjavascript를 이용한 excel과 csv 다운로드 만들기 모듈 정말 간결하게 Excel을 다운로드 처리하게 만들었네요. 좋네요. (추가 내용: 2017/01/31) 1.4버전에서는 Microsoft Edge Browser에서 다운로드가 안됩니다. 2.0버전으로 수정해 주시면 됩니다. (추가내용: 2017/11/22)3.0+도 나옴. 해당 버전은 xlsx도 지원, 멀티탭도 지원된다고 하네요. Javascript export to Excel 100 200 300 400 500 600 Excel 다운로드 만들기 Export table to Excel 첨부파일 (과거버전) 첨부파일2 (Edge 엣지 브라우저 지원) 개인적으로 이름을 받는 형식으로 변경하면 좋을 것 같아서 ..

프로그램에서 반복적으로 실행하는 Javascript 함수( setInterval )입니다. [ 반복적으로 실행 - ] SyntaxsetInterval(function,milliseconds,param1,param2,...) 예제Try it 예제2Try it [ 예제3 - 시계 clearInterval 함수 ] Stop time [참고]setInterval : http://www.w3schools.com/jsref/met_win_setinterval.aspclearInterval : http://www.w3schools.com/jsref/met_win_clearinterval.asp

[ javascript ] 새창 띄우기 ( window.open 함수 ) Javascript의 함수를 이용해서 새로운 팝업창을 만듭니다. URL영역은 과거에는 숨길 수 있었지만, 요즘의 사용하는 Browser에서는 숨길 수 없습니다. (참고) 파라미터 중에 WindowName이 같으면, 같은 창으로 띄워줍니다. 1. window.open(URL, WindowName [, WindowFeatures]); 1) URL - 웹 문서 URL 2) WindowName - open 창 이름 (target 이름) 3) WindowFeatures - fullscreen = 전체 창. (yes/no)(default : no) - location = 주소창이 활성화. (yes/no)(default : yes) - menu..

이제 javascript에 대한 개발이 서버 개발보다 더 필요한 이시점에.계속적인 javascript 프레임웍들이 나오고 있다. 이번에는 Backbon.js와 Require.js에 대해서 자료를 수집해 보자. Backbon.js자신이 써본 간단 경험담 (한글) http://silexkr.github.io/blog/2012/02/17/backbone-dot-js/ Youtube 강좌 - 자바스크립트의 또 다른 발전 2. Backbone js By 이진권 대리http://www.youtube.com/watch?v=IGuSt3OUcYM Node.js Q&A Backbone.js 강좌http://nodeqa.com/nodejs_ref/46 동영상으로 제작된 backbone.js 강의http://www.joezi..

[펌출처] http://asrada2001.tistory.com/173 Javascript의 객체, 속성 이름 (객체 전체 확인하기) javascript의 객체의 속성은 객체.속성이름 으로 접근이 가능하다. 그리고 또 하나 다른 표현이 있는데 바로 객체['속성이름'] 이 그것이다. var obj = new Object(); obj.id = 'first'; obj.name = 'wave'; obj.age = '20'; obj.sex = 'male'; alert(obj.id); alert(obj['id']); 이제 객체 안을 통째로 들여다 보는 방법을 알아보자 위에서 언급한 객체['속성이름']의 표현식을 이용하면 된다. var msg = ''; for(var temp in obj){ msg += temp +..