자바스크립트 바이트 ( Byte ) 수 만큼 입력 제한자바스크립트 바이트 ( Byte ) 수 만큼 입력 제한

Posted at 2011/12/08 10:44 | Posted in Dev/Script

사용법 : onkeyup="ByteChk('title', 27, 'titleremain');"
           onkeydown="ByteChk('title', 27, 'titleremain');"


content : 입력 Input text
limitByte: 바이트 제한
remain : 남은 바이트 수 표시

스크립트 
function ByteChk(content, limitByte, remain) {
            var content = document.getElementById(content);
            var temp_str = content.value;
            var remain = document.getElementById(remain);

            remain.value = limitByte - getByte(temp_str);
            if (remain.value < 0) {
                alert(limitByte + "Bytes를 초과할 수 없습니다.");

                while (remain.value < 0) {
                    temp_str = temp_str.substring(0, temp_str.length - 1);
                    content.value = temp_str;
                    remain.value = limitByte - getByte(temp_str);
                }

                content.focus();
            }
        }

        function getByte(str) {
            var resultSize = 0;
            if (str == null) {
                return 0;
            }

            for (var i = 0; i < str.length; i++) {
                var c = escape(str.charAt(i));
                if (c.length == 1) {
                    resultSize++;
                }
                else if (c.indexOf("%u") != -1) {
                    resultSize += 2;
                }
                else {
                    resultSize++;
                }
            }

            return resultSize;
        }

역시 스크립트는 삽질이 필수 -_-; 
저작자 표시 비영리

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

자바스크립트 쿠키(javascript cookie)자바스크립트 쿠키(javascript cookie)

Posted at 2009/08/14 17:41 | Posted in Dev/Script
◆자바스크립트 쿠키(cookie)
자바스크립트 쿠키는 CGI의 HTTP Cookie와 내용 및 작동하는 법은 같으나 약간의 차이가 있습니다. 아래는 자바스크립트 쿠키에 대한 개요입니다.
  1. 자바스크립트에서 지원하는 사용자의 특정 정보를 저장하는 기법
  2. 클라이언트의 브라우저에 저장되나 서버에는 저장되지 않습니다.
  3. 일정 기간 동안만 유효하게 할 수 있고, 유효기간(만료기한)이 설정되지 않을 경우
    브라우저 종료시 자동으로 사라집니다.
  4. 클라이언트에는 브라우저가 실행중에는 메모리에, 종료될 경우 만료기한에 따라
    cookies.txt라는 파일에 저장될 수 있습니다.
  5. 웹 서버의 환경변수 HTTP_COOKIE에는 저장되지 않습니다.
자바스크립트 쿠키는 서버와는 무관하기 때문에 일반적으로 잘 사용하지는 않습니다. 그러나, 클라이언트 내에서는 얼마든지 쿠키의 정보유지기법을 사용할 수 있으므로 간단한 방문 기록 남기기 등에서는 쓰일 수 있습니다. 자바스크립트에서 쿠키를 참조하기 위해서는 document.cookie객체를 사용합니다.
아래는 가장 일반적으로 사용되는 쿠키 관련 자바스크립트 함수들입니다. 아래 함수의 주요 기능은 document.cookie객체의 문자열 조작을 통하여 쿠키로부터 값을 빼내는데 사용됩니다.
function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { //while open var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } //while close return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (2 < argc) ? argv[2] : null; var path = (3 < argc) ? argv[3] : null; var domain = (4 < argc) ? argv[4] : null; var secure = (5 < argc) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); }
위의 함수에서 사용자가 쓸 함수는 GetCookie(), SetCookie()입니다. 사용하는 문법은 아래와 같습니다.
GetCookie
설정되어 있는 쿠키의 값을 가져옵니다.
쿠키값 = GetCookie(name) 인수 설명)
name(필수 요소)
저장된 Cookie의 이름
예)
cookieval = GetCookie('myCookie');
SetCookie
쿠키의 값을 설정한다.
SetCookie(name, value, [expires], [path], [domain], [secure]) 인수 설명)
name(필수 요소)
Cookie에 저장하고자 하는 이름
value(필수 요소)
Cookie에 저장된 이름(name)에 대한 값
expires(생략 가능)
Cookie가 설정된 후 Cookie가 무효화되는 시간이다.
(GMT Type - "Wdy, DD-Mon-YYYY HH:MM:SS GMT")
설정된 시간이 지나게 되면, 이 Cookie는 사용할 수 없게 된다. 만약 expires에 설정된 시간보다 더 일찍 브라우저가 종료될 경우, 브라우저는 자동으로 cookies.txt라는 파일을 생성하여 그 정보를 이 파일에 저장해 둡니다.
Netscape 4.x의 경우)
C:\Program Files\Netscape\Users\[Profile name]\cookies.txt

