'IT&middot;컴퓨터' 태그의 글 목록 (2 Page)

'IT·컴퓨터'에 해당되는 글 25건

한글 2바이트 1글자로 길이 체크

[javascript-tip]문자열(한글 2바이트 1글자로 인식) 길이 체크

한글 2Byte를 1글자로 인식하는 javascript 예제입니다.

<html>
<head>
<title>[javascript-tip]문자열(한글 2바이트 1글자로 인식) 길이 체크</title>
</head>
<script language="JavaScript">
<!--
function check()
{
var string = document.a.test.value;
alert(getStringLength(string));
}

// 문자열 길이 체크 알파뉴메릭(1자리), 한글(2자리)
function getStringLength (str)
{
var retCode = 0;
var strLength = 0;

   for (i = 0; i < str.length; i++)
   {
    var code = str.charCodeAt(i)
    var ch = str.substr(i,1).toUpperCase()

code = parseInt(code)

    if ((ch < "0" || ch > "9") && (ch < "A" || ch > "Z") && ((code > 255) || (code < 0)))
     strLength = strLength + 2;
    else
     strLength = strLength + 1;
   }
   return strLength;
}
//-->
</script>
</head>
<body>
<form name="a">
<input type="text" name="test"><input type="button" value="체크" onClick="JavaScript:check();">
</form>
</body>
</html>

Posted by 은둔고수

키보드 입력시 아스키코드값 알아내기

[javascript-tip]키보드 입력시 아스키코드값 알아내기

<html>
<head>
<title>[javascript-tip]키보드 입력시 아스키코드값 알아내기</title>

function pKeydown(event)
{
var event = window.event ? window.event : event;
var ecode = event.charCode ? event.charCode : event.keyCode;

   // 아스키코드값 출력
   document.getElementById("retView").innerHTML = ecode;
   alert(ecode);
}
//-->
</script>
</head>
<body>
<h1>키보드 입력시 아스키코드값 알아내기</h1>
<div>키보드를 눌러보세요.^^</div>
<div id="retView"></div>
</body>
</html>

Posted by 은둔고수

onload 여러 곳에서 사용하기

[javascript-tip(ie,ff)]onload 여러 곳에서 사용하기

자바스크립트를 사용하다보면 한페이지 안에서 onload 이벤트를 여러번 사용할 필요를 가끔 느끼게 된다.
여러가지 고급기술도 있겠지만 간단하고 편한 코드가 있어 소개한다.

/*

addLoadEvents( func )
*/
function addLoadEvents( func )
{
var oldonload = window.onload;
if ( typeof window.onload != 'function' ){
    window.onload = func;
} else {
    window.onload = function()
    {
      oldonload();
      func();
    }
}
}

[사용법]

addLoadEvents(불러올 함수1);
addLoadEvents(불러올 함수2);
.
.
addLoadEvents(불러올 함수x);

Posted by 은둔고수

메뉴 슬라이딩 효과

[javascript-tip]메뉴 슬라이딩 효과

<html>
<head>
<title>[javascript-tip]메뉴 슬라이딩 효과</title>

width:150px;
cursor:hand;
}

.submenu {
    width:150px;
    padding-left:10px;
    display:none;
    cursor:hand;
}
-->
</style>
<script language="javascript">
<!--
function slide(Id, interval, to)
{
    var obj = document.getElementById(Id);
    var H, step = 5;

    if (obj == null) return;
    if (to == undefined) { // user clicking
        if (obj._slideStart == true) return;
        if (obj._expand == true) {
            to = 0;
            obj.style.overflow = "hidden";
        } else {
            slide.addId(Id);
            for(var i=0; i < slide.objects.length; i++) {
                if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
                    slide(slide.objects[i].id);
                }
            }

            obj.style.height = "";
            obj.style.overflow = "";
            obj.style.display = "block";
            to = obj.offsetHeight;
            obj.style.overflow = "hidden";
            obj.style.height = "1px";
        }
        obj._slideStart = true;
    }

    step            = ((to > 0) ? 1:-1) * step;
    interval        = ((interval==undefined)?1:interval);
    obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";

    if (H <= 0) {
        obj.style.display = "none";
        obj.style.overflow = "hidden";
        obj._expand = false;
        obj._slideStart = false;
    } else if (to > 0 && H >= to) {
        obj.style.display = "block";
        obj.style.overflow = "visible";
        obj.style.height = H + "px";
        obj._expand = true;
        obj._slideStart = false;
    } else {
        setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
    }
}
slide.objects = new Array();
slide.addId = function(Id)
{
    for (var i=0; i < slide.objects.length; i++) {
        if (slide.objects[i].id == Id) return true;
    }
    slide.objects[slide.objects.length] = document.getElementById(Id);
}
//-->
</script>
</head>
<body>
<h1>[javascript-tip]메뉴 슬라딩 효과</h1>

