'Programming/JavaScript, Sencha' 카테고리의 글 목록

Search

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

Font awesome 가운데 정렬

Programming/JavaScript, Sencha 2018.08.13 23:46 Posted by 파란크리스마스

출처

Font awesome icon 정렬 | 9to5의 개발하면서 겪은 경험

css 파일 참조

<link rel="stylesheet" href="<c:url value="/commons/fontawesome/css/all.css"/>">

css

.fa {
	vertical-align: middle;
}

html

<i class="fa fa-plus-circle fa-2x" aria-hidden="true" style="margin-left: 5px;"></i>
<i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>

공감

sns신고

저작자표시

Tracback 0 Comment 0

jstree

Programming/JavaScript, Sencha 2018.07.21 18:53 Posted by 파란크리스마스

출처

jsTree

ajax

	// ajax demo
	$('#math_class_tree')
		.on('changed.jstree', function (e, data) {
			console.log('select node id / ' + data.node.id);
		})
		.jstree({
			'core' : {
				'data' : {
					"url" : function(node) {
						console.log('node.id = ' + node.id);
						return "json.mat";
					},
					"data" : function(node) {
						return {
							'cmd' : 'mat_class_table',
							'subcmd' : 'tree',
							'id' : node.id
						};
					},
					"dataType" : "json",
					"success" : function(data, status, res, parent) {
						console.log("test");
					}
				}
			}
		});

공감

sns신고

저작자표시

Tracback 0 Comment 0

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>

공감

sns신고

저작자표시

Tracback 0 Comment 0

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>

실행결과

공감

sns신고

저작자표시

Tracback 0 Comment 0

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);

공감

sns신고

저작자표시

Tracback 0 Comment 3

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)

공감

sns신고

저작자표시

Tracback 0 Comment 0

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>

공감

sns신고

저작자표시

Tracback 0 Comment 0

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 + "
")

공감

sns신고

저작자표시

TAG JavaScript

Tracback 1 Comment 0

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();

공감

sns신고

저작자표시

Tracback 0 Comment 0

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 { }

공감

sns신고

Tracback 0 Comment 0

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();
		});

공감

sns신고

TAG JavaScript, jQuery

Tracback 1 Comment 0

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);

공감

sns신고

Tracback 0 Comment 0

«이전 1 2 다음»

파란크리스마스

카테고리

Search

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

Font awesome 가운데 정렬

jstree

JQuery UI - Datepicker

EJS Embedded JavaScript

JQuery - 페이지 정보 자동 생성

node.js

JQuery 기초

javascript 기본

jQuery select box 관련 처리

CSS 선택자(Selector)

JQuery Tip

Sencha Touch 1 - Form

tag cloud

공지사항

최근댓글

최근기사

최근트랙백

글보관함

링크