제12/11장. Script, Interactivity & Linking

Javascript 개요

• History
  • Netscape 사가 자체 개발 중이던 LiveScript 언어를 => JavaScript 으로 개칭
    • JavaScript 은 Java 가 아니다 (Java의 한 변종)
    • 현재 Dynamic HTML 의 핵심요소 중 하나
  • Microsoft사는 JScript,
  • 유럽 표준 ECMAScript라는 명칭

• 특징
• 객체기반언어(Object-based Language)
  • 객체(object) + 속성(property)/메소드(method) + 사건(event handler)
  • 이벤트 프로그래밍
  • built-in object 지원
• Browser에서 주로 실행
• Platform Independent (OS 독립적) : windows, Mac 등
• 방문객과의 Interaction (상호작용)
  • 입력제어, 메시지, 동작의 구현 등 문서 내 모든 객체에 대한 다양한 기능의 제어
  • 장점 => 사용 편리성, 강력한 기능, 확장성

이벤트 핸들링

• 이벤트 핸들링 : on이벤트 = "이벤트 핸들러 (스크립트)"

• 이벤트
  • 마우스 이벤트 : click, dblclick, focusin, focusout, activate,
                           mousedown, mouseup, mousemove, mouseover, mouseout, ...
  • 키보드 이벤트 : keydown, keypress, keyup, ...
  • 상태 변경 이벤트 : load, unload, abort, error, zoom, scroll, ...

<script> 요소

• <script type="..."> ...스크립트 (프로그램) ... </script>
  • <script  type="text/Jscript> <![CDATA[
      ...스크립트 (프로그램) ... 
    ]]> </script>

예제 1)

<svg width="6cm" height="5cm" viewBox="0 0 600 500">   <script type="text/ecmascript"> <![CDATA[     function circle_click(evt) {       var circle = evt.target;       var currentRadius = circle.getAttribute("r");       if (currentRadius == 100)         circle.setAttribute("r", currentRadius*2);       else         circle.setAttribute("r", currentRadius*0.5);     }   ]]> </script>     <rect x="1" y="1" width="598" height="498" fill="#FFFF88" />   <circle onclick="circle_click(evt)"              cx="300" cy="225" r="100"  fill="red"/>   <text x="300" y="480"  font-family="Verdana"           font-size="35" text-anchor="middle">     Click on circle to change its size   </text> </svg>

예제 2)

<svg width="6cm" height="5cm" viewBox="0 0 600 500">   <script type="text/ecmascript"> <![CDATA[       function circle_over(evt) {          var circle = evt.target;          var currentStroke = circle.getAttribute("stroke");          if (currentStroke == "none")             circle.setAttribute("stroke", "blue");       }       function circle_out(evt) {          var circle = evt.target;          var currentStroke = circle.getAttribute("stroke");          if (currentStroke != "none")             circle.setAttribute("stroke", "none");       }   ]]> </script>   <rect x="1" y="1" width="598" height="498" fill="#FFFF88"/>   <circle   onmouseover="circle_over(evt)"                   onmouseout="circle_out(evt)"                 cx="300" cy="225" r="100" stroke="none" fill="red"/>   <text  ...> Move mouse over/out the circle </text> </svg>

SVG 이벤트 처리 (제11장)

• event listener 부착 또는 event handler 지정
  • 객체.addEventListener("이벤트", 처리기, false); 

• style 지정 방식 
  • style="fill:red; ..." 의 경우
    • 객체.getStyle();  스타일.setProperty("fill","red");  스타일.getPropertyValue("fill");
  • 표현 속성 -  fill="red" stroke="3" 의 경우
    • 객체.setAttribute("fill","red");  객체.getAttribute("fill");

• 이벤트 종류 : p.159-160

  예제) 새로운 객체 만들기