<div class="menu" onClick="slide('sub1');">Tree1</div>
<div id="sub1" class="submenu">
    <div> + SubTree1-1</div>
    <div> + SubTree1-2</div>
    <div> + SubTree1-3</div>
    <div> + SubTree1-4</div>
    <div> + SubTree1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">Tree2</div>
<div id="sub2" class="submenu">
    <div> + SubTree2-1</div>
    <div> + SubTree2-2</div>
    <div> + SubTree2-3</div>
    <div> + SubTree2-4</div>
</div>
<div class="menu" onClick="slide('sub3');">Tree3</div>
<div id="sub3" class="submenu">
    <div> + SubTree3-1</div>
    <div> + SubTree3-2</div>
    <div> + SubTree3-3</div>
</div>
<div class="menu">이건 다른 메뉴</div>
</body>
</html>

Posted by 은둔고수

Stack overflow at line

[javascript-error]Stack overflow at line

무한루프에 빠지면 나타나는 현상으로 스택이 넘쳤다는 뜻이다.

Stack.overflow at line: 0

이런 식으로 맨 뒤에 숫자가 있다.

그 숫자에 해당하는 라인을 참조하여 디버깅을 한다.

Posted by 은둔고수

날짜 관련 함수 모음

[mysql-함수]날짜 관련 함수 모음

dayofweek(date)

날짜를 한 주의 몇 번째 요일인지를 나타내는 숫자로 리턴한다.

(1 = 일요일, 2 = 월요일, ... 7 = 토요일)

mysql> select dayofweek('1998-02-03');

-> 3

weekday(date)

날짜를 한 주의 몇 번째 요일인지를 나타내는 숫자로 리턴한다. (0 = 월요일, 1=화요일 ... 6 = 일요일)

mysql> select weekday('1997-10-04 22:23:00');

-> 5

mysql> select weekday('1997-11-05');

-> 2

dayofmonth(date)

그 달의 몇 번째 날인지를 알려준다. 리턴 값은 1에서 31 사이이다.

mysql> select dayofmonth('1998-02-03');

-> 3

dayofyear(date)

한 해의 몇 번째 날인지를 알려준다. 리턴 값은 1에서 366 사이이다.

mysql> select dayofyear('1998-02-03');

-> 34

month(date)

해당 날짜가 몇 월인지 알려준다. 리턴 값은 1에서 12 사이이다.

mysql> select month('1998-02-03');

-> 2

dayname(date)

해당 날짜의 영어식 요일이름을 리턴한다.

mysql> select dayname("1998-02-05");

-> thursday

monthname(date)

해당 날짜의 영어식 월 이름을 리턴한다.

mysql> select monthname("1998-02-05");

-> february

quarter(date)

분기를 리턴한다 (1~ 4)

mysql> select quarter('98-04-01');

-> 2

week(date)

week(date,first)

인수가 하나일 때는 해달 날짜가 몇 번째 주일인지(0 ~ 52)를 리턴하고 2개일 때는 주어진 인수로 한 주의 시작일을 정해 줄 수 있다. 0이면 일요일을1이면 월요일을 한 주의 시작일로 계산해 몇 번째 주인가 알려준다.

mysql> select week('1998-02-20');

-> 7

mysql> select week('1998-02-20',0);

