튜토리얼의 이 부분은 언어 자체인 핵심 JavaScript에 관한 것입니다.
하지만 스크립트를 실행하려면 작업 환경이 필요하며 이 책은 온라인이므로 브라우저가 좋은 선택입니다. 다른 환경(예: Node.js)에 집중할 계획이라면 해당 명령에 시간을 낭비하지 않도록 브라우저별 명령(예: alert )의 양을 최소한으로 유지할 것입니다. 튜토리얼의 다음 부분에서는 브라우저의 JavaScript에 중점을 둘 것입니다.
먼저 웹페이지에 스크립트를 첨부하는 방법을 살펴보겠습니다. 서버측 환경(예: Node.js)의 경우 "node my.js" 와 같은 명령을 사용하여 스크립트를 실행할 수 있습니다.
JavaScript 프로그램은 <script> 태그를 사용하여 HTML 문서의 거의 모든 위치에 삽입할 수 있습니다.
예를 들어:
<!DOCTYPE HTML>
<html>
<본문>
<p>스크립트 전...</p>
<스크립트>
Alert( '안녕하세요, 세계!' );
</script>
<p>...스크립트 이후.</p>
</body>
</html>위 상자의 오른쪽 상단에 있는 "재생" 버튼을 클릭하여 예제를 실행할 수 있습니다.
<script> 태그에는 브라우저가 태그를 처리할 때 자동으로 실행되는 JavaScript 코드가 포함되어 있습니다.
<script> 태그에는 요즘 거의 사용되지 않지만 이전 코드에서 여전히 찾을 수 있는 몇 가지 속성이 있습니다.
type 속성: <script type =…>
이전 HTML 표준인 HTML4에서는 type 있는 스크립트가 필요했습니다. 일반적으로 type="text/javascript" 입니다. 더 이상 필요하지 않습니다. 또한 최신 HTML 표준에서는 이 속성의 의미를 완전히 바 꾸었습니다. 이제 JavaScript 모듈에 사용할 수 있습니다. 하지만 이는 고급 주제이므로 튜토리얼의 다른 부분에서 모듈에 대해 이야기하겠습니다.
language 속성: <script language =…>
이 속성은 스크립트의 언어를 표시하기 위한 것입니다. JavaScript가 기본 언어이기 때문에 이 속성은 더 이상 의미가 없습니다. 그것을 사용할 필요가 없습니다.
스크립트 전후의 주석입니다.
아주 오래된 책과 가이드에서는 <script> 태그 안에 다음과 같은 주석이 있을 수 있습니다.
<script type="text/javascript"><!--
...
//--></script> 이 트릭은 최신 JavaScript에서는 사용되지 않습니다. 이러한 주석은 <script> 태그를 처리하는 방법을 몰랐던 이전 브라우저에서 JavaScript 코드를 숨깁니다. 지난 15년 동안 출시된 브라우저에는 이러한 문제가 없으므로 이러한 종류의 주석은 실제로 오래된 코드를 식별하는 데 도움이 될 수 있습니다.
JavaScript 코드가 많으면 별도의 파일에 넣을 수 있습니다.
스크립트 파일은 src 속성을 사용하여 HTML에 첨부됩니다.
<script src="/path/to/script.js"></script>
여기서 /path/to/script.js 는 사이트 루트에서 스크립트로의 절대 경로입니다. 현재 페이지의 상대 경로를 제공할 수도 있습니다. 예를 들어 src="script.js" src="./script.js" 와 마찬가지로 현재 폴더에 "script.js" 파일이 있다는 의미입니다.
전체 URL도 제공할 수 있습니다. 예를 들어:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
여러 스크립트를 첨부하려면 여러 태그를 사용하세요.
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
참고:
일반적으로 HTML에는 가장 간단한 스크립트만 삽입됩니다. 더 복잡한 것들은 별도의 파일에 있습니다.
별도의 파일을 사용하면 브라우저가 해당 파일을 다운로드하여 캐시에 저장한다는 이점이 있습니다.
동일한 스크립트를 참조하는 다른 페이지에서는 해당 스크립트를 다운로드하는 대신 캐시에서 가져오므로 파일은 실제로 한 번만 다운로드됩니다.
그러면 트래픽이 줄어들고 페이지 속도가 빨라집니다.
src 설정되면 스크립트 내용이 무시됩니다.
단일 <script> 태그에는 src 속성과 코드가 모두 포함될 수 없습니다.
이것은 작동하지 않습니다:
<스크립트 src="file.js"> 경고(1); // src가 설정되어 있으므로 내용은 무시됩니다. </script>
외부 <script src="…"> 또는 코드가 포함된 일반 <script> 선택해야 합니다.
위의 예는 두 개의 스크립트로 분할되어 작동할 수 있습니다.
<script src="file.js"></script> <스크립트> 경고(1); </script>
<script> 태그를 사용하여 페이지에 JavaScript 코드를 추가할 수 있습니다.
type 및 language 속성은 필요하지 않습니다.
외부 파일의 스크립트는 <script src="path/to/script.js"></script> 사용하여 삽입할 수 있습니다.
브라우저 스크립트 및 웹페이지와의 상호 작용에 대해 배울 내용이 훨씬 더 많습니다. 그러나 튜토리얼의 이 부분은 JavaScript 언어에 전념하므로 브라우저별 구현으로 인해 주의가 산만해져서는 안 됩니다. 우리는 JavaScript를 실행하는 방법으로 브라우저를 사용할 것입니다. 이는 온라인 읽기에 매우 편리하지만 많은 것 중 하나일 뿐입니다.
중요도: 5
"나는 JavaScript입니다!"라는 메시지를 표시하는 페이지를 만듭니다.
샌드박스나 하드 드라이브에서 수행하는 것은 중요하지 않습니다. 단지 작동하는지 확인하기만 하면 됩니다.
새 창에서 데모
<!DOCTYPE HTML>
<html>
<본문>
<스크립트>
Alert( "저는 JavaScript입니다!" );
</script>
</body>
</html>샌드박스에서 솔루션을 엽니다.
중요도: 5
이전 작업의 솔루션을 사용하여 경고를 표시합니다. 스크립트 내용을 동일한 폴더에 있는 외부 파일인 alert.js 로 추출하여 수정하세요.
페이지를 열고 경고가 작동하는지 확인하세요.
HTML 코드:
<!DOCTYPE HTML> <html> <본문> <script src="alert.js"></script> </body> </html>
동일한 폴더에 있는 alert.js 파일의 경우:
Alert("저는 자바스크립트입니다!");