출처 : http://naver.catchstyle.net/90091110491


   <script language = 'javascript' >
    opener.location.reload();
    if(navigator.appVersion.indexOf("MSIE 7.0") >= 0 ){  //익스플로러 체크
     window.open("RNCheckRequest.jsp","_self").close();
    }else if(navigator.appVersion.indexOf("MSIE 8.0") >= 0){    //보안 alert! 방지
     window.open("RNCheckRequest.jsp","_self").close();
    }else{
     self.close();
    }
   </script>

self.close() 시 사용했던 소스. 자기 자신의 파일명을 써줬던 것 같다.



출처 : http://naver.catchstyle.net/90091110491
출처 : http://dsdstudio.springnote.com/pages/380935?print=1  (ㅋㅋ 검색해서 가져와보니 dasida네 스프링노트였네..^^)





←(백스페이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18

PAUSEBREAK = 19
CAPSLOOK = 20

한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32

PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105

.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

  1. Favicon of http://dsdstudio.tistory.com BlogIcon DSD군 2009.11.26 00:29 신고

    할퀴.. 저거슨 어디서 많이보던 ㅋ


예를 들어.

<input id ="test" value="이건 테스트여요" />

라는 개체의 좌표를 구하고자 한다면,

<script>

obj = document.getElementById("test");

left = obj.getBoundingClientRect().left
top = obj.getBoundingClientRect().top
bottom = obj.getBoundingClientRect().bottom;
right = obj.getBoundingClientRect().right;

</script>

뭐 요런식으로 구해지더라.....

출처 : http://www.devpia.com/MAEUL/Contents/Detail.aspx?BoardID=57&MAEULNO=22&no=1882&page=1
파일첨부



[출처] javascript replaceall|작성자 셩이
http://blog.naver.com/soo02da?Redirect=Log&logNo=150046790484

자바스크립트에는 replaceall 함수가 없습니다.

replace 함수가 있지만 replace는 조건에 대해서 한번만 치환을 하기 때문에, replaceall 의 기능을 수행하기는 어렵습니다.

예)

var a = '2009-10-01';

var b = a.replace("-","");

alert(b);

결과 값 : 200910-01

 

split과 join 함수를 이용하면 replaceall과 같은 효과를 낼 수 있습니다.

예)

var a = '2009-10-01';

var b = a.split("-").join("");

alert(b)

결과 값 : 20091001

 
출처: http://blog.naver.com/siva6?Redirect=Log&logNo=120007837429

정말 좋은 스크립트다..

얼른 이해해 버려야겠다.

  1. Favicon of http://siva6.pe.kr BlogIcon siva6 2009.09.30 10:06 신고

    오래된 소스인데 참조해서 사용하신다니 기쁘네요. ^^
    당시에는 ie만을 기준으로 작업했기 때문에 요즘은 사용하기 어려운 소스입니다.
    고려해서 보세요.
    만들어 놓고 실제로 프로젝트에 적용하지는 않았다는...


행 삭제인 경우는.. 체크박스 있는 로우일 때만.ㅋ

/**
 * Row추가
 *
 * @param obj   :  테이블 ID
 * @param cellNum  :  추가될 Row의 Cell (td tag) 개수
 * @param htmlValue  :  cell에 innerHtml로 들어갈 htmlTag (배열)
 * @param rowAttr  :  row (tr tag 속성)
 *
 * 사용예
 *
 * @return
 */

function addRow(tableId,cellNum,htmlValue,rowAttr){
 
 /**
  *  obj    
  *  cellNum      
  *  cellText(배열) 
  *  rowAttr   
  * 
  *  사용예
  * 
  *  function test(obj){
  * 
  *   
  *   var htmlValue = new Array();
  * 
  *   htmlValue[0]  = "<input type='checkbox' size='15' name='chk' />";   
  *   htmlValue[1]  = "<input type='text' size='15' name='id' />";    
  * 
  *      var rowAttr  = "#ffffff,25";  (색상, 높이)
  * 
  *   addRow(obj,htmlValue.length,htmlValue,rowAttr);  * 
  * 
  *  }
  */
 
 
 if(typeof(tableId) == "undefined"){
  
  alert("JAVASCRIPT ERROR : 호출한 테이블 ID 가 없습니다.");
  
  return false;
  
 }else{
 
  var RecentRow  = tableId.rows.length;    // 현재 TableRow 수
  var newRow    = tableId.insertRow(RecentRow); // row추가.
  var rowAttrArray = rowAttr.split(',');
  
  newRow.bgColor  = rowAttrArray[0];   // Row 속성
  newRow.height  = rowAttrArray[1];
  
  for(var i=0;i<cellNum;i++){      // 새로운 Row에 cell 생성후, htmlValue 값을 사용하여 innerHtml 
   
   newRow.insertCell(i);
   
   newRow.cells[i].innerHTML = htmlValue[i];
   
  }
  
 }
 
}

