하늘 아래 세상 이야기.

// client : head 쪽에 javascript : chiwoniiAjaxMission

function Read(obj)
{

            if(event.keyCode==40) //다운키가 눌리면
              {
               
                    document.form1.sel1.focus();return; //--포커스를 select로
              }  
     

            objNode.text = encodeURI(obj.value);
            //텍스트박스에서 글자를 읽어 들어와서 encodiing

             xmlhttp.open ("Post","MissionServer2.aspx",false);
            //비동기, 화면 안바뀌고 하겠다
            xmlhttp.send(xmlpara); //비동기로 보내면

            var getstr = xmlhttp.responseXML; // 서버 처리 후 받아진다

              for(i=0; i< count.length; i++)
            {
           
            //--- 핵심 코드는 여기 뿐~!!! server에는 싹 비워!!!
            //--글자는 첫글자만 남기고 싹지워!!
            //-- 셀렉트에 옵션을 새로 추가하는 방법
           var option = new Option();
          
           option.text = getstr.getElementsByTagName("name")[i].childNodes[0].nodeValue;
           option.value = getstr.getElementsByTagName("seq")[i].childNodes[0].nodeValue;
              
                document.form1.sel1.add(option);
             //---    
           
            }
}
//--client : body쪽에는
<select id="sel1" multiple="multiple" style="display:none; width: 152px" onchange="sel1_onclick (sel1)">
           
            </select>    &nbsp;
          
            <div id="a">
          </div>

//--server 쪽에서는
 protected void Page_Load(object sender, EventArgs e)
    {
        //---입력 -- 원본이고
        XmlDocument xmldom = new XmlDocument();
        xmldom.Load(Request.InputStream);//텍박의 값을 받아서
        string name = xmldom.SelectNodes("PARAMETER").Item(0).SelectSingleNode("DATA").InnerText;//입력
        //파라미터 노드여러개중 첫번째꺼의 싱글노드 data의 텍스트를
        //디폴트에서 받은 파라미터
 

        //--- 출력
        XmlDocument new_xmldom = sqlfunction(name); //쿼리 결과를 얻어서 돔(XML)로 만든다.
        //-- 쿼리를 사용해서 새로운 것을 만들지
        Response.ContentType = "text/xml;charset=euc-kr"; //반드시 해야함. //강제적으로 첫줄에 넣고
        Response.Write(new_xmldom.OuterXml); //두번째 부터 넣는거지.

    }


protected XmlDocument sqlfunction(string itname)
    {

        string sql = "SELECT seq, name, it from BBS where name like @name";
             
        SqlConnection con = new SqlConnection("Data Source=192.168.1.15;Initial Catalog=BoardProject;User ID=sa;Password=1234");
        SqlCommand com = new SqlCommand(sql, con);

                itname = HttpUtility.UrlDecode(itname);
       com.Parameters.AddWithValue("@name", "%"+itname+"%");

        con.Open();

        SqlDataReader dr = com.ExecuteReader();

        //-- START
        XmlDocument xmldom = new XmlDocument();

        XmlElement root = xmldom.CreateElement("root");
                                        :
                                        :
                                        :
                                        :
 //결국 dom을 리턴한다.
}

function MakeXML()
{    
    var xmlDom = new ActiveXObject("Microsoft.XMLDOM");

    var objRoot = xmlDom.createElement("ROOT");
    xmlDom.appendChild(objRoot);
   
    var objNode = xmlDom.createElement("DATA");
    objRoot.appendChild(objNode);
 
    var Node1 = xmlDom.createElement("NAME");
    var Node2 = xmlDom.createElement("TEL");
    var Node3 = xmlDom.createElement("ADDRESS");
    var Node4 = xmlDom.createElement("ETC");
   
    Node1.text = "홍길동";
    Node2.text = "000-0000-0000";
    Node3.text = "서울시";
    Node4.text = "프로그래머";

    objNode.appendChild(Node1);
    objNode.appendChild(Node2);
    objNode.appendChild(Node3);
    objNode.appendChild(Node4);
     
    document.getElementById('<%=TextBox5.UniqueID%>').value = xmlDom.xml; 
}

사용될 아이프레임에

<IFRAME name="Best_member" align="left" marginWidth="0" marginHeight="0" src="./member_lank.aspx"
              frameBorder="0" scrolling="no" onload="Resize_Frame('Best_member');"></IFRAME>

사이즈조절 스크립트

function Resize_Frame(name)  //게시판 사이즈 변경
{
  var Frame_Body  = document.frames(name).document.body;
  var Frame_name  = document.all(name);
 
  Frame_name.style.width
   = "100%"; //어짜피 넓이는 100%정도가 딱이다..
  Frame_name.style.height
   = Frame_Body.scrollHeight + (Frame_Body.offsetHeight-Frame_Body.clientHeight);

  if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")
  {
   Frame_name.style.width = "100%";       //기본 iframe 너비
   Frame_name.style.height = "300px";      //기본 iframe 높이
  }
  //alert(Frame_name.style.width );
  //alert(Frame_name.style.height );
 
}

파일명 : ch07_01.xml 로 저장한다.

<?xml version="1.0" encoding="euc-kr" standalone="yes"?>
<MEETINGS>
 <MEETING TYPE="informal">
  <MEETING_TITLE>XML 세계에 오신것을 환영합니다.</MEETING_TITLE>
  <MEETING_NUMBER>2079</MEETING_NUMBER>
  <SUBJECT>XML</SUBJECT>
  <DATE>08/02/2006</DATE>
  <PEOPLE>
   <PERSON ATTENDANCE="presend">
    <FIRST_NAME>민</FIRST_NAME>
    <LAST_NAME>슬기</LAST_NAME>
   </PERSON>
   
   <PERSON ATTENDANCE="absent">
    <FIRST_NAME>오</FIRST_NAME>
    <LAST_NAME>지명</LAST_NAME>
   </PERSON>
   
   <PERSON>
    <FIRST_NAME>이</FIRST_NAME>
    <LAST_NAME>소룡</LAST_NAME>
   </PERSON>

  </PEOPLE>
 </MEETING>
</MEETINGS>

파일명:ch07_02.html

