웹에서 사용할 스크립트를 추가할 수 있다.

1. 뷰어로 샘플 실행하기

1) 디자이너에서 웹 서비스 내보내기를 수행한다.

2) 외부 스크립트를 지정한다.

첨부된 자바스크립트 파일을 지정한다.

3) 실행환경 설정에서 웹 내보내기 폴더를 설정한다.

4) 디자이너에서 F5키를 누르거나 실행 버튼을 눌러 뷰어를 실행한다.

5) 웹 브라우저로 접속하면 다음과 같이 레이블 객체의 텍스트가 변경된 것을 확인할 수 있다.

2. 스크립트 코드 해석

1) 외부 스크립트 파일

(1) $webOnly = {};

$webOnly에 빈 객체를 초기화한다.

· 페이지 콘솔 창 결과: -

(2) (function ()

즉시실행 함수 시작.

· 페이지 콘솔 창 결과: -

(3) function webManager ()

webManager 함수를 정의한다.

· 페이지 콘솔 창 결과: -

(4) webManager.prototype.reg = function ()

webManager의 프로토타입에 reg 함수를 정의한다.

· 페이지 콘솔 창 결과: -

(5) var views = page.protoViews;

현재 페이지의 protoViews 목록을 view 변수에 할당한다.

· 페이지 콘솔 창 결과: -

(6) if(!views) return false;

protoViews가 존재하지 않으면 함수를 종료한다.

· 페이지 콘솔 창 결과: -

(7) Object.keys(views).forEach(function (key){

protoViews 목록을 순회하면서 아래 함수를 수행한다.

· 페이지 콘솔 창 결과: -

(8) var view = views[key];

현재 차례인 protoView를 가져온다.

· 페이지 콘솔 창 결과: -

(9) if(view.id.startsWith("webLabel"))

id가 webLabel로 시작하면 아래 블록을 수행한다.

· 페이지 콘솔 창 결과: -

(10) $('#'+view.id+' text tspan').text('I am web label');

해당 뷰의 text를 ‘I am web label’로 설정한다.

· 페이지 콘솔 창 결과: -

(11) $webOnly.webManager = new webManager();

해당 뷰의 text를 ‘I am web label’로 설정한다.

· 페이지 콘솔 창 결과: -

(12) $('#'+view.id+' text tspan').text('I am web label');

해당 뷰의 text를 ‘I am web label’로 설정한다.

· 페이지 콘솔 창 결과: -

(13) $(window).load(function(){

창이 로드되면 아래 함수를 수행한다.

· 페이지 콘솔 창 결과: -

(14) $webOnly.webManager.reg();

함수를 수행한다.

· 페이지 콘솔 창 결과: -