/**
 *
 * @param tableId   - tableId     (Object)
 * @param checkBoxName  - checkboxName (text)
 *
 * 사용예 -
 *  function del(tableId,checkBoxName){

  deleteRow(tableId,checkBoxName);

 }
 *
 * @return
 */

function deleteRow(tableId, checkBoxName){
 
 if(typeof(tableId) == "undefined"){
  
  alert("JAVASCRIPT ERROR : 호출한 테이블 ID 가 없습니다.");
  
  return false;
  
 }else{
  
  var RecentRow  = tableId.rows.length-1;
  
  for (RecentRow ; RecentRow > 0 ; RecentRow--){
   
  
   if (tableId.rows[RecentRow].all.namedItem(checkBoxName).checked == true)
         {
    // row가 1개 일때와 2개 이상일 때 구분해줄것.
          
    tableId.deleteRow(RecentRow);

         }
  }
  
 }
 
}

 

사용예제


매번 그냥 쓰다가; 내가 왜 이러고 싶나 해서 만들었다;

  1. Favicon of http://gtdream.tistory.com BlogIcon 나의둥근바다 2009.10.19 17:59 신고

    올레~~
    감사합니다. 잘쓰겠습니다.

    • 오우.. 내가 만든걸 다른 사람이 쓰기도 하는군요;

      부족한 부분이 있을껀데..적절히 잘 수정해서 사용하세요^^

출처 : http://cafe.naver.com/bigcase.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=188


<SCRIPT LANGUAGE="JavaScript">
        function storeCaret (textel){
                if (textel.createTextRange){
                  textel.caretPos = document.selection.createRange().duplicate();
                }
        }
        function insertatcaret (textel, text){
          //text = "<b>" + text + "</b>";
          text = text;        
                if (textel.createTextRange && textel.caretPos){
                  var caretPos = textel.caretPos;
                  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
                }else{
                  textel.value  = textel.value  + text;
                }
        }
  </SCRIPT>

<form>
<textarea name="admin_contents_sms_value" ROWS="10" COLS="50" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);">원하는 위치에 원하는 문자 삽입</textarea>
<br>
<input type=text name=tem_Code value='입력하세요'>
<input type="button" value="삽입" onClick="insertatcaret(this.form.admin_contents_sms_value,this.form.tem_Code.value);">
</form>


주어진 텍스트 범위의 모체 엘레멘트를 반환한다.

Script [oVal=]TextRange.parentElement()
인수/파라메터
object
필수적인 요소이며, objectTextRange 개체의 이름이다.
파라메터
파라메터는 없다.
반환값

반환값 oVal은 성공적이면 모체 엘레멘트이고, 실패하면null을 반환한다.

특기

모체 엘레멘트는 텍스트 범위를 완전히 감싼 엘레멘트이다.

만일 텍스트 범위가 한개의 엘레멘트 이상으로 확장되어 있으면, 이 메서드는 모든 엘레멘트를 포함하는 가장 작은 엘레멘트를 반환한다. 만일 여러개의 엘레멘트에 걸쳐 텍스트를 삽입하려면, 포함된 어떤 엘레멘트 보다 그 엘레멘트들을 포함하는 모체 엘레멘트에 넣어야 한다.

이 기능은 Microsoft 아닌 Win32 플래트폼에서는 작용하지 않을 수 있다.

적용
개체 script IE
TextRange TextRange.parentElement() IE4.0(win16,win32,ce,unix)


가끔은 쓸모가 있~는데~


다음 번 등위개체와 연결하기 위해서 nextSibling 이라는 속성이 있으며

그 하위개체들과 연결하기위해 childNodes 라는 속성도 있답니다.

출처 : http://www.cyworld.com/kjynim12/734260


/////////////////////// HTML / Javascript ////////////////////////

