김숭늉 마음대로

[자바스크립트] HTML에 자바스크립트를 삽입할수 있는 세가지 방법 본문

IT/JavaScript

[자바스크립트] HTML에 자바스크립트를 삽입할수 있는 세가지 방법

김숭늉이 2023. 8. 24. 21:40
728x90

 

HTML에 자바스크립트를 삽입할수 있는 세가지 방법에 대해서 알아 보겠습니다.

 

 

먼저 첫번째방법은  "인라인(Inline) 자바스트립트"의 방식입니다. html 내부 <body>에 onload 를 추가하여 자바스크립트를 실행시키는 방식입니다. 이 방식은 디버그가 어렵기 때문에 가능하면 사용하지 않습니다 :)

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body onload="alert('hello')"> //////// 인라인으로 작성한 onload 를 통해 자바스크립트 실행합니다
 
  </body>

</html>

 

실행을 시키면 아래와 같이 alert 가 생성됩니다!

Alert가 생성되요

 

✅ 참고

쌍따옴표가 아래와 같이 중복일 경우에는 쌍따옴표가 중복되지 않도록 하위는 작은 따옴표로 처리 해줍니다.

<body onload = "alert('Hello')" alert 문구는 작은따옴표로 작성

///// <body onload = "alert("Hello")> 쌍따옴표를 중복으로 사용하지 않아요

 

 

두번째 방법은 내부 자바스트립트 (internal javascript) 입력 방식이예요!

<body> 내부에 script type 형식으로 작성합니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body>

    <script type="text/javascript">  //// body 안에 script type으로 작성합니다!

      alert("Hello");

    </script>

</html>

동일하게 Alert가 생성되요

 

마지막 세번째방법은 일반적으로 사용하는 외부 자바스크립트 (external javascript) 입력 방식입니다!  

외부 소스를 가진 스크립트 태그를 가지며, src 내부에서 경로를 특정하게 되며,

css 등 다른 코드가 모두 실행된후 가장 마지막순서로 자바스크립트가 실행될수 있도록 <body>가장 하단에 작성합니다. 

 

.js 파일이 외부소스로 존재해요!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>

    <h1>Hello</h1>

    <script src="index.js" charset="utf-8"></script> /// src를 통해 파일을 특정합니다 :)  body 하단에 작성
    </body>

</html>

역시 동일하게 Alert가 생성되요

 

 

 

읽어주셔서 감사합니다아 :)

728x90
반응형

'IT > JavaScript' 카테고리의 다른 글

[자바스크립트] DOM의 get 속성 // getElementById(), getElementByClassName(), getElementByTagName()  (0) 2023.08.27
[자바스크립트] DOM이란..? DOM의 속성과 DOM의 개체  (0) 2023.08.27
[자바스크립트] 피보나치(fibonacci) 수열에 대해 들어보셨나요? (for 루프에 대한 개념)  (0) 2023.08.21
[자바스크립트] 개발자를 편하게 만들어주는 for 루프 (loop)  (0) 2023.08.21
[자바스크립트] false가 될때까지 무한 루프되는 while  (0) 2023.08.20
'IT/JavaScript' Related Articles more