2_타일즈2(tiles)

하이라이트 작업.

 

href 속성은 a태그가 갖고있다. 단순하게 페이지를 이동할 때만 쓰이는 속성.

하이라이트는 왼쪽에 메뉴를 클릭했을 때 기능이 되야한다.

기능을 처리해야하기 때문에 href 속성을 사용할 순 없다.

이 기능은 함수로 구현한다.

 

 

하이라이트 처리 함수 만들고 호출하기.

 

html = dom 이 아니다.

브라우저는 노드를 보면 그 노드를 1:1로 맵핑해서 객체생성한다.

그런데 노드는 무엇이고 태그는 무엇인가?

노드 : 태그를 제외한 모든 것들 

 

dom (document object model)

object :  객체

브라우저가 파싱을 한 것을 dom이라하고 프라우저가 파싱하지 않은 문서는 dom이 아니다.

dom을 보고 target을 잡아야한다.

 

초록색이 태그, 

노란색 표시는 노드이다. 태그 제외한 나머지는 다 노드. 

 

element 란? 주석, text 를 제외한 나머지를 element라고 한다.

 

 

노란색 표시되있는 것들은 각각 주석 노드. 텍스트 노드. 라고 한다.

이것을 제외한 것을 노드라고 하는데, 다른말로 element노드라고도 한다.

 

 앨리먼트 노드(element node)는 2가지가 있다.

1. html element 노드.

dispatcher-servlet 에 있는 것들도 노드이다. 앨리먼트(element)이다. 풀네임은 xml element 노드 이다. (브라우저가 xml도 1대1로 dom 을 생성한다는 것.) xml파일을 드레그해서 브라우저에서 본다면 브라우저에서 내용이 뜬다. 그런것들이 xml도 dom이 가능하다. 브라우저가 파싱하는 확장자 중 하나라는 것을 알 수 있다.

 

초록색은 태그, 자주색(속성)은 노드

 

 

함수는 스크립트에 살고있다.

 

이것을 스크립트 선언문이라고 한다. 

자바스크립트 코딩은 스크립트 선언문 내에서만 가능하다.

jsp파일마다 하나씩 있다.

 

 

 

함수 정의문이라고 한다.

여기에서의 함수는 () 이다.

함수명은 leftChkFn

{} 함수 구현부, 혹은 함수 스코프라고 한다.

 

 

 

 

href 속성을 사용하지 않기 위해서 #을 적어줘서 자기자신을 호출하도록 한다.

html에서 onclick속성을 이용해서 자바스크립트 함수를 호출하는 것을 인라인이벤트모델 이라고 한다. 

여기서 이벤트란 ?

on, 자바스크립트 속성중에 on 이 붙어 있는 속성을 이벤트 관련 속성이라고 한다.

클릭하면 onclick속성안에 값을 실행하는데 그 값은 자바스크립트만 넣을 수 있다.

 

인라인이벤트모델을 적게 되면 html은 호출함수를 보면 leftChkFn을 dom안에 메모리로 저장한다.

 

 

 

 

 

예를 들면 이 상태는 메모리에 올라가있지 않지만 

 

 

 

 

호출함수를 적는 순간 메모리(window) 안으로 들어가게 된다.

자바에서의 최상의 객체는 Object이고 자바스크립트의 최상위객체는 window이다.

 

이 상태에서 화면 새로고침해서 console탭에가서 window를 친다.

그럼 프로퍼티명이있고 : (프로퍼티)를 볼 수 있다.

 

프로퍼티들 중에 방금만든 leftChkFn을 찾을 수 있다.

이것들을 BOM(Browser Object Model)이라고 한다. 

 

 

 

 

메모리 안에 들어간 것을 확인 할 수 있고, f 가 적혀있으므로 함수임을 알 수 있다.

 

함수안에 alert를 하면 left메뉴를 클릭하게 되면 alert창이 뜬다.

 

 

 

 

 

어느 메뉴를 누르던 alert창이 뜬다.

똑같은 alert 1이 뜬다.

그래서 구분값이 필요하다. 그것을 전달인자로 보낸다.

논리적주소를 전달인자로 보낸다.

그런데 문자열을 보내기 때문에 ' 를 사용한다.

 

 

 

 

menuStr이라는 전달인자로 값을 받고 그 값을 alert창으로 띄운다.

 

 

 

 

