Search

'Programming/JavaScript, Sencha'에 해당되는 글 18건

  1. 2017.04.09 JQuery UI - Datepicker
  2. 2017.01.29 EJS Embedded JavaScript
  3. 2016.05.28 JQuery - 페이지 정보 자동 생성 (3)
  4. 2016.05.15 node.js
  5. 2016.04.24 JQuery 기초
  6. 2016.02.14 javascript 기본
  7. 2015.01.30 jQuery select box 관련 처리
  8. 2014.10.29 CSS 선택자(Selector)
  9. 2014.02.05 JQuery Tip
  10. 2013.11.20 Sencha Touch 1 - Form
  11. 2012.10.15 PNG Image Base64 Encoder / Decoder
  12. 2012.07.03 Sencha dateformat (1)

JQuery UI - Datepicker

Programming/JavaScript, Sencha 2017.04.09 18:57 Posted by 파란크리스마스

JQuery UI - Datepicker

출처 : Datepicker | jQuery UI
JQuery UI datepicker 한국어 적용 - 제타위키

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css"/>">
<title>Insert title here</title>
<script>
// Datepicker 오늘 날짜 설정
function setDatepickerToday(datepicker) {
	var d = new Date();
	datepicker.datepicker("setDate", new Date(d.getFullYear(), d.getMonth(), d.getDate()) );
}

// 한글화 설정
$.datepicker.setDefaults({
	dateFormat: 'yy-mm-dd',
	prevText: '이전 달',
	nextText: '다음 달',
	monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	dayNames: ['일', '월', '화', '수', '목', '금', '토'],
	dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
	dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
	showMonthAfterYear: true,
	yearSuffix: '년'
});

$( function() {
	// datepicker 생성
	$( "#datepicker" ).datepicker({
		// 날짜를 선택했을 경우 이벤트 발생
		onSelect: function (dateText, inst) {
			alert('날짜선택 = ' + dateText);
		}
	});
	
	// 오늘 날짜 설정
	setDatepickerToday($( "#datepicker" ));
});
</script>
</head>
<body>
 
<p>날짜 : <input type="text" id="datepicker"></p>

</body>
</html>
저작자 표시
신고

EJS Embedded JavaScript

Programming/JavaScript, Sencha 2017.01.29 19:24 Posted by 파란크리스마스

EJS Embedded JavaScript

출처 : EJS - JavaScript Templates
Getting Started with EJS
JSON Text를 JSON Object로 변환하기 :: Outsider's Dev Story

ejs.zip

JSON Data

{"title":"Cleaning Supplies","supplies":["mop","broom","duster"]}

List Template

<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
	<li><%= supplies[i] %></li>
<% } %>
</ul>

DEMO

<html>

<head>
<!-- EJS -->
<!-- <script type="text/javascript" src="resources/js/ejs_production.js"></script> -->
<script type="text/javascript" src="resources/js/ejs.js"></script>
<script type="text/javascript" src="resources/js/view.js"></script>
</head>
<body>

<p id="ejs_list">Some text here</p>

<script type="text/javascript">
new EJS({url: 'template/list.ejs'}).update('ejs_list', 'template/list.json');
</script>

</body>
</html>

실행결과

저작자 표시
신고

JQuery - 페이지 정보 자동 생성

Programming/JavaScript, Sencha 2016.05.28 20:24 Posted by 파란크리스마스

pagination.js 파일

// 페이지 생성 함수
// 인자1 : JQuery 객체 - 페이지 정보를 출력될 객체
// 인자2 : 전체 페이지수
// 인자3 : 현재 페이지수
// 인자4 : 페이지 호출시 호출할 함수
function genPageNum(id_pagenum, totalPage, curPage, event) {
	
	// 블럭에 표시 페이지수
	var block_size = 10;
	
	// 초기화
	id_pagenum.empty();
	
	// 현재 블럭
	var block = Math.floor((curPage-1) / block_size);
	
	// 현재 블럭의 시작 페이지
	var block_start_pagenum = 10 * block;
	
	// 현재 블럭에서 마지막 페이지 
	var loop_count = block_size;

	// 현재 블럭에서 마지막 페이지 구하기
	if (block == Math.floor(totalPage / block_size) && (totalPage % block_size) > 0)  {
		loop_count = totalPage % block_size;
	}
	
	// 이전블럭 표시 (curPage > 10 이상이면 표시)
	if (curPage > block_size) {
		id_pagenum.append(
				"[<b><a href='javascript:listDevice("+
				(block * block_size) +
				", last_device_type);'>Prev</a></b>]");
	}
	
	// 페이지 수 만큼 반복
	for (pagenum = 1; pagenum <= loop_count; pagenum++) {
		// 현재 페이지 처리
		if ((pagenum + (block * block_size)) == curPage) {
			id_pagenum.append(
					"<b><font color=\"red\">"+(pagenum + (block * block_size))+"</font></b>");
		}
		// 현재 페이지 외 처리
		else {
			id_pagenum.append(
					"[<b><a href='javascript:pagination__page_move("+
					(pagenum + (block * block_size)) +
					"," + event+ ");'>"+
					(pagenum + (block * block_size)) +
					"</a></b>]");
		}
	}
	
	// 다음블럭 처리
	if (block < Math.floor(totalPage / block_size)) {
		id_pagenum.append(
				"[<b><a href='javascript:pagination__page_move("+
				(1 + ((block+1) * block_size)) +
				"," + event+ ");'>Next</a></b>]");
	}
}