<html>
<head>
<title>Reading XML element Values</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
 function readXMLDocument(){
 
  var xmldoc, meetingsNode, meetingNode, peopleNode
  var first_nameNode, last_nameNode, outputText

  //새로운 문서객체를 만든다.
  xmldoc = new ActiveXObject("Microsoft.XMLDOM");

  //문서를 읽어들인다.
  xmldoc.load("ch07_01.xml");
 
  //문서의 루트 요소인 <MEETINGS>에 해당되는 노드 객체를 불러오며,
  //documentElement메소를 이용한다.
  meetingsNode = xmldoc.documentElement;

  //firstChild, nextChild, lastChild등의 메소드를 이용, 구성요소의
  //다른 자식 요소들로 마음대로 이동가능
  //firstSibling,nextSibling메소드를 사용하면 동일 레벨에서의 다른 구성요소에 접근 가능
  meetingNode = meetingsNode.firstChild;

  //예 -> <PEOPLE>요소 내에서 세 번째<PERSON>요소로 내려가고자 한다.
  //<PEOPLE>요소는 <MEETING>요소의 마지막 자식에 해당되므로 <PEOPLE>요소에 해당되는 노드에는 다음과
  //같이 접근할 수 있다.
  peopleNode = meetingNode.lastChild;

  //<PEOPLE>요소의 세 번째 사람을 원하는 것은 그 요소의 마지막 자식 요소를 찾아내는 것과 동일하므로
  //여기서는 lastChild 메소드를 사용하여 원하는 사람에게 접근할 수 있다.
  //personNode = peopleNode.lastChild;  /* 마지막 요소 */
  personNode = peopleNode.firstChild;   /* 첫번재 요소 */

  //마지막으로 사람의 이름을 저장하고 있는 <FIRST_NAME>과<LAST_NAME>구성요소에 해당되는
  //노드에 접근하기 위해 firstChild와 nextSibling(현재 노드와 동일 레벨에서의 다음 노드로 이동한다.) 메소드를 사용할 수 있다.
  first_nameNode = personNode.firstChild;
  last_nameNode = first_nameNode.nextSibling;

  //트리에서 자신이 원하는 실제 구성요소의 노드에 접근하는 방식
  //nodeValue속성을 사용하여 first_name과 last_name의 값을 구한다.
  var firstName, lastName
  firstName = first_nameNode.firstChild.nodeValue;
  lastName = last_nameNode.firstChild.nodeValue ;

  outputText = "Third name: " + firstName + " " + lastName;
  messgeDiv.innerHTML = outputText;

 }
//-->
</SCRIPT>
</head>
<body>
 <center>
  <h2>Reading XML element values</h2>

  <input type="button" value="Get the name of the third person" onClick="readXMLDocument();">
  <p>
  <Div id="messgeDiv"></div>
  </p>
 </center>
</body>
</html>

각각 복사해서 파일로 저장한뒤에 ch07_02.html파일을 실행해서 버턴을 클릭해보면 결과를 볼 수 있다.

JavaScript1.2 String 메소드

charCodeAt()
ie4에서는 문자의 Unicode 값을 nn4에서는 ISO-Latin-1 codeset 값을 돌려준다.
alert( "ABC".charCodeAt(0) ) 은 "ABC"에서 첫번째의 문자인 "A"의 값 65를 보여준다. 괄호 안의 숫자가 문자열에서 특정 문자의 위치를 지정한다. 

concat()
2개의 문자열을 하나의 문자열로 만든다.
alert( "안녕".concat("하세요") )는 "안녕하세요"를 보여준다. 함수의 앞에 있는 문자열 다음에 괄호 안에 있는 문자열을 덧붙인다. 

fromCharCode()
charCodeAt()와 반대의 동작을 하는 함수로 Unicode 값이나 ISO-Latin-1 codeset 값을 문자로 돌려준다
String.fromCharCode(65,66,67)은 "ABC"를 보여준다. String.fromCharCode()로 사용한다. 지정하는 인자는 여러개 지정할 수 있다. 

[match()]
Regular Expression의 exec()와 비슷한 동작하지만 RegExp 객체는 만들지 않고 맞는 문자정보를 배열로 반환한다.
var st = "abc def ghi" var arr = st.match(/\w+\s*/g)
arr은 ["abc", "def", "ghi"]를 가지고 있다.

[replace()]  
regular expression을 특정 문자열로 바꾼다. 사용 구문은 아래이다.
문자열.replace(regular expression, "바꿀문자열")
문자열 중에서 regular expression에 맞는 문자열을 "바꿀 문자열"로 바꾸어서 새로운 문자열을 만든다.
var st = "abc def ghi def" var arr = st.replace(/def/g, "DEF")
arr은 "abc DEF ghi DEF"의 문자열이 된다. 

[search()]   Regular Expression의 test()와 비슷한 동작을 하는 메소드로 문자열에서 regular expression을 검색한 것의 index를 반환한다. 검색된 것이 없으면 -1을 반환한다.
var st = "abc def ghi" var arr = st.search(/\w+\s*/g) if( arr != -1) alert("검색됨") else alert("없음") 으로 "검색됨"이 나온다. 위의 arr의 값은 0(zero)이다. 즉, exec()로 했을 때의 arr.index와 같은 값을 가진다. 

[slice()]   문자열에서 두 위치 사이의 문자열을 반환한다. substring()과의 차이점은 두번째 위치를 음수 정수로 지정하여 문자열의 끝에서의 위치를 지정할 수 있는 것이다.
alert( "abcde".slice(1, -2) )는 "bc"를 반환한다. 

[split()]
(1.2에서 수정됨)   나눌 문자로 문자열 뿐만이 아니고 regular expression도 사용할 수 있다.
"123+456+789".split(/\+/)는 ["123", "456", "789"]로 나온다. 

[substr()]   JavaScript1.1의 subString()과 비슷하게 두개의 위치안의 문자열을 반환한다. subString()과 다른점은 문자열의 끝에서 부터도 찾을 수 있는 것이다.
alert( "abcd".substr(-1, 2) )는 "cd"로 나온다. 

