행복한 스마일맨 ^^*

table의 id가 tb1 이 아니라 tbl 이네요.

 

<style>
 .cel0{width:13%;height:35;background:#eeffee}
 .cel1{width:491;}
 .mes{background:#ffffff;border-top:0px;border-bottom:1px solid red;border-left:0px;border-right:0px}
</style>

<TABLE id=tbl border=1>
<TR>
 <TD class=cel0>메시지</TD>
    <td class=cel1><input type=text name="content" size="65" disabled class=mes></td>
</TR>
</TABLE>

<table>
<TR> 
 <TD align="center" colspan="6" height="40" bgcolor=#ffffdd width="570"> <input type="button" value="메세지추가" ></TD>
</TR>
</TABLE>

<script>
 function m_plus(){
  oRow = document.createElement('tr');
  oCel0 = document.createElement('td');
  oCel1 = document.createElement('td');

  oRow.style.textAlign='center';

  oCel0.className='cel0';
  oCel1.className='cel1';

  oRow.appendChild(oCel0);
  oRow.appendChild(oCel1);

  oCel0.innerHTML="메 세 지";
  oCel1.innerHTML="<input type=text name=content size=65 disabled class=mes>";

  document.getElementById('tbl').children(0).appendChild(oRow);

 }
</script>



var oTbl = document.getElementById('CardMapItem');
var oRow = oTbl.insertRow();
cel1 = oRow.insertCell();
cel1.innerHTML = "1";

MSXML에는 프로그램 아이디에 의존하는 버전과 프로그램아이디에 독립적인 버전이 존재한다.

일반적으로 스크립트가 구동되는 클라이언트가 어떤 버전의 IE일지 또 어떤 버전의 MSXML

이 설치되어 있을지 모를 경우 프로그램 아이디에 독립적인 버전을 사용하는 것이 좋다.

MSXML 버전이 어떤 프로그램 아이디와 연결되는지 정확히 알 필요 없을 때 사용할 수 있다.

 

XML DOM document의 프로그램 아이디 독립버전은   Microsoft.XMLDOM이며,

IE 5 이후에서 XML DOM을 다음과 같이 생성한다.

 

var xmlDocument = new ActiveXObject('Microsoft.XMLDOM');

와 같이 생성한다.

XML HTTP request 객체의 프로그램 아이디 독립 버전은 Microsoft.XMLHTTP이며,

IE 5 이후에서 XML HttpRequest객체는 다음과 같이 생성한다.

 var httpRequest = new ActiveXObject('Microsoft.XMLHTTP');

 

프로그램 아이디 같은 실제 MSXML버전은 인스톨된 MSXML버전에 의존한다.

 

Which actual MSXML version such a program id is bound to depends on the
MSXML version(s) installed and even on the mode (side-by-side or replace
mode) a version is installed in.

프로그램 의존 버전은 서버에 어떤 버전의 MSXML이 설치되었는지 알고 있는 상태로 스크립팅 작업을 할 경우, 인트라넷 속해 있는 모든 클라이언트에 어떤 버전의MSXML이 설치 되어있는지 알고있는 상태에서 작업할 경우 마지막으로 특정 버전의 MSXML 에서만 지원되는 기능을 사용하기를 원할 때 사용할 수 있다.

 

MSXML 3,4,5에 해당하는 XMLHttpRequest 객체의 프로그램 아이디 의존 버전은 각각 다음과 같다.

Msxml2.XMLHTTP.version.number

 

예) MSXML 3으로 구현된 XMLHttpRequest 객체 생성방법

var httpRequest = new ActiveXObject('Msxml2.XMLHTTP.3.0');

 

MSXML 4으로 구현된 XMLHttpRequest 객체 생성방법

var httpRequest = new ActiveXObject('Msxml2.XMLHTTP.4.0');

 

MSXML 5으로 구현된 XMLHttpRequest 객체 생성방법

var httpRequest = new ActiveXObject('Msxml2.XMLHTTP.5.0');

 

NOTE>>

MSXML 4 이후로는 프로그램 아이디 의존버전만이 존재한다. 따라서 그 이전의 프로그램 아이디 독립  버전은 MSXML 4 or 5에는 바운드 되지 않는다.

substring은 어디서 부터 어디까지 끊어 낼 것인가이고

substr은 어디서 부터 몇 개를 끊어 낼 것인가의 차이입니다.

 

인덱스는 0 부터 시작되고

"abcdefg" 라는 문자열이 있다면

substring(2,4) 의 결과는 "cd"이고 (인덱스 2번과 3번의 문자)

substr(2,4)의 결과는 "cdef"가 되는 것입니다.

window.showModalDialog(url, 'album_all_del', "resizeble:0; scroll:0; dialogWidth:520px; dialogHeight:490px;");
 =  window.open(url, 'album_all_del', "resizeble=0, scrollbars=0, width=520, height=490");


window.showModalDialog 은 url 의 창이 닫히기 전에 opener 에 대한 작업을 할수 없다.
url 이 닫히면 그 다음줄 실행한다.


옵션들....

// scrollbars = yes :: 스크롤바 사용 (미사용 no)

// resizeable = yes :: 좌우스크롤바 사용 (미사용 no)

// menubar = yes :: 메뉴바 사용 (미사용 no)

// toolbar = yes :: 툴바사용 (미사용 no)

// width = 100 :: 팝업창의 가로사이즈

// height = 100 :: 팝업창의 세로사이즈

// left = 10 :: 좌측에서 10픽셀을 띄운다.

// top = 10 :: 상단에서 10픽셀을 띄운다.



위에 정의되지 않은 기능 이외에도 status=yes, fullscreen 등의 추가적인 용어가 있으며

scrollbars, resizeable 등은 지정을 하지 않을 경우 열려야 하는 창이 팝업사이즈보다 더 클경우 상하 및 좌우스크롤은 자동으로 생성된다

흔히 알고 있는것 익숙한것을 씁니다만.. 분명한 차이가 있습니다...

무엇이 다른가 봅시다.

 

 

=============================================

location.href 와 location.replace()....

=============================================

 

 

.href 와 .repalce()는 모두 location의 하위객채로 브라우저에서 URL이동때 쓰인다.

그러나 쓰는 형태를 보면 알겠지만 .href 는 프로퍼티고, .replace()는 메소드다.

 

location.href = http://www.naver.com        <= [1] 값을 정의해야 하는프로퍼티

location.replace(http://www.naver.com)    <= [2] 파라미터로 동작을 명령하는 메소드

 

아. 그게 뭐가 중요하냐... 브라우저가 주소만 바뀌면 되는거 아냐... 라고 하겠지만..

그게 아니라 이거지... ㅡ ㅡa

 

골아프겠지만, 자바스크립트에서 정의한 정확한 의미를 집어보자.

 

location 은 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체다.

브라우저의 주소표시줄에 있는 URL은 다음과 같이 정의된다.

 

protocol :// hostname : port / pathname ? search # hash

 

location.href는 위에 써있는 전체를 가르키며,

location.pathname 이라고 하면 같은 사이트에 파일경로만을 가르킨다.

(예를 들면...http://www.naver.com/blog/myinfo/profile.asp  라는 페이지가 떠있따면...

location.href에는 이거 전체가, location.phthname 에는 [blog/myinfo/profile.asp] 가 들어있다.)

 

그래서 location.href 라고 하면 브라우저의 주소표시줄에 떠있는 URL를 가르킨다.

그러므로 [1]처럼하면 브라우저의 주소표시줄 값이 변경되므로 페이지가 바뀌게 된다.

(물론 프레임, 아이프레임을 썼을땐 그 프레임의 주소가 바뀐다.)

 

[1]을 했을떄 일어나는 일은 우리가 주소표시줄에 키보드로 직접 주소를 넣고 엔터를 치는것과 정확히 같은 일을 일으킨다.

여기서 같은 일이란,

새로은 페이지로 이동(a)되고,

[뒤로]버튼을 누르면 이전 URL로 이동(b)되는것을 말한다.

 

(a) , (b)에 대해 좀만더 자세히 보자.

 

(a)  새로운 페이지로 이동.

브라우저 옵션을 손대지 않았을때, 브라우저의 주소값이 바뀌면 브라우저는 '인터넷 임시파일'

(C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files\)

에 캐쉬가 있는지를 먼저 보고, 있으면 그걸 보여준다.

그래서 가끔 우린 사이트내용이 바뀌었는데도, 로컬에 있는 파일을 보는 경우가 있다.

location.href로 주소이동을 했을떄 이와 같은 일이 일어난다.

 

(b) [뒤로]버튼을 누르면 이전 URL로 이동.

[뒤로]버튼이 정상장동되는것은 History객체에 배열처럼 이전 URL들이 기록되어있기때문이다.

우리가 [뒤로]버튼을 누르는건 History객체를 역순으로 되집어 가는 과정이다. ( history.back()이 그 일을 한다. )

location.href를 쓰면 [뒤로]버튼도 history.back()도 직접URL바꿨을때와 똑같이 작동한다.

 

그럼 location.replace()는 뭐가 다를까?

location.repalce()는 다음과 같이 작동한다.

 

1. location.replace()는 (a)의 경우  '인터넷 임시파일'을 쓰지 않는다. 매소드가 실행될때마다 매번 서버에 접속해서 페이지를 가져온다. 게시판 리스트같은 곳을 이동할때 location.href를 쓰면 새 글이 올라온것을 모르고 '로컬에 있는 파일'만 보는 일이 생길 수 있는데, location.replace()를 쓰면 이를 방지할 수 있다.

 

2. location.replace()은 새 페이지로 이동하는게 아니라 현재페이지를 바꿔주는 거다.

말장난 같아도 이거 중요한거다.. 왜중요한고하니...

(b)의 경우, History객체에 새로운 URL를 기록하는게 아니라 현재 페이지값을 바꾼다.

그러므로 location.replace()로 이동하고 [뒤로]버튼을 누르면 이전페이지가 아니라 이전,이전페이지가 뜬다. 이해가 안된다고?

 

A --> B --> C    처럼 페이지가 이동을 했다하자. (현재 당신은 C사이트에...)

B --> C로 이동할때 location.href를 썼다면

C페이지트에서 [뒤로]버튼을 누르면 B가뜬다.

하지만..

B --> C로 이동할때 location.replace()를 썼다면

C페이지에서 [뒤로]버튼을 누르면 A가뜬다.

그럼 사용자입장에선 '어 내가 클릭을 두번했나?' 하게 된다...

 

이런 차이로 인하여 적절히 써야 한다.

[뒤로]버튼을 눌렀을때 두페이지 이전으로 넘어가면 안되는 경우가 있는 반면,(.href를 써야겠지..)

프레임을 쓴 사이트 의 경우는 [뒤로]버튼 한두번 클릭으로 사이트를 빠져나가게 할 수도 있다. (.repalce()를 쓴경우...)

top.location.href="" 이렇게 하면 top 프레임으로 이동

function all_checked()
{
    // 모두 체크
    var f = document.form1;
    var reply_check = f['reply_check[]'];
    var length = reply_check.length;
    var i;
    var flag;
    if(is_reply_checked) { is_reply_checked = flag = false; }
    else{ is_reply_checked = flag = true; }
    for(i=0; i<length; i++) { reply_check[i].checked = flag; }
}

function del()
{
    var f = document.form1;
    var reply_check = f['reply_check[]'];
    var length = reply_check.length;
    var i; var chked = 0;
    for(i=0; i<length; i++) { if(reply_check[i].checked == true) chked = 1; break; }
    if(chked == 0)
    {
        alert('삭제할 답변을 선택해주세요.');
        return;
    }
}

var chked = 0;
    for(i=0; i < f.elements['priority'].length; i++)
    {
        if(f.elements['priority'][i].checked == true)
        {
            chked = 1;
            break;
        }
    }

JAVASCRIPT STYLE SHEET

 

 

 

☞스타일의 사용

---

<style class="text/css">...</style>
<style type="text/css">...</style>
<style>...</style>
<태그 style="..."></태그>
<style rel="stylesheet" type="text/css" href="외부스타일문서">

 

☞스타일의 지정

---

1. 태그로 지정 : td{...}
2. 클래스로 지정 : .text{...} -> <태그 class="text">
3. 아이디로 지정 : #text{...} -> <태그 id="text">

 

 

☞ 폰트 속성

---

※ 윈도우기본폰트 : 굴림, 굴림체, 궁서, 궁서체, 돋움, 돋움체, 바탕, 바탕체, Arial, Arial Black, Arial Narrow, Bookman Old Style, Comic Sans MS, Courier New, Garamon, Geogia, Impact, MingLiU, MS Hei,Minon Web, Morden, Monotype.com, MS Gothic, MS Song, Time New Roman, Trebuchet MS, Verdana

 

1. font-family
2. font-style : normal, italic, italic small-caps, oblique, oblique small-caps, small-caps
3. font-variant : normal
4. font-size : %, pt, xx-small, x-small, small, medium, large, x-large, xx-large, expression(document.body.clientWidth/13)<--브라우저 크기에 따라 변형
5. font-weight : 100~900, normal, bold, bolder, lighter

 

※ 일괄지정 : font : 스타일 대소문자 굵기 크기/줄간격 폰트

 

 

☞ 텍스트 속성

---

1. text-align : left, center, right, justify
2. vertical-align : top, middle, bottom, baseline(문자기본선), text-top(문자윗선), text-bottom(문자아래선), super, sub, %
3. text-transform : none, uppercase, lowercase, capitalize(첫번째 대문자)
4. text-decoration : none, blink(넷스케이프), underline, overline, line-through
5. letter-spacing : normal, %, 값(pt, px 등)
6. word-spacing(넷스케이프) : normal, %, 값(pt, px 등)
7. text-indent : pt, px, % 등

 

 

☞ 테두리 속성

---

1. border-color
2. border-style : none, dotted, dashed, solid, double, groove, ridge, inset, outset
3. border-width
4. border-top, border-bottom, border-let, border-right, border-top-속성

 

※ 일괄지정 : border : 스타일 두께 색상

 

 

☞ 여백 속성

---

1. margin-width
2. margin-height
3. margin-top,bottom,left,right
4. padding-top,bottom,left,right

 

※ 일괄지정 : margin: 상 우 하 좌 / padding:상 우 하 좌

 

 

☞ Float/Clear 속성

---

1. float : left, right, none
2. clear : left, right, none, both

 

 

☞ 색상과 배경 속성

---

1. color
2. background-color
3. background-image : url(URL)
4. background-repeat : no-repeat, repeat, repeat-x, repeat-y
5. background-attachment : scroll, fix
6. background-position : %, top center bottom, left center right

 

※ 일괄지정 : background-image: url(URL) 반복

 

 

☞ 위치결정과 겹치기 속성

---

1. position : absolute(브라우저 화면 기준, top/left/bottom/right %,값,Auto 지정), relative(겹치기 가능, top/left/bottom/right %,값,Auto 지정), static(기본값), fixed(브라우저 화면 기준,위치 고정)
2. drection : ltr(왼쪽배열), rtr(오른쪽배열)
3. z-index : 숫자(높을수록 위로), auto(0)

 

 

☞ 목록특성

---

1. list-style-type : disc, circle, square, demical, lower-roman, upper-roman, lower-alpha, upper-alpha, none
2. list-style-image : url(URL)
3. list-style-position : inside(들여쓰기), outside(내어쓰기), none

 

 

☞ 하이퍼링크의 지정

---

a:link{...}
a:visited{...}
a:active{...}
a:hover{...}

 

 

☞ 스크롤박스 만들기

---

overflow : visible(내용이 박스보다 커도 보여줌), hidden(내용이 크면 잘라서 보여줌), auto(내용이 크면 오른쪽스크롤바를 생성), scroll(항상 스크롤바생성)
<div style="width:500; height:60; background-color:#FFF799; border:solid 1 #827B00; overflow:auto;">

 

 

☞ 스타일과 자바스크립트

---

1. 객체.style.backgroundColor
2. 객체.style.fontWeight
3. 객체.style.fontStyle
4. 객체.style.fontFamily
5. 객체.style.color
6. 객체.style.filter

 

 

☞ 필터의 활용

---

1. filter : alpha(opacity=0~100, finishopacity=0~100, style=0(단일) 1(선형) 2(구형) 3(사각형), startx=시작값, starty=시작값, finishx=끝값, finishy=끝값)
2. filter : blur(add=0 또는 1 원본이미지와 합치기, strength=픽셀수, direction=0 45 90 135 180 225 270 315)
3. filter : chroma(color=투명처리할 색)
4. filter : dropshadow(color=그림자색, offx=거리, offy=거리, positive=1(불투명픽셀 대상) 또는 0(투명픽셀 대상))
5. filter : flipH 수평뒤집기
6. fliter : flipV 수직뒤집기
7. filter : glow(color=번질색, strength=1~255)
8. filter : gray
9. filter : invert
10. filter : lighta 빛이 투사
11. filter : mask(color=투명 영역에 칠할 색)
12. filter : shadow(color=그림자색, direction=0 45 90 135 180 225 270 315)
13. filter : wave(strength=0~100, freq=웨이브수, lightstrength=0~100 빛의강도, add=0 또는 1 원본이미지와 합치기, phase=0~100 웨이브각도)
14. filter : xray 경계
15. filter : blendTrans(duration=값)
16. filter : revealTrans(duration=값, transition=23가지의 효과)

 

 

☞ 마우스 포인터의 속성

---

 cursor : auto, default(화살표), help(물음표), wait(모래시계), hand(손), crosshair(십자), text(텍스트), e-resize(가로화살표), ne-resize(/화살표), n-resize(상하화살표), nw-resize(＼화살표), w-resize(가로화살표), sw-resize(/화살표), s-resize(세로화살표), se-resize(＼화살표)

 

 

☞ 스크롤바 속성

---

1. scrollbar-face-color
2. scrollbar-highlight-color
3. scrollbar-3dlight-color
4. scrollbar-shadow-color
5. scrollbar-darkshadow-color
6. scrollbar-track-color
7. scrollbar-arrow-color