[자바스크립트] JavaScript 작성 방법
반응형
JavaScript 작성 방법
- HTML 내 자바스크립트의 작성 방법을 소개한다.
<script> 태그
- HTML 문서 내에 script 태그를 이용하여 위치시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>스크립트 전</p>
<script>
alert('Hello, world!');
</script>
<p>스크립트 후</p>
</body>
</html>
모던 마크업
- HTML4에서는
type을 명시하는 것이 필수였다type="text/javascript"
- 그러나 이제는 타입 명시가 필수가 아니다.
language속성:<script language=…>- 이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 의미가 퇴색되어 사용할 필요가 없어졌다.
외부 스크립트 삽입 방법
- JS 코드 양이 많으면 외부 파일로 소분하여 저장 ->
src속성을 사용해 HTML에 삽입
<script src="/path/to/script.js"></script>⚠️ 주의사항
- 스크립트가 간단할 때만 HTML 안에 작성해도 되지만, 길어진 파일을 분리하여 저장하는 것이 좋다.
- 스크립트 파일을 별도로 저장하면 브라우저가 스크립트를 다운로드하여 캐시에 저장하기 때문에 성능상 이점이 있다.
- 여러 페이지에서 동일한 스크립트를 사용하는 경우
- 트래픽이 절약되고 웹 페이지의 실제 속도도 빨라진다.
src속성이 있으면 태그 내부의 코드는 무시됩니다.<script>태그는src속성과 내부 코드를 동시에 가지지 못합니다.
//------다음 코드는 실행 안 됨------------- <script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다. </script> //--------아래 코드는 정상 실행----------- <script src="file.js"></script> <script> alert(1); </script>
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 자바스크립트 형 변환 (type conversion) (0) | 2021.06.29 |
|---|---|
| [자바스크립트]alert, prompt, confirm (0) | 2021.06.29 |
| [자바스크립트]자바스크립트의 자료형 (0) | 2021.06.29 |
| [자바스크립트]변수와 상수(let, const) (0) | 2021.06.29 |
| [자바스크립트] 엄격모드 (0) | 2021.06.29 |