substring()
(1.2에서 수정됨) 수정된 사항은 nn4에서 시작위치가 끝위치 보다 더 큰 경우이다. 이 경우 JavaScript1.1에서는 끝위치에서 시작위치 - 1 까지의 문자열을 반환하지만 JavaScript1.2에서는 Run Time error 로 문자열을 반환하지 못한다.
<script language="JavaScript1.2"> "acbd".substring(3, 0) </script>
ie4, ie5에서는 이런 경우 수정되지 않았다. 

문자열 처리하기

anchor()
문서의 목적지를 가리키는 Anchor택을 지정한다.
var anchorString="이 지점으로.." document.write(anchorString.anchor("anchorName1"))
위의 구문은 <A NAME="anchorName1">이 지점으로..</A> 의 HTML을 만든다. 앞의 지정한 문자열을 링크의 내용으로 괄호 안의 문자열은 anchor의 이름이다. 

big()
지정한 문자열을 <big></big> 택으로 감싼다.
var makeBig = "big 입니다." document.write(makeBig.big()) 는 <big>big 입니다.</big> 로 된다. 

blink()
문자열을 <blink></blink> 택으로 감싼다.

bold()
문자열을 <b></b> 택으로 감싼다.

charAt()
문자열에서 특정 위치의 문자를 반환한다. 괄호 속에 지정해 줄 수 있는 정수는 0에서 문자열 길이-1의 정수를 입력할 수 있다.
alert("abc".charAt(1))은 'b'를 반환한다. 

eval()
괄호 속에 있는 문자열을 JavaScript 구문으로 실행한다.
var he = "Hello" eval("alert(" + he + ")" ) 는 alert("Hello") 와 같다. 

fixed()
문자열을 <TT></TT> 택으로 감싼다. 사용법은 big()과 같다.

fontcolor()
문자열을 괄호 속에 넣어준 색상값으로 <FONT COLOR=color> 형식으로 만든다. 색상값은 색상 이름이나 RGB 값을 지정할 수 있다. RGB 값은 여섯개의 16진수 값으로 처음 2개는 red 값, 다음 2개는 green 값, 마지막 2개는 blue값이다.
document.write("빨간색".fontcolor("red")) document.write("흰색".fontcolor(000000)) 는 <FONT COLOR="red">빨간색</FONT>, <FONT COLOR=000000>흰색</FONT> 으로 나온다. 
fontsize() fontcolor()와 비슷하다. <FONTSIZE=size> 의 형식으로 만든다. 괄호 속의 값은 size에 사용할 0에서 7까지의 정수값이다.
document.write("크기 3의 글자".fontsize(3))

[indexOf()]
문자열에서 특정 문자가 있는 위치를 반환한다. 괄호 속에 넣어줄 수 있는 인자는 2개가 있고 첫째것은 찾을 문자, 두번째 것은 찾기 시작할 위치이다. 두번째 인자는 지정하지 않을 수 있고 이 경우 문자열의 첫번째 문자부터 찾기 시작한다.
alert("abc cdf".indexOf("c"))은 2를 반환한다. 만약, 찾을 문자가 없다면 정수 -1을 반환한다. 

italics()
문자열을 <i></i> 택으로 감싼다.
 
lastIndexOf()
indexOf()와 같은 동작을 한다. 유일한 차이점은 이것은 문자열의 오른쪽에서 부터 왼쪽으로 찾는다.
alert("abcd cdf".lastIndexOf("cd"))는 5를 반환한다. indexOf()나 이것이나 문자열의 위치는 모두 왼쪽에서 오른쪽으로 지정되고 첫번째 문자의 위치는 0으로 지정된다. 

link()
다른 문서로 이동하는 <A>택을 지정한다.
var linkString="다음 페이지로.." document.write(linkString.link("next.htm"))
위의 구문은 <A HREF="next.htm">다음 페이지로..</A> 의 HTML을 만든다. 앞의 지정한 문자열을 링크의 내용으로 괄호 안의 문자열은 HREF에 지정될 문서 주소의 이름이다. 

small()
문자열을 <small></small> 택으로 감싼다.

[split()]
문자열을 특정 문자를 기준으로 나누어서 하나의 배열에 차례대로 저장한다. 괄호속에 넣어주는 문자가 기준이 되는 문자이다. 이 문자를 기준으로 양쪽의 문자열을 나눈다. 지정하지 않으면 전체 문자열을 배열에 저장한다.
var strArrey; strArray = "abc,dfe,123".split(",") 는 [abc,dfe,123]으로 strArray는 배열 객체가 된다. strArray.length는 3이고 strArray[2]는 "123"이다. 

strike()
문자열을 <strike></strike> 택으로 감싼다.

sub()
문자열을  택으로 감싼다.

[substring()]
문자열에서 지정한 위치 사이에 있는 문자열을 반환한다. 괄호 속에는 두개의 위치값을 인자로 지정해 줄 수 있다. 첫번째 인자의 위치에서 부터 두번째 인자 앞까지의 문자열을 반환한다.
alert( "a12345".substring(2,4) )는 "23"을 보여준다. 두번째 인자를 지정하지 않으면 전체 문자열의 끝까지를 지정하는 것이 된다.
alert( "a12345".substring(2) )는 "2345"를 보여준다.
 
sup()
문자열을  택으로 감싼다.

toLowerCase()
문자열을 소문자로 바꾼다.
alert( "Hello My Lover".toLowerCase() )는 "hello my lover"로 된다. 

toUpperCase()
문자열을 대문자로 바꾼다.

[toString()]
String 뿐만이 아닌 모든 객체의 method이다. Array, Boolean, Function, Number 등의 모든 객체를 문자열로 변환한다.
var ar = new Array("abc", "123") alert( ar.toString() ) 은 "abc,123" 을 보여준다.
괄호안에 2에서 16 까지의 진수를 지정해 줄 수도 있는데 이 경우는 숫자를 지정해준 진수의 숫자 문자열로 변환한다. 색상 변환에 사용할 수 있다.
var xx = 255 alert( xx.toString(16) ) 는 255를 16진수 "FF"로 나온다. xx.toString(2)는 "11111111"으로 나온다. 

valueOf()
객체의 원래 값을 돌려준다.

우선 사용예는 다음과 같다.

예)
<script language="javascript">
  function chk(pstr) {
   var chkRep = /....-..-../;
   alert(chkRep.test(pstr));
  }
</script>

정규식은 다음과 같다.

