text/javascript와 application/javascript의 차이점

프론트기술/HTML 2015. 9. 8. 16:53

여지껏 웹개발을 할 때, 자바스트립트의 마임타입으로 text/javascript를 사용하였다.

그런데 프로젝트 중 다른 동료가 application/javascript로 쓴 것을 보고 ,


"이건 뭐지?"

"최근엔 자바스크립트 타입을 이렇게 써요"


해서 무작정 따라 썼었는데, 제대로 안알아보고 쓰다보니 결국 문제 발생! ㅎㅎㅎ

차이점은 다음과 같다.


1. text/javascript

- HTML 4.01 (1999) 스펙

- http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#h-18.2.2.2

- HTML4, HTML5 지원

- Obsolete.


2. application/javascript

- RFC 4329 (2006) 스펙

- HTML5 지원

- Now Recommended.


이렇게 보면 application/javascript가 최신 스펙이니 최신걸로 사용해야겠라 생각할 수 있다.

문제는 서비스에서 지원하는 브라우저의 범위이다.

application/javascript를 사용할 경우에는 IE8 이하는 지원이 되지 않는다.


따라서, 

서비스를 개발할 때 IE 하위호환까지 고려를 해야되는 웹사이트라면 application/javascript는 문제가 되며,

(const 키워드가 먹히지 않았으며, 변수 등을 찾지 못하는 등 정상적인 스크립트 기능이 되지 않았다.)

이 경우는 text/javascript를 추천한다.


참고문헌

- http://stackoverflow.com/questions/21098865/text-javascript-vs-application-javascript

- http://stackoverflow.com/questions/6122905/whats-is-difference-between-text-javascript-and-application-javascript


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

'프론트기술 > HTML' 카테고리의 다른 글

IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제  (0) 2015.09.07
이벤트 캡쳐링(event capturing)  (0) 2015.01.22
이벤트 버블링(event bubbling)  (0) 2015.01.21
Posted by SungHoon, Park
,

IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제

프론트기술/HTML 2015. 9. 7. 16:56

특정 IE11에서 window.popup()에 이름을 줘서 팝업을 띄워도 계속 새창으로 뜨게 되는 이슈가 있다. 

IE11 버그인 것 같음


https://connect.microsoft.com/IE/feedback/details/797964/ie11-win-8-1-window-open-with-the-same-name-is-opening-new-popup-window#details


정상적인 케이스는 팝업에 같은 이름을 줄 경우 계속 띄워진 팝업에서만 화면전환이 일어나야 한다.

하지만 윈도우OS 버전 or 윈도우 업데이트 버전에 따라 해당이슈가 발생하는 것 같으며 정확한 재현 케이스는 아직 잘 모르겠다.


이 문제를 해결하기 위해서는 다음과 같이 윈도우 객체를 변수로 관리하면 팝업을 유지할 수 있다.


<script type="text/javascript">
var myWindow = null;

function newPopup() {
	if (!myWindow || (myWindow && myWindow.closed)) {
		myWindow = window.open("http://localhost:8080", "_popup", "width=300px,height=300px,scrollbars=no");
	}
}
</script>


만약 같은 팝업을 각각 다른 페이지에서 띄울경우엔 myWindow 변수가 같이 유지되지 못하기 때문에 새창으로 뜨게 되는 단점은 존재하긴 한다.



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

'프론트기술 > HTML' 카테고리의 다른 글

text/javascript와 application/javascript의 차이점  (0) 2015.09.08
이벤트 캡쳐링(event capturing)  (0) 2015.01.22
이벤트 버블링(event bubbling)  (0) 2015.01.21
Posted by SungHoon, Park
,

이벤트 캡쳐링(event capturing)

프론트기술/HTML 2015. 1. 22. 22:32

이벤트 버블링과 반대되는 개념으로서,

이벤트가 상위노드에서 하위노드로 전파되어 실행된다.

(※ 캡쳐링의 경우는 IE9 이전 버전에서는 지원하지 않는다.)


이고잉님 생활코딩 강의에 너무 잘 설명되어 있어서 링크로 대신한다.

http://opentutorials.org/module/904/6768

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

'프론트기술 > HTML' 카테고리의 다른 글

text/javascript와 application/javascript의 차이점  (0) 2015.09.08
IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제  (0) 2015.09.07
이벤트 버블링(event bubbling)  (0) 2015.01.21
Posted by SungHoon, Park
,

이벤트 버블링(event bubbling)

프론트기술/HTML 2015. 1. 21. 23:55

스크립트 이벤트 순서가 자식노드에서부터 상위 부모노드로 올라가면서 연속적으로 실행되는 것을 말한다.


<html>
<head>
	<style type="text/css">
		.parent {width:300px; height:300px; background-color:red;}
		.child {width:150px; height:150px; background-color:yellow;}
	</style>
	<script type="text/javascript">
	function parent(){
		alert("parent clicked");
	}
	
	function child(){
		alert("child clicked");
	}	
	</script>
</head>
<body>
	<div onclick="parent();" class="parent">
		<div onclick="child();" class="child"></div>
	</div>
</body>
</html>




위 코드를 실행하면 나오게 되는 화면이다.

부모 <div>와 자식 <div>가 겹쳐지는 부분인 노란색 영역을 클릭하게 되면 "child clicked" 얼럿이 뜨고 나서 "parent clicked" 얼럿이 뜨게 된다.


이것을 막기 위해선 event 속성의 cancleBubble값을 true로 설정하여야 한다.


	function child(){
		alert("child clicked");
		event.cancelBubble = true;
	}


또는 jQuery를 통해서 다음과 같이 처리할 수도 있다.


	jQuery(".child").click(function(e){
		e.stopPropagation();
	});



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

'프론트기술 > HTML' 카테고리의 다른 글

text/javascript와 application/javascript의 차이점  (0) 2015.09.08
IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제  (0) 2015.09.07
이벤트 캡쳐링(event capturing)  (0) 2015.01.22
Posted by SungHoon, Park
,

티스토리툴바