1. 용어 정리
 (1) HTML (Hypertext Markup Language)
  웹페이지를 표시하는 기본언어
  최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한
  XHTML(eXtensible Hypertext Markup Language)이 권고안으로 나와있다.

 (2) CSS(Cascading Style Sheets)
  CSS 는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며
  CSS 를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열
  람할 수 있다. CSS 를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이
  블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다.

 (3) XML(eXtensible Markup Language)
  XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을
  DTD를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업
  언어이다.

 (4) DOM(Document Object Model)
  DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여
  이를 자유 자재로 사용할 수 있도록 만든 것이다.

 (5) ECMAScript (Javascript)
  자바 스크립트는 W3C 표준으로 제정된 것은 아니다. 자바 스크립트는 주석 코드를
  사용하여 비 호환성의 웹 브라우저로부터 숨겨져야 한다. 자바 스크립트는
  HTML 문서의 Head 내에 위치해야 제대로 동작한다 따라서 문서의 Body 내에 자바 스
  크립트를 위치시키는 것은 피해야 한다.


2. 웹 표준 검사
 http://validation.w3.org

3. XHTML 사용해야 하는 이유
 (1) 호환성 및 확장 가능성이 좋다.
 (2) 유지비용 감소 및 재생산성 확대
 (3) 경량의 로딩속도

4. DOCTYPE 문서형식
 (1) HTML 2.0 표준문서 형식
  <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
 (2) HTML 3.2 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 (3) HTML 4.01 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
 (4) XHTML 1.0 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 (5) XHTML 1.1 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5. 일반 형식(Transitional)과 엄격한 형식(Strict)
 HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며,
 <font>에 지정된 스타일도 제대로 표현하여 준다.
 
 HTML 4.01 Strict은 HTML을 엄격하게 적용한다.
 <font> 태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.

 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.

6. XHTML 일반 문법 준수
 (1) 정확한 문서 구조 준수
  문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
  <html xmlns="http://www.w3.org/1999/xhtml">
  표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
  head, title 및 frameset 구조 요소가 포함되어야 한다

 (2) 모든 요소는 완벽하게 중첩되어야 한다.
  <p>This is a <i>bad example.</p></i>
  <p>This is a <i>good example.</i></p>
 
 (3) 모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
  <a href=http://sample.com>틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (4) 모든 요소와 속성은 소문자여야 한다.
  <A HREF="http://sample.com">틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (5) 모든 요소는 닫아야 한다.
  XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다
  (예: <br/>가 아니라 <br />)
 
 (6) 모든 속성값은 속성이 함께 선언되어야 한다.
  <option value="wrong" selected>틀린 경우</option>
  <option value="right" selected="selected">맞는 경우</option>
 
 (7) 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
  <script type="text/javascript” language="javscript"></script>
  <style type="text/css"></style>
 
 (8) 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
 
 (9) 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
  <script type="text/javascript">
  <!--
  // 틀린 표현!
  document.write("</P>");
  // -->
  </script>

  <script type="text/javascript">
  <!--
  // 맞는 표현!
  document.write("<\/P>");
  // -->
  </script>

  <script type="text/javascript">
  <![CDATA[
  ... <h1>데이터</h1> ...
  ]]>
  </script>

 (10) 모든 문서 내 URL에서 &를 쓰면 안 된다.
  <!.에러! --> <a href="foo.cgi?chapter=1&section=2">...</a>
  <!.적합! --> <a href="foo.cgi?chapter=1&amp;section=2">...</a>
 
 보너스
 테이블 구성시 <table><form></form></table> 식으로 form의 여백을 일부러
 없애는 경우가 있는데 이것은 css로 바로 해결 가능.
 form { margin: 0; }

