본문 바로가기

프로그래밍/자바스크립트65

이미지 슬라이더 - bxSlider 사용법 홈페이지에 이미지를 바꿔가며 보여주는 이미지 슬라이더는 아주 많이 사용되는 아이템입니다. bxSlider는 자주사용되는 기능도 거의 지원하고, 요즘 핫한 반응형도 지원하고, MIT 라이센스로 배포되므로 부담없이 무료로 사용할 수 있습니다. bxSlider 의 타이틀이 반응형 jQuery 컨텐츠 슬라이더(The Responsive jQuery Content Slider) 인 것에서 알 수 있듯이 bxSlider는 jQuery 플러그인으로 작성되어 있습니다. 필요하다면 소스를 직접 수정하거나 기능을 확장하는 것도 그렇게 어렵지 않습니다. 또한 이미지를 바꿔가며 보여주는것 뿐만아니라 웹 페이지상에 보여지는 어떤 요소든지 바꿔가며 보여줄 수 있습니다. 그러니까 컨텐츠 슬라이더라고 하는것 같습니다. 다음 사이트에.. 2018. 4. 12.
자바스크립트 함수(Function)와 함수의 call(), apply(), bind() 함수 자바스크립트의 함수(Function)는 실제로는 전역객체의 함수 입니다. 전역객체는 웹브라우저일 경우 window이고, Node.js일 경우 global이 됩니다. 다음과 같이 일반적인 전역 함수를 정의하고 실행할 수 있습니다. function add(a, b) { return a + b; } console.log( add(3, 5) ); 결과) 8 이 add() 함수는 다음과 같이 호출할 수 있습니다. window.add(3, 5); 결과) 8 결과는 동일합니다. 실제로 두 함수는 동일한 함수 입니다. ※ 자바스크립트 함수는 그 자체로 객체입니다. 자바스크립트는 동적언어라 객체에 나중에 속성을 추가하는 것이 가능합니다. function bar() { console.log( "bar..." ); } ba.. 2018. 4. 10.
jQuery 플러그인 3 - 확장 기능 제공 플러그인에서 외부에서 접근 가능한 기능을 서브 함수로 제공하도록 합니다. 이렇게 공개된 기능으로 제공하게 되면 사용자가 쉽게 기능을 재정의해서 사용할 수 있습니다. jQuery 플러그인 테스트 1. 테스트용 DIV 입니다. 2. 테스트용 DIV 입니다. 3. 테스트용 DIV 입니다. 함수를 공개로 제공하는 것이 항상 좋은 것은 아닙니다. 필요에 따라 비공개 함수로 유지할 필요가 있는것도 있습니다. 예제에서와 같은 debug 함수는 비공개로 두는 것이 나을 것입니다. 플러그인 내에서 DOM에 추가할 요소를 만드는 경우 플러그인 사용자에게 이러한 요소에 액세스 할 수 있는 방법을 제공하는 것이 좋습니다. 플러그인 내에서 다음과 같이 추가적인 요소를 생성하게 되면 추가 요소의 클래스를 사용자가 수정하기 어렵게.. 2018. 4. 10.
자바스크립트 클로저(Javascript Closure) 사용법 자바스크립트에서 클로저라는 것을 잘 이해하기 위해서는 프로그래밍 언어에서 사용되는 몇가지 개념들을 먼저 알아두면 좋을 것 같습니다. 그것들은 일급 객체(first-class object)또는 일급 함수(first-class function), 변수 범위, 중첩 함수 와 같은 것들 입니다. 1. 일급 객체 또는 일급 함수 일급 객체(first-class object)에 대한 정의를 위키피디아에서 찾아 보았습니다. 원문 : https://en.wikipedia.org/wiki/First-class_citizen "프로그래밍 언어를 디자인 할때 주어진 프로그래밍언어에서 일급 시민(또는 일급 타입, 일급 객체, 일급 엔티티, 일급 값)은 다른 엔티티들이 일반적으로 이용 가능한 모든 연산을 지원하는 엔티티를 뜻합.. 2018. 4. 10.
자바스크립트 배열(javascript array) 사용법 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다. 자바스크립트에서 배열의 사용법을 알아보겠습니다. 1. 배열 생성하기 배열을 생성하는데는 예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있습니다. // 길이가 0인 예전 방식의 배열 생성 var myArray1 = new Array(); // 길이가 10인 예전 방식의 배열 생성 // 10개의 자리에는 아무것도 들어 있지 않습니다. var myArray2 = new Array(10); // 길이가 0인 literal notation 방식의 배열 생성 var myA.. 2018. 4. 10.
jQuery 플러그인 2 - 기본값 사용자 재정의 아래의 예제는 이전 글 "jQuery 플러그인 1 - 기본적인 플러그인 만들기" 에서 마지막에 보았던 플러그인에 기본값을 제공하는 예제 입니다. (function($) { $.fn.greenify = function( options ) { // 기본 옵션을 제공하는 가장 간단한 방법입니다. var settings = $.extend({ // 이것이 기본값들입니다. color: "#556b2f", backgroundColor: "white" }, options ); // 설정 변수를 기반으로 스타일을 지정합니다. return this.css({ color: settings.color, backgroundColor: settings.backgroundColor }); }; }(jQuery)); 이 플러그인을.. 2018. 4. 10.
jQuery 플러그인 1 - 기본적인 플러그인 만들기 jQuery 플러그인은 jQuery의 프로토타입 객체를 확장하는 새로운 메소드를 추가하는 것입니다. 우리가 새로 추가한 기능은 jQuery의 모든 기능을 상속 받아 바로 사용할 수 있습니다. jQuery에 기능을 추가한다는 개념이지만, 우리가 사용할 때는 jQuery의 기능을 모두 사용할 수 있는 우리의 기능을 만든다고 생각하면 되겠습니다. 물론 jQuery 플러그인으로 기능을 만들지 않고 직접 기능을 수행하는 클래스를 만들고, 필요한 곳에 jQuery를 사용하도록 하는 방법도 있습니다. 어떤 방법으로 만들지는 자신의 선택이겠습니다. 자신이 편리한 방법으로 만들면 될 것 같습니다. 필요에 의해 jQuery플러그인을 만들어야 겠다고 생각을 했다면, 먼저 미리 만들어져 있는 것들중에 같은 기능을 하는 프로그.. 2018. 4. 9.
자바스크립트 옵티마이저 - Closure Compiler 클라이언트 측 웹프로그래밍에서 자바스크립트의 비중이 점점 높아지고 있는 것 같습니다. 일반 홈페이지는 물론 업무용 웹 프로그램에서는 엄청난 양의 자바스크립트 코딩을 해야하는 경우가 많습니다. 이런 자바스크립트는 .js 파일로 만들어져 재사용 됩니다. 자바스크립트의 양이 많아지니까 페이지 로딩에 부담을 줄이기 위해서 자바스크립트를 압축하는 방법이 많이 나왔습니다. 실제 gzip으로 압축하여 전송하는 것은 클라이언트(웹 브라우저)가 지원한다면 서버에서 지원하는 기능을 사용하게 됩니다. 단순히 자바스크립트 압축이라고 하면 자바스크립트내의 주석을 삭제하고, 화이트 스페이스를 제거해서 파일 크기를 줄이는것을 말했습니다. 이번에 알아볼 Closure Compiler는 기계어로 컴파일 하는 것은 아니고, 파일 크기를.. 2018. 4. 9.
자동 포커스 이동 - jQuery Auto Tab 웹 프로그래밍에서 주민등록번호 입력등에서 처럼 앞의 여섯자리를 입력하면 포커스가 자동으로 뒷자리로 이동하는 기능을 많이 요구 합니다. 일반적인 홈페이지에는 이러한 요구사항이 거의 없지만 업무용화면에서 코드성 데이터를 많이 입력하는 경우 아직도 마우스를 사용하는 선택박스보다 키보드 입력을 선호하는 곳이 많습니다. 이런곳에서는 데이터의 길이가 일정한 경우가 많으므로 하나의 입력필드에 데이터 입력이 완료되면 다음 입력필드로 자동으로 포커스가 이동하기를 바랍니다. 이러한 기능을 쉽게 구현할 수 있도록 해주는 jquery.autotab.js 에 대해서 알아보겠습니다. 기능을 알아보기 전에 이 라이브러리를 사용하는데 있어 문제가 될 수 있는 세 가지 참고 사항에 대해 예기해 보겠습니다. 첫 번째는 웹 접근성과 관련.. 2018. 4. 9.
AX5UI - GRID 6 (페이징) 그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다. 그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다. 테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다. 1. 필요한 스크립트들을 로드합니다. 2. 그리드 변수를 선언합니다. 그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다. 3. 그리드 설정에 페이징 정보를 추가합니다. page: { navigationItemCount: 9, height: 30, display: true, firstIcon: '||', onChan.. 2018. 4. 9.
AX5UI - GRID 5 (인라인 에디트) 그리드의 내용을 바로 수정할 수 있는 inline edit 를 테스트 해 보았습니다. 인라인 에디터는 다음과 같은 7가지 타입이 있습니다. - text 타입 : 한줄 입력 필드입니다. - money 타입 : money포맷 숫자 입니다. - number 타입 : 숫자만 입력됩니다. - date 타입 : 캘린더로 날짜를 입력할 수 있습니다. 날짜 포맷은 yyyy-mm-dd 입니다. - select 타입 : 셀렉트 박스로 아이템을 선택할 수 있습니다. - checkbox 타입 : 체크박스로 선택 할 수 있습니다. 값은 문자열 "true" 또는 "false" 입니다. - textarea 타입 : 여러행의 글을 입력할 수 있습니다. 사용방법을 보도록 하겠습니다. 1. 필요한 스트일시트와 js 파일을 불러 들입니다.. 2018. 4. 9.
AX5UI - GRID 4 (총계와 소계) 이번에는 그리드에서 총계와 소계를 표현하는 방법을 알아 봅니다. 1. 그리드에 계산열 추가 - 그리드내의 다른 컬럼 값으로 계산된 값을 가지는 컬럼을 추가 합니다. - "unitPrice"는 그리드의 데이터에는 없는 값이지만, 금액을 주유량으로 나눈값으로 리터당 단가를 표시합니다. columns: [ { key: "unitPrice", label: "단가", formatter: function() { return ax5.util.number(this.item.price / this.item.amount, {"money": true}); }, align:"center" } ] 2. 그리드내의 소계 - 소계는 지정된 기준 컬럼에 대해 오름차순으로 정렬할 후 동일한 값끼리 그룹핑하여 소계를 보여줍니다.(처음 .. 2018. 4. 4.
AX5UI - GRID 3 (Row 와 Column 다루기) 이번에는 AX5UI 그리드에서 행과 열을 추가, 수정, 삭제 하는 방법을 알아 봅니다. "AX5UI - GRID 1 (기본 사용법)" 에서 사용된 예제에 기능을 추가해서 테스트 했습니다. 다음 내용들이 테스트 소스에 수정 및 추가된 내용들 입니다. 행을 추가하는 addRow 메소드 실행시 오류가 #31 번 패치로 수정되었는데, ax5ui-kernel에는 아직 반영되지 않은것 같습니다. ax5grid.min.js 를 직접 사용합니다. 이때는 ax5core.min.js도 함께 포함해야 합니다. 버튼을 추가합니다. 행 추가 행 삭제 행 업데이트 열 추가 열 삭제 열 수정 이벤트 핸들러를 추가합니다. 실행화면입니다. 1. 행 추가 행의 추가는 그리드의 addRow 메소드를 사용합니다. ax5grid.addRow.. 2018. 4. 4.
AX5UI - GRID 2 (설정 상세) 그리드 설정에 대한 상세한 내용을 알아 보겠습니다. 1. 헤더 그룹 그리드의 colums 설정값으로 헤더 그룹을 만들 수 있습니다. 아래 예는 기본 정보 그룹에 내에 주행거리, 금액을 가지는 예입니다. - 헤더와 데이터행 모두 기본 정보를 가지게 되므로 멀티 라인이 됩니다. columns: [ {key: "date", label: "날짜", formatter: "date", align: "center"}, {key: "type", label: "구분", align: "left"}, {key: "repair", label: "정비내역", align: "center"}, {key: "amount", label: "주유량", align: "center"}, { key: "basic", label: "기본정보".. 2018. 4. 4.
AX5UI - GRID 1 (기본 사용법) 업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다. 초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다. 다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다. 업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 .. 2018. 4. 3.

티스토리툴바