[JavaScript]html에서 JavaScript를 실행하기

연결하는 방법에는 총 3가지 방법이 있다

inline자바스크립트를 이용하는 방법
내부 자바스크립트를 이용하는 방법
외부 자바스크립트를 이용하는 방법

__inline 방식

inline에 js 코드 넣기

<!DOCTYPE html>
<html>
    <body>
        <input type="button" onclick="alert('Hello world')" value="Hello world" />
    </body>
</html>

inline에 script 연결하기

< !DOCTYPE html >
  <html>
    <body>
      <input type="button" id="hw" value="Hello world" />
      <script>
        const hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
          alert('Hello world');
        })
      </script>
    </body>
  </html>
  /*hw라는 변수를 통해서 hw라는 id를 가진 요소에 element객체를 반환한다*/

__html 내부에서 사용하기

<!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>
    <script>
        const tagMaker = tag => content => `<${tag}>${content}</${tag}>`
        const divMaker = tagMaker('div');
        document.write(divMaker('hello'));
        document.write(divMaker('codestates'));

        const anchorMaker = tagMaker('a');
        document.write(anchorMaker('go'));
        document.write(anchorMaker('urclass'));
    </script>
</body>
</html>

__외부 파일 불러오기

<!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">
    <script src="htmlmaker.js"></script>
    <title>Document</title>
</head>
<body>
    <div>body part</div>
</body>
</html>

자바스크립트 파일을 html과 별개인. js 확장자의 파일로 저장한 후 불러올 수 있습니다

Location of script elements

<head>의 안쪽

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script>
	    console.log("welcome JavaScript");
        let msgElement = document.querySelector("#msg");
        console.log(msgElement);
    </script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>
/*출력
welcome JavaScript
null
*/

</body>가 끝나기 전

  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <script>
	    console.log("welcome JavaScript");
        let msgElement = document.querySelector("#msg");
        console.log(msgElement);
    </script>
  </body>
</html>
/*출력
welcome JavaScript
<div id="msg">Hello JavaScript!</div>
*/

이는 브라우저가 코드를 해석하는 과정에서 <script> 요소를 만나게 되면 잠시 해석을 멈추게 됩니다. HTML해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행하기 때문입니다.

안정적으로 <script> 요소를 추가하기 위해서는 2번째 방법을 지향합니다.

※ 마지막 공부하면서 헷갈렸던 부분

<script type="text/javascript"></script> = <script></script>

or

<script type="text/javascript"></script> ! = <script></script>

인터넷 블로그 들을 돌아보면 똑같은 예시 인대 type이 추가된 예시와 추가되지 않은 예시가 나뉘는 걸 본 적이 있을 것이다

일단 type = "text/javacript"의 의미는 옛날에는 스크립트 언어가 여러 개였을 시절 javascript text를 통해 스크립트를 구현하겠다는 의미이다.

하지만 HTML5에서는

기본적으로 type = "text/javacript"로 설정되어 있기 때문에 따로 type를 지정해줄 필요가 없다

추가로 css도 동일하게 지정해줄 필요가 없다는 사실!!!!

728x90

저작자표시

'프론트 엔드 > javascript' 카테고리의 다른 글

[JavaScript]javascript중간 정리(koans) (0)	2022.09.18
[JavaScript]클로저 (0)	2022.09.18
[JavaScript]스코프 (0)	2022.09.06
[JavaScript] 원시 자료형과 참조 자료형 (0)	2022.09.06
[JavaScript]객체 (0)	2022.09.05