원글 : https://okky.kr/article/432665
실무 개발중 Javascript 와 JSTL의 사용법을 헷갈려 해서 도움을 청하신분에게 답변을 해드렸습니다
잘못된 코드를 먼저 보겠습니다
-잘못된 코드1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $.each(data.list, function(key, value){ if( key == data.list.length-1) { var rankWeek = value.RANK_WEEK; var rankItem = value.RANK_ITEM; $("#RANK_WEEK").val(rankWeek); $("#RANK_ITEM").val(rankItem); str = "<tr style='background-color:#ffef96;'>" + "<th> 구분 </th>" + "<th> 세부분류 </th>" + "<c:forEach var='i' begin='1' end='4' step='1'>" + "<th>${i}주</th>" + "</c:forEach>" + "<th>총계</th>" + "<th>" + value.RANK_WEEK + "</th>" + "</tr>" ; } }); | cs |
여기서보면 $.each() 내부에서 <c:forEach> 를 사용하는 부분이 보입니다
개발을하다보면 당연히 혼동될수있는 부분입니다
이건 웹 의 동작방식을 알아야하는데
JAVA>JSTL>HTML>Javascript |
로 기본적으로 이렇게만 알아두시면 될거같습니다
이 작동시점을 알고 확인해보면
보여야할 부분이 Jquery 를 반복문의 시작으로 두고 JSTL을 이중반복문의 시작으로 두고있다
이부분을 확인하실수있습니다
작동순서를 1,2,3,4 순서대로의 숫자로 본다면
4(Jquery)를 먼저두고 2(JSTL)를 그다음에둬서
1,4,2,3 의 순서로 실행시키는거죠
두번째 잘못된 코드를 확인해보겠습니다
-잘못된 코드2
1 2 3 4 5 6 7 8 9 | + 추가질문 input type hidden에 rankWeek 값을 저장하였습니다. <c:forEach end='4'> 대신 RANK_WEEK값을 넣어야하는데..; 다음과 작성 작성하니 "<c:forEach var='i' end='$('#RANK_WEEK').val()' >" 에러가 발생하네요...... 어떻게 수정해야하나요... 초보라서 간단한 것도 응용이 잘 안되네요... | cs |
이부분도 마찬가지로 Jquery 값 $('#RANK_WEEK').val() 을 사용한 동작 순서의 에러로 이해하시면되고
단정적으로 외워버리자면
- JSTL에선 Javascript 값을 받을수없다. - Javascript 에선 JSTL 값을 받을수있다. |
이전에 혼용사용의 포스팅을 읽어보신분이라면 두번째 문장은 이해가 가실겁니다
-올바른 사용예제
1 2 3 4 5 6 7 8 | <c:forEach items="${map_list.email}" var="item2"> list.push("${item2}"); </c:forEach> <c:forEach var="code" items="${loc_type}"> if(retObj.LOC_TYPE == "${code.cd_id}") loc_type="${code.cd_nm}"; </c:forEach> | cs |
Javascript와 JSTL 을 혼재해서 사용할수있는 예제입니다 참고하시면 되겠습니다
두가지에 모두 사용될수있는 el태그를 적절히 활용하는것이 중요합니다
el태그는 ${} 이런 형식의 서버데이터 태그를 말합니다
아래는 추가 정보를 가져왔습니다
출처:
http://defacto-standard.tistory.com/entry/java-jstl-html-javascript-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EC%88%9C%EC%84%9C-JSTL%EA%B3%BC-EL-%EA%B0%99%EC%9D%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
간혹 가다가 웹 페이지가 예상대로 돌아가지 않을 떄가 있다.
예를 들면, JQuery를 사용해서 태그를 숨겼는데 그대로 보이는 경우이다.
이는 페이지가 로드되면서 실행되는 순서가 다르기 때문이다.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript"></script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
위와 같은 소스에서 실행 순서는 다음과 같다.
1. HTML 문서 다운로드
2. HTML 문서 파싱 시작
3. HTML 파싱이 3번 라인에 도달
4. jquery.js 가 다운로드 되고 파싱된다.
5. HTML 파싱이 4번 라인에 도달
6. abc.js가 다운로드되고 파싱되고 실행된다.
7. HTML 파싱이 5번 라인에 도달
8. abc.css가 다운로드 되고 파싱된다.
9. HTML 파싱이 6번 라인에 도달
10. <style>태그 내부 CSS 규칙이 파싱되고 정의된다.
11. HTML 파싱이 7번 라인에 도달
12. 내부 Javascript다 파싱되고 실행된다.
13. HTML 파싱이 15번 라인에 도달
14. abc.jpg가 다운로드 되고 보여진다.
15. HTML 파싱이 16번 라인에 도달
16. kkk.js가 다운로드 되고 파싱된 후 실행된다.
17. 페이지 로딩이 끝났으므로 kkk.png그림이 보인다.
18. 끝
* onload함수는 페이지 로딩이 끝나는 이후 바로 실행
* Java, JSLT, HTML, Javascript가 모두 섞여있을 경우, 보기 순서대로 실행된다.
이때, 먼저 실행되는 쪽에서 뒤쪽에서 실행되는 쪽의 값을 읽을 수 없다. 준비가 안됐기 때문.
* 하나의 jsp파일 내에 작성된 소스라 하더라도,
Scriptlet이나 jstl, el 등은 서버단에서 실행되며
Javascript는 브라우저에서 실행되기 때문에 두 언어 간 변수를 직접 주고받을 수 없다.
예를 들어, 다음과 같은 방법으로 직접적으로 변수를 쓸 수 없다.
var list = new Array();
list = "${TestList}";
alert( list[0].name );
쓰려면 다음과 같이 해야한다.
var list = new Array();
<c:foreach items="${TestList}" var="item">
list.push("${item.name}");
</c:foreach>
*Expression Language
${식} 과 같은 방법으로 표현한다.
JSP의 스크립트 요소(스크립틀릿, 표현식, 선언부)를 제외한 나머지 부분에서 사용할 수 있다.
'IT > Jsp|JSTL' 카테고리의 다른 글
| jstl split,startsWith,endsWith 사용법 (0) | 2018.01.26 |
|---|---|
| JSP 에서 LinkedList 받기 (0) | 2018.01.02 |
| Javascript 에서 JSTL 사용하기 와 주의사항 (2) | 2018.01.02 |