Internet Explorer 4.x의 경우)
C:\windows\Cookies\[remote user name]@[domain].txt

path(생략 가능)
문서의 경로명을 설정합니다. 설정하지 않으면 현재 Cookie를 보내는 문서의 URL상의 경로(도메인 명 제외)로 설정됩니다.
domain(생략 가능)
웹 서버의 도메인 명을 설정합니다. 설정하지 않으면 현재 Cookie를 보내는 문서가 속한 도메인 명으로 설정됩니다.
secure(생략 가능)
HTTPS Server(HTTP over SSL)와 같은 Secure Server에서 Cookie를 보낼 경우 이 값을 설정해 줍니다.
예 1) 쿠키값만 설정할 경우
SetCookie('myCookie', 1234);
예 2) 쿠키값 및 만료일을 설정할 경우
var ExpDate = new Date();
ExpDate.setTime(ExpDate.getTime() + 1000*60*60*24); SetCookie('myCookie', 1234, ExpDate); ※ 위의 예제는 만료일을 쿠키가 생성되는 현재 시간 + 1일로 설정합니다. 만약, 만료일을 쿠키가 생성된 후 1시간으로 설정하겠다면 위의 예제에서 24(시간)를 1(시간) 로 바꾸어 주면 됩니다.

아래의 예제는 쿠키값을 설정하고, 만료일을 쿠키가 설정된 후 1시간 이후로 설정하는 예제입니다.
쿠키는 설정된 후에 브라우저가 활성화 되어 있고 만료일이 경과되지 않는 한 브라우저에 따라 설정된 디렉토리 내의 cookies.txt를 지우더라도 값이 유지된다는 점을 주의하기 바랍니다. 지금까지 자바스크립트에 대해 알아 보았습니다. 물론 부족한 점이 많겠지만 지금까지 설명한 내용만 가지고도 여러분이 보다 동적이고 기능적인 홈페이지를 만드는데 많은 도움이 될 것입니다

저작자 표시 비영리

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

자바스크립트 속성, 메소드, 이벤트핸들러 - 펌자바스크립트 속성, 메소드, 이벤트핸들러 - 펌

Posted at 2009/05/22 11:08 | Posted in Dev/Script

객체
(Object)

속성
(Property)

메소드
(Method)

이벤트핸들러
(Event Handler)

Anchor

name
text
x
y

 

 

anchors array

length

 

 

Applet!

 

applet!'s methods

 

applet!s array

length

 

 

Area

hash
host
gostname
href
pathname
port
protocol
search
target

 

onClick
onmouseOut
onmouseOver

Array

length

concat
join
pop
push

reverse
shift
slice
sort
unshjft

 

Button

form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp

Checkbox

checked
defaultChecked
form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp 

Date

 

getDate
getDay
getFullYear
getHours
getMilliseconds
getMinutes
getMonth
getSeconds
getTime
getTimezoneOffset
getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
getYear
parse
setDate
setFullYear
setHours
setMilliseconds
setMinutes
setMonth
setSeconds
setTime
setUTCDate
setUTCHours
setUTCMilliseconds
setUTCMinutes
setUTCMonth
setUTCSeconds
setYear
goGMTString
toLocaleString
toString
toUTCString
UTC
valueOf

 

document

activeElement
alinkColor
all
Anchor
anchors
Applet!
applet!s
Area
bgColor
body
charset
children

cookie
defaultCharset
domain
embed
embeds
expando

fgColor
Form
forms
Image
images

lastModified
Layer
layers

linkColor
Link
links
location
parentWindow
plugins

readyState
referrer
scripts
selection
styleSheets

title
URL
vlinkColor

clear
close
createElement
createStylesheet
elementFromPoint
getSelection

open
write
writeIn

 

FileUpload

form
name
type
value

blur
focus

select

onBlur!
onFocus
onSelect

Form

action
Button
Checkbox
elements
encoding
FileUpload
Hidden
length
method
name
Password
Radio
Reset
Select
Submit
target
Text
Textarea

reset
submit

onReset
onSubmit

forms array

length

 

 

frames array

length

 

 

Hidden

form
name
type
value

 

 

History

current
length
next
previous

back
foward
go

 

history array

length

 

 

Image

border
complete
height
hspace
lowsrc
name
src
vspace
width
x
y

 

onAbort
onError
onLoad