(1) ^ (caret) : 라인의 처음이나 문자열의 처음을 표시
예 : ^aaa (문자열의 처음에 aaa를 포함하면 참, 그렇지 않으면 거짓)

(2) $ (dollar) : 라인의 끝이나 문자열의 끝을 표시
예 : aaa$ (문자열의 끝에 aaa를 포함하면 참, 그렇지 않으면 거짓)

(3) . (period) : 임의의 한 문자를 표시
예 : ^a.c (문자열의 처음에 abc, adc, aZc 등은 참, aa 는 거짓)
a..b$ (문자열의 끝에 aaab, abbb, azzb 등을 포함하면 참)

(4) [] (bracket) : 문자의 집합이나 범위를 나타냄, 두 문자 사이의 "-"는 범위를 나타냄
[]내에서 "^"이 선행되면 not을 나타냄
이외에도 "문자클래스"를 포함하는 [:문자클래스:]의 형태가 있다.
여기에서 "문자클래스"에는 alpha, blank, cntrl, digit, graph, lower, print, space, uppper, xdigit가 있다.
이에 대한 자세한 내용은 C언어의 <ctype.h>를 참조하면 된다.
예를 들어 [:digit:]는 [0-9]와 [:alpha:]는 [A-Za-z]와 동일하다.
이외에 [:<:]와 [:>:]는 어떤 단어(숫자, 알파벳, '_'로 구성됨)의 시작과 끝을 나타낸다.
예 : [abc] (a, b, c 중 어떤 문자, "[a-c]."과 동일)
[Yy] (Y 또는 y)
[A-Za-z0-9] (모든 알파벳과 숫자)
[-A-Z]. ("-"(hyphen)과 모든 대문자)
[^a-z] (소문자 이외의 문자)
[^0-9] (숫자 이외의 문자)
[[:digit:]] ([0-9]와 동일)

(5) {} (brace) : {} 내의 숫자는 직전의 선행문자가 나타나는 횟수 또는 범위를 나타냄
예 : a{3} ('a'의 3번 반복인 aaa만 해당됨)
a{3,} ('a'가 3번 이상 반복인 aaa, aaaa, aaaa, ... 등을 나타냄)
a{3,5} (aaa, aaaa, aaaaa 만 해당됨)
ab{2,3} (abb와 abbb 만 해당됨)
[0-9]{2} (두 자리 숫자)
doc[7-9]{2} (doc77, doc87, doc97 등이 해당)
[^Zz]{5} (Z와 z를 포함하지 않는 5개의 문자열, abcde, ttttt 등이 해당)
.{3,4}er ('er'앞에 세 개 또는 네 개의 문자를 포함하는 문자열이므로 Peter, mother 등이 해당)

(6) * (asterisk) : "*" 직전의 선행문자가 0번 또는 여러번 나타나는 문자열
예 : ab*c ('b'를 0번 또는 여러번 포함하므로 ac, ackdddd, abc, abbc, abbbbbbbc 등)
* (선행문자가 없는 경우이므로 임의의 문자열 및 공백 문자열도 해당됨)
.* (선행문자가 "."이므로 하나 이상의 문자를 포함하는 문자열, 공백 문자열은 안됨)
ab* ('b'를 0번 또는 여러번 포함하므로 a, accc, abb, abbbbbbb 등)
a* ('a'를 0번 또는 여러번 포함하므로 k, kdd, sdfrrt, a, aaaa, abb, 공백문자열 등) doc[7-9]* (doc7, doc777, doc778989, doc 등이 해당)
[A-Z].* (대문자로만 이루어진 문자열)
like.* (직전의 선행문자가 '.'이므로 like에 0 또는 하나 이상의 문자가 추가된 문자열이됨, like, likely, liker, likelihood 등)

(7) + (asterisk) : "+" 직전의 선행문자가 1번 이상 나타나는 문자열
예 : ab+c ('b'를 1번 또는 여러번 포함하므로 abc, abckdddd, abbc, abbbbbbbc 등, ac는 안됨)
ab+ ('b'를 1번 또는 여러번 포함하므로 ab, abccc, abb, abbbbbbb 등)
like.+ (직전의 선행문자가 '.'이므로 like에 하나 이상의 문자가 추가된 문자열이 됨, likely, liker, likelihood 등, 그러나 like는 해당안됨)
[A-Z]+ (대문자로만 이루어진 문자열)

(8) ? (asterisk) : "?" 직전의 선행문자가 0번 또는 1번 나타나는 문자열
예 : ab?c ('b'를 0번 또는 1번 포함하므로 abc, abcd 만 해당됨)

(9) () (parenthesis) : ()는 정규식내에서 패턴을 그룹화 할 때 사용

(10) | (bar) : or를 나타냄
예 : a|b|c (a, b, c 중 하나, 즉 [a-c]와 동일함)
yes|Yes (yes나 Yes 중 하나, [yY]es와 동일함)
korea|japan|chinese (korea, japan, chinese 중 하나)

(11) \ (backslash) : 위에서 사용된 특수 문자들을 정규식내에서 문자를 취급하고 싶을 때 '\'를 선행시켜서 사용하면됨
예 : filename\.ext ("filename.ext"를 나타냄)
[\?\[\\\]] ('?', '[', '\', ']' 중 하나)

정규식에서는 위에서 언급한 특수 문자를 제외한 나머지 문자들은 일반 문자로 취급함 

자바스크립트 쿠키는 CGI의 HTTP Cookie와 내용 및 작동하는 법은 같으나 약간의 차이가 있습니다. 아래는 자바스크립트 쿠키에 대한 개요입니다.

1. 자바스크립트에서 지원하는 사용자의 특정 정보를 저장하는 기법
2. 클라이언트의 브라우저에 저장되나 서버에는 저장되지 않습니다.
3. 일정 기간 동안만 유효하게 할 수 있고, 유효기간(만료기한)이 설정되지 않을 경우 브라우저 종료시 자동으로 사라집니다.
4. 클라이언트에는 브라우저가 실행중에는 메모리에, 종료될 경우 만료기한에 따라 cookies.txt라는 파일에 저장될 수 있습니다.
5. 웹 서버의 환경변수 HTTP_COOKIE에는 저장되지 않습니다.