7. CSS
 http://csszengarden.com
 http://phonophunk.com/

 (1) CSS의 선언
  <1> Selector 와 선언부 (p.text : Selector, {} : 선언부)
   p.text {
    margin: 0;
   }
  <2> Selector는 ,로 구분할 수 있다.  
   p.text,
   span.name {
    color: #666;
   }
  <3> 일반 선택자
   - 공용 선택자 * : 모든 태그 지정
    div.search * {
     vertical-align: middle
    } --> div.search 안의 모든 엘리먼트가 다 적용
   - 타입 선택자 A : 태그 A 지정
   - 클래스 선택자 .A : 클래스가 A인 태그를 지정
   - ID 선택자 #A : 아이디가 A인 태그를 지정
  <4> 복합 선택자
   - 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정
    <ul id="list">
     <li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
     <li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
     ...
     ...
     <li><a href="list.html?id=99&amp;type=blah">item 99</a></li>
    </ul>
    --> a 태그에 속성 지정시
    ul#list a:link,
    ul#list a:visited {
     color: #999;
    }
    ul#list a:hover,
    ul#list a:active {
     color: #000;
    }
    --> 한방에 해결
   - 자식 선택자 A > B : 태그 A로 감싸져 있는 바로 하위단계 B만 지정
    <ul class="depth1">
     <li>
      <a href="about.html">Company</a>
      <ul class="depth2">
       <li>
        <a href="overview.html">Overview</a>
       </li>
       <li>
        <a href="ceo.html">Ceo.html</a>
       </li>
      </ul>
     </li>
    </ul>
    ul.depth1 li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
    ul.depth1>li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
   - 인접 선택자 A + B : 태그 A와 B가 연속으로 나와 있는 것을 지정
    <h2>브라우져 워</h2>

    <p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
    있습니다.</p>

    <h2>어쩌고 저쩌고</h2>

    <p>또다시 어쩌고 저쩌고</p>

    --> 제목 뒤 첫글자만 크게 하고 싶다면??
    h2+p:first-letter {
     float: left;
     font-size: 2.2em;
    }
  <5> 가상 클래스 선택자
   - :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
   - 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
   - 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
          A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
   - 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
       A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
       A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정
  <6> 동적 선택자
   - :first-line선택자 A:first-line : 태그 A의 문단중 첫번째 줄 지정
   - :first-letter선택자 A:first-letter : 태그 A의 문단중 첫번째 글자 지정
   - :before선택자 A:before : 태그 A의 문단 앞을 지정
   - :after선택자 A:after : 태그 A의 문단 뒤를 지정

 (2) CSS 선언 방법
  <1> 외부 선언 (external css) - 우선순위가 낮다.
   <link rel="stylesheet" type="text/css" href="myCss.css" />
  <2> 엘리먼트에 직접 선언 (inline css)
   <div style="padding: 10px; border: 1px solid #eee;">
    <p>contents</p>
   </div>
  <3> 사용자 정의 스타일 (user defined css)
   가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이
   용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
 
 (3) CSS 적용의 체크 포인트 4가지
  <1> XHTML이 표준 문법이어야 한다.
  <2> XHTML 문서가 의미와 구조적으로 구성되어야 한다.
  <3> CSS가 표준 문법이어야 한다.
  <4> CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.

 (4) CSS Editor Firefox plugin
  <1> Web Developer 확장 기능
  <2> HTML Tidy

8. DOM / Script
 문서 객체 모델(DOM; Document Object Model)은 HTML내에 들어 있는 요소를 구조화
 객체 모델로 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를
 표현하는 W3C 표준 모델이 기반이 된다.

 (1) 객체 접근방법
  <1> document.getElementById(aId)
  <2> document.getElementByTagName(aTagName)
  <3> 기존방식 밖에 지원안하는 IE 지원
   function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId) {
     return document.getElementById(objectId); // check W3C DOM
    }
    else if (document.all && document.all(objectID) {
     return document.all(objectID); // IE4
    }
    else if (document.layers && document.layers[objectID] {
     return document.layer[objectID]; // NN4
    }
    else {
     return false;
    }
   }
 (2) 객체 사용 방법
  구성요소의 내용을 바꾸거나 수정하는 innerText, innerHTML, outerText, outerHTML을
  사용하는 것은 원래 잘못된 것이다. 왜냐하면 이는 W3C DOM 표준이 아니고 MS DOM 이기 때문이다.
  firefox에서는 innerHTML만이 지원된다. 나머지는 지원불가!
  
  속성 사용
  1. x.id 나 x.style 같은 방법으로 먼저 속성을 찾는다.
  2. 값이 나오지 않으면 x.getAttribute(“align”)나 x.getAttributeNode(“align”).value 로 찾는다.
  3. 그래도 나오지 않으면 다른 속성 인터페이스를 시도하되, attributes[]는 절대 사용하지 않는다.
 

   function btn_add_onClick()   // Row 추가 function
    {
        tableID            = document.all.tb_title; // 테이블 ID
        var rowNum        = tableID.rows.length;
        var tableCell    = 7; //  테이블 셀 개수. (<td></td> 의 개수라고 보면됨)
        var newRowNum    = tableID.insertRow(rowNum);

        for(var j=0; j < tableCell ; j++)
        {
            newRowNum.insertCell(j);
        }

        newRowNum.className    = "table_content";  // sytle.css 에 정의되어있는..
        newRowNum.align             = "center";
        //newRowNum.style.background  = "#F0F0F0";
        newRowNum.height           = "24";
        newRowNum.cells[0].innerHTML  = "<input type='checkbox' name='chkbox'>";
        newRowNum.cells[1].innerHTML 
         = "<input type='text' value='正規Card' readonly style='border:0'
        onclick='btn_int_onClick ("+rowNum+");' style='cursor:hand' size='5'>";

        newRowNum.cells[2].innerHTML  = "<input type='text' name='emp_nm_"+rowNum+"'
        value='' readonly style='border:0' size='6' >"+
        "<input type='hidden' name='emp_no_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='tel_no_"+rowNum+"' value='' readonly >";

        newRowNum.cells[3].innerHTML 
         = "<input type='text' name='dpt_nm_"+rowNum+"' value='' readonly style='border:0'
        size='15' >"+
         "<input type='hidden' name='dpt_cd_"+rowNum+"' value='' readonly >";

        newRowNum.cells[4].innerHTML  
        = "<input type='text' name='rank_nm_"+rowNum+"' value='' readonly style='border:0'
        size='5' >"+
        "<input type='hidden' name='rank_cd_"+rowNum+"' value='' readonly style='border:0'
        size='5' >";

        newRowNum.cells[5].innerHTML  
        = "<input type='text' name='floor_nm_"+rowNum+"' value='' readonly style='border:0' >"+
        "<input type='hidden' name='floor_cd_"+rowNum+"' value='' readonly style='border:0'  >";
       
        newRowNum.cells[6].innerHTML  
        = "<input type='text' name='inout_dept_nm_"+rowNum+"' value='' readonly style='border:0'
        size='25' >"+
        "<input type='hidden' name='inout_dept_cd_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='approve_stat_"+rowNum+"' value='N'/>"+
        "<input type='hidden' name='issueReason_"+rowNum+"'value='' />"+
        "<input type='hidden' name='cardIssueTyp_"+rowNum+"' value='N' />"+
        "<input type='hidden' name='inouter_compnyNm_"+rowNum+"' value='' />";

          // cells[] 의 배열을 TableCell 변수와 맞게 조절한다.


    function btn_del_onClick()   // row 삭제 function
    {
        var count = 0;
        tableID       = document.all.tb_title;
        var rowNum    = tableID.rows.length;
   
        if(rowNum > 1){
            if(tableID.rows[1].cells.length == 1){
                alert("삭제 대상이 없습니다.");
                return false;
            }
        }
   
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                count++;
            }
        }
        if( count ==0 ){
            alert("삭제할 항목이 없습니다.");
            return;
        }
        if(!confirm("삭제하시겠습니까?")) return;
   
        rowNum    = tableID.rows.length;
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                tableID.deleteRow(rowNum-1);          // 체크된 Row 를 삭제
            }
        }
    }