images array

length

 

 

Layers

above
background
below
bgColor
clip
document
hidden
left
name
pageX
pageY
parentLayer
siblingAbove
siblingBelow
src
top
visibility
window
x
y
zindex

load
moveAbove
moveBelow
moveBy
moveTo!
moveTo!Absolute
resizeBy
resizeTo!

onBlur!
onFocus
onmouseOut
onmouseOver
onmouseUp

layers array

length

 

 

Link

hash
host
hostname
href
pathname
port
protocol
search
target
text
x
y

 

onClick
onmouseOut
onmouseOver

links array

length

 

 

location

hash
host
hostname
href
pathname
port
protocol
search

reload
replace

 

Math

E
LN2
LN10
LOG2E
LOG10E
PI
SQRT1_2
SQRT2

abs
acos
asin
atan
atan2
ceil
cos
exp
floor
log
max
min
pow
random
round
sin
sqrt
tan

 

MimeType

description
enabledPlugin
suffixes
type

 

 

mimeTypes array

length

 

 

navigator

appCodeName
appMinorVersion
appName
appVersion
browserLanguage
cookieEnabled
cpuClass
languages
mimeTypes

platform
plugins
systemLanguage

userAgent
userLanguage
userProfile

javaEnabled
preference
savePreferences
taintEnabled

 

Number

MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY

toString
valueOf

 

Option

defaultSelected
index
selected
selectedIndex
text
value

 

 

options array

length

 

 

Password

defaultValue
form
name
type
value 

blur
focus
select

onBlur!
onChange
onFocus
onKeydown
onKeypress
onKeyup
onSelect

Plugin

description
filename
name

refresh

 

plugins array

length

 

 

Radio

checked
defaultChecked
form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp 

radio array

length

 

 

Reset

form
name
type
value

blur
click
focus

onClick
onmouseDown
onmouseUp 

screen

availHeight
availLeft
availTop

availWidth
BufferDepth
colorDepth
height
pixelDepth
updayeInterval
width

 

 

Select

form
length
name
options
selectedIndex
type

blur
focus

onChange

String

length

anchor
big
blink
bold
charAt
charCodeAt
concat
fixed
fontcolor
fontsize
formCharCode
indexOf
italics
lastIndexOf
link
match
replace
search
slice
small
split
strike
sub
substr
substring
sup
toLowerCase
toUpperCase 

 

Submit

form
name
type
value

blur
click
focus

onClick
onMouseDown
onMouseUp

Text

defaultValue
form
name
type
value

blur
click
focus
select

onBlur!
onChange
onFocus
onKeydown
onKeyup
onSelect

Textarea

defaultValue
form
name
type
value

blur
click
focus
select

onBlur!
onChange
onFocus
onKeydown
onKeyup
onSelect

window

clientInformation
closed

defaultStatus
dialogArguments
dialogHeight
dialogLeft
dialogLeft
dialogTop
dialogWidth

document
event
frames
history
innerHeight
innerWidth

length
location
locationbar
menubar

name
navigator
offscreenBuffering
opener
outerHeight
outerWidth
pageXOffset
pageYOffset

parent
personalbar
screen
screenX
screenY
scrollbars

self
status
statusbar

toolbar
top

alert!
back
blur

close
confirm!
find
focus
forward
home
moveBy
moveTo!
navigate

open
print
prompt
resizeBy
resizeTo!

scroll
scrollBy
scrollTo
stop

onBlur!
onError
onFocus

onLoad
onResize
onUnload

※ 녹색은 네츠케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다

저작자 표시 비영리

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[자바스크립트] 특수문자 포함 값 전송시 (인코딩/디코딩)[자바스크립트] 특수문자 포함 값 전송시 (인코딩/디코딩)

Posted at 2009/04/22 11:55 | Posted in Dev/Script

특수문자가 포함된 값을 전송할때에는 값을 인코딩하여 전송하면 된다.
인/디코딩 함수는 세가지가 있다.

 

※인코딩                       ※ 디코딩

escape()                       unescape()
encodeURI()                  decodeURI()
encodeURIComponent()  decodeURIComponent()

 

escape는 알파벳과 숫자 및 * @ - _ + . / 를 제외한 문자를 모두 16진수로 바꾸어 준다.

그래서 URL을 인코딩할때는 별로 적합하지 않다.

URL을 통째로 인코딩할 때는 encodeURI()

URL의 파라미터만 인코딩할 때는 encodeURIComponent()를 적용하는게 좋다.

 

참고로.. 디코딩함수를 적용해주지 않아도 값이 넘어가면서 알아서 디코딩되었다.


