레프트 메뉴 추가 후 서비스단을 만들어 보자! - (1)

먼저 번에 만들었던 default-left.jsp가 있을 것이다. 

메뉴중 하나를 더 추가해 보자.

추가 후 onclick 속성이 있을 것이다.

javascript:left.pageSubmitFn('welcomeWebMeu') 이것이 클릭 되었을 때 발동하는 코드인데 이 스크립트를 정의해 주어야 한다.

default-left.jsp의 상단에 스크립트 코드를 넣어 보자.

<script type="text/javascript">
 
 var left = {
            
            pageSubmitFn : function(pageName) {
                
                $("#pageName").val(pageName);
                
                alert($("#pageName").val());
                
                if(pageName == "mainMenu") {                    
                    $("#frm").attr("action","main.do"); 
                } else if(pageName == "welcomeWebMenu") {
                    $("#frm").attr("action","welcomeWeb.do"); 
                }
                
                $("#frm").submit();
                
            }
    }
</script>

자 var로 left라는 변수 선언을 한다. 변수선언을 했는데 안에 함수가 들어가게 된다.

함수가 들어가있으므로 left는 클래스라고볼 수 도 있다.

function myFunc() = {

} => 이러한 형태의 클래스는 함수에 싸여 있지 않은 형태이다.

line 5 - 함수에 이름이 없다. 이러한 형태의 함수를 익명함수라고 한다.

대신에 pageSubmitFn : 으로 써줬는데 이것을 property라고 한다. 

left.pageSubmitFn으로 접근할 수 있다.

line 7 - jQuery가 사용되었다. pageName이라는 아이디를 가진놈의 값을 넘어온 파라미터로 설정해 준다. 사실 밑 부분에 form태그가 존재한다.

<form id="frm" name="frm">
    <input type="hidden" id="pageName" name="pageName"/>
</form>

폼으로 싸여져 있는 input태그는 보여질 필요가 없기 때문에 hidden으로 설정해 놓았다.

line 11 - 여기서 부터 클릭된 메뉴에 따라 페이지가 넘어갈 것 이므로 조건문을 걸어준다.

line 12 - 아이디가 frm인 놈의 속성(attr)중 action 속성을 main.do로 바꿔준다. 즉 폼태그의 액션을 주는 것이다. 

line 17 - $("#frm")의 의미는 폼태그를 의미한다. 그리고 폼태그의 submit을 날리면 페이지가 main.do로 넘어가게 된다.