-> 7

mysql> select week('1998-02-20',1);

-> 8

year(date)

년도를 리턴한다.(1000 ~ 9999)

mysql> select year('98-02-03');

-> 1998

hour(time)

시간을 알려준다.(0 ~ 23)

mysql> select hour('10:05:03');

-> 10

minute(time)

분을 알려준다(0 ~ 59)

mysql> select minute('98-02-03 10:05:03');

-> 5

second(time)

초를 알려준다(0 ~ 59)

mysql> select second('10:05:03');

-> 3

period_add(p,n)

yymm 또는 yyyymm 형식으로 주어진 달에 n개월을 더한다. 리턴 값은 yyyymm의 형식이다.

mysql> select period_add(9801,2);

-> 199803

period_diff(p1,p2)

yymm 또는 yyyymm 형식으로 주어진 두 기간사이의 개월을 구한다

mysql> select period_diff(9802,199703);

-> 11

date_add(date,interval expr type)

date_sub(date,interval expr type)

adddate(date,interval expr type)

subdate(date,interval expr type)

위의 함수들은 날자 연산을 한다. 잘 만 사용하면 꽤나 편리한 함수 들이다. 모두 mysql 3.22 버전에서 새롭게 추가되었다. adddate() 과 subdate() 는 date_add() 와 date_sub()의 또 다른 이름이다.

인수로 사용되는 date 는 시작일을 나타내는 datetime 또는date 타입이다. expr 는 시작일에 가감하는 일수 또는 시간을 나타내는 표현식이다.

type 값의 의미
사용 예

second, seconds
초
minute, minutes
분

hour, hours
시간
day, days
일
month, months
월
year, years
년

minute_second, "minutes:seconds"
분:초
hour_minute, "hours:minutes"
시:분
day_hour, "days hours"
일 시
year_month, "years-months"
년 월
hour_second, "hours:minutes:seconds"
시 분
day_minute, "days hours:minutes"
일, 시, 분
day_second, "days hours:minutes:seconds"
일, 시, 분, 초

[예제]

mysql> select date_add("1997-12-31 23:59:59",interval 1 second);

-> 1998-01-01 00:00:00

mysql> select date_add("1997-12-31 23:59:59",interval 1 day);

-> 1998-01-01 23:59:59

mysql> select date_add("1997-12-31 23:59:59",interval "1:1" minute_second);

-> 1998-01-01 00:01:00

mysql> select date_sub("1998-01-01 00:00:00",interval "1 1:1:1" day_second);

-> 1997-12-30 22:58:59

mysql> select date_add("1998-01-01 00:00:00",interval "-1 10" day_hour);

-> 1997-12-30 14:00:00

mysql> select date_sub("1998-01-02", interval 31 day);

-> 1997-12-02

to_days(date)

주어진 날짜를 0000년부터의 일수로 바꾼다.

mysql> select to_days(950501);

-> 728779

mysql> select to_days('1997-10-07');

-> 729669

from_days(n)

주어진 일수 n로부터 날짜를 구한다

mysql> select from_days(729669);

-> '1997-10-07'

date_format(date,format)

format 의 정의에 따라 날자 혹은 시간을 출력한다. 매우 빈번히 쓰이는 함수 이다.

format 에 사용되는 문자는 다음과 같다.

%m
월이름 (january..december)

%w
요일명 (sunday..saturday)

%d
영어식 접미사를 붙인 일(1st, 2nd, 3rd, etc.)

%y
4자리 년도

%y
2자리 년도

%a
짧은 요일명(sun..sat)

%d
일(00..31)

%e
일(0..31)

%m
월(01..12)

%c
월(1..12)

%b
짧은 월이름 (jan..dec)

%j
한해의 몇 번째 요일인가 (001..366)

%h
24시 형식의 시간 (00..23)

%k
24시 형식의 시간 (0..23)

%h
12시 형식의 시간 (01..12)

%i
12시 형식의 시간 (01..12)

%l
시간 (1..12)

%i
분 (00..59)

%r
시분초12시 형식 (hh:mm:ss [ap]m)