----------------------------  여기까지 javascript Function 정의 --------------------------

<html>
<head></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="BEC8D3" id="tb_title">
    <tr>
      <td>..</td>..<td>..</td> ....... 생략...
    </tr>
</table>
</body>
</html>

// function 에서 정의해준 table id 를 가진 테이블 하나가 있으면 됩니다.
각 option 에는 하나의 value 값을 가지게 되지만

value = "abc,bde,fag,e232,"

이런식으로 값을 줘서 넘긴 다음

" , " 를 기준으로 잘라서 쓰면 여러개의 value 를 넘기는 효과를 가질 수 있다.

출처 : http://www.cginjs.com

// 부모창에 들어 갈 내용


<script language="javascript">
// 이부분부터  수정할 필요 없습니다.
function getCookie(name) {
 var Found = false
 var start, end
 var i = 0
 
  while(i <= document.cookie.length) {
   start = i
   end = start + name.length
 
  if(document.cookie.substring(start, end) == name) {
   Found = true
   break
   }
   
   i++
   
  }
 
  if(Found == true) {
   start = end + 1
   end = document.cookie.indexOf(";", start)
    if(end < start)
    end = document.cookie.length
   return document.cookie.substring(start, end)
   }
  return ""
}
// 이부분 까지는 수정할 필요 없습니다.
 
function openPopup()
{
 var noticeCookie=getCookie("popexpire");  // 쿠키네임 지정
  if (noticeCookie != "no")
  window.open('pop.jsp','pop','width=350,height=400,top=50,left=150');
  // window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150');
 }
 openPopup();  // 자동으로 팝업 띄우기
 
</script>



// 팝업된 창에 들어갈 내용

<script language="JavaScript"> 
 function setCookie( name, value, expiredays )
 {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
 }
 
 function closeWin()  {
 {
  if ( document.pop.notice.checked )  // 폼네임 cnjform 은 동일해야 합니다.
  setCookie("popexpire", "no" , 1);   // 부모창에서 지정한 쿠키네임과 일치 해야 합니다.
 }
 top.close();
 }
</script>

</head>
<body>

<form name="pop">
<input type="checkbox" name="notice" onclick="closeWin()">체크하면 오늘 하룻동안 페이지를 열지 않습니다.
</form>