논리적주소는 받은 상태이고 논리적주소를 컨트롤러로 보내도록 해야한다.

그 역할을 location.href 객체가 대신한다. bom 것이다.

 

 

 

 

li태그에 id속성을 준다. id는 하나의 문서에 유니크한 식별자이다.

 

 

 

 

 

 

 

 

내가 클릭한 a태그의 부모태그인 li의 id의 값을 전달인자로 넣었다고 할 수 있다.

 

서버로 데이터를 보내는 방식 

1. get

2. post

        location.href는 get방식으로만 보낼 수 있다.

 

 

 

get방식으로 값을 보내려면 ? 전까지가 논리적주소이고 그 뒤에 ? 를 넣고 변수명을 적는다.

값을 보낼때는 주머니가 필요하다. 그러므로 변수명을 적어준다.

pageName이라는 변수명에 내가 클릭한 부모인 li의 id를 넣는다.(그것이 menuStr)

 

 

 

 

pageName은 key, 우측은 value이다.

이렇게 생긴것들을 쿼리스트링이라고 한다.

모양이 key = value 모양으로 생겼다.

 

 

key에 값을 담아서 쿼리스트링 형태로 컨트롤러로 보낸것이다.

해당 컨트롤러에 해당 논리적주소로 보낸값을 받아본다.

 

 

 

 

인스턴스 타입의 변수를 선언한 이유는 HttpServletRequest 안에 들어있어있는 특정메서드를 사용하기 위해서이다.

그 안에 getParameter라는 메서드의 전달인자로 key=value 중에 key를 스트링("")으로 적으면 value값이 출력된다.

 

 

 

 

 

 

 

맨 첫화면이 뜰 때는 null이 뜬다.

null이 뜨는 이유는 ? 

one.do는 index.jsp에서 최초로 호출한다.

pageName이라는 키가 index.jsp에 없게 때문에 null이 뜨는 것이다.

그러므로 null을 안뜨게 하고싶다면 뒤에 ?를 붙이고 pageName= 까지만 적어도 null이 뜨지 않는다.

 

 

 

 

& 앤퍼센트.

쿼리스트링을 여러개 보낼 때 사용한다. 

처음 한번만 ? 로 쿼리스트링을 보내고 그 다음부터는(2개 이상일때부터는) &를 사용한다.

 

 

 

 

 

 

 

톰캣 8은 이 곳에 utf-8 설정을 해주어야 한다.

 

 

제이쿼리

 

 

 

문서객체모델선택자.

그 중 직접선택자가 있고, 인접관계선택자가 있다.

 

1. 직접선택자. 

button이라는 태그를 타겟으로 잡는 것을 제이쿼리로 한다.

$ 는 제이쿼리다. 제이쿼리는 클레스이다.

클래스() 는 생성자 이다.

이것을 제이쿼리 생성자라고 한다.

 

 

""를 사용해서 태그를 타겟으로 잡은 것인데 이것을 요소명선택자라고 한다. 이것은 직접선택자 안에 속한다.

선택자를 잡을 때 타겟을 요소라고 한다.

여기서 요소란? 

타겟잡은 요소에 자식요소가 있을 때에는 그 자식요소들까지 다 잡는다.

 

 

 

text()는 메서드이다 이것은 제이쿼리 것이다.

 

해당버튼이라는 요소에 text를 적게되면 그 요소안에있는 text를 가져온다.

객체를 빼오기도 하지만 해당 텍스트를 변경도 가능하다.

그래서 객체조작메서드라고도 한다.

 

지금까지는 alert창이 뜨지 않는다. 그 이유는 2가지가 있다.

1. 제이쿼리를 인식할 수 없다.

 

 

2. 실행순서는 위에서 아래로 된다.

 

 

default-left가 제이쿼리 보다 아래에 있기 때문에 $가 인식되지 않는다.

그래서 제이쿼리 관련된 코드를 header에 넣는다.

header는 눈에 보이지 않는 정보를 넣는 곳이기 때문이다.

 

그럼 alert창은 뜬다. 그렇지만 내용이 문제가 있다.

 

 

button을 제이쿼리에서 타겟이 잡혔을 때 button을 모른다.

그러므로 button태그를 위로 올려준다.

그래도 문제는 해결되지 않는다.

 

버튼이라는 요소를 한 개의 문서안에서 찾는다.