%t
시분초 24시 형식 (hh:mm:ss)

%s
초 (00..59)

%p
am 또는 pm 문자

%w
일주일의 몇 번째 요일인가(0=sunday..6=saturday)

%U
한해의 몇 번째 주인가(0..52). 일요일이 시작일

%u
한해의 몇 번째 주인가(0..52). 월요일이 시작일

%%
`%' 문자를 나타냄

위 표에 나와 있는 것들을 제외한 모든 문자는 그냥 그대로 출력된다.

mysql> select date_format('1997-10-04 22:23:00', '%w %m %y');

-> 'saturday october 1997'

mysql> select date_format('1997-10-04 22:23:00', '%h:%i:%s');

-> '22:23:00'

mysql> select date_format('1997-10-04 22:23:00',

'%d %y %a %d %m %b %j');

-> '4th 97 sat 04 10 oct 277'

mysql> select date_format('1997-10-04 22:23:00',

'%h %k %i %r %t %s %w');

-> '22 22 10 10:23:00 pm 22:23:00 00 6'

주의! : mysql 3.23 버전부터 % 기호가 각 형식문자 앞에 필요하게 되었다 그 이전 버전에서는 선택 사항이다.

time_format(time,format)

이 함수는 date_format()와 비슷한 역할을 하지만 단지 시,분,초 만을 나타낼 수 있다는 점이다.

curdate()

current_date()
오늘 날짜를 'yyyy-mm-dd' 또는 yyyymmdd 형식으로 리턴한다, 리턴 값은 이 함수가 문자열로 쓰이느냐 숫자로 쓰이느냐에 따라 달라진다.

mysql> select curdate();

-> '1997-12-15'

mysql> select curdate() + 0;

-> 19971215

curtime()

current_time()

'hh:mm:ss' 또는 hhmmss 형식으로 현재시간을 나타낸다. 리턴 값은 이 함수가 문자열로 쓰이느냐 숫자로 쓰이느냐에 따라 달라진다.

mysql> select curtime();

-> '23:50:26'

mysql> select curtime() + 0;

-> 235026

now()

sysdate()

current_timestamp()

오늘 날자와 현재 시간을 'yyyy-mm-dd hh:mm:ss' 또는 yyyymmddhhmmss 형식으로 리턴 한다, 역시 리턴 값은 이 함수가 문자열로 쓰이느냐 숫자로 쓰이느냐에 따라 달라진다. 실제 개발 시 사용자의 등록일시 등을 나타낼 때 유용하게 쓰이는 함수다. 뒷부분의 실전예제에서 보게 될 것이다.

mysql> select now();

-> '1997-12-15 23:50:26'

mysql> select now() + 0;

-> 19971215235026

unix_timestamp()

unix_timestamp(date)

인수가 없이 사용될 경우 현재 시간의 유닉스 타임스탬프를 리턴하고

만일 날짜형식의 date 가 인수로 주어진 경우에는 주어진 날짜의 유닉스 타임스탬프를 리턴한다 유닉스 타임스탬프 란 그리니치 표준시로 1970 년 1월 1일 00:00:00 이 후의 시간경과를 초단위로 나타낸 것이다.

mysql> select unix_timestamp();

-> 882226357

mysql> select unix_timestamp('1997-10-04 22:23:00');

-> 875996580

주의 : 만일 unix_timestamp함수가 timestamp 컬럼 에서 사용될 경우에는 주어진 시간이 타임스탬프로 바뀌지 않고 그대로 저장된다.

from_unixtime(unix_timestamp)

주어진 유닉스 타임스탬프 값으로부터 'yyyy-mm-dd hh:mm:ss' 또는 yyyymmddhhmmss 형식의 날짜를 리턴한다.

mysql> select from_unixtime(875996580);

-> '1997-10-04 22:23:00'

mysql> select from_unixtime(875996580) + 0;

-> 19971004222300

from_unixtime(unix_timestamp,format)

주어진 유닉스 타임스탬프 값을 주어진 날짜 형식에 맞게 바꿔서 보여준다. 여기서 사용되는 형식문자는 date_format() 함수에서 사용된 것과 같다.

아래 예에서 %x 는 형식문자가 아니므로 그냥 x 가 표시됨에 유의하기 바란다.

mysql> select from_unixtime(unix_timestamp(),

'%y %d %m %h:%i:%s %x');

-> '1997 23rd december 03:43:30 x'

sec_to_time(seconds)

주어진 초를 'hh:mm:ss' 또는 hhmmss 형식의 시간단위로 바꿔준다.

mysql> select sec_to_time(2378);

-> '00:39:38'

mysql> select sec_to_time(2378) + 0;

-> 3938

time_to_sec(time)

주어진 시간을 초 단위로 바꿔준다.

mysql> select time_to_sec('22:23:00');

-> 80580

mysql> select time_to_sec('00:39:38');

-> 2378

[예제]

쿼리문으로 날짜계산
$query = "SELECT (now() - interval ′1 month′)::timestamp"; // 현재 부터 한 달 전 날짜

$query = "SELECT (now() + interval ′6 month′)::timestamp"; // 현재 부터 6 달 후 날짜 ...

[Q/A] mysql에서 타임스탬프값을 날짜값으로 바꿔주는 함수 있나요?
select from_unixtime(날짜필드) ...

하시면 우리가 보는 시간으로 보일거예요~

[MySQL에서 제공하는 날자 관련 함수]

DAYOFMONTH(date) : 날짜만 리턴해주는 함수. (1-31) 한달을 단위로.
DAYOFYEAR(date) : 이역시 날짜만 리턴. (1-366) 1년을 단위로.
TO_DAYS(date) : 연도와 달을 모두 날짜화 시켜서 리턴해줍니다.
(1999-01-01 = (1999 * 365) + (01 * 31) + 1)
MONTH(date) : 달을 리턴해주는 함수.
DAYNAME(date) : 요일을 문자로 리턴. (ex :'Thursday')
MONTHNAME(date) : 달을 문자로 리턴. (ex :'February')
WEEK(date) : 해당 연도에 몇번째 주인지를 리턴 (0-52)
YEAR(date) : 연도를 리턴 (1000-9999)
HOUR(time) : 시간 리턴
MINUTE(time) : 분 리턴
SECOND(time) : 초 리턴

DATE_FORMAT(date,format)

     `%W'    Weekday name (`Sunday'..`Saturday')
     `%D'    Day of the month with english suffix (`1st', `2nd', `3rd',
             etc.)
     `%Y'    Year, numeric, 4 digits
     `%y'    Year, numeric, 2 digits
     `%a'    Abbreviated weekday name (`Sun'..`Sat')
     `%d'    Day of the month, numeric (`00'..`31')
     `%e'    Day of the month, numeric (`0'..`31')
     `%m'    Month, numeric (`01'..`12')
     `%c'    Month, numeric (`1'..`12')
     `%b'    Abbreviated month name (`Jan'..`Dec')
     `%j'    Day of year (`001'..`366')
     `%H'    Hour (`00'..`23')
     `%k'    Hour (`0'..`23')
     `%h'    Hour (`01'..`12')
     `%I'    Hour (`01'..`12')
     `%l'    Hour (`1'..`12')
     `%i'    Minutes, numeric (`00'..`59')
     `%r'    Time, 12-hour (`hh:mm:ss [AP]M')
     `%T'    Time, 24-hour (`hh:mm:ss')
     `%S'    Seconds (`00'..`59')
     `%s'    Seconds (`00'..`59')
     `%p'    `AM' or `PM'
     `%w'    Day of the week (`0'=Sunday..`6'=Saturday)
     `%U'    Week (`0'..`52'), Sunday is the first day of the week.
     `%u'    Week (`0'..`52'), Monday is the first day of the week.
     `%%'    Single `%' characters are ignored. Use `%%' to produce a
             literal `%' (for future extensions).

Posted by 은둔고수

CSS hack 정리

[css-tip]CSS hack 정리
다양한 브라우저와 브라우저의 버그를 이용하여 특정 브라우저에만 css를 적용하는 것을 "CSS 핵"이라고 한다. 크로스브라우징을 위해 사용을 하고 있지만 사용하지 않고 구현하기를 권장한다.

css 핵은 사용하지 않는 것이 좋다.
새로운 브라우저가 생겼을 경우나 기존 브라우저의 버전 변경시 다시 손을 봐야 하는 경우가 생길 수도 있으며 css 문법상 올바르지 않는 것도 있을 수 있고 무엇보다 크로스브라우징, 웹 표준에 맞지 않아 올바른 CSS 라고 볼 수가 없다.

스타핵 (star hack)
셀렉트 앞에 * 을 붙히며 Win IE 4~7 에만 적용(IE8, FF에는 적용 안됨)
예> P { padding:3px; *padding:0px; } /* IE8, FF는 padding:3px, IE4~7는 padding:0px 적용 */

셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 에만 적용
예> * html p { padding:3px; } /* 맨앞에 *html 을 붙힌다. */

언더스코어 핵 (underscore hack)
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6에만 적용

예> p { _padding:3px; } /* padding 앞에 _ 를 붙힌다. */
 
해시 핵 (hash hack)

속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 적용
(CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않다.)
예> p { #padding:3px; } /* padding(속성) 앞에 #를 붙힌다. */
 
스타 7 핵 (star 7 hack)

셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 에만 적용
(html* 과 선택자 사이에 공백을 두면 안된다.)
예> html*p { padding:3px; }
 
IE7 전용핵

셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용
예> *:first-child+html p { padding:3px; }
 
사파리용 핵

body:first-of-type

예> body:first-of-type #wrap
 
이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있다.
 
 
소스 예>
style="text-align:left;padding-left:5px;*padding-left:7px;_padding-left:0px;"
 
소스 예 설명> 위 소스 중 padding 부분
[ff,ie8]padding-left:5px;
[ie7]*padding-left:7px;
[ie6]_padding-left:0px;
 

Posted by 은둔고수

css 초기화

[css-tip]css 초기화

초기화를 하지 않는 경우 브라우저마다 버전마다 기본으로 지정되어있는 css를 사용하게되어 크로스브라우징을 구현하는데 문제가 된다.

초기화를 하게 되면 모든 브라우저에서 다 공통으로 지정이되므로 크로스브라우징을 구현함에 있어서 권장한다.

아래 에를 참고로 본인이 원하는 css 초기화를 구현할 수 있다.

예> * 는 전체를 뜻한다.

/* css 초기화 */

*{

margin:0; /* margin 여백 : 0 */

padding:0; /* padding 여백 : 0 */

border:0; /* 선 굵기 : 0 */

background-color:transparent; /* 배경색상 투명 */

color:#666; /* 색상 */

font-size:100%; /* 폰트 크기 */

font-weight:normal; /* 폰트 굴기 */

font-style:normal; /* 폰트 모양 */

text-decoration:none; /* 폰트 장식 */

}

Posted by 은둔고수

컬러이미지를 흑백이미지로 바꾸기

[css-tip]컬러이미지를 흑백이미지로 바꾸기

img 태그 속성에 style="filter:gray(enabled=1)" 삽입한다.

예>

<img src="http://www.twar.co.kr/images/text_board/sample_s5.gif"

style="filter:gray(enabled=1)" />

Posted by 은둔고수

CSS 불투명/투명 테이블 만들기

[css-tip]CSS 불투명/투명 테이블 만들기

Posted by 은둔고수

이건없지

'IT·컴퓨터'에 해당되는 글 25건

한글 2바이트 1글자로 길이 체크

키보드 입력시 아스키코드값 알아내기

onload 여러 곳에서 사용하기

메뉴 슬라이딩 효과

Stack overflow at line

날짜 관련 함수 모음

CSS hack 정리

css 초기화

컬러이미지를 흑백이미지로 바꾸기

CSS 불투명/투명 테이블 만들기

카테고리

최근에 올라온 글

최근에 달린 댓글

태그목록

최근에 받은 트랙백

공지사항

티스토리툴바