3.19 Viết script (kịch bản)
3.19.2 Thành phần ‘script’
Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngơn ngữ đánh dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngơn ngữ ECMAScript). Bất kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều cĩ phạm vi tồn cục cho tồn bộ tài liệu hiện tại. Bằng cách kết hợp ngơn ngữ ECMAScript và SVG DOM, chúng ta cĩ thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xĩa các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG cĩ thể tương tác với người dùng.
Ví dụ 1:
Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình trịn, hình trịn thay
đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa
kết quả sau khi nhấp chuột lên hình trịn.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="6cm" height="5cm" viewBox="0 0 600 500"
144
xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click --> <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>
<!-- Outline the drawing area with a blue line --> <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<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>
Kết quả trước và sau khi nhấp chuột lên hình trịn trên trình duyệt:
Một số thuộc tính của thành phần ‘script’:
• type= “content-type”
145
Chỉ định ngơn ngữ viết script cho thành phần ‘script’ được cho. Giá
trị content-type chỉ định một loại phương tiện.
Script cĩ thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ trên, hoặc cũng cĩ thể nằm trong một tập tin script (*.js) được liên kết vào trong tài liệu như sau:
Tập tin “createnode.js” chứa đoạn script sau: function pinta() { var circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " +
"fill: rgb(" + 255*Math.random() + "," +
255*Math.random() + "," +
255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi pinta() này một lần*/
document.getElementById("dr").appendChild(circleNode); }
Nội dung SVG tham chiếu tới tập tin SVG trên thơng qua thuộc tính ‘xlink:href’ :
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd ">
<svg width="300" height="300" onload="pinta()"> <script type="text/ecmascript"
xlink:href="createnode.js"> </script>
<g id="dr" /> </svg>
146 Kết quả trên trình duyệt sau một thời gian:
Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’