// 페이지 선택시 호출 되는 함수
function pagination__page_move(pagenum, event) {
	if (event!=undefined) {
		event(pagenum);
	}
}

인자4에 전달될 함수 예제

function stock_page_move(pagenum) {
	listDevice(pagenum, last_device_type);
}

페이지 자동 생성 함수 호출

genPageNum($('#pagenum', currentDoc), result.totalPage, result.CurPage, stock_page_move);
저작자 표시
신고

node.js

Programming/JavaScript, Sencha 2016.05.15 16:49 Posted by 파란크리스마스

출처 : [Node.JS] 강좌 05편: NPM | VELOPERT.LOG
[Node.JS] 강좌 09편: Express 프레임워크 사용해보기 | VELOPERT.LOG
[Node.JS] 강좌 목록 | VELOPERT.LOG

C:\Users\nodejs>npm --version
2.15.1

express 설치

C:\Users\nodejs>npm install express
express@4.13.4 node_modules\express
├── escape-html@1.0.3
├── array-flatten@1.1.1
├── utils-merge@1.0.0
├── vary@1.0.1
├── cookie-signature@1.0.6
├── etag@1.7.0
├── parseurl@1.3.1
├── cookie@0.1.5
├── content-type@1.0.2
├── range-parser@1.0.3
├── fresh@0.3.0
├── merge-descriptors@1.0.1
├── content-disposition@0.5.1
├── methods@1.1.2
├── path-to-regexp@0.1.7
├── serve-static@1.10.2
├── depd@1.1.0
├── qs@4.0.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── finalhandler@0.4.1 (unpipe@1.0.0)
├── debug@2.2.0 (ms@0.7.1)
├── proxy-addr@1.0.10 (forwarded@0.1.0, ipaddr.js@1.0.5)
├── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.11)
├── type-is@1.6.12 (media-typer@0.3.0, mime-types@2.1.11)
└── send@0.13.1 (destroy@1.0.4, ms@0.7.1, statuses@1.2.1, mime@1.3.4, http-errors@1.3.1)

-

-

-

-

-

-



저작자 표시
신고

JQuery 기초

Programming/JavaScript, Sencha 2016.04.24 09:51 Posted by 파란크리스마스

Dialog close전에 Dialog 활성화 여부 확인 후 닫기

	if ($('#popupHoList').is(':visible'))
		$("#popupHoList").dialog('close');

jQuery 사용

출처 : 제이쿼리(jQuery) 기본 :: 갱짱.study

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

.ready() 메소드

출처 : jQuery ready와 load의 차이 - 오중호랑이의 비밀로그

.ready() 메소드 - 문서의 DOM이 모두 로드 되었을때 실행

$(document).ready(function(){
    alert('Hello World !!!');
});

셀렉터(Selector)

출처 : 박종명의 아름다운 개발 since 2010.06 - 자주 쓰는 JQUERY 기능 - 셀렉터(SELECTOR) 편
Category: Selectors

All Selector (“*”)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
</head>

<body>

<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>

<script>
$(function(){
	$('*').css('font-weight', 'bold'); // 모두 선택
});
</script>

</body>
</html>

