제9장. XML문서 작성하기

DOM으로 문서 수정하기   

리스트 9.2 p.287 (ex9-1.html), 리스트 9.3 p.288 (convert9.js)
function convert(fm, xmldoc)
{
  var fname = fm.fname.value,
        output = fm.output,
        rate = fm.rate.value;
  output.value = "";

  var doc = parse(fname,xmldoc),
  top = doc.documentElement;
  walkNode(top,doc,rate); // doc에서 수정

  addHeader(doc, rate); // new function
  output.value = doc.xml; // 화면출력
}

function parse(uri,xmldoc) // same

function addHeader(doc,rate)
{
  var comm =
     doc.createComment("적용 환율 = "+rate),
  style =
     doc.createProcessingInstruction(
          "xml-stylesheet", 
          "href='prices.css' type='text/css'"),
  top = doc.documentElement;
  doc.insertBefore(comm,top);
  doc.insertBefore(style,comm);
}

 

function walkNode(node,doc,rate)
{                                                // doc에서 수정
  if(node.nodeType == 1) {
    if(node.nodeName == "product")
       walkProduct(node,doc,rate);
    else  {
       var children, i;
       children = node.childNodes;
       for (i=0; i<children.length; i++)
          walkNode(children.item(i),doc,rate);
    }
  }
}

function walkProduct(node,doc,rate)
{                                                   // doc에서 수정
  if(node.nodeType == 1 && 
                node.nodeName == "product")
  {
    var name, price, children, i;
    children = node.childNodes;
    for (i=0; i<children.length; i++)
    {
      var child = children.item(i);
      if(child.nodeType == 1)
        if(child.nodeName == "price")
          price = child; // 현재노드 (child)
    }
    var elmt = doc.createElement("price"), //신규
    text = doc.createTextNode(getText(price)*rate);
    elmt.setAttribute("currency","eur");
    elmt.appendChild(text);
    node.appendChild(elmt); // 바로 위의 노드
    price.setAttribute("currency","usd"); //현재노드
  }
}

function getText(node) // same

DOM으로 새로운 문서 작성하기  

리스트 9.4 p.296 (ex9-2.html)
<HTML> <FORM ID=“controls”>
   품명<INPUT … “name”> 가격<INPUT … “price”> 화폐<Select … “currency”>
  <... “작성하기” “create(controls,xml)”> <... “지우기” “resetAll(controls,xml)”>
  <Textarea “output”>
  <xml id=“xml”> </xml>

리스트 9.5 p.297 (create.js )
function create(fm,doc)
{
  var name = fm.name.value,
        price = fm.price.value,
        currency = fm.currency.value,
        output = fm.output;

  var top = getTopLevel(doc);
  //new node
  var elProduct = doc.createElement("product"),
        elName = doc.createElement("name");
        elPrice = doc.createElement("price");

  elPrice.setAttribute("currency",currency);

  var text = doc.createTextNode(name);
  elName.appendChild(text);

  text = doc.createTextNode(price);
  elPrice.appendChild(text);

  elProduct.appendChild(elName);
  elProduct.appendChild(elPrice);

  top.appendChild(elProduct);
   output.value = "";
  output.value = doc.xml;
} 		// 최상위 엘리먼트 생성
function getTopLevel(doc)
{
  var top = doc.documentElement;
  if (top == null)
  {
    top = doc.createElement("products");
    doc.appendChild(top);
  }
  return top;
}

function resetAll(fm,doc)
{
  var top = doc.documentElement;
  doc.removeChild(top);

  var output = fm.output;
  output.value = "";
}

DOM없이 문서 생성하기

리스트 9.6 [p.302] (ex9-3.html)
<FORM ID=“controls”>
  품명<INPUT … “name”>  가격(달러)< … “dollar”>  가격(유로)< … “euro”>  <Select “plist”>
  <“추가” “addProduct(controls)”> <“삭제” “deleteProduct(controls)”>
  <“XML변환” “exportProduct(controls)”> <“지우기” “output.value=''”>
  <Textarea “output”>

리스트 9.7 [p.303] (create.js)
var products = new Array(); // JavaScript 객체

function addProduct(fm)  // 1) "추가" 버튼
{
  var name = fm.name.value,
        dollars = fm.dollar.value,
        euros = fm.euro.value,
        pList = fm.plist;
                                     // 신규객체 생성
  var dPrice = new Price(dollars, "usd"),
        ePrice = new Price(euros, "eur"),
        prices = new Array(dPrice, ePrice),
        product = new Product(name, prices);

  var pos = products.length; // index 0부터 시작
  products[pos] = product; // 신규노드 삽입

  var option = new Option(name,pos); //JS 객체
  pList.options[pList.length] = option;
  // JS 객체속성 생성 :
  // <select> ... <option>...</option> </select>
}