즉 html 로 시작해서 html 로 끝나는 안에서 button을 찾을 것이다.

 

그러면 f12를 눌러서 button을 찾아보면 18개가 있다.

 

1. 타겟으로 잡은 button이 여러개이기 때문이다. button요소 하나만 잡아야 한다.

위치탐색선택자. eq. 

안에는 인덱스를 적는다. 인덱스란 순서를 말한다. 0부터 시작된다.

버튼에 3번째 버튼이라는 것을 말한다.

 

 

버튼요소이면서 3번째이다.

 

그럼 제대로 alert창이 뜬다.

 

 

 

id를 줬다. 

 

#은 id 이다. 이것 역시 직접선택자이다.

id는 유니크한 식별자이다.

 

정말 필요한게 아니라면 html의 속성을 변경하지 않는다.

 

 

 

 

이벤트 등록 메서드라고 한다. 

3가지로 이뤄져있다. 

$("#twoBtn") 이벤트 대상

.click 이벤트 종류

function() 이벤트 핸들러

이렇게 이름이 없는 함수를 익명함수라고 한다.

 

왜 이름이 있나? 이름이 없으면 호출이 안되기 때문에 호출하기 위해 이름이 있다.

클릭하게 되면 익명함수 안을 실행하기 때문에 이름이 필요없다.

이것을 이벤트 핸들러라고 한다.

 

이벤트 등록 메서드 중에서 마우스 이벤트이다.

 

이벤트 등록 메서드에는 

단독 이벤트 등록 메서드가 있고,

그룹 이벤트 등록 메서드가 있다.

이것은 단독이벤트 등록 메서드 이다. 그 안에는 마우스 이벤트 등록메서드라고 하고 이것을 이벤트 리스너라고도 한다.

이벤트 등록 메서드

• 단독 이벤트 등록 메서드

• 마우스 이벤트 등록 메서드 = 이벤트 리스너

• 그룹 이벤트 등록 메서드

 

 

 

클릭이벤트안에서의 this의 의미는 내가 클릭한 요소이다.

this안에는 요소가 들어있다.

왜 제이쿼리로 this를 감쌌다. text() 메서드 사용하기 위해서.

 

텍스트 메서드는 객체조작메서드이다.

 

 

 

 

이벤트 등록 메서드중에 이벤트 로딩 메서드가있는데 

이벤트 로딩 메서드는 2가지가있다.

하나는 레디, 하나는 로드.

이상황은 레디.

 

이벤트로딩메서드라고 한다.

2가지 표현법으로 쓰는데, 

하나는 위에 것 하나는 아래것이다.

 

 

 

 

 

 

레디의 실행순서는 dom이 다 그려지고 나서 실행된다.

위부터 아래까지 다 돌고 그리고 실행된다.

 

그러므로 button 요소를 위로 아래로 보낸다고 해도 alert창이 뜬다.

 

이벤트 등록메서드는 이벤트로딩메서드 안에서만 사용한다고 생각하자.

 

레디는 이미지를 제외하고 dom이 다 그려지면 실행된다.

로드는 이미지가 그려지는 것까지 다 기다리고 실행된다.

 

 

 

-----------------------------------------------------------------------------------------------------------------------------

 

 

default-left.jsp

 

 

 

 

 

li는 ul의 자식요소

ul이라는 부모는 li라는 자식을 2개 갖고 있다.

 

이제는 하이라이트 로직을 짜는데

클릭하면 클릭한 것을 클릭한 화면을 띄워야하기때문에 get방식으로 key에 담아서 (쿼리스트링) 컨트롤러 메서드로 보낸다.

해당화면 return옆에 논리적주소로 그 화면을 간다.

하이라이트를 해주려면 모든 li에 있는 하이라이트를 지워줘야한다.

그리고 클릭했던 것을 갖고와서 그 부분만 하이라이트 처리를 한다.

 

leftUl은 직접선택자이다. ul요소의 인접관계선택자 중 자식요소 선택자(>) 중 li가 있다면 그것을 타겟으로 잡는다.

ul요소 안에 있는 li를 다 잡았다. 하이라이트 처리를 지워주기 위해.

 

removeClass : 속성조작메서드중 하나이다.

li가 갖고 있는 active라는 클래스를 지우겠다.

 

 

 

 

---

 

 

표현언어를 el태그라고한다.