ID Selector (“#id”)

<script>
$(function(){
	$('#AngularJS').css('font-weight', 'bold'); // AngularJS
});
</script>

Class Selector (“.class”)

<script>
$(function(){
	$('.BackboneJS').css('font-weight', 'bold'); // BackboneJS
});
</script>

Attribute Equals Selector [name=”value”]

<script>
$(function(){
	$('div[name="Emberjs"]').css('font-weight', 'bold'); // Emberjs
});
</script>

Attribute Not Equal Selector [name!=”value”]

<script>
$(function(){
	$('div[name!="Emberjs"]').css('font-weight', 'bold'); // AngularJS, Backbone.js
});
</script>

:first Selector

<script>
$(function(){
	$('div:first').css('font-weight', 'bold'); // AngularJS
});
</script>

:last Selector

<script>
$(function(){
	$('div:last').css('font-weight', 'bold'); // Emberjs
});
</script>

:eq() Selector

<script>
$(function(){
    $('div:eq(2)').css('font-weight', 'bold'); // Emberjs
});
</script>

.text() .html() - 내용 가져오기, 내용 변경하기

출처 : jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수

.text() .html() - 내용 가져오기

text 메소드는 html 테그를 제외한 텍스트 내용만 가져오고, html 메소드는 html 테그까지 포함된 내용을 가져옮

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
$(document).ready(function(){
	alert($('#AngularJS').text()); // AngularJS
	alert($('#AngularJS').html()); // <a href="http://angularjs.org/">AngularJS</a>
});
</script>
</head>

<body>

<div id="AngularJS"><a href="http://angularjs.org/">AngularJS</a></div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>

</body>
</html>

.text() .html() - 내용 변경하기

<script>
$(document).ready(function(){
	$('#AngularJS').html('<a href="https://blog.outsider.ne.kr/975">Angular.js는 왜 좋은가? :: Outsider\'s Dev Story</a>');
	$('.BackboneJS').text('백본js');
});
</script>

.show() .hide() - 보이기, 숨기기

출처 : 48.jQuery - show()와 hide로 숨기기 및 보이기

jQuery객체.is(":visible") 호출로 현재 보여지고 있는지 숨겨져 있는지 확인 가능

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doShow() {
    if ($('#AngularJS').is(":visible")) {
        $('#AngularJS').hide(); // 숨기기
        $('#button1').text('보이기'); 
    } else {
        $('#AngularJS').show(); // 보이기
        $('#button1').text('숨기기');
    }
}
</script>
</head>
 
<body>
 
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
 
<p><button id="button1" onclick="javascript:doShow()">숨기기</button></p>
 
</body>
</html>

.addClass() .removeClass() .hasClass() - 클래스 추가, 삭제, 포함 여부 확인하기

출처 : 클래스 추가 및 삭제하기 - EVERDEVEL

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
	display: none;
}
</style>
<script>
function doShow() {
	if ($('#AngularJS').hasClass("div_hide")) {
		$('#AngularJS').removeClass('div_hide');
		$('#button1').text('보이기');
	} else {
		$('#AngularJS').addClass('div_hide');
		$('#button1').text('숨기기');
	}
}
</script>
</head>

<body>

<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>

<p><button id="button1" onclick="javascript:doShow()">보이기</button></p>

</body>
</html>

.css() - CSS 변경

출처 : jQuery CSS 속성 변경 - 제타위키

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$('body').css('background-color', 'red');
});
</script>

.attr() - 속성을 제어

출처 : 즐거움을 찾자 Find Fun!! :: jQuery API 정복 - attr(), 속성을 제어하기

인자에 개수에 따라 2가지로 용도로 사용 - 하나의 인자만 있으면 속성값을 가져오는 것이고, 2개의 인자를 사용 하면 속성값을 설정함
속성값 설정시 속성이름이 존재하지 않는 경우 속성이 추가됨

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
	display: none;
}
</style>
<script>
function doGetAttr() {
	alert($('#AngularJS').attr('name')); // js_framework_1
}

function doSetAttr() {
	$('#AngularJS').attr('hangul', '알골라JS'); // 속성 추가
}
</script>
</head>

<body>

<div id="AngularJS" name="js_framework_1">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>

<p><button onclick="javascript:doGetAttr();">속성값 조회</button></p>
<p><button onclick="javascript:doSetAttr();">속성값 설정</button></p>

</body>
</html>

.find() 자식 노드 선택자

출처 : find(expr) - jQuery 日本語リファレンス

지정 요소의 모든 하위 요소에서 조건식에 맞는 요소를 선택

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doFind() {
    $('#js_framework').find('.BackboneJS').css('color','red');
}
</script>
</head>
 
<body>
 
<div id="js_framework"> 
    <div id="AngularJS">AngularJS</div>
    <div class="BackboneJS">Backbone.js</div>
    <div name="Emberjs">Emberjs</div>
</div>
 
<p><button onclick="javascript:doFind();">Find 메소드 호출</button></p>
 
</body>
</html>

.append() - 마지막 자식 요소 추가

출처 : jQuery API 정복 - 마지막 자식 요소 추가, append() - jyhyun

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doAppend() {
	$('#js_framework').append('<span name="ExtJS">ExtJS</span>'); // 마지막 요소 추가
}
</script>
</head>

<body>

<div id="js_framework"> 
	<div id="AngularJS">AngularJS</div>
	<div class="BackboneJS">Backbone.js</div>
	<div name="Emberjs">Emberjs</div>
</div>

<p><button onclick="javascript:doAppend();">마지막 요소 추가</button></p>

</body>
</html>

.clone() - 요소 복사하기

출처 : jQuery API 정복 - 요소 복사하기, clone() - jyhyun

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doClone() {
	
	//
	var row = $('#tr_dumy').clone();
	row.attr('id', 'tr_fw');
	
	//
	row.find('#js_name').text('Emberjs');
	
	//
	$('#js_framework').append(row); // 마지막 요소 추가
}
</script>
</head>

<body>