출처: www.cginjs.com

Date() 객체(object)
관련 스크립트


Date 객체는 자바스크립트에서 제공하는 내장객체로서 시스템에서 가지는 날짜와 시간을 사용하게 해줍니다.
인자중에서 miliseconds는 그리니치 표준시 (GMT)로 1970년 1월 1일 00:00:00를 기준으로 해서 현재까지 몇 miliseconds가 지났는지에 따라 날짜를 생성해줍니다.
Date 객체 생성시 new 연산자를 통해 생성을 해 주어야만 사용할 수 있습니다.

Date 객체 생성 형식

객체명 = new Date() // 시스템의 현재 날짜를 자동으로 지정
객체명 = new Date(년,월,일,시,분,초,1/1000초) // 특정 날짜와 시간을 지정
객체명 = new Date(시,분,초,1/1000초) // 특정 시간을 지정
객체명 = new Date(월,연,일,시,분: 초: 1/1000초) // 문자열로 된 날짜와 시간을 지정
  • year : 년도를 지정합니다.
    1997, November로 표현 숫자로 지정시 가급적 전체 년도를 지정하고 97같은 식의 짧은 년도는 지정하지 않습니다.
  • month : 월을 지정합니다.
    지정할 수 있는 값은 숫자 0에서 11까지의 숫자나 문자 "January ~ December" 까지이며 숫자로 지정시 1월은 0으로 지정하며 9는 10월로 지정됩니다.
  • Date : 날짜를 지정합니다.
    숫자 1에서 31까지 지정할 수 있습니다.
  • hour: 시간을 지정합니다.
    숫자 0에서 23까지 지정할 수 있습니다. ☞ 0은 자정이고 12는 정오이다.
  • minute : 분을 지정합니다.
    숫자 0에서 59까지 지정할 수 있습니다.
  • second : 초를 지정합니다.
    숫자 0에서 59까지 지정할 수 있습니다.
  • m/s : millisecond(1초/1000)를 지정합니다.
    숫자 0에서 999까지 지정할 수 있습니다.

Date 객체에서 지원하는 메소드
Date() Date 객체로 정보를 알려줌
getDate() 1 ~ 31 사이의 날자로 정보를 알려줌
getDay() 0 ~ 6 (0=Sunday, 1=Monday, ...) 사이의 요일로 정보를 알려줌
getMonth() 0 ~ 11 (0=January, 1=February, ...) 사이의 월로 정보를 알려줌
getFullYear() 4 자리 수의 년도로 정보를 알려줌
Y2K 문제를 해결하기 위하여 추가된 함수(IE4이상, NC4 )
getYear() 0~99 사이의 년도로 정보를 알려줌
getHours() 0-23 사이의 시간로 정보를 알려줌
getMinutes() 0~59 사이의 분로 정보를 알려줌
getSeconds() 0~59 사이의 초로 정보를 알려줌
getMilliseconds() 0-999 사이의 1/1000초로 정보를 알려줌
getTime() 1970년 1월 1일 자정 이후 현재 까지의 1/1000초 단위 시간로 정보를 알려줌
getTimezoneOffset() GMT 국제표준시(UTC : Coordinated Universal Time) 와 사용자 컴퓨터에 설정된 시간과의 시차로 정보를 알려줌
getUTCDate() 1~31 사이의 UTC(국제표준시) 날자로 정보를 알려줌
getUTCDay() 0 ~ 6 (0=Sunday, 1=Monday, ..)사이의 UTC 요일로 정보를 알려줌
getUTCMonth() 0 ~ 11 (0=January, 1=February, ..) 이의 UTC 월로 정보를 알려줌
getUTCFullYear() 4 자리 수의 UTC 년도로 정보를 알려줌
Y2K 문제를 해결하기 위하여 추가된 함수(IE4이상, NC4 )
getUTCHours() 0 ~ 23 사이의 UTC 시간로 정보를 알려줌
getUTCMinutes() 0 ~ 59 사이의 UTC 분로 정보를 알려줌
getUTCSeconds() 0 ~ 59 사이의 UTC 초로 정보를 알려줌
getUTCMilliseconds() 0-999 사이의 UTC 1/1000초로 정보를 알려줌
setDate() 1~31 사이의 날자 지정
setFullYear() 4 자리 수의 년도 지정
setHours() 0-23 사이의 시간 지정
setMilliseconds() 0-999 사이의 1/1000초 지정
setMinutes() 0~59 사이의 분 지정
setMonth() 0~11 (0=January, 1=February, ...) 사이의 월 지정
setSeconds() 0~59 사이의 초 지정
setTime() 1970년 1월 1일 자정 이후 현재 까지의 1/1000초 단위 시간 지정
setYear() 0~99 사이의 년도 지정
setUTCDate() 1~31 사이의 UTC 날자 지정
setUTCDay() 0~6 (0=Sunday, 1=Monday, ...) 사이의 UTC 요일 지정
setUTCMonth() 0~11 (0=January, 1=February, ...) 사이의 UTC 월 지정
setUTCFullYear() 4 자리 수의 UTC 년도 지정
setUTCHour() 0-23 사이의 UTC 시간 지정
setUTCMinutes() 0~59 사이의 UTC 분 지정
setUTCSeconds() 0~59 사이의 UTC 초 지정
setUTCMilliseconds() 0-999 사이의 UTC 1/1000초 지정
toGMTString() UTC 시간을 문자열로로 정보를 알려줌
예) Wed, 9 Jun 2004 04:16:54 UTC
toLocaleString() 현재 시각을 문자열로로 정보를 알려줌
예) 2004년 6월 9일 수요일 오후 1:20:54
toString() 현재 시각을 UTC 시간과 비교하여로 정보를 알려줌
예) Wed Jun 9 13:20:54 UTC+0900 2004


