세상사즐겁고행복하게

오늘은 자바스크립트에서 C++에서 처럼 sprintf 나 print 을 구현해 보겠습니다. 자바스크립트에서는 이런 기능이 없어서 직접 구현을 해주어야 합니다. 이런 부분이꼭 필요한 부분이죠~ * 소스코드 String.prototype.repeat = function(n) { var sRet = ""; for (var i = 0; i < n; i++) sRet += this; return sRet; } String.prototype.format = function(/* ... */) { var args = arguments; var idx = 0; return this.replace(/%(-?)([0-9]*\.?[0-9]*)([s|f|d|x|X|o])/g, function(all, sign, format,..

오늘은 구글에서 제공하는 API 중 가장 많이 사용하는 차트에 대해 연재를 하려 합니다. 기본 골격은 다 동일하고, 데이터 set도 다 동일하며, 생성하고자하는 함수만 다르게 하면 쉽게 구현할 수 있습니다. 다만 아래에 제가 구성해 놓은 자바스크립트 구조를 가져야 하겠죠~~ 기본적으로 google api chart 는 https://developers.google.com/chart/ 에서 볼 수 있습니다. 이제 아래의 소스만 가지고 있으시면 쉽게 만들 수 있습니다. * 소스코드 제일 중요한 부분이 두가지인데 data.addRows 에 표시하고자하는 숫치를 구성에 맞게 해야하고, options 에서 그 수치 규성에 맞게 옵션치를 한뒤, 바차트는 ColumnChart 을 호출을 하게 되면.. 위 처럼 데이터..

오늘은 전 시간에 이어 Pie 차트를 만들어 보겠습니다. 바차트에 대해 궁금하시거나 구글차트에 대해 궁금하신 분은 아래 링크 클릭해 주세요. http://neoryuee.tistory.com/91 전시간은 바차트 였고 오늘은 파이 차트입니다. * 소스코드 제일 중요한 부분이 두가지인데 data.addRows 에 표시하고자하는 숫치를 구성에 맞게 해야하고, options 에서 그 수치 규성에 맞게 옵션치를 한뒤, 파이차트는 PieChart을 호출을 하게 되면.. 위 처럼 데이터 차트가 표시가 됩니다. #Pie#구글#만들기#차트#파이차트

오늘은 asp에서 리스트 페이지에서 보면 마우스 오버 시 한줄이 선택이 되는 것처럼 색상이 변경이 되어 보이는 사이트를 보셨을 건데 어떻게 하는지에 대해 간단한 방법으로 할 수 있는 방법을 소개합니다. 공용 asp 파일에서 tr_color = "#FFFFFF" tr_roll = "onmouseover='this.style.backgroundColor=""#CCCCEE"";return true;' onmouseout='this.style.backgroundColor="""&tr_color&""";return true;' " 위와 같이 해 놓고, (보면 기본 배경은 흰색, onmouseover 시 CCCCEE 색상으로 변경 onmouseout 시 기존 정의된 배경인 FFFFFF 으로 변경 입니다. 그래서 d..

자바스크립트로 버튼을 예쁘게 만들어 사용해 보세요. /*css*/ .btn { background-color:transparent; color:transparent; cursor:pointer; border:none; } /*javascript*/ function jsButton(width,height,func,txt,icon) { var btn = ""; if(icon) icon = " "; else icon = ""; btn += ""; btn += ""; btn += ""; btn += ""+icon+txt+""; btn += ""; document.write(btn); } function jsButtonImage(width,height,func,txt,icon) { var btn = ""; if(..

오늘은 자바스크립트에서 mid 함수를 소개하겠습니다. 원래 substring 이란 함수가 있지만.. 정확한 바이트 단위의 mid 을 해야할 경우도 있기때문에 아래의 함수를 구현해야 합니다. * 소스코드 function getByteLength( data ) { var str = data; var l = 0; if( str == "") return l; for (var i=0; i 128) ? 2 : 1; return l; return len; } function Mid(str, st, en) { var len = getByteLength(str); var iEnd; if (st len ){ //시작점의 길이가 문자열의 길이보다 짧을..

오늘은 자바스크립트에서 AES 암호화 방법에 대해서 설명하고자 합니다. 현재 웹사이트에 AES 암호화 방법이 많이 있지만. 정확히 동작하지않는 경우가 있어서 현재 제가 사용하고 있는 js 을 소개해 드리고 간단한 주석을 달았습니다. 아래 화면은 암호화 복호화에 대한 설명인데 그냥 참고용으로 보시면 되고, 실질적으로 지정된 js코드를 넣고 암호화할 문자열을 넘기면 됩니다. 중요한 부분은 암호화 키 부분인데 이 부분은 상호 간에 협의가 되어야 하는 부분입니다. 그리고 암호화 후 자동으로 Base64 로 엔코딩 됩니다. * 소스코드 (js) var aes_key = "abcdefghijklmnopqrstuvwxyz123456"; // 상호 협의된 암호키 var GibberishAES = (function(){..

오늘은 구글에서 제공하는 API 중 가장 많이 사용하는 차트에 대해 연재를 하려 합니다. 기본 골격은 다 동일하고, 데이터 set도 다 동일하며, 생성하고자하는 함수만 다르게 하면 쉽게 구현할 수 있습니다. 다만 아래에 제가 구성해 놓은 자바스크립트 구조를 가져야 하겠죠~~ 기본적으로 google api chart 는 https://developers.google.com/chart/ 에서 볼 수 있습니다. 이제 아래의 소스만 가지고 있으시면 쉽게 만들 수 있습니다. * 소스코드 제일 중요한 부분이 두가지인데 data.addRows 에 표시하고자하는 숫치를 구성에 맞게 해야하고, options 에서 그 수치 규성에 맞게 옵션치를 한뒤, 바차트는 ColumnChart 을 호출을 하게 되면.. 위 처럼 데이터..

자바스크립트에서 예전에 문의을 많이 받았었고, 검색을 좀 하면 나오는 내용이지만.. submit 을 할 때 target 페이지가 두 번 호출되는 문제에 대해 설명하고자 합니다. 이 부분의 원인은 웹페이지를 만들 때 submit 속성을 가진 버튼이나 이미지를 사용하지 않고, 일반 버튼이나 이미지를 onclick, href 을 통해서 함수를 호출하게 되고 그 안에서 onsubmit 을 하게 되면. onsubmit 이벤트가 한번 더 발생하게 됩니다. 그래서 저같은 경우는 다양한 개발과 유지관리가 용이해야 하기 때문에 submit 속성을 가진 버튼은 사용하지 않고, onclick을 통해서 처리를 합니다. 그러니 당연히 onsubmit 이벤트가 한번 더 발생을 하게 됩니다. 이 이부분을 해결하는 법은 form 태..

오늘은 자바스크립트에서 alert 을 많이 사용하는데 고정적인 형태가 아니라 원하는 형식의 alert 창을 만드는 법을 설명하고자 합니다. 보통 modal 을 사용하면 되지만 또 다른 html 파일이 필요하고, 간단히 구현하려 하기는 거추장스러운 부분이 있어 아래 소스를 소개하고자 합니다. 브라우저 버젼에 따라 안되는 경우가 있을 수 있습니다. 그때는 구글링으로~~ * 소스코드 var popMsg = window.createPopup(); // 인자야 임의로 알아서 하시면 됩니다. // x, y, width, height, : 시작, 크기~ // msg : 메세지 // flag : 닫기 클릭 시의 포커스 function showAlert(x, y, width, height, msg, flag) { var..