너머 ::

'JAVASCRIPT'에 해당되는 글 16건

2012/03/08 모달 팝업창 띄우기
2012/02/02 window.open() 을 post 방식으로 전달할 때
2012/01/04 [javascript] 날짜 비교하기
2011/11/02 alert 창에서 줄바꿈
2011/05/27 모바일 바로가기 아이콘 만들기
2010/08/06 동영상 재생
2010/06/12 숫자형식만 입력받기
2010/06/12 이메일 형식 체크하기
2010/04/30 특정 DIV / TR 숨기기와 보여주기
2009/11/17 팝업창으로 폼방식으로 전달하기
2009/11/14 input type="text" 속성 중 disabled와 readonly의 차이
2009/06/29 웹접근성을 위해 쌍으로 들어가야 할 속성들
2009/06/28 텍스트박스에 특정 언어가 기본적으로 입력되게 할 때
2009/06/25 (연산자) typeof / instanceof
2009/03/05 encodeURI() / encodeURIComponent()에 대해서
2008/08/03 [자바스크립트] 레이어 예제[Inner HTML]

모달 팝업창 띄우기

function openModal(){

var url = "/comm/comm_wrt.jsp?id=<%=boardId%>";

var return_val = window.showModalDialog(url, 'emplWindow', 'dialogWidth:736px;dialogHeight:700px,scrollbars=1,location=0,status=0');
eval(return_val);

}

※ 주의 : 모달팝업창은 웹표준이 아니기때문에, IE, 파이어폭스에서는 정상적으로 나왔으나 크롬에서는 일반팝업창으로 뜨는 것을 확인했다.

Posted by darkhorizon

Trackback 0 Comment 0

window.open() 을 post 방식으로 전달할 때

function onSubmit(){
var myForm = document.popForm;
var url = "/test/popForm.do";
window.open("" ,"popForm",

       "toolbar=no, width=540, height=467, directories=no, status=no,    scrollorbars=no, resizable=no");
myForm.action =url;
myForm.method="post";
myForm.target="popForm";
myForm.testVal = 'test';
myForm.submit();
}

<form name="popForm">
    <input type="hidden" name="cmd" value="openPop" />
    <input type="hidden" name="testval" />
</form>

Posted by darkhorizon

Trackback 0 Comment 0

[javascript] 날짜 비교하기

