'COMPUTER/JAVASCRIPT, JQUERY'에 해당되는 글 26건

 
  1. 2014.03.15 [MAP/DAUM] 다음 API 지도 표시와 마커 좌료 다르게 설정하기 샘플, 코드
  2. 2014.03.14 [MAP/DAUM] 다음 맵 API 한 화면에 지도 여러개 띄우기 샘플, 코드
  3. 2014.03.06 [CSS] 커스텀 체크박스 스타일시트 예제, 모바일용, ✔
  4. 2014.03.03 [JS/JQUERY] 자바스크립트 제이쿼리로 3자리마다 콤마, 숫자 통화 변경
  5. 2014.02.20 [JS/JQUERY] 제이쿼리로 자바스크립트 페이지 온로드 샘플 예제, Javascript onload function as Jquery
  6. 2014.02.17 [JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css
  7. 2013.09.16 [JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환 1
  8. 2013.06.18 [JS/IE7] 인터넷 익스플로어 7 용 JSON 라이브러리 파일 1
  9. 2013.05.23 [JQUERY/JS] jQuery로 JSON타입 오브젝트를 복사하는 방법, JSON Copy, Clone, JSON.stringify, JSON.parse
  10. 2013.01.28 [JAVASCRIPT/JS] Date, getYear, getMonth, getDate 달력에 년 월 일 계산, 한자리 월, 일에 0 붙이기
  11. 2012.09.06 [JAVASCRIPT] Javascript setCookie getCookie deleteCookie, 자바스크립트 함수
  12. 2012.09.03 [RegEx/JS] 자바스크립트로 언더바 문자를 낙타표기법으로 변환 (JavaScript, Camel Notation, Underscore
  13. 2012.08.31 [JavaScript/JS] 자바스크립트 소숫점 반올림하기 Math.round()
  14. 2012.04.09 [JavaScript/JQuery] 체크박스 이벤트, 객체 디세이블
  15. 2012.03.08 [jQuery] jqgrid에 데이타가 안나올때
  16. 2012.01.05 [JQuery/JS] 로그인용 엔터키 자동 포커스 이동 서브밋 스크립트, Enterkey Event Auto-Focusing For Login Form
  17. 2012.01.04 [JQuery/JS] 셀렉트박스 변경할때 글 읽어오기, Selectbox onChange Ajax
  18. 2011.12.28 [RUN/JS] JavaScript 인코딩 함수 escape(), encodeURI(), encodeURIComponent()
  19. 2011.12.27 [RUN/JS] 키코드 확인 스크립트, Keyboard KeyCode
  20. 2011.06.13 [JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString
  21. 2010.10.11 [AJAX] 기본 예제, httpRequest Sample 1
  22. 2010.10.07 [JQUERY] JTree 사용 예제, 노드 추가/삭제 1
  23. 2010.10.06 [AJAX] 데이타 전송시 에러 Could not complete the operation due to error c00ce514 25
  24. 2010.10.05 [JQUERY] JQuery Selector, 객체 선택 9
  25. 2010.07.06 [JAVASCRIPT/SCRIPT] 디데이(D-Day), 지난날짜 계산하기
  26. 2010.03.08 [JS,CSS] 잘까먹는 속성, 함수들
2014. 3. 15. 11:09 COMPUTER/JAVASCRIPT, JQUERY
[MAP/DAUM] 다음 API 지도 표시와 마커 좌료 다르게 설정하기 샘플, 코드
이 맵은 마커(단추)와 지도가 같은 좌표를 표시하고 있습니다.




이맵은 좌표와 마커가 다른 위치를 표시하고 있습니다.
(예제의 위치는 주소가 마커좌표와 지도좌표가 같을경우,
광화문역이 안보이기때문에, 맵을 약간 왼쪽으로 이동해야 했습니다.)






마커 좌표와 지도 좌표를 각자 표시하는 소스 코드:

<script type="text/javascript"> $(window).load(function(){ var longitude='126.980101'; var latitude='37.571982'; var mapLongitude='126.978456'; var mapLatitude='37.571702'; map=new daum.maps.Map(document.getElementById("map"),{ center:new daum.maps.LatLng(mapLatitude,mapLongitude), level:4 }); var marker=new daum.maps.Marker({ position:new daum.maps.LatLng(latitude,longitude) }); var zoomControl=new daum.maps.ZoomControl(); map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT); var mapTypeControl=new daum.maps.MapTypeControl(); map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT); marker.setMap(map); }); </script> <div id="map" style="height:300px;"></div>



2014. 3. 14. 14:49 COMPUTER/JAVASCRIPT, JQUERY
[MAP/DAUM] 다음 맵 API 한 화면에 지도 여러개 띄우기 샘플, 코드

다음지도를 한 화면에서 2개이상 띄우는 코드 입니다.

좌표는 당근 2개씩 있어야겠죠.

확대축소 컨트롤이랑 '지도/스카이뷰' 버튼은 함께 쓸수 있습니다.


좌표중 하나는 서울역이고, 다른하나는 광화문 근처입니다.



스크립트:

$(window).load(function(){
	var zoomControl=new daum.maps.ZoomControl();
	var mapTypeControl=new daum.maps.MapTypeControl();

	var longitude='126.980101';
	var latitude='37.571982';
	var mapLongitude='126.978456';
	var mapLatitude='37.571702';

	map=new daum.maps.Map(document.getElementById('map1'),{
		center:new daum.maps.LatLng(mapLatitude,mapLongitude),
		level:4
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);
	
	var marker=new daum.maps.Marker({position:new daum.maps.LatLng(latitude, longitude)});
	marker.setMap(map);



	var longitude2='126.9740458';
	var latitude2='37.5542316';

	map2=new daum.maps.Map(document.getElementById('map2'),{
		center:new daum.maps.LatLng(latitude2,longitude2),
		level:3
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map2.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);

	var marker2=new daum.maps.Marker({position:new daum.maps.LatLng(latitude2,longitude2)});
	marker2.setMap(map2);
});




HTML:
<div class="map_area" id="map1" style="width:100%;height:400px;">
<div class="map_area" id="map2" style="width:100%;height:400px;">


2014. 3. 6. 09:27 COMPUTER/JAVASCRIPT, JQUERY
[CSS] 커스텀 체크박스 스타일시트 예제, 모바일용, ✔

누군가 만들어놓은 커스텀 체크박스 스타일 시트 입니다.

사용법은 <input type="checkbox" class="custom-check"........

처럼 쓰면 됩니다.





input[type=checkbox].custom-check{ 
    position: absolute; overflow:hidden; width:1px;height:1px; 
    clip:rect(0 0 0 0);margin:-1px;padding:0;border:0; 
} 

input[type=checkbox].custom-check + label.custom-check{ 
    display:inline-block; 
    padding-left:1em; 
} 

input[type=checkbox].custom-check:checked + label.custom-check:before{ 
    position:absolute;margin-left:-1em; 
    content:'✔'; 
}


2014. 3. 3. 17:44 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 자바스크립트 제이쿼리로 3자리마다 콤마, 숫자 통화 변경
전에도 한번 쓴거 같긴한데;;;
고리짝 코드입니다.
전 요즘에 싸이코 기질이 발동해서 이렇겐 안씁니다만, 코드가 알아보기 쉽고 좆네욤;;;


정규 표현식을 이용한 자바스크립트로 3자리마다 콤마넣기의 한 예
//콤마찍기
function numberFormat(num) {
var pattern = /(-?[0-9]+)([0-9]{3})/;
while(pattern.test(num)) {
num = num.replace(pattern,"$1,$2");
}
return num;
}
 
//콤마제거
function unNumberFormat(num) {
return (num.replace(/\,/g,""));
}




toLocaleString를 이용한 제이쿼리로 3자리마다 콤마 넣기
var funcSetCurrency=function($){
$('#tableData td').each(function(){
if(!isNaN(Number($(this).text())) && $(this).text()) $(this).text(Number($(this).text()).toLocaleString().split('.')[0]);
});
};

$(document).ready(function(){
funcSetCurrency($);
});



2014. 2. 20. 22:36 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 제이쿼리로 자바스크립트 페이지 온로드 샘플 예제, Javascript onload function as Jquery
jquery로 페이지가 로딩 되었을 때 스크립트를 수행합니다.
안에 있는 코드는 jqgrid를 100%넓이로 맹그러주기 위해 창 리사이즈를 이벤트로 잡은 코드입니다.

$(function(){}); 요것만 쓰면 됩니다.

<body onload="alert()"> 과 같습니다.


<script type="text/javascript" src="/library/jquery-1.7.2.js"></script>
<script>
//<![CDATA[
$(function(){
	$(window).bind('resize', function() {
    	$("#jqgrid1").setGridWidth($(window).width()-16);
	}).trigger('resize');
});
//]]>
</script>








2014. 2. 17. 09:30 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css

나(this)의 상위를 제외한 같은레벨의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().siblings().css("background-color", "red");


나의 상위중 클래스가 .txt_2인 가장 가까운 객체의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().prevAll('.txt_2:first').css("background-color", "red");


div의 lang속성에 안두리를 포함한 태그안에 html추가

$('div[lang*="kaudo"]').append('<p class="title_3">안녕하세요.</p>');



2013. 9. 16. 10:25 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환

가격으로 된 숫자에 콤마를 찍어주는 스크립트 입니다.

2000 > 2,000

1123000 > 1,123,000



이전 스크립트는 아이폰 사파리에서 작동하지 않습니다.

2011/06/13 - [SCRIPTING/JAVASCRIPT/JQUERY] - [JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString



<script>

$(document).ready(function(){ $('.intCurrency').each(function(index){ $(this).text($(this).text().split(/(?=(?:\d{3})+(?:\.|$))/g).join(',')); }); }); </script>

<span class="red intCurrency">2000</span> <span class="intCurrency sibol kkk">123000</span>





2013. 6. 18. 13:10 COMPUTER/JAVASCRIPT, JQUERY
[JS/IE7] 인터넷 익스플로어 7 용 JSON 라이브러리 파일

JSON.parse(), JSON.stringify(), JSON.encode()



json2.js


JSON 오브젝트를 생성하거나 스트링형태로 변환하거나 등등등 할때 쓰는 JSON.method들이 있습니다.

다른 브라우저들은 잘 되는데 IE7같은 고물 브라우저에서는 에러가 납니다.


<script type="text/javascript" src="json2.js" ></script>

처럼 첨부해주면 IE7에서도 JSON을 사용할 수 있습니다.


2013. 5. 23. 14:26 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY/JS] jQuery로 JSON타입 오브젝트를 복사하는 방법, JSON Copy, Clone, JSON.stringify, JSON.parse

json을 var 변수2=변수1; 라고 코딩하면 복사가 되는게 아니고 이름이 두개가 됩니다.

그래서 JSON.stringify로 문자열로 변환했다가, JSON.parse로 JSON객체로 변화해준 값을 넣어주면 서로 다른 JSON객체가 생깁니다.

 

 

srchParams에 xtenSearchObj.param을 복사한 후 srchParams의 변수 두개를 1로 셋팅했습니다.

그리고 얼랏창으로 확인하면 xtenSearchObj.param.outmax값이 20, 그대로 남아있습니다.

 

 

2013. 1. 28. 23:29 COMPUTER/JAVASCRIPT, JQUERY
[JAVASCRIPT/JS] Date, getYear, getMonth, getDate 달력에 년 월 일 계산, 한자리 월, 일에 0 붙이기

자바스크립트로 날짜를 계산하는 예제입니다.

오늘 날짜를 생성한 후에 생성한 날짜 객체에다가 날짜를 변경하여 다시 정의합니다.

 

 

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){

	// 날짜 객체 생성
	var date=new Date();

	// 날짜에 10일을 더한 후 재정의
	date=new Date(date.getYear(),date.getMonth(),date.getDate()+10);

	// 날짜를 메세지로 표시한다.
	alert(date.getFullYear()+' '+
		((date.getMonth()+1)<10 ? '0'+(date.getMonth()+1) : (date.getMonth()+1))+' '+
		(date.getDate()<10 ? '0'+date.getDate() : date.getDate() ) );

});
</script>

 

제이쿼리의 온로드에 예제를 작성했습니다.

 

날짜를 계산하고 얼랏으로 확인한 화면

2012. 9. 6. 09:30 COMPUTER/JAVASCRIPT, JQUERY
[JAVASCRIPT] Javascript setCookie getCookie deleteCookie, 자바스크립트 함수

말이 필요없는 함수

 

쿠키 저장

setCookie('변수명','값','만료일','도메인','보안');

 

쿠키 로드

getCookie('변수명');

 

쿠키 삭제

deleteCookie('변수명');

 

 
<script>

function setCookie(cookieName, cookieValue, cookieExpire, cookiePath, cookieDomain, cookieSecure){
	var cookieText=escape(cookieName)+'='+escape(cookieValue);
	cookieText+=(cookieExpire ? '; EXPIRES='+cookieExpire.toGMTString() : '');
	cookieText+=(cookiePath ? '; PATH='+cookiePath : '');
	cookieText+=(cookieDomain ? '; DOMAIN='+cookieDomain : '');
	cookieText+=(cookieSecure ? '; SECURE' : '');
	document.cookie=cookieText;
}

function getCookie(cookieName){
	var cookieValue=null;
	if(document.cookie){
		var array=document.cookie.split((escape(cookieName)+'=')); 
		if(array.length >= 2){
			var arraySub=array[1].split(';');
			cookieValue=unescape(arraySub[0]);
		}
	}
	return cookieValue;
}

function deleteCookie(cookieName){
	var temp=getCookie(cookieName);
	if(temp){
		setCookie(cookieName,temp,(new Date(1)));
	}
}

</script>
 

 

 

 

... ...

2012. 9. 3. 15:46 COMPUTER/JAVASCRIPT, JQUERY
[RegEx/JS] 자바스크립트로 언더바 문자를 낙타표기법으로 변환 (JavaScript, Camel Notation, Underscore

네이밍 변환 스크립트(정규표현식) 입니다.

 

데이타베이스에서 많이쓰는 컬럼명 대문자_대문자
예를들면 - SEQ_NUM, ORDER_COST, USER_PHONE_NO...

 

프로그램 네이밍시 많이쓰는 변수/함수명

예를들면 - userId, tableName...

 

서로 변환할 수 있는 함수 입니다.

정규표현식이므로 어떤 언어에서도 적용할 수 있습니다.

 

 

대문자 언더바구분 형식으로 낙타표기법으로 변환

RESULT: kaudoAhndoori

<script>

var under2camel=function(str){
	return str.toLowerCase().replace(/(\_[a-z])/g, function(arg){
		return arg.toUpperCase().replace('_','');
	});
}

var result=under2camel('kaudo_ahndoori');
document.write(result);

<script>

 

낙타표기법을 대문자 언더바구분 형식으로 변환

RESULT: AHNDOORI_KAUDO

<script>

var camel2under=function(str){
	return str.replace(/([A-Z])/g, function(arg){
		return "_"+arg.toLowerCase();
	}).toUpperCase();
}

var result=camel2under('ahndooriKaudo');
document.write(result);

<script>
2012. 8. 31. 13:49 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JS] 자바스크립트 소숫점 반올림하기 Math.round()

자바스크립트로 소숫점 숫자 표현하는 방법입니다.

 

Math.round(값) - 값을 반올림합니다.

Math.ceil(값) - 값을 올림합니다.

Math.floor(값) - 값을 내림합니다.

Math.parseInt(값) - 값을 정수로 바꿉니다. (값이 소숫점이 있는 숫자일 경우엔 소숫점 이하를 잘라버립니다. 내림)

 

10의 n승을 곱하고 반올림 한 결과를 다시 10의 n승으로 나누면

원하는 소숫점 자릴수를 표현할 수 있습니다.

 

<body/>
<script>

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'반올림 (소숫점0번째까지)<br/>'+
	'Math.round(45.67890) : '+
	Math.round(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'올림 (소숫점0번째까지)<br/>'+
	'Math.ceil(45.67890) : '+
	Math.ceil(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'Math.floor(45.67890) : '+
	Math.floor(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'parseInt(45.67890) : '+
	parseInt(45.67890);


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 2번째까지 반올림<br/>'+
	'Math.round(123.4567) : '+
	Math.round(123.4567*100)/100;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 올림<br/>'+
	'Math.ceil(123.4567) : '+
	Math.ceil(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 내림<br/>'+
	'Math.floor(123.4567) : '+
	Math.floor(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 3번째까지 내림<br/>'+
	'parseInt(123.4567) : '+
	parseInt(123.4567*1000)/1000;


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점있는 문자열을 숫자(float)로 변환<br/>'+
	'parseFloat("12.3456789") : '+
	parseFloat("12.3456789");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(float)로 변환<br/>'+
	'parseInt("098.765") : '+
	parseInt("098.765");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(integer)로 변환<br/>'+
	'parseInt("011") : '+
	parseInt("011");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(float)로 변환<br/>'+
	'parseFloat("안두리") : '+
	parseFloat("안두리");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(integer)로 변환<br/>'+
	'parseInt("ahndoori") : '+
	parseInt("ahndoori");

</script>
2012. 4. 9. 13:18 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JQuery] 체크박스 이벤트, 객체 디세이블

체크되면 사용금지, 해제되면 사용가능으로 바뀌는 JQuery 스크립트 입니다.

 

코드

<SCRIPT>
$(function(){

	$('input[name="test"]').click(function(){
		if($(this).attr('checked')){
			$('input[name="dis1"]').attr('disabled','disabled');
			$('input[name="dis2"]').attr('disabled','disabled');
		}else{
			$('input[name="dis1"]').removeAttr('disabled');
			$('input[name="dis2"]').removeAttr('disabled');
		}
	});

});
</SCRIPT>
<INPUT id=test type=checkbox name=test>
<INPUT id=dis1 value=zzz name=dis1>
<INPUT id=dis2 value=ggg name=dis2>

 

 

예제

 

2012. 3. 8. 11:36 COMPUTER/JAVASCRIPT, JQUERY
[jQuery] jqgrid에 데이타가 안나올때
jsonReader:{repeatitems:false},
함 넣어보세요.
나올지도 몰라요.


    $("#jqgrid").jqGrid({
     url:'json주소',
        mtype: 'GET',
        datatype: "json",
  jsonReader:{repeatitems:false},
     colNames:['아이디','암호', '이름', '핸드폰','전화','이메일','직책','regdate','moddate','reguser'],
     colModel:[
      {name:'userid',index:'userid', width:55},
      {name:'userpw',index:'userpw', width:90},
      {name:'username',index:'username asc, userpw', width:100},
      {name:'hp',index:'hp', width:100, align:"right"},
      {name:'phone',index:'phone', width:100, align:"right"},  
      {name:'email',index:'email', width:100,align:"right"},
      {name:'duty',index:'duty', width:150, sortable:false},
      {name:'regdate',index:'regdate', width:150, sortable:false},
      {name:'moddate',index:'moddate', width:150, sortable:false},
      {name:'reguser',index:'reguser', width:150, sortable:false}
     ],
2012. 1. 5. 13:06 COMPUTER/JAVASCRIPT, JQUERY
[JQuery/JS] 로그인용 엔터키 자동 포커스 이동 서브밋 스크립트, Enterkey Event Auto-Focusing For Login Form
엔터키를 누르면 아이디와 비밀번호값을 입력하게끔 포커스를 이동시켜줍니다.
다 입력됬으면 전송!

$(document).ready(function(){
$('body').keypress(function(e){
if(e.keyCode!=13) return;
if(!$('input[name="loginId"]').val()) $('input[name="loginId"]').focus();
if(!$('input[name="password"]').val()) $('input[name="password"]').focus();
$('form:eq(0)').submit();
});
});

2012. 1. 4. 22:54 COMPUTER/JAVASCRIPT, JQUERY
[JQuery/JS] 셀렉트박스 변경할때 글 읽어오기, Selectbox onChange Ajax


$('#[아이디]').change([함수명]=function(){
$.ajax({
url:'[주소]',
data:'변수명='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#[대상]').html(data.[컬럼명]);
},
}); // $.ajax
});



SCRIPT

$('#boardDivnCd').change(changeBoardDivnCd=function(){
$.ajax({
url:'<c:url value="/0001/selectGftctPupl.do" />',
data:'boardDivnCd='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#content').html(data.data[0].CONTENT);
},
}); // $.ajax
});


HTML

<select id="boardDivnCd" name="boardDivnCd">
<option value="55">일반게시판</option>
<option value="56">QnA게시판</option>
<option value="57">게시판</option>
</select>
<td id="content">내용내용내용</td>


JAVA

@RequestMapping("0001/selectGftctPupl.do")
public ModelAndView selectGftctPupl(HttpServletRequest request, HttpServletResponse response, Map<String, Object> model,0001Model 0001Model){
try{
List<DataMap> data=0001Service.selectGftctPupl(0001Model); // 데이터 조회
if(data==null || data.size()==0) return new ModelAndView("jsonView",model);
model.put("data",data);
}catch (Exception e){}
return new ModelAndView("jsonView",model);
}


2011. 12. 28. 13:17 COMPUTER/JAVASCRIPT, JQUERY
[RUN/JS] JavaScript 인코딩 함수 escape(), encodeURI(), encodeURIComponent()
javascript 인코딩 함수 샘플입니다.
아무데나 치면 해당 인코딩으로 변환하여 보여줍니다.
 
2011. 12. 27. 11:47 COMPUTER/JAVASCRIPT, JQUERY
[RUN/JS] 키코드 확인 스크립트, Keyboard KeyCode
왼쪽 텍스트입력칸에 키보드를 치면 오른쪽에 키코드가 나타납니다.
 
2011. 6. 13. 08:50 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString
초간단 자바스크립트


<script>
document.write(
Number('25625623452345').toLocaleString().split(".")[0]
);
</script>

결과: 25,625,623,452,345


이 스크립트는 아이폰의 모바일 사파리에서 작동하지 않습니다.

아래 글을 참고하세요.

2013/09/16 - [SCRIPTING/JAVASCRIPT/JQUERY] - [JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환


2010. 10. 11. 10:01 COMPUTER/JAVASCRIPT, JQUERY
[AJAX] 기본 예제, httpRequest Sample

ajax의 가장 기본이자 핵심인 httpRequest,
함수로 만들어서 쓰면 코드를 줄일 수 있습니다.

var httpRequest=null;

function getXMLHttpRequest(){
 if (window.ActiveXObject){
  try{
   return new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){ return null; }
  }
 }else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else return null;
}

function sendRequest(url,params,callback,method){
 httpRequest=getXMLHttpRequest();
 var httpMethod=method ? method : 'GET';
 if(httpMethod!='GET' && httpMethod!='POST') httpMethod='GET';
 var httpParams=(params==null || params=='') ? null : params;
 var httpUrl=url;
 if (httpMethod=='GET' && httpParams != null) httpUrl=httpUrl+"?"+httpParams;
 httpRequest.open(httpMethod,httpUrl,true);
 httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 httpRequest.onreadystatechange=callback;
 httpRequest.send(httpMethod=='POST' ? httpParams : null);
}


사용법

sendRequest("test.jsp", "attr=10&value=안두리", funcReceived, "POST");

function funcReceived() {
 if (httpRequest.readyState == 4) {
  if (httpRequest.status == 200) {
   alert(httpRequest.responseText);
  }
 }
}
2010. 10. 7. 15:48 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JTree 사용 예제, 노드 추가/삭제

트리메뉴중에선 기능이 상당히 많은 오픈소스입니다.
데이타 타입은 html, json, xml등 거의대부분 지원합니다.
복잡한 기능을 구현하려면 jquery를 알고있는게 좋습니다. 

홈페이지: http://www.jstree.com/


예제에선 _xml_nest.xml이란 데이타 파일을 읽어들이고,
노드 추가/삭제를 할 수 있습니다.

예제 페이지 소스
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jsTree v.1.0 - full featured demo</title>
 <script type="text/javascript" src="_lib/jquery.js"></script>
 <script type="text/javascript" src="_lib/jquery.cookie.js"></script>
 <script type="text/javascript" src="_lib/jquery.hotkeys.js"></script>
 <script type="text/javascript" src="jquery.jstree.js"></script>

 <style type="text/css">
 html, body { margin:0; padding:0; }
 body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
 .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
 #container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
 #demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }

 #text { margin-top:1px; }

 #alog { font-size:9px !important; margin:5px; border:1px solid silver; }
 </style>
</head>

<body>
<div id="demo" class="demo"></div>
<div id="menu">
<button id="addFolder">add folder</button><br/>
<button id="addItem">add item</button><br/>
<button id="deleteItem">delete item</button><br/>
</div>

<script>
$(function () {
 $("#demo").jstree({
  "xml_data" : {
   "ajax" : {
    "url" : "_xml_nest.xml"
   },
   "xsl" : "nest"
  },
  "plugins" : [ "themes", "xml_data","ui","crrm"],
  "ui" : {
   // this makes the node with ID node_4 selected onload
   "initially_select" : [ "pxml_6" ]
  }
 });
});

$(function(){
 $("#demo").bind("create.jstree", function (event, data) {
  data.rslt.obj.attr("id","testid");
  alert(data.rslt.obj.attr("id"));
 });
});

$(function(){
 $('#menu button').click(function(){
  switch(this.id){
  case "addFolder":
   //alert("addFolder");
   //$("#demo").jstree("create", null, "last", { "attr" : { "rel" : "folder" } });
   //$("#demo").jstree("create",-1,false,"CREATED NODE",false,true);
   $("#demo").jstree("create","#pxml_5","last","CREATED NODE",false,true);
   break;
  case "addItem":
   //alert("addItem");
   $("#demo").jstree("create", null, "last", { "attr" : { "rel" : "default" } });
   break;
  case "deleteItem":
   $("#demo").jstree("remove","#testid");
  default:
   break;
  }
 });
});
</script>
</body>
</html>


xml 데이타
<?xml version="1.0" encoding="UTF-8"?>
<root>
 <item id="pxml_1">
  <content><name><![CDATA[Root node 1]]></name></content>
  <item id="pxml_2">
   <content><name><![CDATA[Child node 1]]></name></content>
  </item>
  <item id="pxml_3">
   <content><name><![CDATA[zzzzzz]]></name></content>
  </item>
  <item id="pxml_4">
   <content><name><![CDATA[Some other child node]]></name></content>
  </item>
 </item>
 <item id="pxml_5">
  <content><name><![CDATA[Root node 222]]></name></content>
 </item>
 <item id="pxml_6">
  <content><name><![CDATA[menu2]]></name></content>
 </item>
 <item id="pxml_7">
  <content><name><![CDATA[kkkkkk]]></name></content>
 </item>
</root>

2010. 10. 6. 13:25 COMPUTER/JAVASCRIPT, JQUERY
[AJAX] 데이타 전송시 에러 Could not complete the operation due to error c00ce514
ajax를 구현해서 리퀘스트를 날렸는데,
Could not complete the operation due to error c00ce514
라는 자바스크립트 에러가 났으면,

제일먼저확인할것은 요청페이지와 응답페이지간의 캐릭터셋이 일치하는지 확인하세요.

만약 요청페이지는 utf-8인데 응답페이지가 euc-kr이면 에러가 날 수 있습니다.
utf-8은 파일저장방식이 유니코드인지도 확인해야합니다.


인코딩 불일치때문에 에러가 나는것이 아니라면, 응답페이지의 캐릭터셋을 변경.

응답페이지가 PHP일때 인코딩을 지정하는 코드 입니다.
header("Content-type: text/html; charset=euc-kr");
또는
header("Content-type: text/html; charset=utf-8");


2010. 10. 5. 15:08 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JQuery Selector, 객체 선택
제이쿼리를 이용할때 절대 잊으면 안되는것.
바로 html의 객체들을 선택할줄 알아야 뭔가 하겠죠.


$("font")
태그타입(Element)으로 찾기 - <font>안두볼</font>

$("div,a")
div와 a태그들을 선택합니다.

$("#kaudo")
아이디로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$(".link")
CSS 클래스명으로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$("*")
모든 태그(Element)를 선택합니다.

등록할때는 이런식으로
var objTest=$("#test");

 
John Resig @ Kings of Code 08
John Resig @ Kings of Code 08 by jaf 저작자 표시비영리동일조건 변경허락

2010. 7. 6. 17:09 COMPUTER/JAVASCRIPT, JQUERY
[JAVASCRIPT/SCRIPT] 디데이(D-Day), 지난날짜 계산하기

1. getTime() 메소드는 1970년 0시 0분 0초부터 해당시간까지의 밀리세컨드 타임으로 반환합니다.
2. 특정날짜와 현재시간을 getTime()으로 시간차를 얻은 후, 8640000으로 나누면 두날짜의 차이를 구할 수 있습니다.


예제1
var now=new Date();
var then=new Date("august 26, 2009");
var gap=now.getTime()-then.getTime();
gap=Math.floor(gap/ (1000*60*60*24));
document.write(now.getTime()+" "+then.getTime()+" "+(now.getTime()-then.getTime())+"<br>");
document.write(gap+"<br>");

 

예제2
var now=new Date();
var dday=new Date();
dday.setYear(2009);
dday.setMonth(8-1);
dday.setDate(23);
var togo=dday.getTime()-now.getTime();
var days=Math.abs(Math.floor(togo/(1000*60*60*24)));
document.write(days+'일');

2010. 3. 8. 23:36 COMPUTER/JAVASCRIPT, JQUERY
[JS,CSS] 잘까먹는 속성, 함수들
객체로 지정한 태그들의 위치값을 알아낼 수 있다

TAG.clientLeft
TAG.clientTop
TAG.clientWidth
TAG.clientHeight
TAG.offsetLeft
TAG.offsetTop

영역안에서 글씨가 넘어가버릴때 여러줄로 강제
word-wrap:break-word;word-break:break-all

한줄로 표시하고 점점점처리

NOBR width:WIDTH;text-overflow:ellipsis;overflow:hidden


페이지에서 루프 돌릴때 사용

ID=setInterval("FUNCTION()",INTERVAL);
ID=setTimeout("FUNCTION()",INTERVAL);
clearInterval(ID);

최근에 올라온 글

최근에 달린 댓글