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

Script

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

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



1. 뷰어로 샘플 실행하기

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

78aa290053acb2e9f5e9b692a28ae826_1640831147_1251.png
 

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

78aa290053acb2e9f5e9b692a28ae826_1640831160_0417.png


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


78aa290053acb2e9f5e9b692a28ae826_1640831167_1519.png


78aa290053acb2e9f5e9b692a28ae826_1640831179_402.png


78aa290053acb2e9f5e9b692a28ae826_1640831179_4622.png
 

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

78aa290053acb2e9f5e9b692a28ae826_1640831201_2996.png


78aa290053acb2e9f5e9b692a28ae826_1640831203_7.png


78aa290053acb2e9f5e9b692a28ae826_1640831206_0215.png
 

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

78aa290053acb2e9f5e9b692a28ae826_1640831223_2831.png
 

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

78aa290053acb2e9f5e9b692a28ae826_1640831231_0507.png
 


2. 스크립트 코드 해석


1) 외부 스크립트 파일

$webOnly = {};


(function ()

{

    function webManager ()

    {

    }


    webManager.prototype.reg = function ()

    {

        var views = page.protoViews;

        if(!views) return false;


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

            var view = views[key];

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

            {

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

            }

        } )

    }


    $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 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();

함수를 수행한다.

· 페이지 콘솔 창 결과: -



0 답글
제목