<svg width="5cm" height="5cm" viewBox="0 0 500 500"          onload="make_shape(evt)">   <script type="text/ecmascript"> <![CDATA[     var  style;     function make_circle(evt) {       var SVGDoc = evt.getTarget().getOwnerDocument();        var SVGRoot = SVGDoc.getDocumentElement();        rect = SVGDoc.createElement("rect");                      rect.setAttribute("x", 100);       rect.setAttribute("y", 100);       rect.setAttribute("width", 300);       rect.setAttribute("height", 300);       style = rect.getStyle();       style.setProperty("fill", "red");        rect.addEventListener("click", change_color, false);        SVGRoot.appendChild(rect);                                         }     function change_color() {       var fill = style.getPropertyValue("fill");       if (fill == "red")  style.setProperty("fill", "blue");       else  style.setProperty("fill", "red");     }   ]]> </script> </svg>

<script> <![CDATA[    var  rect;   function make_circle(evt) {     var SVGDoc = ...      ...     rect.setAttribute("height", 300);     rect.setAttribute("fill", "red");     rect.addEventListener( ...); ...   }    function change_color() {     var fill = rect.getAttribute("fill");      if (fill == "red")            rect.setAttribute("fill", "blue");     else rect.setAttribute("fill", "red");   }  ]]> </script>

예제) 있는 객체 바꾸기  

<svg width="5cm" height="5cm" viewBox="0 0 500 500">   <script type="text/ecmascript"> <![CDATA[     function change_color(evt) {       var SVGDoc = evt.getTarget().getOwnerDocument();       var rect = SVGDoc.getElementById("rect1");       var style = rect.getStyle();       var fill = style.getPropertyValue("fill");        if (fill == "red")  style.setProperty("fill", "green");       else  style.setProperty("fill", "red");     }  ]]> </script>  <rect  id="rect1" onclick="change_color(evt)"        x="100" y="100" width="300" height="300"        style="fill:red"/> </svg>

function change_color(evt) {     var rect = evt.target;     var fill = rect.getAttribute("fill");      if (fill == "red")         rect.setAttribute("fill", "green");     else  rect.setAttribute("fill", "red");   } <rect  onclick="change_color(evt)"       x="100" ...   fill="red"/>

예제) 객체 움직이기

<svg width="600" height="100">   <script type="text/ecmascript"> <![CDATA[      var posX=0, posY=0;      function rect_pos(evt) {         var dx = evt.clientX;         var dy = evt.clientY;          alert("mouse position: "+dx+", "+dy);      }      function rect_move(evt) {         if (posX==0) return;         var rect = evt.target;         var dx = evt.clientX-posX;         var dy = evt.clientY-posY;         var rx = eval(rect.getAttribute("x"))+dx;          var ry = eval(rect.getAttribute("y"))+dy;         rect.setAttribute("x", rx);         rect.setAttribute("y", ry);          posX += dx; posY += dy;      }

function rect_down(evt) {         var rect = evt.target;         posX = evt.clientX;         posY = evt.clientY;          rect.setAttribute("stroke", "blue");      }      function rect_up(evt) {         var rect = evt.target;         rect.setAttribute("stroke", "none");         posX = 0; posY = 0;      }   ]]> </script>   <rect onclick="rect_pos(evt)"  x="0" y="0"        width="600" height="100" fill="#AAFFAA"/>   <rect onmousedown="rect_down(evt)"          onmousemove="rect_move(evt)"         onmouseup="rect_up(evt)"        x="30" y="30" width="40" height="40"          stroke-width='2' fill="#00CC00"/> </svg>

포인터 이벤트, 커서 (제11장)

링크 (Linking)

• <a xlink:href="...URI..." ...> ... </a>

예제)

<svg width="5cm" height="3cm" viewBox="0 0 5 3">    <rect x=".01" y=".01" width="4.98" height="2.98"          fill="none" stroke="blue" stroke-width=".05"/>    <a xlink:href="http://www.w3c.org">        <rect x=".4" y=".5" width="2" height="2" fill="red" />    </a>    <a xlink:href="Example/s10-clip01.svg">        <ellipse cx="3.7" cy="1.5" rx="1" ry="1" fill="green" />    </a> </svg>

• xlink 속성 (생략)
  • xlink:type="simple"  xlink:title="..."  target="프레임"
• SVG 컨텐츠 링크 (생략)
  • Fragment, object id, xpointer, svgView