자바스크립트 따라하기 - 웹 스크립트 활용(응용)

관리자 0 1866 2021.12.30 11:33

2021.12.30 11:33 자바스크립트 따라하기 - 웹 스크립트응용.xix (114.7K) + 1 2021.12.30 11:33 webscript_usage_advance.js (1.7K) + 1

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

1.X-SCADA 디자이너에서 빈 프로젝트를 연다.

1) 페이지에 레이블을 1 개 추가한다.

2) 파일을 하나 생성하여 아래와 같이 작성한다.

(확장자는 js로 한다. ex. abc.js, 본 문서는 webscript_usage_advance.js로 진행했다.)

3) 웹 서비스 내보내기를 수행한다.

4) 2)에서 작성한 파일을 지정한다.

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

6) 실행이나 F5 버튼을 눌러 뷰어를 실행한다.

7) 웹 브라우저에서 localhost로 접속하여 외부 스크립트의 동작을 확인할 수 있다.

객체를 클릭하여 console.log의 결과를 확인할 수 있다.

2. 외부 스크립트 코드 해석

$webOnly = {};

(function ()

{

function webManager ()

{

}

webManager.prototype.reg = function ()

{

var views = page.protoViews;

if(!views) return false;

var module = this;

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

var view = views[key];

var id = view.id;

if(id.startsWith("webLabel"))

{

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

}

$("#" + id).on("click", {"id": id}, function(e) { module.handleClick(e); });

} );

}

webManager.prototype.handleClick = function (e)

{

console.log(e.data.id);

}

$webOnly.webManager = new webManager();

}());

$(window).load(function(){

$webOnly.webManager.reg();

});

(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 a web label');

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

· 페이지 콘솔 창 결과: -

(11) $("#" + id).on("click", {"id": id}, function(e) { module.handleClick(e); });

뷰의 클릭 이벤트 발생 시 수행할 함수 정의

· 페이지 콘솔 창 결과: -

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

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

· 페이지 콘솔 창 결과: -

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

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

· 페이지 콘솔 창 결과: -

(14) webManager.prototype.handleClick = function (e)

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

· 페이지 콘솔 창 결과: -

(15) console.log(e.data.id);

이벤트 파라미터의 data 객체에서 키가 id인 값을 콘솔에 출력한다.

· 페이지 콘솔 창 결과: -

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

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

· 페이지 콘솔 창 결과: -

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

함수를 수행한다.

· 페이지 콘솔 창 결과: -