JavaScript 예제 스크립트

이 항목에서는 간단한 상호 작용을 제공하기 위해 텍스트 영역에서 사용할 수 있는 JavaScript 기반 스크립트의 몇 가지 예를 보여줍니다.

텍스트 영역의 HTML을 편집하거나 Spotfire에서 스크립트 관리의 설명을 따라 분석에 JavaScript를 추가할 수 있습니다.

주: 보안상 스크립트 사용 시에는 몇 가지 제한이 적용됩니다. 자세한 내용은 스크립트 및 데이터 함수 사용을 참조하십시오.

주: 텍스트 영역에 추가한 JavaScript는 텍스트 영역 및 다른 Spotfire 시각화의 모든 기능을 구현하기 위해 Spotfire에 정의된 JavaScript와 동일한 환경에서 실행됩니다. jQuery ($) 및 jQueryUI를 비롯하여 Spotfire 및 타사에서 정의한 많은 JavaScript 라이브러리가 범위 내에 있습니다. Spotfire는 이러한 범위 내 라이브러리의 정확성, 가용성 또는 호환성을 보증하지 않습니다. 이후 버전의 Spotfire에서는 다른 업그레이드되거나 호환되지 않는 라이브러리를 포함할 수 있습니다. 라이브러리는 향후 버전에서도 제거될 수 있습니다. 따라서 jQuery 또는 jQueryUI와 같은 라이브러리를 사용하려면 Spotfire에서 사용되는 버전에 의존하는 대신 해당 라이브러리를 직접 가져와야 합니다. 자세한 내용은 커뮤니티 문서 텍스트 영역에 jQuery 및 jQueryUI의 자체 인스턴스를 포함하는 방법을 참조하십시오.

주: JavaScript 매개변수는 문자열 형식이어야 합니다.

마우스를 요소 위에 놓을 때 요소의 배경색 변경

다음 스크립트에서는 두 매개변수 "id" 및 "color"를 사용합니다. 여기서 "id"는 배경색을 변경할 요소의 ID입니다. 이 예에서 "my-p" 및 "color"는 설정할 배경색입니다(예: #e7e3e7). 두 매개변수는 모두 JavaScript 삽입 대화 상자에서 문자열 매개변수로 지정됩니다.

------------------------------------------------------------------------
var elem = document.getElementById(id);
if (!elem)
{
   return;
}

var oldBgColor = elem.style.backgroundColor;
var onEnter = function()
{
    elem.style.backgroundColor = color;
};

var onLeave = function()
{
   elem.style.backgroundColor = oldBgColor;
};

elem.onmouseover = onEnter;
elem.onmouseout = onLeave;
-------------------------------------------------------------------------

이 스크립트를 사용하려면 텍스트 영역 HTML에서 ID를 호출합니다.

예를 들어 단락에 필요한 ID를 추가합니다.

 <p id="my-p">A JavaScript changes the background color when the mouse is over this paragraph.</p>

텍스트 영역 단락에서 마우스를 텍스트 위에 놓으면 배경색이 지정된 색으로 변경됩니다.

텍스트 영역을 PDF 또는 이미지로 렌더링할 준비가 되었을 때 신호

스크립트에 비동기 호출이 포함된 경우 SF.setBusy() API를 사용하여, PDF 또는 이미지로 내보낼 때 텍스트 영역이 제대로 렌더링되도록 해야 합니다.

다음을 실행하면

-------------------------------------------------------------------------
SF.setBusy(true);
-------------------------------------------------------------------------

스크립트가 다음을 실행할 때까지 내보내기 브라우저가 PDF/이미지를 렌더링하지 않습니다.

-------------------------------------------------------------------------
SF.setBusy(false);
-------------------------------------------------------------------------

팁: 커뮤니티의 Best Practices for Writing Custom JavaScript Code in Text Areas 문서에서는 Spotfire의 텍스트 영역에서 JavaScript를 사용하는 방법을 개괄적으로 소개합니다.