🤔들어가면서🤔
스크립트 파일을 html에 연결하는 방법인 <script>태그에 대해서 알아보자.
📕 js와 html의 연결 방법
- html파일 내에 스크립트를 직접 작성
- src속성을 이용해 외부의 js파일 연결
📖 html파일 내에 스크립트를 직접 작성
<script> 태그를 이용해 html파일 내에 직접 작성한다.
✍️예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script> alert( 'Hello, world!' ); //스크립트 코드
</script>
</body>
</html>👉 실행화면
➕ 예전에 존재했던 속성들
-
type속성:<script type=…>
스크립트의 속성을 명시하는 것이 필수였다. (지금은 필수가 아님) -
language속성:<script language=…>
현재 사용하고 있는 스크립트언어를 나타낸다.
지금은 자바스크립트가 기본언어이므로 속성의 의미가 사라져 사용하지 않는다. -
스크립트 전후에 위치한 주석 : 태그 옆에 붙은 주석은
<script>태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했다. 지난 15년간 출시된 브라우저는<script>태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 코드라는 사실을 알 수 있습니다.
<script type="text/javascript"><!--
...
//--></script>🔍 html파일의 내부 스크립트
스크립트가 아주 간단할 때만 사용하며 스크립트가 길어지면 별개의 분리돤 파일로 만들어 저장하는 것이 좋다.
브라우저는 스크립트를 다운로드 받아 캐시에 저장하기 때문에 성능상 좋다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다
스크립트를 새로 다운받지 않고 캐시에 저장된 스크립트를 가져온다.
따라서 트래픽이 절약되고 웹페이지의 속도가 빨라진다. 📖 src속성을 이용해 외부의 js파일 연결
자바스크립트코드의 양이 많은 경우엔, 별개의 js파일로 저장할 수 있다.
만들어진 js파일은 script태그의 src속성을 사용해 HTML에 삽입할 수 있다.
<script src="파일경로"></script>여러개의 파일을 여러개의 script태그를 사용해 연결할 수 있다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…✍️ 예시코드
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./hello.js"></script> //같은 파일에 저장되어 있는 상대경로 지정
</body>
</html>[hello.js]
alert("I'm JavaScript!");👉 실행화면
📒 파일의 경로
- 상대경로와 절대 경로 둘다 가능하다.
➕ 상대경로의 지정
/: 루트 (가장 최상의 디렉토리로 이동 / Web root)./: 현재 위치, 생략가능하다. (파일의 현재 디렉토리를 의미)../: 현재 위치의 상단 폴더 (상위 디렉토리로 이동)
만약 두단계 상위 디렉토리로 이동할때는../../로 사용하면 된다.
📖 내부 script코드와 src속성은 동시에 사용할 수 없다.
⚠️<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못합니다.
❎ 잘못된 코드
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>✅ 수정된 코드
<script src="file.js"></script>
<script>
alert(1);
</script>❤️🔥 오류를 고친 소중한 경험!! ❤️🔥
여러분 눈에는 보이십니까??
어떤게 오류가 났을 지?
경로를 지정하는 속성 src에 오타가 난건데요...
강의를 듣거나 조언을 들으면 코딩은 에러를 잡는 과정의 연속이라는 말을 종종 들었는데, 이렇게 예상치 못하게 오타를 낼 줄은 몰랐습니다... ㅎ
오타가 났을거라는 생각은 전혀 못하고 그냥 끙끙거리기만 했는데 말이죠...
다음에는 오타부터 의심해야겠다는 생각을 했습니다.
➕ 도움을 주신 과선배님 아주 감사하다는 말씀드리고 싶습니다💧
🥲마무리하면서🥲
역시나 도움을 준 선배한테 정말 고맙다는 말을 하고 싶구요... 다음 내용은 외부파일로 js파일을 저장하고
연결하는 여러가지 추가속성에 대해서 알아보겠습니다.