자바스크립트 쿠키는 서버와는 무관하기 때문에 일반적으로 잘 사용하지는 않습니다. 그러나, 클라이언트 내에서는 얼마든지 쿠키의 정보유지기법을 사용할 수 있으므로 간단한 방문 기록 남기기 등에서는 쓰일 수 있습니다.

자바스크립트에서 쿠키를 참조하기 위해서는 document.cookie객체를 사용합니다. 아래는 가장 일반적으로 사용되는 쿠키 관련 자바스크립트 함수들입니다. 아래 함수의 주요 기능은 document.cookie객체의 문자열 조작을 통하여 쿠키로부터 값을 빼내는데 사용됩니다.

위의 함수에서 사용자가 쓸 함수는 GetCookie(), SetCookie()입니다. 사용하는 문법은 아래와 같습니다.

* GetCookie
설정되어 있는 쿠키의 값을 가져옵니다.

* SetCookie
쿠키의 값을 설정한다.

아래의 예제는 쿠키값을 설정하고, 만료일을 쿠키가 설정된 후 1시간 이후로 설정하는
예제입니다.

쿠키는 설정된 후에 브라우저가 활성화 되어 있고 만료일이 경과되지 않는 한 브라우저에 따라 설정된 디렉토리 내의 cookies.txt를 지우더라도 값이 유지된다는 점을 주의하기 바랍니다.

prototype.js는 JavaScript Framework이다. 아니, Ajax Framework이라고 표현하는 것이 더 적절하다. Framework이 의미하듯이 자바스크립트로 애플리케이션을 개발하기 쉽도록 많은 Utility 함수를 포함하고 있으며 자바스크립트 자체의 오브젝트 및 클래스를 확장한 오브젝트와 클래스를 제공한다. 또한, prototype.js 자체적으로 제공하는 오브젝트와 클래스가 있다.

자바스크립트 framework이라고 해서 자바스크립트만 다루고 있는 것은 아니다. Ajax의 기본 기능인 비동기 통신과 동기 통신을 위한 클래스를 제공하고 있다.

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Ajax 기술 정리

Ajax 서버 측 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=3920

Ajax 패턴 정리 : http://ajaxpatterns.org/Patterns

Ajax 읽어볼만한 글

 
Web 2.0 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=4182

Web 2.0과 Ajax 애플리케이션 : http://cafe.naver.com/ajaxdev/4

Ajax의 효용성에 대한 논문 : http://cafe.naver.com/ajaxdev/101

① 글자의 간격을 지정할 때(letter-spacing)

    - {letter-spacing:글자간의 간격값}

    - 상대적 길이 단위인 em으로 표기하면 적용하기 쉬움

    - 속성값 : normal 또는 길이 단위의 수치 입력

    - 예) <style type="text/css">

                 P {letter-spacing:0.5em ; font-size:12pt}

           </style>

② 텍스트에 밑줄을 그어줄 때(text-decoration)

    - {text-decoration:텍스트의 장식}

    - 속성값 : none - 기본값

                  underline - 텍스트에 밑줄(=<u>~~~</u>)

                  overline - 텍스트에 윗줄

                  line-through - 텍스트를 관통하고 중앙에 줄(=<strike>~~~</strike>)

                  blink - 텍스트가 깜빡이게 설정(넷스케이프에서만 지원)

    - 예) <body>

                 <P style="text-decoration:none">~~~</P>

                 <P style="text-decoration:underline">~~~</P>

                 <P style="text-decoration:overline">~~~</P>

                 <P style="text-decoration:line-through">~~~</P>

                 <P style="text-decoration:blink">~~~</P>

           </body>

③ 텍스트를 수직정렬할 때(vertical-align)

    - {vertical-align:글꼴의 수직정렬 값}

    - 이미지나 글꼴의 수직정렬 설정

    - 속성값 : baseline - 기본 줄에 맞춤

                  sup - 아래첨자

                  super - 윗첨자

                  middle - 이미지와 함께할 때 텍스트를 중앙에 맞춤

                  text-top - 텍스트와 함께할 때 텍스트를 맨위에 맞춤

                  top - 이미지와 함꼐할 때 텍스트를 맨위에 맞춤

                  text-bottom - 텍스트와 함께할 때 텍스트를 맨 아래에 맞춤

                  bottom - 이미지와 함께할 때 텍스트를 맨 밑부분에 맞춤

    - 예) <style type="text/css">

                P {font-size:12pt}

           </style>

           .....

           <body>

               <P>

                  <font style="vertical-align:sub ; color:red ; font-size:12pt">~~~</font>

               </P>

          </body>

④ 텍스트의 대소문자를 지정할 때(text-transform)

    - {text-transform:문자열의 변환값}

    - 대소문자를 변환해주는 기능(font-variant에서 확장된 속성을 가짐)

    - 속성값 : capitalize - 영문자의 첫자만을 대문자로 바꾸어줌

                   none - 아무런 적용을 하지 않음

                   uppercase - 모든 영문자를 대문자로 바꾸어줌

                   lowercase - 모든 영문자를 소문자로 바꾸어줌

    - 예) <body style="font-size:12pt">

                <font style="text-transform:capitalize">~~~~~~~</font>

                <font style="text-transform:none">~~~~~~~~~~</font>

                <font style="text-transform:uppercase">~~~~~~</font>

                <font style="text-transform:lowercase">~~~~~~~</font>

            </body>

⑤ 텍스트나 이미지 옆 문자열을 정렬할 때(text-align)

    - {text-align:문자열의 정렬}

    - HTML의 align속성과 같은 기능. 글자나 이미지의 위치를 자유롭게 설정

    - 속성값 : left

                  center

                  right

                  justify

    - 예) <body>

                <P style="text-align:left">~~~~~~~~~</P>

                <P style="text-align:center">~~~~~~~</P>

                <P style="text-align:right">~~~~~~~~</P>

                <P style="text-align:justify">~~~~~~~</P>

           </body>

⑥ 문자열의 들여쓰기를 할 때(text-indent)

    - {text-indent:문자열들여쓰기}

    - 속성값 : 길이의 단위 적용, %가능, 음의 값 사용 가능

    - 예) <body>

               <P style="text-indent:20pt">~~~~~~~~~~~~~~~~</P>

               <P style="text-indent:3cm">~~~~~~~~~~~~~~~~</P>

               <P style="text-indent:20%">~~~~~~~~~~~~~~~~</P>

            </body>