escape 예제
가나ab ~!@#$%^&*()_+|/?    %uAC00%uB098ab%20%7E%21@%23%24%25%5E%26*%28%29_+%7C/%3F

encodeURI 예제
가나ab ~!@#$%^&*()_+|/?     %EA%B0%80%EB%82%98ab%20~!@#$%25%5E&*()_+%7C/?

encodeURIComponent 예제
가나ab ~!@#$%^&*()_+|/?     %EA%B0%80%EB%82%98ab%20~!%40%23%24%25%5E%26*()_%2B%7C%2F%3F

 

저작자 표시 비영리

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

XMLHTTP의 속성과 메서드XMLHTTP의 속성과 메서드

Posted at 2008/12/22 10:51 | Posted in Dev/Script

 

XMLHTTP는 다음과 같은 메서드를 가지고 있습니다.

 

.abort():현재 동작을 취소합니다.

.getAllResponseHeader():HTTP 헤더의 모든 내용을 반환합니다.

.getResponseHeader("헤더이름"):지정된 HTTP헤더 내용을 반환합니다.

.open(method,url,async,username,password):HTTP요청에 대한 속성을 지정합니다.

    method:파라미터의 전송 방법을 지정합니다. "GET"또는 "POST"로 지정할 수 있습니다.

    url : HTTP 요청을 보낼 원격 페이지의 주소입니다. http://로 시작할 수 없습니다.

    async : 요청을 동기.비동기로 처리할지의 여부입니다. TRUE면 비동기로 처리하고 FALSE면 동기로 처리합니다.

    username,password : HTTP요청에 대한 인증이 필요할 경우 지정할 수 있는 계정 정보로 생략이 가능합니다.

.send(content) : open에 지정한 속성을 이용하여 HTTP 요청을 전송합니다.

    content : HTTP 요청과 함께 전송할 파라미터 또는 콘텐츠 입니다.

.setRequestHeader(key,value) : key/value 쌍의 HTTP 헤더를 전송 목록에 더합니다.

 

이중 XMLHTTP를 사용하기 위한 최소의 필수 메서드는 open과 send 이며, 만일 파라미터를 POST방식으로 전달하고 싶다면 setRequestHeader 메서드가 추가로 필요합니다.

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

다음은 XMLHTTP의 속성 목록입니다.

 

.onreadystatechange : HTTP요청의 상태 변화에 따라 호출되는 이벤트 핸들러입니다.

.readyState : onreadystatechange에서 사용할수 있는 HTTP 요청 상태의 코드 값입니다. 가질수 있는 값들과 의미는 다음과 같습니다.

    0 (uninitialized) : open 메서드가 호출되기 이전.

    1 (loading) : HTTP 요청 준비가 된 상태. 하지만 아직 보내지 않은 상태. send 메서드 호출 전의 상태.

    2 (loaded) : HTTP 요청을 보내어 처리하고 있는 중. 헤더는 읽을 수 있는 상태.

    3 (interactive) : 데이터를 받고 있는 중. 하지만 완전히 받지는 못한 상태.

    4 (complete) : 데이터를 완전히 받은 상태. 비로소 responseText 와 responseXML 속성을 읽을 수 있는 상태.

.responseText : 요청에 대한 응답을 텍스트로 반환합니다.

.responseXML : 연결에 대한 응답을 XML DOM 으로 변환합니다. XML 문자열이 아니라 XML DOM으로 반환한다는 것을 염두해 두세요.

.status : HTTP 상태 코드를 숫자로 반환합니다. 예를 들면 OK에 대해서 200을, 페이지를 찾을수 없었을 때는 404를 반환합니다.

.statusText : HTTP 상태 코드에 대한 문자열을 반환합니다. 예를 들면 "OK", "Not Found" 등이 될수 있습니다.

저작자 표시

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

javascript visibility 스타일, display스타일javascript visibility 스타일, display스타일

Posted at 2008/12/12 14:01 | Posted in Dev/Script

간혹 visibility 스타일을 display스타일과 착각하는 사람들이 많이 있다.

display는 값이 none으로 되어 있을 경우 해당 영역을 차지하지 않지만
visibility의 경우는 값이hidden으로 되어 있어 보이지 않더라도 같은 공간을 차지한다

visibility : 요소(포함하는 컨텐츠 ?)를 보여주느냐 보여주지 않느냐를 결정 하고,

block : 요소(포함하는 컨텐츠 ?)를 inline으로 할건지 block으로 할건지 아예 없는 요소(none)로 할건지를 결정한다.

 즉 visibility는 그 요소가 점유하고 있는 공간은 유지한채 show/hide만 결정하는 것이고