function deleteProduct(fm)  // 2) "삭제" 버튼
{
  var pList = fm.plist,
  pos = pList.selectedIndex; // JS 객체속성

  if (pos != -1)
  {
    var product = pList.options[pos].value;
    pList.options[pos] = null; // List에서 삭제
    products[product] = null; // 배열에서 삭제
  }
}

function exportProduct(fm)  // 3) "변환" 버튼
{
  fm.output.value = makeXML();
}


function makeXML()
{
  var xmlcode = "";
  var i;

  for (i=0; i<products.length; i++)
     if (products[i] != null)
         xmlcode += products[i].toXML();
           // <product> …  </product>
  return element("products","",xmlcode);
}
// <products> <product …> … </products> 		function Price(amount,currency) // 객체생성
{
  this.amount = amount;
  this.currency = currency;
  this.toXML = price_toXML;
}

function price_toXML()
{
  return element("price",
       "currency=\"" + this.currency + "\"",
        escapeXML(this.amount));
}
// <price currency="xxx"> amount </price>

function Product(name,prices) // 객체생성
{
  this.name = name;
  this.prices = prices;
  this.toXML = product_toXML;
}

function product_toXML()
{
  var i, result = element(
            "name","",escapeXML(this.name));
            // <name>…</name>
  for (i=0; i < this.prices.length; i++)
     result += this.prices[i].toXML();
            // <price… >...</price>
  return element("product","",result);
}
//<product> <name>… <price… > </product>

function escapeXML(string)
{
  var result = "", i, c;
  for (i=0; i<string.length; i++)
  {
     c = string.charAt(i);
     if (c == '<') result += "&lt";
     else if (c == '&') result += "&amp";
     else result += c;
  }
  return result;
}

// element로 만들기
function element(name,attr,content)
{
  var result = "<" + name;
  if (attr != "") result += " " + attr;
    result += ">" + content + "</" + name + ">\r";
  return result;
}
// <name attr> content </name>

XML 문서 작업 (서버로 전달하기) : 생략

융통성 있게 작성하기 : XSLT로 여러 DTD 지원

<!ELEMENT products (product+)>
<!ELEMENT product (name, price+)>
<!ATTLIST price currency …> 		<!ELEMENT price-list (line+)>
<!ATTLIST line name …>
<!ATTLIST line price …>
<!ATTLIST line currency …>
리스트 9.12 [p.316] (ex9-4.html)
<FORM ID=“controls”>
품명<INPUT … “name”> 가격(달러) <… “dollar”> 가격(유로) <… “euro”> <Select “plist”>
<“추가” “addProduct(controls)”> <“삭제” “deleteProduct(controls)”>
<“XML변환” “exportProduct(controls,xml,xslt)”> <Select “format”> <“지우기” “…”>
<Textarea “output”>
<xml id=“xml”> </xml>
<xml id=“xslt” src=“convert.xsl”> </xml>

리스트 9.13 [p.317] (create3.js)
var products = new Array();
// 1번째 버튼 "추가"
function addProduct(fm)

// price 객체
function Price(amount,currency)
function price_toXML()

// product 객체
function Product(name,prices)
function product_toXML()

// element로 만들기
function element(name,attr,content)
function escapeXML(string)

// 2번째 버튼 "삭제"
function deleteProduct(fm) 		// 3번째 버튼 "변환" ***
function exportProduct(fm,xml,xslt)
{
  var selected = fm.format.selectedIndex,
        format = fm.format.options[selected].value;
  if (format == "default")
     fm.output.value = makeXML();
  else {
     var xmlDoc = makeXML();
     xml.async = false;
     xml.loadXML(xmlDoc); // 파서에 XML문서 전송
     fm.output.value =
         xml.transformNode(xslt.XMLDocument);
  }
}

function makeXML()

리스트 9.14 [p.322] (convert.xsl )
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
    <xsl:apply-templates/>
</xsl:template>

<xsl:template match="products">
    <price-list>
        <xsl:apply-templates/>
    </price-list>
</xsl:template>

<xsl:template match="product">
    <xsl:apply-templates/>
</xsl:template> 		<xsl:template match="price">
    <line>
    <xsl:attribute name="name">
        <xsl:value-of select="../name"/>
    </xsl:attribute>
    <xsl:attribute name="price">
        <xsl:value-of select="."/>
    </xsl:attribute>
    <xsl:attribute name="currency">
        <xsl:value-of select="@currency"/>
    </xsl:attribute>
    </line>
</xsl:template>

</xsl:stylesheet>