⑦ 문서의 줄 간격을 지정할 때(line-height)

    - {line-height:줄간격}

    - 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용

    - 속성값 : normal, 길이단위, %

    - 예) <body>

              <P style="line-height:14pt">~~~~~~~~~~~~~~~~</P>

              <P style="line-height:normal">~~~~~~~~~~~~~~~</P>    

              <P style="line-height:150%">~~~~~~~~~~~~~~~</P>                 

           </body>

input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스

<input class="Wfield" onfocus="this.value='';" size="15" value="이름" name="RP_NAME">

<input class="Wfield" onfocus="this.value='';" size="15" value="비밀번호" name="RP_PASS">

아래 입력 상자는 한글로 입력이 됩니다.

[텍스트박스]
<input type=text style="ime-mode:active;" size=20>

[다중 텍스트박스]

<textarea style="ime-mode:active;" >
</textarea>

|예제| <xsl:for-each select="테스트/사람">
for-each문은 반복적인 수행을 하기위해서 사용됩니다. select속성에는 반복할 태그명을 설정합니다. <테스트>태그안에 있는 <사람>태그를 반복적으로 읽어오기 위해서 select속성에 "테스트/사람"을 설정하였습니다. 상위태그와 하위태그를 구분하는데 '/'기호를 이용합니다.

|예제| <xsl:value-of select="전화번호">
value-of의 select속성은 속성에 해당하는 문자열을 출력하기위해 사용됩니다.

|예제|  <!ELEMENT test (name?, bc?)>
<test>태그안에 <name>과 <bc>태그를 사용합니다. <name>과 <bc>태그는 한 번 사용하거나 사용하지 않습니다.

