출처 : https://javascript.info/hello-world
Hello, world!
javascript.info
Hello World!
이 튜토리얼은 JavaScript의 핵심 개념을 설명하는 내용임.
JavaScript는 다양한 환경에서 실행할 수 있지만 이 튜토리얼이 온라인이므로 브라우저를 실행 환경으로 선택함.
브라우저에 종속적인 명령어 (예:alert)는 최소한으로 다룰 것이며 , JavaScript의 브라우저 활용법은 이후에 다룸.
1.Javascript를 HTML에 연결하는 방법
JavaScript 코드는 <Script> 태그를 사용하여 HTML 문서 어디에든 삽입할 수 있음.
예제 코드
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert('Hello, world!');
</script>
<p>...After the script.</p>
</body>
</html>
설명
<Script> 태그 내부에 JavaScript 코드를 작성하면 브라우저가 해당 태그를 읽는 순간 자동으로 실행함.
위의 코드에서는 "Hello , World!" 라는 경고창 (alert)이 표시됨.
<Script>태그는 HTML 문서의 어디에나 위치할 수 있지만 일반적으로 <body>의 마지막에 배치하여 페이지 로딩 속도를 최적화함.
2.<Script> 태그의 속성
과거에는 <Script> 태그에 몇 가지 속성을 사용했지만 현대 JavaScript에서는 거의 사용되지 않음.
1. type 속성
<script type="text/javascript">
HTML4에서는 필수였지만 HTML5에서는 생략 가능함.
과거에는 "text/javascript"를 명시했으나 기본값이 JavaScript이므로 불필요함.
2.language 속성
<script language="JavaScript">
JavaScript의 언어를 속성이었으나 현재는 완전히 불필요함.
JavaScript가 기본 언어이므로 더 이상 사용되지 않음.
3. 오래된 코드에서 보이는 주석 처리
<script type="text/javascript"><!--
console.log("Old browser support");
//--></script>
이전에는 <script> 태그를 모르는 오래된 브라우저에서 JavaScript 코드를 숨기기 위해 사용되었음.
하지만 현대적인 브라우저에서는 필요하지 않으므로 더 이상 사용하지 않음.
3. 외부 스크립트 사용
JavaScript 코드를 별도의 파일로 분리할 수 있음. 이 방식이 더 선호되는 방법임.
외부 파일 연결 예제
<script src="/path/to/script.js"></script>
src 속성을 사용하면 해당 파일을 로드하여 실행함.
/path/to/Script.js 는 사이트 루트에서의 절대 경로임.
상대 경로로도 지정 가능 :
<script src="script.js"></script>
현재 폴더의 script.js 파일을 로드함.
CDN을 통한 로드도 가능
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
CDN
CDN(Content Delivery Network)은 웹 콘텐츠(이미지 , CSS , JavaScript 파일 등)를 여러 서버에 분산 저장하여
사용자에게 가장 가까운 서버에서 빠르게 제공하는 기술.
여러개의 스크립트 추가
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
여러 개의 스크립트 파일을 추가할 경우, 파일 순서가 중요함.
예 ) Script1.js가 Script2.js 의 함수를 의존한다면 Script1.js를 먼저 로드해야 함.
4. 외부 스크립트 사용 시 주의할 점
1. <script> 태그는 src와 내부 코드 동시 사용 불가
<script src="file.js">
alert(1); <!-- 내부 코드는 실행되지 않음 -->
</script>
src 속성이 설정된 경우엔 <script> 내부의 JavaScript 코드는 무시됨.
따라서 분리하여 사용하여야 함.
<script src="file.js"></script>
<script>
alert(1);
</script>
첫번째 <script>는 외부 파일을 로드하고
두번째 <script>는 추가적인 JavaScript 코드를 실행함.
'언어' 카테고리의 다른 글
| The modern mode, "use strict" (JavaScript) (0) | 2025.03.10 |
|---|---|
| Code structure (JavaScript) (0) | 2025.03.09 |
| Developer console (JavaScript) (0) | 2025.03.08 |
| Code editors (JavaScript) (0) | 2025.03.08 |
| Manuals and specifications (JavaScript) (0) | 2025.03.08 |
