Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

사고쳤어요

Javascript와 Javascript-HTML 연결 방법, Javascript 태그 연결 방법 본문

웹 풀스택

Javascript와 Javascript-HTML 연결 방법, Javascript 태그 연결 방법

kevinmj12 2025. 2. 3. 16:48

Javascript란

Javascript는 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어이다.

이름에도 포함되어 있는 스크립트란,

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 프로그램을 제어하는 스크립트 역할을 하는 언어이다.

Javascript를 사용하면 다음과 같이 버튼을 눌렀을 때 입력한 내용의 팝업을 띄우는 등의 제어를 할 수 있게 된다.

 

HTML에 Javascript를 적용하는 방법은 3가지가 있다.

- 인라인(inline): HTML 태그 안에 Javascript를 같이 작성한다.(사용자와의 상호작용이 있을 때만 가능)

- 내부 스크립트(internal script): HTML 문서 안에 Javscript를 같이 작성한다.

- 외부 스크립트(external script): HTML 문서 밖에 Javascript를 작성하고 연결한다.

 

인라인

HTML 태그 안에 Javascript를 같이 작성한다.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
    <!-- login.css 연결 -->
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <h1>Login</h1>
    <form>
      ID: <input type="text" class="login_inputs" />
      <br />
      PW: <input type="password" class="login_inputs" />
      <br />
      <input type="button" value="login" id="login_button" 
      onclick="alert('Button Clicked!')"/> <!-- 인라인 -->
    </form>
  </body>
</html>

 

내부 스크립트

<script> 태그 안에 Javascript 내용을 작성한다.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
    <!-- login.css 연결 -->
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <h1>Login</h1>
    <form>
      ID: <input type="text" class="login_inputs" />
      <br />
      PW: <input type="password" class="login_inputs" />
      <br />
      <input
        type="button"
        value="login"
        id="login_button"
        onclick="{myFunction()}"
      />
    </form>

    <script>
      // 내부 스크립트
      function myFunction() {
        alert("Button Clicked!");
      }
    </script>
  </body>
</html>

외부 스크립트

login.js 파일에 Javascript 내용을 작성한 후 HTML에서 <script>태그를 통해 연결한다.

<!-- login.html -->

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
    <!-- login.css 연결 -->
    <link rel="stylesheet" href="login.css" />
    <!-- login.js 연결 -->
    <script type="text/javascript" src="login.js"></script>
  </head>
  <body>
    <h1>Login</h1>
    <form>
      ID: <input type="text" class="login_inputs" />
      <br />
      PW: <input type="password" class="login_inputs" />
      <br />
      <input
        type="button"
        value="login"
        id="login_button"
        onclick="{myFunction()}"
      />
    </form>
  </body>
</html>
// login.js

// 외부 스크립트
function myFunction() {
  alert("Button Clicked!");
}

태그 연결 방법

Javascript로 HTML 태그를 제어하려면 특정 태그를 찾아 연결해야 하는 상황이 자주 발생한다.

이 때 Javascript와 HTML 태그를 찾아 연결하는 방법은 다음과 같다.

- id로 찾기: document.getElementById("아이디")

- class로 찾기: document.getElementsByClassName("클래스")

- tag로 찾기: document.getElementsByTagName("태그")

 

ID로 찾기

document.getElementById("아이디")

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
    <!-- login.css 연결 -->
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <h1>Login</h1>
    <form>
      ID: <input id="txt_id" type="text" class="login_inputs" />
      <br />
      PW: <input id="txt_pw" type="password" class="login_inputs" />
      <br />
      <input
        type="button"
        value="login"
        id="login_button"
        onclick="{popId()}"
      />
    </form>

    <script>
      function popId() {
        // id로 찾기
        let id_val = document.getElementById("txt_id").value;
        if (!id_val) {
          alert("아이디를 입력해주세요");
        } else {
          alert(id_val);
        }
      }
    </script>
  </body>
</html>

 

Class로 찾기

Tag로 찾기

'웹 풀스택' 카테고리의 다른 글

Node.js에서 Router를 통해 url 읽어내기  (0) 2025.02.04
Node.js 서버 모듈화  (0) 2025.02.04
Node.js 기본 웹서버 만들기  (0) 2025.02.04
CSS와 CSS-HTML 연결 방법  (0) 2025.02.03
웹의 구성 요소  (1) 2025.01.31
'웹 풀스택' Related Articles more