|예제|  <!ELEMENT name (#PCDATA)>
<test>태그안에 사용하는 태그로 문자열을 설정합니다.

|예제|  <!ELEMENT bc (#PCDATA)>
<bc>태그안에 사용하는 태그로 문자열을 설정합니다.

#XML 선언방법 및 개념
XML은 데이터가 들어있는 문서로 DTD에 선언된 태그를 참고하여 작성합니다. 또한 XSL에서 작성된 양식을 XML과 함께 사용하면 다양한 출력형태를 만들어 낼 수 있습니다.
XML을 식별하기 위해서는 식별문장을 작성합니다.
   <?xml version="1.0" encoding="euc-kr" standalone="no"?>
또는
   <?xml version="1.0" encoding="ks_c_5601-1987" standalone="no"?>
식별문장은 대소문자를 구분하므로 꼭 소문자로 작성해야 합니다.
  영문 xml선언
<?xml version="1.0" encoding="UTF-8"?>

#헤더(Header)부분의 속성
- version : XML의 버전을 설정합니다.
- encoding : 국가별 인코딩을 설정합니다. 우리나라는 "euc-kr"이나 "ks_c_5601-1987"로 설정하면 됩니다.
- standalone : XML문서를 독립적으로 사용할 지, 외부의 DTD를 읽어올지 유무를 설정합니다. "yes"를 설정하면 XML문서를 독립적으로 사용하겠다는 의미입니다. "yes"나 "no"를 사용하여 설정합니다.

#노드(NODE)
노드는 리스트 등과 같은 자료구조에서 정보의 기본 단위. 혹은 분기점/접속점으로 설명될 수 있습니다.
<주소록>태그는 XML태그의 부모노드라고 합니다. 부모노드는 XML파일을 대표하는 이름이므로 한 개만 존재해야 합니다.
<사람>태그는  최상위 자식노드입니다. 부모노드는  꼭 한 개만 존재해야하지만 최상위 자식노드는 동일한 것이 여러개 존재할 수 있습니다.
<이름>, <방송>태그는 최상위 자식노드에서 파생된 자식노드입니다.

부모노드와 자식노드를 데이터베이스용어에 비유한다면 다음과 같이 설명할 수 있습니다.
- 부모노드 :: 테이블
- 최상위 자식노드 :: 레코드(<사람>태그가 두개있으므로 두 개의 레코드가 있는 것입니다.)
- 자식노드 :: 필드. 이름, 방송필드가 있는 것입니다.
XML파일은 부모노드를 시작으로 상속받아 계속적으로 자식노드를 만들 수 있기때문에 데이터베이스의 용어와 비유한다는 것은 약간 무리가 있습니다. 그렇지만 비유해서 생각하면 XML파일을 데이터베이스의 테이블처럼 사용할 때 이해가 쉽게 될 것입니다.

#XML의 파일구조
HTML은 대소문자를 구분하지 않지만, XML은 대소문자를 구분합니다. XML파일은 DTD파일과 XSL파일을 호출하여 사용할 수 있습니다. 또한, DTD와 XSL파일을 XML파일안에 삽입하여 사용할 수도 있습니다.
XML과 함께 사용되는 파일의 종류와 설명은 다음과 같습니다.
- DTD(.dtd) : 요소를 선언합니다.
- XSL(.xsl) : 문서의 스타일시트를 만들어 줍니다.
- XML (.xml) : 문서의 정보를 작성합니다.

#DTD(Document Type Definition)
HTML과는 다르게 XML은 태그를 만들 수 있습니다.
DTD(문서형식정의:Document Type Definition)는 사용자가 만든 태그를 정의하는 부분입니다. DTD안에 정의된 태그의 형식에 맞춰 XML문서를 작성합니다. 그러므로 DTD에 선언된 태그는 정상적으로 XML에서 사용했는 지의 유무를 알 수 있으므로 XML문서의 에러검증을 하는 데도 사용됩니다.
DTD는 XML문서안에 포함하여 사용하거나 XML문서안에서 저장된 DTD파일을 읽어와서 사용할 수 있습니다.
DTD는 장점과 단점을 가지고 있습니다. 사용자가 DTD를 매번 만든다면 참으로 어려운 작업이 될 것입니다. 그러므로 개인사용자가 쓰기엔 불편한 점이 많습니다. 그러나 표준적인 DTD를 제공한다면 사용자가 손쉽게 작업을 할 수 있을 것입니다.

#DTD파일 작성예제
<?xml version='1.0' encoding='ks_c_5601-1987'?>
<!ELEMENT 주소록집 (주소록*)>
<!ELEMENT 주소록 (전화번호+, 이메일*, 주소?)>
<!ATTLIST 주소록 이름 CDATA #REQUIRED>
<!ELEMENT 전화번호 (#PCDATA)>
<!ATTLIST 전화번호 종류 CDATA #REQUIRED>
<!ELEMENT 이메일 (#PCDATA)>
<!ELEMENT 주소 (#PCDATA)>

#DTD내 요소(Element)의 정의
DTD에서 정의하는 태그이름을 요소(Element)라고 합니다.
|형식|
   <!ELEMENT 요소이름(내용)>
|예제|
   <!ELEMENT address(name+, email?)>
   <!ELEMENT title(#PCDATA)>

ATTLIST선언은 태그안에 속성을 만듭니다.
|형식|
   <!ATTLIST 요소명 속성명 형문자 속성선언>
|예제|
   <!ATTLISE address tel CDATA #REQUIRED>

#요소내 기호설명
 () : 그룹요소
|예제|  (태그1|태그2),태그3
태그1이나 태그2중의 하나가 나타나고 그 뒤에 태그3가 나타납니다.

 * : 여러번 사용할 수도 있거나 사용하지 않을 수 있습니다.
|예제|  태그1*
태그1이 여러번 나타나거나 나타나지 않을 수 있습니다.

 + : 한 번이상 나타납니다.
|예제|  태그1+
태그1이 한번이상 나타납니다.

 , : 나열된 순서대로 나타납니다.
|예제|  태그1, 태그2
태그1이 나타난 다음에 태그2가 나타납니다.

 ? : 1회나타날 수 있거나 나타나지 않을 수 있습니다.
|예제|  태그1?
태그1이 한번 나타나거나 나타나지 않습니다.

 | : or조건
|예제|  태그1|태그2
태그1 또는 태그2가 반드시 나타납니다.

 없음 : 1회 나타납니다.
|예제|  태그1
태그1이 한번 나타납니다.

#요소내 키워드
- #PCDATA : 'parsed Character DATA'의 약어로 문서의 문자열을 전달하겠다는 의미로 사용됩니다.
  해당문자열의 nodeName은 '#text'로 반환됩니다.
- EMPTY : 문자열내용이 없는 태그를 사용하겠다는 의미입니다.

#DTD에서 사용되는 형 문자
CDATA : 문자데이터
ID : 다른 ID형과 구분되는 고유이름
IDREF : 다른 ID형에 정의된 이름
IDREFS : 다른 ID형에 정의된 이름이 목록
ENTITY : 미리 선언된 외부객체의 이름
ENTITES : 미리 선언된 외부객체이름의 목록

#DTD내 속성선언
#REQUIRED : 속성값을 꼭 지정해야 합니다. 그렇지 않으면 노드에러를 출력합니다.
#IMPLIED : 속성값을 지정하지 않아도 됩니다. 속성값을 지정하지 않으면 노드를 무시합니다.
#FIXED value : [value]를 요소에서 설정해야 합니다. 요소에서 이 속성을 사용하지 않으면 [value]로 처리합니다.
defaultvalue : 기본값을 설정합니다. 요소를 설정하지 않으면 defaultvalue로 설정됩니다.

#XML문서안에 DTD선언
DOCTYPE선언은 DTD파일을 호출하거나 DTD내용을 선언하기 위해서 사용됩니다.
|예제|
   <?xml version="1.0"?>
   <!DOCTYPE 부모노드명 [
    <!ELEMENT 부모노드 (#PCDATA)>
   ]>

#XML에서 DTD파일을 호출
|에제|
   <?xml version="1.0"?>
   <DOCTYPE 부모노드명 SYSTEM "test_dtd.dtd">

#XML
SGML(Standard Generalized Markup Language)은 HTML(Hyper Text Markup Language)이나 XML(eXtensible Markup Language)의 조상이 되는 언어입니다. SGML은 다양한 표준적인 기능을 포함하고 있지만 작성하기에는 까다로운 부분이 있어 일반사용자가 사용하기엔 어려운 부분이 많았습니다. 그렇기 때문에 특정 데이터를 처리(통계적요약, 수학적표시, 설명서등)하기 위해 사용되었습니다.

SGML을 단순화시켜서 발표한 것이 HTML입니다. HTML은 SGML의 기본적인 태그부분을 사용하여 사용자가 쉽게 작성할 수 있게 만들었습니다.
 HTML은 단순화된 태그라서 인터넷상의 문서를 처리하기에 부족한 부분이 많았습니다. 그래서 새롭게 등장한 것이 XML입니다.
 XML은 SGML에 근접하면서도 까다롭고 사용하지 않는 부분을 제거하고 HTML보다 확장된 기능을 포함하고 있습니다. 예를 들면, HTML은 기존에 만들어진 태그만을 사용하지만 XML은 사용자가 태그를 만들어 낼 수 있습니다.

 W3C(World Wide Web Consortium)은 웹에 관련된 표준제정과 발전을 돕는 단체입니다. W3C는 투표를 통하여 웹표준이 선정되면 공식적인 표준을 인터넷사이트에 발표합니다. 그렇기때문에 XML에 관한 정보는 'www.w3c.org'를 통해 자료를 얻을 수 있습니다.

#기본양식
|예제| <?XML version="1.0"?>
XML문서임을 알려주는 헤더(Header)부분입니다. 현재 사용되는 버전은 1.0이므로 version속성에 '1.0'을 설정합니다. XML은 HTML의 대부분 태그를 지원하고 있기 때문에 XML에서 HTML태그를 사용할 수 있습니다.

|예제| <b>XML에 오신 걸 환영합니다.</b><br></br>
HTML의 <br>태그는 한 라인을 띄우기위해서 사용되고 태그를 닫아주는 </br>가 쓰이지 않습니다. XML에서도 <br>태그는 한 라인을 뜨우기위해 사용되지만, XML에서는 시작과 끝이 없는 태그를 허용하지 않기때문에 <br>태그도 다음과 같이 닫아줘야 합니다.

|예제| <img src="naver.gif"/>
XML에서는 img태그도 마지막에 닫아주기위해 "/"를 삽입해야 합니다.

#CSS
- (background)-color
 └ menu : '화면배색'의 메뉴색상입니다.
 └ highlight : '화면배색'의 선택항목색상입니다.
- border
 └ buttonhighlight : 메뉴스타일로 입체적으로 나온 스타일입니다.
- line-height : 라인간격을 설정합니다. default는 1입니다.

#JavaScript
:: event객체 :: 이벤트를 처리합니다.
 └ srcElement : 이벤트가 발생한 객체를 반환합니다.
 └ getAttribute("속성") : 해당객체의 속성값을 반환/설정합니다.
 └ offsetX : 컨테이너를 기준으로 이벤트가 발생된 x좌표를 반환/설정합니다.
 └ offsetY : 컨테이너를 기준으로 이벤트가 발생된 y좌표를 반환/설정합니다.
 └ offsetParent : 해당 컨테이너를 가리킵니다.

Java Script
AJAX
2007. 7. 16.
안혁
http://hyok.kr

.참고문헌
 - Beginning Ajax with ASP.NET <Wrox>


 AJAX라는 것은 기존에 없던 새로운 언어가 아닙니다. "Java Script에서 XML을 비동기적으로 요청하여 기존 웹프로그래밍의 문제점을 해결한다"라고 하는 기존 기술에 대한 재발견이지요. 이미 AJAX가 이야기 된지도 오래 되었기에, 이미 다들 알고 있는 사실이 아닌가 생각됩니다. 앞에서 이야기한 기술의 핵심인 '그' 비동기적 요청이라는 것을 해보도록 하겠습니다.

 Java Script에서 HTTP를 요청하려면 HTTP 객체를 먼저 생성하여야 합니다. 브라우저에 따라 조금 다른데요. 비 MS Explore에서는
    xmlHttpObj = new XMLHttpRequest();
MS Explore에서는 버전에 따라
    xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
또는
    xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
의 방식으로 객체를 생성할 수 있습니다. 이를 코드로 표현하여 본다면
    if(window.XMLHttpRequest)
        xmlHttpObj = new XMLHttpRequest();
    else
    {
        try
        {
            xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
정도로 표현할 수 있겠습니다. 객체 생성시 마다 매번 이를 기술하는 것보다 함수로 만들어 호출하는 것이 좋으리라 생각됩니다. 저는 다음과 같이 작성하여 이를 CommonAJAXLibrary.js라는 파일로 저장하였습니다. 함수명에 XML글자가 들어있는 것은 이 함수의 주목적이 XML을 다루것에 있기 때문입니다. 꼭 XML만 요청할 수 있어서 그런 것은 아니며 HTML페이지도 요청할 수 있습니다. CreateXmlHttpRequestObject() 함수 위에 존재하는 5개의 변수는 이후에 사용될 상수값입니다. 이에 대해서는 잠시 후 설명드리겠습니다. 여기서는 상수 4만 필요하지만, 코드에 4만 적혀있으면 이해하기 더욱 힘들 것 같아 모두 기록해둡니다. 변수명을 보시면 각각이 무었인지 추측하실 수 있으리라 생각됩니다. 일단 넘어갑시다.

 일단 위의 코드를 CommonAJAXLibrary.js라는 화일로 저장한 후 다음의 코드를 따라오세요.
 

 6 : xmlHttpObj변수에 방금 만든 함수를 사용하여 XMLHttpRequest객체를 생성합니다.
 10 : url에 요청할 페이지의 웹주소를 넣은 후 이 11번째 url을 줄에서 요청 페이지로 설정합니다.
 11 : xmlHttoObj.open("GET", url, true)이라하여 요청 URL을 설정하는데, 3번째 인자가 false이면 동기식, true이면 비동기식 요청입니다. 동기식으로 요청하면 응답이 있을때까지 대기하며, 비동기식으로 요청하면 응답이 있을때까지 다른 일을 합니다.
 12 : xmlHttpObj.onreadystatechange는 이름으로 미루어 보아 요청상태가 변할때 호출하게 될 함수를 지정하는 것이라 추측 가능하군요. 상태가 변할때마다 호출하는데, 내용을 보면 '완료'상태가 되었을때 xmlHttpObj.responseText 즉 요청한 HTML을 divResults라는 녀석에게 대입하라는 내용입니다. divResults는 <div>테그입니다. 오해할만한 것이 있다면, 지금까지는 실행이 아니고 설정이라는 것입니다.
 19 : xmlHttpObj.send(null)이라는 명령으로 설정에 따라 요청이 시작됩니다. 눈에는 보이지 않지만, 뒤에서 요청이 이루어지고 완료가 되었을때 결과가 <div>테그인 divResults에 입력됩니다. 그러면 그 순간 결과는 화면에 출력되겠지요.

 다음은 그 출력을 위한 HTML페이지 입니다. 위 자바스크립트와 같은 화일에 입력하셨야 합니다.
 

 위의 자바스크립트와 이 HTML을 한 화일에 작성하여 마음에 드는 이름으로 저장하십시오. 코드를 그대로 따라오셨다면, 이 화일과 CommonAJAXLibrary.js는 같은 폴더에 있어야 합니다. 다음의 XML코드가 바로 요청대상인 DataFile.xml입니다. 물론 이 화일도 같은 위치에 있어야 합니다. 내용은 꼭 XML이 아니어도 됩니다. 일반 HTML로 작성해도 되며 텍스트 문서이어도 상관없습니다.
 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?xml version="1.0" encoding="utf-8" ?> <Customers>    <Customer>      <Firstname>Foe</Firstname>      <Lastname>Bloggs</Lastname>      <email>joe@bloggs.com</email>    </Customer>    <Customer>      <Firstname>Alen</Firstname>      <Lastname>Anonymous</Lastname>      <email>anon@ymous.com</email>    </Customer>   <Customer>      <Firstname>Marvin</Firstname>      <Lastname>Martian</Lastname>      <email>marvin@mars.com</email>    </Customer> </Customers>

 HTML 화일을 웹 브라우저로 열면 다음과 같은 화면이 나오게 됩니다.

버튼을 누르면 다음과 같이 요청된 페이지가 출력됩니다.