jsp 2.0 버전부터 나왔고 , jsp에다가 자바코딩을 했었다.

el태그는 jsp안에다가 자바코딩을 할 때 사용하는 것이다.

 

 

 

 

 

 

${} 이것이 el태그이다.

이 안에 있는 객체를 내장객체라고 한다.

내장객체중에 param 을 사용했다.

이 param은 HttpServletRequest 의 getParameter와 동일하다.

getParameter 의 역할은 키를 적으면 value가 빠진다.

동일하게 param 도 키를 적으면 value가 빠진다.

이 value가 내가 클릭한 a태그의 부모태그인 li의 id의 속성값과 동일하다.

 

 

 

인라인모델메서드에서 호출함수를 호출하는데 

내가 클릭한 부모태그 li의 id에 값을 넣어서 보낸다. 

location.href를 통해서 get방식으로 컨트롤러에 보내고 

pageName이라는 키에 value를 넣어서 보낸다.

main은 컨텐츠, left가 먼저 실행되므로 

pageName이라는 키를 left의 leftChkFn이라는 함수안에서 보냈다. 

그리고 그것을 이벤트로딩메서드를 적고 (화면 다 그려지고 나서 뜬다.)

el태그안에 내장객체인 파람인데 이것은 getParameter의 getParameter와 동일하고 

 

 

 

pageName이라는 지역변수.

변수에 값을 담을때는 항상 초기값이 있어야 한다.

결과물이 스트링이므로 ""로 초기화해준다.

해당 지역변수에 내가 클릭한 부분에 부모태그인 li의 id속성의 값을 넣은 것이다.

 

변수는 항상 함수스코프 상단에 있어야 한다.

최상위에 적어주지 않으면 호이스팅이 일어난다.

 

 

호이스팅이란?

변수를 아래에 적었지만 맨 위로 올려서 해석한다.

그리고 값을 undefined를 넣는다. 

자바스크립트 인터프리터가 메모리를 이과정에서 사용하게 된다.

 

 

그래서 변수는 항상 함수스코프 최상위에 있어야 한다.

이유는 호이스팅 때문이다.

 

addClass 속성조작메서드.

 

 

 

 

 

 

함수정의문

function leftChkFn() {

}

 

이벤트 로딩 메서드

function leftChkFn(menuStr) {

    location.href = "/" + menuStr +

                    ".do?pageName=" + menuStr;

}

 

이벤트 등록 메서드

$(function() {

    $("#twoBtn").click(function() {

        alert($(this).text());

    });

});

 

 

직접선택자. (객체조작메서드, 요소명선택자)

 

 

 

하이라이트 처리 순서.

1. 하이라이트 처리는 마우스로 레프트메뉴 클릭

2. 인라인 이벤트 모델인 onclick속성의 호출함수로 호출한다.

3. 매개변수로 내가 클릭한 부모태그인 li의 id속성의 값을 넣어서 함수에 보낸다.

4. 함수에 도착하면 get방식(location.href)를 통해서 pageName이라는 키에 넣어서 컨트롤러로 보낸다.

5. 보낸 함수가 leftChkFn이고 컨트롤러로 가면 return에 main/main 이라고 적혀있었지만 타일즈 구조 상 left가 먼저 뜨므로 이벤트 로딩메서드를 left.jsp에 이벤트 로딩메서드를 적고 이벤트 로딩 메서드는 화면이 다 그려지고 나서 뜨는 것이므로 그곳에서 모인 el태그 안에 내장객체인 param인데 httpServletRequest안에 getParameter라는 메서드와 똑같은데 param.내가 이전화면에서 보낸 key를 적어주면 value가 빠진다. 그 value가 아까 left화면에서 눌렀던 메뉴의 li의 id속성의 값이다.

6. 받기 전에 모든 li태그에 active 클래스를 지웠다 그것이 속성조작메서드인 removeClass를 사용했고, 객체조작메서드는 text()이다.

7. 직접선택자중에 id선택자(#)를 잡은것이고 id선택자 옆에 > 는 인접관계선택자이다.

8. pageName이라는 지역변수는 최상위에 적어준다. (호이스팅)

9. id선택자에 결합선택자로 그 뒤에 내가 클릭한 부모li의 id의 값을 적어서 아이디를 타겟으로 잡고 클릭한 li에 addClass(속성조작메서드)로 클래스를 추가해준다.