<table id="js_framework" border="1">
	<tr id='tr_fw'>
		<td>AngularJS</td>
		<td>Angular.js는 구글이 만든 MV*(Model - View - Whatever) 자바스크립트 프레임워크</td>
	</tr>
	<tr id='tr_fw'>
		<td>Backbone.js</td>
		<td>Model-Collection-View 기반으로 구현하는 Javascript 웹 애플리케이션 프레임웍</td>
	</tr> 
</table>


<table style="display:none;">
	<tr id="tr_dumy">
		<td id="js_name"></td>
		<td id="js_contents"></td>
	</tr>
</table>

<p><button onclick="javascript:doClone();">clone 테스트</button></p>

</body>
</html>

-

저작자 표시
신고

javascript 기본

Programming/JavaScript, Sencha 2016.02.14 02:08 Posted by 파란크리스마스

1. alert

브라우져의 팝업으로 값을 확인하는 명령어

alert('Hello World !!!!');

2. console.log - 로그값 확인 

브라우져의 개발자모드를 이용해서 콘솔창에서 로그값 확인 가능

console.log('나 로그');

3. 변수

변수 선언

var value1;

변수 대입

value1 = 2;

4. 상수

상수 const 키워드 사용

const const1 = 1'

5. 데이터 타입

  • 숫자형 - 정수형 / 1, 2, 3
  • 숫자형 - 실수형 / 1.23
  • 문자형 - '변수'
  • 블리언 - true / false

6. 배열

출처 : [자바스크립트 완벽 가이드 정리] 배열

배열의 속성

length 속성 : 배열의 개수 반환

배열의 요소 추가

push

unshift

배열의 요소 삭제

pop() 마지막 요소 삭제, 반환값으로 삭제된 값 반환

shift() 첫번째 

배열의 요소 접근

배열의 index는 0 부터 시작

<html>
<head>
</head>
<body>

<script type="text/javascript">
var colors = ["white", "black", "yellow"];

document.write("배열의 개수 = " + colors.length + "<br>");
document.write("배열의 두번째 요수 = " + colors[1] + "<br>");
</script>

</body>
</html>

7. 산술연산자

  • + : 덧셈
  • - : 뺄셈
  • / : 나눗셈
  • * : 곱셈
  • ++ : 1증가
  • -- : 1감소
  • % : 나머지

8. 문자열 연산자

  • + : 문자열 합치기
9. 조건문

출처 : [JavaScript] 조건문과 반복문

if문

var date = new Date();
var hour = date.getHours();
 
if(hour < 11) {
    alert("아침");
}
else if(hour < 15) {
    alert("점심");
}
else {
    alert("저녁");
}

switch문

var input = Number(prompt('숫자를 입력하세요.', '숫자'));
 
switch(input % 2) {
    case 0:
        alert("짝수입니다.");
        break;
    case 1:
        alert("홀수입니다.");
        break;
    default:
        alert("숫자가 아닙니다.");
        break;
}

삼항 연산자

var input = prompt('숫자 입력', '');
var number = Number(input);
 
(number > 0) ? alert('자연수') : alert('자연수아님');

10. 반복문

출처 : [JavaScript] 조건문과 반복문

while 반복문

value = 0;
while(value < 5) {
    alert(value + '번째 반복');
    value++;
}

do while 반복문

var value = 0;
do {
    alert(value + '번째 반복문');
    value++;
} while(value < 5);

for 반복문

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i=0; i<array.length; i++) {
    alert(array[i]);
}

for in 반복문

배열의 요소 만큼 반복

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i in array) {
    alert(array[i]);
}
11. 예외 처리
try {
  addalert("bad call");
} catch(e) {
  alert(e.message);
}

12. 함수

출처 : Javascript : 함수(function) 다시 보기

함수선언식 function declaration

function sum(src1, src2) {
	return src1 + src2;
}

alert( sum(1, 2) ); // 결과 3

익명 함수표현식 anonymous function

var sum = function (src1, src2) {
	return src1 + src2;
}

alert( sum(1, 2) ); // 결과 3

즉시실행함수 IIFF, Immediately Invoked Function Expression

(function() {
    /* 실행코드 */
})();

함수 변수로 전달

// 전달될 함수
var sum = function (src1, src2) {
	return src1 + src2;
}

// 첫번째 인자로 함수가 전달됨
function sum2(function_name, src1, src2, src3 ) {
	var result = 0;
	result = function_name(src1, src2);
	result = function_name(result, src3);
	return result;
}

alert( sum2( sum, 1, 2, 3) ); // 결과 6

13. 구조체

// 구조체 
var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10
}

// (.)점으로 구조체 멤버에 접근
alert(user.name); // 이순신

구조체 내 함수

var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10,
  getName : function() {
  	return this.name;
  },
  setName : function(name) {
  	this.name = name;
  }
}

alert(user.getName());
user.setName('김유신');

alert(user.getName());

구조체 외부에서 함수 추가

var user = {
  name : '이순신',
  user_id : 'lee',
  age : 10
}

user.getAge = function() {
	return this.age;
}

alert(user.getAge());



