• 고재학 이사님 (06/17- 06/18), 민창선 이사님 (06/19)

변수

iFrame (= window)

arguments

😊오늘 시작!😊

Object

JQuery

리터럴 표기법

new 키워드를 이용한 객체 생성

참조변수

typeof

객체참조

폼스크립트

틀린 코드

(function($set){
    let boardList = [];

    let $top = $('<div></div>');
    $top.css('border','1px solid #efefef');
    $top.css('height','80px');
    
    let $content = $('<div></div>');
    $content.css('border','1px solid #efefef')
    $content.css('height','400px');
    
    $set.append($top);
    $set.append($content);
    
    //익명함수
    //재사용 불가/가독성 하락
    let btn1 = new MenuButton('등록', function(){
        //리셋 콘텐츠
        $content.empty();

        //로드 폼 유아이
        let $form = $($('#reg_form').html());
        $content.append($form);

        // $content.load('./reg_form.html', function(_form){
            
            $('.btn-reg', $form).click(function(){
                let _title = $('input[name=title]',$form).val();
                let _content = $('textarea[name=content]',$form).val();

                boardList.push({
                    title: _title,
                    cotent: _content
                });

        });
      console.log('등록해주세요.');
    },$top)
    
    //기명함수
    //재사용 가능/퍼블릭하여 변경가능성 상승
    let btn2 = new MenuButton('조회', handleSearchRequest, $top);
    
    function handleSearchRequest(){
      console.log('조회 :)');
      console.log(boardList);
      $content.empty();
    }
    
    // 메뉴 버튼
    function MenuButton(name, handleFunc, container){
      this.element = $('<Button type = "button">'+name+'</button>');
      this.element.on('click', handleFunc);
      container.append(this.element);
    }
})($('#ST_S1'));

맞는 코드

 // $('#ST_S1').css('height', '300px')

(function($set){
    let boardList = [];

    let $top = $('<div></div>');
    $top.css('border', '1px solid #efefef');
    $top.css('height', '80px');
    
    let $content = $('<div></div>');
    $content.css('border', '1px solid #efefef');
    $content.css('height', '400px');
    
    $set.append($top);
    $set.append($content);
    
    // btn1 => 인라인 익명함수 사용
    // 재사용불가, 가독성 저하
    let btn1 = new MenuButton('등록', function(){
        // reset content
        $content.empty();

        // load form ui
        let $form = $($('#reg_form').html());
        $content.append($form);
        $('.btn-reg', $form).click(function(){
            let _title = $('input[name=title]').val();
            let _content = $('textarea[name=content]').val();
            

            boardList.push({
                title: _title,
                content: _content
            });
        });
    }, $top);
    
    
    // btn2 = 별도 함수 사용
    let btn2 = new MenuButton('조회', handleSearchRequest, $top);
    
    function handleSearchRequest(){
      console.log('조회!!!!');
      $content.empty();
      console.log(boardList);
    }
    
    
    // 메뉴 버튼 
    function MenuButton(name, handleFunc, container) {
      this.element = $('<Button type="button">'+name+'</Button>');
      this.element.on('click', handleFunc);
      container.append(this.element);
    }  
  })($('#ST_S1'));

ITIL v3