Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

DeFacto-Standard IT

java, jstl, html, javascript 페이지 로딩 순서 / JSTL과 EL 같이 사용하기 본문

Web/References

java, jstl, html, javascript 페이지 로딩 순서 / JSTL과 EL 같이 사용하기

defacto standard 2017. 11. 16. 23:26

간혹 가다가 웹 페이지가 예상대로 돌아가지 않을 떄가 있다.


예를 들면, 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의 스크립트 요소(스크립틀릿, 표현식, 선언부)를 제외한 나머지 부분에서 사용할 수 있다.

저작자표시 비영리 변경금지
Comments