봐도봐도 잊고 까먹는다..
그래서 이번에는 정말 간단하게 정리한 문서를 참조하겠습니다.
대충 이해하고 넘어간 다음에 나중에 깊게 이해하면 될 것 같습니다.
간혹 가다가 웹 페이지가 예상대로 돌아가지 않을 떄가 있다.
예를 들면, 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의 스크립트 요소(스크립틀릿, 표현식, 선언부)를 제외한 나머지 부분에서 사용할 수 있다.
아래글 정말 좋다 꼭 읽어보자
[JSP / Servlet] JSP 라이프 사이클(life cycle)과 동작 원리 - Blog Goooood.net
JSP (JavaServer Pages) JSP 파일은 직접 실행되지 못하며 JSP 코드에 해당되는 서블릿을 생성해서 서블릿이 실행되는 방식이다. JSP는 주로 HTML 코드를 응답하기 위한 용도로 사용되며 JSP를 사용하지 않고 서블릿만으도 동일한 기능을 구현할 수 있지만 작성해야 되는 코드가 많다는 단점이 있다. JSP 실행 순서 사용자가 브라우저에서 JSP 주소를 입력했을 때 JSP가 실행되는 순서는 다음가 같다. 브라우저가 웹서버에 요청 정보를 전
blog.devez.net
'STUDY > JavaScript' 카테고리의 다른 글
| [JavaScript&jQuery] 동적 이벤트 바인딩(Dynamic event binding) (0) | 2019.11.20 |
|---|---|
| [JavaScript] JS객체 생성 시 key값 동적으로 할당하는 방법 (1) | 2019.10.09 |
| [JavaScript] var와 let 그리고 const (0) | 2019.03.05 |
| [JS]자바스크립트는 어떻게 작동하는가 : 메모리 관리 + 4가지 흔한 메모리 누수 대처법 (0) | 2018.11.09 |
| [JS]js파일 안에서 아무리 소스를 수정해도 반영이 안된다면?? (0) | 2018.10.14 |