출처: www.cginjs.com
출처 : www.cginjs.com
오류 번호 설명
5029 배열의 길이는 유한한 양수값이어야 합니다
5030 배열의 길이는 유한한 양수값이어야 합니다
5028 Array 또는 arguments 개체가 필요합니다
5010 Boolean이 필요합니다
5003 함수 결과에 할당할 수 없습니다
5000 'this'에 할당할 수 없습니다
5006 날짜 개체가 필요합니다
5015 열거형 개체가 필요합니다
5022 예외적인 흐름으로 잡을 수가 없습니다
5020 정규식에 ')'가 필요합니다
5019 정규식에 ']'가 필요합니다
5023 함수에 유효한 표준 개체가 없습니다
5002 함수가 필요합니다
5008 잘못된 할당
5021 잘못된 범주의 문자 집합입니다
5014 JScript 개체가 필요합니다
5001 숫자가 필요합니다
5007 개체가 필요합니다
5012 개체 구성원이 필요합니다
5016 정규식 개체가 필요합니다
5005 문자열이 필요합니다
5017 정규식에서 구문 오류가 발생하였습니다
5026 소수부 자리수가 범위를 초과하였습니다
5027 정밀도가 범위를 초과하였습니다
5025 디코딩될 URI가 유효한 인코딩이 아닙니다
5024 인코딩될 URI가 유효하지 않은 문자를 포함하고 있습니다
5009 정의되지 않은 식별자
5018 예기치 않은 수량사
5013 VBArray가 필요합니다
구문 오류
스크립트에서 문법 규칙을 하나 이상 위반할 경우 발생하는 오류입니다.
구문 오류는 프로그램이 실행되기 전에 프로그램을 컴파일하는 단계에서 발생합니다.
오류 번호 설명
1019 루프 밖에서는 'break'를 사용할 수 없습니다
1020 루프 밖에서는 'continue'를 사용할 수 없습니다
1030 조건부 컴파일이 해제되었습니다
1027 'switch' 문에서 'default'는 한번만 나타날 수 있습니다.
1005 '('가 필요합니다
1006 ')'가 필요합니다
1012 '/'가 필요합니다
1003 ':'가 필요합니다
1004 ';'가 필요합니다
1032 '@'가 필요합니다
1029 '@end'가 필요합니다
1007 ']'가 필요합니다
1008 '{'가 필요합니다
1009 '}'가 필요합니다
1011 '='가 필요합니다
1033 'catch'가 필요합니다
1031 상수가 필요합니다
1023 16진수가 필요합니다
1010 식별자가 필요합니다
1028 식별자나 문자열 또는 숫자가 필요합니다
1024 'while'이 필요합니다
1014 유효하지 않은 문자입니다
1026 레이블을 찾을 수 없습니다
1025 레이블이 재정의되었습니다
1018 함수 밖의 'return' 문장
1002 구문 오류
1035 동일한 원본 줄에 수식이 뒤따라야 합니다
1016 종결되지 않은 주석입니다
1015 종결되지 않은 문자열 상수입니다

출처 : www.cginjs.com

출처 : http://sir.co.kr/bbs/board.php?bo_table=pl_dhtml_javascript&wr_id=113&sca=%C6%C1&page=8