7. 객체

- 1

- 2

- 3

8. this 키워드

-

9. 내장 객체

출처 : JavaScript - 내장 객체의 종류 - 늑대의 기억 저장소

window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.

document : 웹 문서마다 하나씩 만들어지는 객체로 <body> 태그에 의해 만들어진다. HTML 문서에 대한 정보를 가지고 있다.

history : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체

location : 현재 문서에 대한 URL 정보를 가지고 있는 객체

navigator : 현재 사용하는 브라우저에 대한 정보를 가지고 있는 객체.

screen : 현재 사용하는 화면에 대한 정보를 다루는 객체

10. Number 객체

-

11. Math 객체

출처 : Math 개체(JavaScript) - MSDN - Microsoft
JavaScript Math Reference - W3Schools
즐거움을 찾자 Find Fun!! :: JavaScript 수학 객체 Math

Math 주요 메소드

  • abs(x)       x의 절대값
  • ceil(x)       올림
  • max(x,y,z,...,n) 인자 중 max값
  • min(x,y,z,...,n)  인자 중 min값
  • random()       0 과 1 사이의 난수
  • round(x)       반올림

12. Date 객체

출처 : Date - JavaScript | MDN - Mozilla Developer Network
JavaScript Date Reference - W3Schools
Date 개체(JavaScript) - MSDN - Microsoft
JavaScript Date Object - The Computer Technology

Data 객체 생성

var d = new Date(); // 인자가 없는 경우 객체가 생성된 시간
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

현재 월 확인

