제11/12장. Script, Interactivity & Linking

Javascript 개요

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

특징

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

이벤트 핸들링

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

예)
<script ... > ...
function circle_click(evt) { var circle = evt.target; ... }
</script>

<circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/>

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

<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, rect;
    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>

    var rect;
  function make_circle(evt) {
         ...
    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");
  }

예제) 있는 객체 바꾸기

<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>

링크 (Linking)

xlink

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

xlink:type="simple" xlink:title=".제목." xlink:href=".<uri>." target=".프레임이름."
예제)

SVG 컨텐츠 링크 : 문서 또는 일부분

예) xlink:href="http://example.com/Drawing.svg

예) xlink:href="http://example.com/Drawing.svg#MyView"

SVG Fragment 링크

object id 로 표현

예) xlink:href="http://example.com/Drawing.svg#MyView"

xpointer id 로 표현

예) xlink:href="http://example.com/Drawing.svg#xpointer(id(MyView))"

SVG 뷰의 명시 : svgView 로 표현

예) xlink:href="http://example.com/Drawing.svg#svgView(viewbox(0,200,1000,1000))