2장. HTML속의 자바스크립트
HTML 속에 javascript 코드는 <script></script> 요소를 통해 넣습니다.
script 요소에는 6가지 속성이 있습니다. 모든 속성은 필수 속성은 아닙니다.
<script (1)charset (2)langage (3)src (4)type (5)async (6)defer></script>
(1)charset
코드의 문자셋을 지정하지만 브라우저가 대게 이 속성값을 무시한다고 합니다.
(2)language
폐기됐습니다. 브라우저가 얘도 대게 무시한다고 합니다.
(3)src
스크립트 요소는 두가지 방법으로 사용됩니다. 코드를 <script>코드 안에 직접 작성하거나, 외부 파일을 불러오는 방법이죠.
<script>코드 안에 직접 작성한 자바스크립트 코드는, 인라인 자바스크립트 코드라고 부릅니다.
src속성은 외부 자바스크립트 파일을 불러올 경우, 그 경로를 지정합니다 .
(4)type
language속성을 대체할 의도로 나왔습니다. 대게 type="text/javascript" 속성을 습관적으로 많이 사용합니다.
하지만 이 속성은 생략해도 좋은데, 생략시 기본값이 type="text/javasciprt"이기 때문입니다.
(5)async
<script>코드 내부의 javascript 코드는 위에서 부터 차례로 해석딥니다. 요소 내부 코드 전체를 평가하기 전에는 페이지의 나머지 콘텐츠
불러오지도 / 표시하지도 않습니다.
이 때문에 페이지 렌더링이 느려질 수도 있는데, async 속성을 쓰면
'스크립트를 모두 내려받아 실행할 때까지 기다릴 필요 없이 페이지 렌더링을 시작해도 좋으며 앞선 스크립트 파일을 기다리지 않고 뒤에 있는 스크립트 파일을 내려받아 실행해도 좋다'고 명시하는 것입니다.
만약 2개의 script파일이 있을 경우
<script async src="jquery.1.12.0.js"></script>
<script async src="custom.js"></script>
async속성은 인라인 자바스크립트 코드에는 유효하지 않고, 외부 파일을 불러오는 방법에만 유효합니다.
(6)defer
defer속성은 인라인 자바스크립트 코드에는 유효하지 않고, 외부 파일을 불러오는 방법에만 유효합니다.
defer속성을 사용하면 스크립트 파일은 모두 내려받습니다. 하지만 실행은 </html>태그를 만난 뒤에 됩니다.
요소를 순서대로 실행하도록 정의되어있지만 스크립트가 항상 순서대로 실행된다는 보장은 없습니다.
(5)async (6)defer 속성을 써서 페이지 렌더링을 돕는 방법이 있으나, 가장 좋은 방법은 </body>태그 가장 위에 쓰는 것입니다.
[인라인 코드와 외부파일]
아래와 같이 <script></script>코드 안에 직접 자바스크립트 코드가 들어간 것을 인라인 자바스크립트 코드라고 합니다.
<srcipt>
fucntion exam(){
alert("</script>")
}
</script>
근데 인라인 자바스크립트 안에 </script>코드가 들어가면 안되니 이스케이프 해야합니다. <|/script>
다음은 자바스크립트 exam.js를 외부 파일을 불러오는 코드입니다.
<script src="exam.js"></script>
exam.js파일 안에도 <script>나</script>코드가 들어가면 안됩니다.
그렇다면
<scrip src="exam.js">
function hello(){
alert("hellow")
}
</script>
이 파일은 어떻게 해석할까요?
정답은, script태그 안에 있는 hello()는 무시하고, exam.js만 실행합니다.
외부 파일을 불러오는 것에는 신기한 기능이 있습니다.
<script src="http://estelar.tistory.co,m"></script> 이렇게 src에 다른 도메인을 입력하면
다른 도메인에 있는 javascript코드를 사용할 수 있습니다!!!
[xhtml에서 인라인 코드 사용]
<script>
//<![CDATA]
fucntion camera(a, b){
if (a < b){
alert(a+b)
} else{
alert(a*b)
}
}
</script>
//]]>
xtml에너는 a < b를 태그의 시작으로 간주하고, 태그 다음에 공백이 올 수 없어 오류를 냅니다.
따라서 a < b 라고 바꿔야 하는데 가독성이 좋지 않습니다.
따라서 자바스크립트 코드를<![CDATA] ]]> 코드로 감싸는데, 이는 <![CDATA] ]]>안에 있는 ㅋ코드가 있는 그대로의
콘텐츠니까 파싱하지 말라는 뜻입니다. 하지만 브라우저가 XHTML이 비호환일 수 있습니다.
이런 경우를 대비해 <![CDATA] ]]> 에 주석을 붙입니다.
//<![CDATA]
// ]]>
이는 유효한 XHTML 마ㅡ업이며, XHTML을 지원하지 않는 브라우저에서도 문제 없습니다.
[noscript]
브라우저가 스크립트를 지원하지 않거나, 스크립트 지원이 꺼져 있을 땐 <noscript></noscript> 코드를 사용합니다.
<nosciprt>
<p>이 페이지는 스크립트 코드를 지원하지 않습니다.</p>
</noscript>
이렇게 스크립트를 사용할 수 없을 때에만 사용자에게 메세지가 표시된다고 합니다.
'IT 인터넷 > [책] Front-end 개발자를 위한 자바스크립트 프로그래밍' 카테고리의 다른 글
| 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 1장(정리) (0) | 2017.09.17 |
|---|