<table border=1 width="400" cellspacing="0" cellpadding="9">
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#299eab"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://google.co.kr'">구글로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#ff00ff"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://naver.co.kr'">네이버로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#a9aecc"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://empas.co.kr'">엠파스로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onClick="location='http://sir.co.kr'">롤 오버 없음. 썰 이동</td>    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#aaee00"' onMouseOut='this.style.backgroundColor="#eeeeee"'>셀 링크 없음</td>
    </tr>
</table>



<td style="cursor:hand" > 속성을 넣어주면 마우스오버시 손가락 모양.

테이블 바탕색이 아닌 글자색 변경은 this.style.background -> this.style.color

출처 : http://www.okjsp.pe.kr/bbs?act=VIEW&seq=31289&bbs=bbs4&keyfield=content&keyword=이미지&pg=1
김경렬님이 작성한 글입니다.

<script>
function imgSize(which){
    var width = eval("document."+which+".width");
    var height = eval("document."+which+".height");
    var temp = 0;
    var max_width= 600;   // 이미지의 최대 크기    
   
    if ( width > max_width ) {  // 이미지가 600보다 크다면 너비를 600으로 맞우고 비율에 맞춰 세로값을 변경한다.      
       height = height/(width / max_width);
       eval("document."+which+".width = max_width");    
       eval("document."+which+".height = height");
    }    
}
</script>

<html>
<body>
<table>
<tr>
<td width=100 >사진</td>
<td > <img src="../cl_upload/sajin/<%=v_file_nm%>" border=0 name="img"></td>
</tr>
</table>
<script>imgSize("img");</script>
</body>
</html>



!! 주의 할점 :  함수를 호출할때 꼭 이미지가 들어간 테이블밖에서 실행해야
실행됩니다. 테이블을 이용하지 않는다면 바디테그 이후에 넣어줘야 합니다.
function Q() {
if(confirm("삭제하겠습니까?"))
  {
        location.href="deletePost.jsp?seq=<%=post.getSeq() %>";
  }
        return;
       
}

<script language="javascript">


    window.opener.location.reload();

    self.close();
</script>

출처 : Tong - jupiter0410님의 § HTML & Javascript §통

출처 : http://kyoe.tistory.com/entry/HTML%ED%8A%B9%EC%A0%95%EC%9C%84%EC%B9%98-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%B4%EB%8F%99

*이전페이지 이동*
<script language=javascript>
   alert('$message');
   history.go(-1);
</script>

*특정페이지 이동 URL*
<script language=javascript>
 location.replace('이동할 주소');
</script>

*자동으로 새로고침*
<script language="JavaScript">
   setTimeout("history.go(0);", 1000); // 1초는 1000 입니다.
</script>

if(!document.request.state[0].checked && !document.request.state[1].checked){

내용

}

:: document.FormName.InputName[0].checked

<script language="javascript">
//글자수 제한 체크
function len_chk(){ 
  var frm = document.insertFrm.test;
   
  if(frm.value.length > 4000){ 
       alert("글자수는 영문4000, 한글2000자로 제한됩니다.!"); 
       frm.value = frm.value.substring(0,4000); 
       frm.focus(); 
  } 

}
</script>




<form name="insertFrm">
<textarea name="test"  onKeyup="len_chk()">
</textarea>
</form>


출처 : http://www.technote.co.kr/php/technote1/board.php?board=apple&page=10&command=body&no=224


아이프레임(iframe) 높이와 넓이 자동 조절 스크립트



<script>
// IFRAME 사이즈 자동 조절
function doIframeResize(tdId, frameId)
{
tdId.height = frameId.document.body.scrollHeight+10;
tdId.width = frameId.document.body.scrollWidth;
} </script>

위의 스크립트를 아이프레임을 넣고자하는 페이지에 넣은후 다음과 같이 하시면됩니다.

<iframe id="test_frame" src="넣고자하는주소(예 http://technote.co.kr" width="97%" height="100%" ALLOWTRANSPARENCY="true" frameborder="0" scrolling="no" onload="doIframeResize(test, test_frame);"></iframe>

2개를 넣을경우는  frame id와dolframeResize(   )의 값을 아래와 같이 변경해주시면되고 이런식으로 하면 넣고 싶은 대로 여러개의 아이프레임을 넣을 수가 있습니다.

<iframe id="test_frame1" src="넣고자하는주소(예 http://technote.co.kr" width="97%" height="100%" ALLOWTRANSPARENCY="true" frameborder="0" scrolling="no" onload="doIframeResize(test1, test_frame1);"></iframe>

미리보기    http://dalgubeol.net/data/iframe.htm

+ Recent posts