block은 show/hide의 결정이 아닌 그 요소가 점유하고 있는 공간의 존재 여부를 결정하는 것이다.

 display나 visibility 모두 IE, FireFox, NN에 공통으로 적용되는 속성이기 때문에 이상없이 사용이 가능하다.

예: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/display.htm

저작자 표시

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

javescript eval() 함수javescript eval() 함수

Posted at 2008/12/12 13:51 | Posted in Dev/Script

eval()함수는 변수를 javascript의 함수처럼 쓰는 명령어 입니다.

즉.
str += "document.test.check"+i+".value";
위의 뜻은 변수명이 document.test.check1.value 형식으로 들어가는데...
이것을 함수처럼 쓸수는 없다는 뜻입니다.
그냥 저런 문자열이라는 뜻이죠.
결국 str을 alert시키면 document.test.check1.value이 출력되게 됩니다.

그리고
str += eval("document.test.check"+i+".value");
str에 함수이름들이 들어가 있는 겁니다.
그래서alert를 시키면 value가 1이나 2가 찍히게 되는 것이지요.
저작자 표시

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

최근 24시간 동안 새로 올라온 글이 new 이미지 표시메소드(ASP.NET 2.0)최근 24시간 동안 새로 올라온 글이 new 이미지 표시메소드(ASP.NET 2.0)

Posted at 2008/12/08 13:09 | Posted in Dev/Script

// aspx 페이지에서 메소드를 사용하려면...

Visible=''''<%# Board.newPost(Eval("WriterDate").ToString()) %>'''' />  

2.0에서 새로 추가된 이미지 컨트롤입니다.
Visible 속성은 화면에 랜더링할지 않할지 정하는 속성입니다.
이속성에 값을 데이터 바인딩식으로 해서...

<%# Board.newPost(Eval("WriterDate").ToString()) %>
Board는 newPost()메소드가 포함된 클래스입니다 .

2.0에서는 1.x버전때와는 달리 바인딩식이 아주 간단하고 쉬어졌습니다.

1.x : <%# DataBinder.Eval(Container, "DataItem.au_id") %>
         <%# DataBinder.Eval(Container. DataItem,"au_id") %>

2.0 : Eval("WriterDate").

aspx에서 호출할때는  매개변수(파라미터) 데이터 타입은 오브젝트(object) 형입니다. 


// Visible 속성의 value값을 true/false 값을 얻기위해서는
// 항상 함수의 리턴형을 bool형으로 해야한다.

    public static bool newPost(object objDate)
    {
        // object형을 문자열형으로 형변환을 해줍니다.
        string strDate = (string)objDate;

       // 그다음 시간연산을 하기위해서 다시 DateTime 날짜형으로 바꿔준다음..
        DateTime orginDate = DateTime.Parse(strDate);

      // TimeSpan  시간간격을 구할수 있는 구조체입니다.
       TimeSpan gap = DateTime.Now - orginDate;
     
       // 시간차이를 구한것을 분으로 환산하여.. 결과를 리턴합니다.
        if (gap.TotalMinutes < 1440)
            return true;
        else
            return false;
    }

저작자 표시

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

offsetHeight, clientHeight, scrollHeightoffsetHeight, clientHeight, scrollHeight

Posted at 2008/09/18 09:49 | Posted in Dev/Script

offsetHeight offsetWidth 값은 그 객체를 포함하고 있는 상위객체의 레이아웃 또는 좌표와 관련된 높이와 폭의 값입니다.

이와 관련하여 clientHeight 과 clientWidth 값이 있습니다. 이는 실제 웹페이지에 접속한 사용자가 가시적으로 보는 높이와 폭의 값입니다.

이에 대한 비교자료를 링크걸어 놓을테니 이를 통해 두개의 차이를 확인 하시기 바랍니다.

clientHeight 스크롤바를 포함하는 요소의 높이를 반환
 object.clientHieght
clientWidth 스크롤바를 포함하는 요소의 폭을 반환
 object.clientWidth
scrollHeight 스크롤바를 움직이지 않고 보여지는 요소의 전체 높이
 object.scrollHeight
scrollLeft 요소의 왼쪽 스크롤 된 폭을 반환
 object.scrollLeft
scrollTop 요소의 위쪽 스크롤 된 높이를 반환
 object.scrollTop
scrollWidth 스크롤바를 움직이지 않고 보여지는 요소의 전체 폭
 object.scrollWidth

 

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기