var curdate = new Date()
var month = curdate.getMonth()
document.write(month + "
")


저작자 표시
신고

jQuery select box 관련 처리

Programming/JavaScript, Sencha 2015.01.30 10:05 Posted by 파란크리스마스

출처 : jQuery select box 관련 api

동적으로 Option 추가

$.each(result.data.list, function(index, data)
{
	try {
		var row = $('#row_item').clone();
		row.appendTo('.uio_text');
						
		// JQuery에서 Select에 추가
		var findItem = $("select[name='item_list'] option[value='"+data.tml+"']");
		if (data.tml!=undefined && $("select[name='item_list'] option").index(findItem)<0) {
			$("select[name='item_list']").append("<option value='"+data.tml+"'>"+data.tml+"</option>");
		}
	} catch(err) {
		alert(err.message);
	}
});

선택된 Value 구하기

var item_id = $("select[name='item_list'] option:selected").val();

선택된 Index 구하기

var index = $("select[name='item_list'] option").index($("select[name='item_id'] option:selected"));

Value값으로 Index 구하기

var index = $("select[name='item_list'] option").index($("select[name='item_list'] option[value='value1']"));

Text값으로 Index 구하기

	// 방법1
	/*
	$('select[name="space_id"] option').filter(function() { 
		return $.trim( $(this).text() ) == '${ho_info.ho_line}'; 
	}).attr('selected','selected');
	*/
	
	var index = -1;
	$("select[name='space_id'] option").each(function () {
		if ($(this).html() == '${ho_info.ho_line}') {
			$(this).prop("selected", "selected");
			index = $(this).index();
			return;
		}
	});
	
	if (index>=0) {
		$("#lbl_selected_space").attr('class','label').css('color', 'black');
	} else {
		$("#lbl_selected_space").show();
		$("select[name='space_id'] option:eq(0)").attr("selected", "selected");
	}

개수 구히기

var count = $("select[name='item_list'] option").size();


저작자 표시
신고

CSS 선택자(Selector)

Programming/JavaScript, Sencha 2014.10.29 01:11 Posted by 파란크리스마스

출처 : CSS 선택자(Selector)의 종류 및 간단한 효과주기
CSS Selectors
Styling elements with a dot (.) in the class name

CSS 선택자

Pattern Meaning
#id id로 지정된 요소 선택
.class class로 지정된 요소 선택
E E 요소를 선택
E:link 방문하지 않은 E를 선택
E:visited 방문한 E를 선택
E:hover 마우스가 올라가 있는 동안 E를 선택
E:active 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택
E:focus focus가 머물러 있는 동안 E를 선택
E:first-line E 요소의 첫 번째 라인 선택
E:first-letter E 요소의 첫 번째 문자 선택
* 모든 요소 선택
E[foo] ‘foo’ 속성이 포함된 E를 선택
E[foo="bar"] ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택
E[foo~="bar"] ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택
E[foo|="en"] ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택
E:first-child 첫 번째 자식 요소가 E라면 선택
E:lang(fr) HTML lang 속성의 값이 ’fr’로 지정된 E를 선택
E::before E 요소 전에 생성된 요소 선택
E::after E 요소 후에 생성된 요소 선택
E>F E 요소의 자식인 F 요소 선택
E+F E 요소를 뒤의 F 요소 선택
E[foo^="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택
E[foo$="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택
E[foo*="bar"] ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택
E:root 문서의 최상위 루트 요소 선택
E:nth-child(n) 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택
E:nth-last-child(n) n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택
E:nth-of-type(n) E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택
E:nth-last-of-type(n) E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택
E:last-child E 요소 중 마지막 자식이라면 E 선택
E:first-of-type E 요소 중 첫번째 E 선택
E:last-of-type E 요소 중 마지막 E 선택
E:only-child E 요소가 유일한 자식이면 선택
E:only-of-type E 요소가 같은 타입이면 선택
E:empty 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택
E:target E의 URI의 대상이 되면 선택
E:enabled 활성화된 폼 컨트롤 E요소 선택
E:disabled 비활성화된 폼 컨트롤 E요소 선택
E:checked 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택
E:not(s) s가 아닌 E 요소 선택
E~F E 요소가 앞에 존재하면 F를 선택

p 테그 class="center"

p.center {
    text-align: center;
    color: red;
}

<span class='a.b'>

.a\.b { }

 

신고

JQuery Tip

Programming/JavaScript, Sencha 2014.02.05 01:34 Posted by 파란크리스마스

출처 : [ JQUERY ] SRC 변경하기
[php] json_encode 함수가 없을때 해결 방법
AJAX 심플 예제~ json
json_encode
Iterate through elements with similar IDs ( wildcard search )

img src 변경

HTML

<img id="imgSrc" src="1.jpg">

JQuery

$("#imgSrc").bind("click", function(){
  $("#imgSrc").attr("src", "2.jpg");
});

속성값 조회

alert($("#img_reverse").attr("src"));

JQuery AJAX - PHP JSON 연동

json_encode.php (옵션 - PHP엔진에서 json_encode 함수가 지원하지 않는 경우)

<?
function json_encode($a=false){ 
	if(is_null($a)) return 'null'; 
	if($a === false) return 'false'; 
	if($a === true) return 'true'; 
	if(is_scalar($a)){ 
		if(is_float($a)) return floatval(str_replace(",", ".", strval($a))); 
		if(is_string($a)){ 
			static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"')); 
			return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"'; 
		} else return $a; 
	} 
	$isList = true; 
	for($i=0, reset($a); $i<count($a); $i++, next($a)){ 
		if(key($a) !== $i){ 
			$isList = false; 
			break; 
		} 
	} 
	$result = array(); 
	if($isList){ 
		foreach($a as $v) $result[] = json_encode($v); 
		return '[' . join(',', $result) . ']'; 
	} else{ 
		foreach($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v); 
		return '{' . join(',', $result) . '}'; 
	} 
}
?>

get_user_info.php (json 데이타 생성 php 소스)

<?
include "lib/config.php";

if(!function_exists("json_encode")) { 
	include "json_encode.php";
}

$sql="select * from user_info a where a.user_id = '$user_id'";
$voc_row=DBarray($sql);

$arr = array(
  'user_id' => $voc_row[user_id], 
  'name' => iconv("EUC-KR","UTF-8", $voc_row[name]), 
  'tel' => $voc_row[tel], 
  'email' => $voc_row[email]
);

echo json_encode($arr);
?>

JQuery AJAX 호출

function getUserInfo(parma_user_id) {
	$.ajax({
		url: 'get_user_info.php',
		type: 'GET',
		dataType: 'json',
		data: {
			user_id: parma_user_id
		},
		success : function(result){
			$('#user_id_text').html(result.user_id);
			$('#user_name_text').html(result.name);
			$('#user_tel_text').html(result.tel);
			$('#user_email_text').html(result.email);
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert('There was an error.');
		}
	});	
}

Dropdown Menu

출처 - Dropdown Menu

		<ol class="lnb" id="documenter_nav">
			<li><a class="current" href="<c:url value='/index.cmx'/>">홈페이지</a></li>
			<li><a href="<c:url value='/info.cmx'/>">소개</a></li>
			<li><a href="#using_retina_graphics">매뉴얼</a></li>
			<li><a href="#creating_galleries">회원가입</a></li>
			<li><a href="#last_words">결제하기</a></li>
			<li><a href="#template_elements">관리자 모드</a>
				<ol class="sub01" style="display:none;">
					<li><a href="#template_elements_columns">사용자 현황</a>
					<li><a href="#template_elements_lists">포인트 사용현황</a>
					<li><a href="#template_elements_on_off_toggle.">세부 설정</a>
				</ol>
			</li>
		</ol>

javascript

<script type="text/javascript">  
$(function(){  
 $("ol.sub").hide();  
 $("ol.lnb li").hover(function(){  
  $("ol:not(:animated)",this).slideDown("fast");  
 },  
 function(){  
  $("ol",this).slideUp("fast");  
 })
});  
</script>

반복문 each

<div class="grid1_wrap" data-last="true" style="position: relative; height: 300px;">
	<div class="grid1"
		style="position: absolute; left: 0px; top: 0px; -webkit-transition: -webkit-transform; transition: -webkit-transform; -webkit-transform: translate3d(0px, 0px, 0px);">
		<div class="grid1_inner" data-template="text/0">
			<ul class="uio_text">

			</ul>
		</div>
		
		<div id="rowDumy" style="display: none">
			<li id="row_user" class="ut_item" style="height: 80px">
				<a href="javascript:void(0);" 
					class="ut_a" data-clk="cont1">
					<span class="user_list_info"></span>
					<span id="user_status" style="color: red; font-weight: bold;"></span>
					<br/><span class="reg_date" style="display: none;">입사일자 : </span>
				</a>
			</li>
		</div>
	</div>
</div>

javascript

function getUserList(user_status) {
	//
	try {
		$.ajax({
			type: 'POST',
			url: '<c:url value="/json.cmx"/>',
			dataType: 'json',
			data: {
				cmd : 'user_data',
				subcmd : 'list',
				dept_id : ${dept_info.id}
			},
			success: function(result)
			{
				$('.grid1_wrap').height(result.data.list.length * 82);
				
				$.each(result.data.list, function(index, data)
				{
					var row = $('#row_user').clone().attr('id','user_id_' + data.id)
					row.find('.ut_a').attr('user_id',data.id).attr('user_name', data.user_name);
					row.find('.ut_a').attr('href', "javascript:goItemList("+data.id+",'"+data.user_name+"');");
					row.appendTo('.uio_text');
					
					row.find('.user_list_info').html(data.user_name);
					if (data.delete_yn == 2) {
						row.find('#user_status').html('퇴사');
					} else if (data.delete_yn == 3) {
						row.find('#user_status').html('출산휴가');
					}
					
					if (data.reg_date!=undefined) {
						var date=new Date(data.reg_date);
						row.find('.reg_date').html('입사일자 : ' + date.format("yyyy년 MM월 dd일 a/p hh시 mm분"));
					}
				});
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert('There was an error.');
			}
		});
	} catch(e) {
		alert(e);
	}
}

엘리먼트 each

		$( "li.ut_item" ).each(function( index ) {
			//console.log( index + ": " + $( this ).text() );
			$( this ).find('#btnSaveSurvey').show();
			$( this ).find('#btnSavePhoto').show();
		});

-

신고

Sencha Touch 1 - Form

Programming/JavaScript, Sencha 2013.11.20 00:34 Posted by 파란크리스마스

selectfield

{
	xtype : 'selectfield',
	name : 'role',
	id : 'role',
	label : '담당업무',
	useClearIcon : true,
	options : [ 
	    { text : '현장소장', value : '02' }, 
	    { text : '디자이너', value : '03' }, 
	    { text : '컨설턴트', value : '04' }
	]
}

selectfield - json 이용

job_type.json

{"d":[{ "text": "초중고등학생", "value": "초중고등학생" },
{ "text": "대학(원)생", "value": "대학(원)생" },
{ "text": "사무직", "value": "사무직" },
{ "text": "연구/개발직", "value": "연구/개발직" },
{ "text": "기술직", "value": "기술직" },
{ "text": "경영/관리직", "value": "경영/관리직" },
{ "text": "영업/마케팅", "value": "영업/마케팅" },
{ "text": "전문직", "value": "전문직" },
{ "text": "자영업", "value": "자영업" },
{ "text": "판매직", "value": "판매직" },
{ "text": "노무직", "value": "노무직" },
{ "text": "서비스직", "value": "서비스직" },
{ "text": "농업", "value": "농업" },
{ "text": "축산업", "value": "축산업" },
{ "text": "임업", "value": "임업" },
{ "text": "수산업", "value": "수산업" },
{ "text": "공무원", "value": "공무원" },
{ "text": "군경", "value": "군경" },
{ "text": "교직", "value": "교직)" },
{ "text": "예술", "value": "예술" },
{ "text": "주부", "value": "주부" },
{ "text": "기타", "value": "기타" }]}

model

Ext.regModel('d', {
	fields : [ 
		{ name : 'text', type : 'string' }, 
		{ name : 'value', type : 'string' } 
	]
});

store

Ext.regStore('JobStore', {
	model : 'd',
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : common_url + 'job_type.json',
		reader : {
			type : 'json',
			root : 'd'
		},
		extraParams: { // 파라미터 설정 부분
			cmd : 'CodeData',
			subcmd : 'inc_data',
			inc_id : m_inc_id
		}
	},
	listeners:{ // 로딩이 완료 되면 호출
		load: function(self, records, successful) {
			//dataStore.loadRawData(self.proxy.reader.rawData);
			if (dataInfo != -1) {
				Ext.getCmp("space").setValue(dataInfo.space_code);
			}
		}
	}
});

selectfield

{
	xtype : 'selectfield',
	name : 'job', // 동적로딩인 경우 필수
	id : 'job',
	label : '직업',
	useClearIcon : true,
	store: 'JobStore', //No quotes here. 
	displayField: 'text', 
	valueField: 'value', 
	placeHolder: '직업을 선택해 주세요'
}

passwordfield

{
	xtype : 'passwordfield',
	id : 'password',
	label : '비밀번호',
	useClearIcon : true
}

datepickerfield

{
	xtype: 'datepickerfield',
	destroyPickerOnHide: true,
	name : 'date',
	label: 'Start Date',
	value: new Date(),
	picker: {
		yearFrom: 1990 
	} 
}
{
	xtype : 'datepickerfield',
	id : 'start_date',
	label : '공사시작일',
	useClearIcon : true,
	picker: {   
		yearFrom: 2012,  
		yearTo : 2015,
		slotOrder: ['year', 'month' ,'day']  
	}
}

emailfield

{
	xtype : 'emailfield',
	id : 'email',
	label : '이메일',
	useClearIcon : true
}

clear forms

this.form = new Ext.form.FormPanel();
 
// And somewhere else
this.form.getForm().reset(); // doesn't work

confirm 창

var ret = confirm("정말로 삭제 하시겠습니까?");
if (ret) {
	Ext.Ajax.request({
		url: 'json',
		params : {
			cmd : 'IncidentDong',
			subcmd : 'delete',
			id : m_dong_id
		},
		success: function(response, opts) {
			var JsonData = JSON.parse(response.responseText);
			if(JsonData.data.err == "") {
				ns_incident_dong_list.panel_list.getList(m_inc_id);
			} else {
				alert(JsonData.data.err);
			}
		}
	});
}

x-list-item-body

dataList = new Ext.List({
	title: 'Incident목록',
	store: dataStore,
	scroll: false, // <-- 여기 중요
	layout:'fit', // <-- 여기 중요
	blockRefresh:true,
	onItemDisclosure: {
		handler: function(record, btn, index) {
			//alert(record.get('no'));
			/*
			ns_incident_write.init();
			ns_incident_write.panel.getInfoData(record.get('id'));
			main.MainPanel.setActiveItem(ns_incident_write.panel, "slide");
			*/
			overlay.setCentered(true);
			overlay.setIncID(record.get('id'));
			overlay.show();
		}
	},
	listeners: {
		itemtap: function(list, index, el, event){
			if (event.getTarget('.x-list-item-body')) {
				//alert('index =' + index);                	
				var record = this.store.getAt(index);
				ns_incident_list.panel_list.goNextPage(record.get('id'));
			}
		}
		/*
		el: {
			tap: function(param1, param2, param3) {
				alert('Play Pressed!');
			},
			delegate: '.x-list-item-body'
		},
		select: function (list, record) {
			list.down('titlebar').setTitle(model.get('name'));
		} // select
		*/
	}, // listeners
	itemTpl:'{court} / {name} / {valuation} / {inspector}'
});

setVisible

Ext.getCmp("btnAdd2").setVisible(false);

Message 창 출처 : Sencha Touch Message Box

Ext.Msg.alert('blueX', '사진 등록은 사건이 등록되어야 가능합니다.', Ext.emptyFn);



신고

PNG Image Base64 Encoder / Decoder

Programming/JavaScript, Sencha 2012.10.15 22:33 Posted by 파란크리스마스

PNG Image Base64 Encoder / Decoder

Sencha touch에 툴바용 이미지를 css에 사용하려고 만들어본 툴입니다.
한시간만에 만든것이라 버그가 많습니다.

배포는 자유지만 출처는 밝혀주세요

 

PNGBase64Util.exe

신고

Sencha dateformat

Programming/JavaScript, Sencha 2012.07.03 01:35 Posted by 파란크리스마스

출처 :
http://stackoverflow.com/questions/10496912/convert-date-from-json-format-to-other-formats-in-sencha
http://stackoverflow.com/questions/7848369/sencha-touch-date-format

소스

  Ext.regModel('dataModel', {
      fields: [
         {name: 'id', type: 'int'},
         {name: 'vod_id', type: 'int'},
         {name: 'comment', type: 'string'},
         {name: 'regid', type: 'string'},
         {name: 'regdate', type:'date', dateFormat: 'c'}
      ]
  });

  dataList = new Ext.List({
      title: 'VodComment목록',
      store: dataStore,
      scroll: false,
      layout:'fit',
      blockRefresh:true,
      itemTpl:'{comment} {regid} / {regdate:date("Y.m.d H:i:s")}'
  });

패턴

Date.patterns = {
    ISO8601Long : "Y-m-d H:i:s",
    ISO8601Short : "Y-m-d",
    ShortDate : "n/j/Y",
    LongDate : "l, F d, Y",
    FullDateTime : "l, F d, Y g:i:s A",
    MonthDay : "F d",
    ShortTime : "g:i A",
    LongTime : "g:i:s A",
    SortableDateTime : "Y-m-d\\TH:i:s",
    UniversalSortableDateTime : "Y-m-d H:i:sO",
    YearMonth : "F, Y"
};
신고


 

티스토리 툴바