function calDate(){

var year1 = "2011";
var mon1 = "1";
var day1 = "20";

var year2 = "2012";
var year2 = "1";
var day2 = "20";

var date1 = new Date(year1, mon1, day1);
var date2 = new Date(year2, mon2, day2);
// 날짜를 비교하여 일(日) 단위로 출력한다. 예의 분기조건은 1년 이상이면
if((date2-date1)/1000/60/60/24 > 365){

alert("1년 이상의 단위는 조회하실 수 없습니다");

}

Posted by darkhorizon

Trackback 0 Comment 0

alert 창에서 줄바꿈

1.
<scirpt type="text/javascript">

alert('줄바꿈전 \n줄바꿈후);

</script>

2.
out.println("<script type='text/javascript'>");

out.println("alert('줄바꿈전 \\n줄바꿈후');");

out.println("</script>");

Posted by darkhorizon

Trackback 0 Comment 0

모바일 바로가기 아이콘 만들기

Posted by darkhorizon

Trackback 0 Comment 0

동영상 재생

<param name="filename" value="D:\root\견우직녀만나는날.wma" />
               <param name="autoStart" value="true" />
               
               <object type="video/x-ms-wmv" style="width:306px; height:231px;"
                  data="D:\root\견우직녀만나는날.wma">
               <param name="autostart" value="true" />
               <param name="wmode" value="transparent" />
               <div>동영상파일 : <a href="D:\root\견우직녀만나는날.wma"> </a></div>
               </object>
               
   </object>

Posted by darkhorizon

Trackback 0 Comment 0

숫자형식만 입력받기

숫자만 입력받기 위해서는 먼저
1. 텍스트 박스에 숫자나 영문 형식만 오도록 ime-mode 를 스타일로 지정한다.

<input type="text" id="fTime" name="fTimes" value="" style="width:70px; ime-mode:disabled;" onkeypress="checkNumber(event)" maxlength="100" />

2. 이벤트 발생 시 형식을 체크하도록 한다.

function checkNumber(evt){
var keyCode;
var isNetscape = (navigator.appName == "Netscape") ? 1 : 0;

   if(isNetscape){
      keyCode=evt.which;
        if((keyCode >13 && keyCode < 48) || keyCode > 57){
            evt.preventDefault();
        }
   }else{
         keyCode = event.keyCode;
         if ((keyCode >13 && keyCode < 48) || keyCode > 57){
         event.returnValue=false;
        }
    }
}

Posted by darkhorizon

Trackback 0 Comment 0

이메일 형식 체크하기

public boolean checkEmail(String email){

String regex = "^[_a-zA-Z0-9-\\.]+@[\\.a-zA-Z0-9-]+\\.[a-zA-Z]+$";

Pattern p = Pattern.compile(regex);
Matcher m = p.matcher(email);
boolean isNormal = m.matches();
return isNormal;

}

Posted by darkhorizon

Trackback 0 Comment 0

특정 DIV / TR 숨기기와 보여주기

function divLiterature(num){
$('.divLiterature').hide();

$('#divLiterature'+num).show();
}

TR 이나 DIV에 동일한 클래스와 유일한 ID를 부여하여 위와 같은 FUNCTION을 호출하도록 한다.

Posted by darkhorizon

Trackback 0 Comment 0

팝업창으로 폼방식으로 전달하기

팝업창을 띄우면서 파라미터를 전달할 때, 특수문자여서 깨지는 경우가 발생한다.
이럴 때는 post방식으로 넘겨야 한다.

먼저 빈 팝업창을 띄우고 타겟을 지정하면 된다.

예)
function showPop(){
var form = document.form;
form.membNumb.value = <%=membNumb%>;
form.idx.value = <%=idx%>;
openPopup('','popup', 400, 350, 'yes', 'NO');

  form.action = 'pop_test.jsp';
  form.target = 'popup';
  form.submit();
}

Posted by darkhorizon

Trackback 0 Comment 0

input type="text" 속성 중 disabled와 readonly의 차이

disabled 와 readonly 모두 text에 직접 값을 입력하지 못한다는 점에서는 동일하지만,

disabled로 설정했을 경우에는 value 값을 가져오지 못한다.
따라서 값을 가져오기 위해서는 readonly로 설정해야 한다.

Posted by darkhorizon

Trackback 0 Comment 0

웹접근성을 위해 쌍으로 들어가야 할 속성들

다음의 속성들은 각각 마우스와 키보드에 대한 속성으로 한 쌍을 이루어야 합니다.

▶ onmousedown = onkeydown
▶ onmouseover = onfocus
▶ onmouseout = onblur
<a><button><input type="check"><input type="radio"> 태그 안에서는
▶ onclick = onkeypress
<textarea><input type="text"> 태그 안에서는
▶ onclick = onfocus

Posted by darkhorizon

Trackback 0 Comment 0

텍스트박스에 특정 언어가 기본적으로 입력되게 할 때

"ime-mode:active"      -- 기본적으로 한글모드
"ime-mode:auto"        -- 한/영중 선택된 모드
"ime-mode:inactive"   -- 기본적으로 영문모드
"ime-mode:disabled" -- 무조건 영문(한글 안됨)

Posted by darkhorizon

Trackback 0 Comment 0

(연산자) typeof / instanceof

typeof 의 결과값 : "string" , "number", "object", "undefined"

instanceof의 결과값 : Array, Object, Number

Posted by darkhorizon

Trackback 0 Comment 0

encodeURI() / encodeURIComponent()에 대해서

이 모든 함수는 자바스크립트에서 인코딩을 담당하는 함수이다.

여기서 말하는 인코딩이란, 네트워크를 통해서 정보를 공유할 때 어떤 시스템에서나 읽을 수 있는 ASCII 문자로 바꿔주는 것을 말한다. 모든 네트워크를 통한 전송에는 ASCII 문자가 기반이 된다. 특히 한글이나 특수문자의 경우 이를 2진수 바이트코드로 변환해서 전송하면 받는 상대편의 시스템에 따라 잘못 해석되거나, 해석이 불가능할 수 있기 때문이다.

이를 해결하기 위해 모든 시스템에서 공통으로 읽을 수 있는 ASCII 문자로 바꿔서 데이터를 전송할 필요가 있다.

1. escape()

아래 열거된 아스키문자가 아니라면 모두 유니코드 형식으로 변환한다.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
@*-_+./

그 변환된 형식은 16진수 형식으로 표시되며 1바이트 문자는 %XX 형태로, 2바이트 문자는 %uXXXX 형태로 변환된다.

1바이트 문자는 빈칸(%20)을 들 수 있고, 2바이트 문자는 한글(%uD55C%uAE00)이 있을 수 있다.

가끔 인터넷검색을 하면 주소창에 %XX형식의 문자들이 들어있는 것을 볼 수 있는데, 이는 인코딩 된 것의 한 종류라고 볼 수 있다.

가끔은 홈페이지의 자바스크립트나 HTML 소스, 음원URL을 보기 힘들게 하기 위해 사용하기도 하지만,
이는 자바스크립트의 인코딩을 아는 자라면 어렵지 않게 풀어 사용할 수 있다.

2. encodeURI()

기본적으로는 escape()와 비슷한 동작을 하지만 인터넷 주소표시에 쓰이는 특수문자들을 인코딩하지 않는다.
즉, : ; / = ? & 등의 특수문자는 인코딩이 되지 않는다.
그래서 보통은 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩할 때 사용한다.

3. encodeURIComponent()

기본적인 동작은 역시 escape()와 비슷하지만 인터넷 주소표시에 쓰이는 모든 문자를 추가로 인코딩한다.
즉, : ; / = ? & 등의 특수문자가 추가로 인코딩 되는 것이다.

그래서 인터넷주소(URL) 전체를 인코딩할 때는 사용할 수 없고, 넘기는 필드 하나하나를 따로 인코딩할 때 사용한다.
그 이유는 넘어가는 값이 text="test=&테스트" 이와 같이 text라는 필드 값이 test=&테스트인 경우 그냥 encodeURI()로 인코딩 하면, '=' 나 '&'는 인코딩되지 않아서 필드값을 처리할 때 데이터값이 아닌 여러개의 필드를 넘기는 명령어로 인식할 수 있기 때문이다.

하지만, "http://test.com/test.php?text=테스트" 와 같은 URL 전체를 encodeURIComponent()로 인코딩하게 되면 : / ? 를 모두 인코딩하여 주소를 인식할 수 없게 된다.

4. 실제 인코딩의 차이를 보여주는 Javascript 소스

view plain copy to clipboard print ?

var chr = 'http://test.com/folder1/folder2/default.html?mode=write&value=&*테스트';
document.writeln("original = " + chr + '<br />');
document.writeln("escape() = <font color='red'>" + escape(chr) + "</font><br />");
document.writeln("encodeURI() = <font color='blue'>" + encodeURI(chr) + "</font><br />");
document.writeln("encodeURIComponent() = <font color='orange'>" + encodeURIComponent(chr) + "</font><br />");

위의 소스를 <script></script> 안에 넣고 실행하면 인코딩의 차이를 직접 확인 할 수 있으며,
직접 인코딩과 디코딩 결과를 확인 하고 싶은 경우 "Javascript String Encoder"를 참고하시기 바랍니다.

출처 : http://realmind.tistory.com/191

Posted by darkhorizon

Trackback 0 Comment 0

[자바스크립트] 레이어 예제[Inner HTML]

<!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">
<title>Insert title here</title>
<script type="text/javascript">
<!--

   function go(){
   take=window.prompt();
                var myForm=document.getElementById("myForm");
                myForm.myType.value=take;
   take1=document.getElementById('ana');
   take2=document.getElementById('soc');
   take1.innerHTML=take;

}
//-->

</script>
</head>
<body>

<center id='ana'>아나키즘</center>
<div id='soc'>사회주의</div>

<center>
<form id="myForm" action="" method="post">
<input type="button" value="눌러보시든가~" onClick='go();'>
<input type="text" value=' ' name="myType" size='40'>
</form>
</center>
</body>
</html>

Posted by darkhorizon

Trackback 0 Comment 0

티스토리 툴바

'JAVASCRIPT'에 해당되는 글 16건

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크