Notice
Recent Posts
Recent Comments
Link
«   2025/12   »
일 월 화 수 목 금 토
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/JS: 프로그래밍 코드

[JavaScript]자바스크립트 함수 확인 용 학습 코드

데브마우스 2023. 11. 26. 23:24

자바스크립트에는 다양한 기본 제공 함수가 있으며 개발자가 함수를 직접 만들 수도 있습니다. 이러한 코드를 쉽게 확인하기위한 코드입니다.

 

2가지 코드 파일(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>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <section class="container">
        <button type="button" id="testBtn">test Button</button>
        <br>
    </section>

    <script src="app.js"></script>
</body>
</html>

HTML파일입니다.

 

중앙 정렬을 위해 CSS로 .container 클래스에 width:80%;와 margin: 0 auto;를 주었습니다.

<body>의 <button>으로 테스트하고자 하는 함수나 자바스크립트 코드를 확인할 수 있습니다.

 

var testBtn = document.getElementById('testBtn')

testBtn.addEventListener("click", function() {
    alert("HTML과 JS의 연결이 완료되었습니다.");
});

자바스크립트 파일입니다.

HTML의 <button>과 연결되어있으며 제대로 연결되어있는지 확인하기 위해 alert()코드를 넣었습니다.

 

자바스크립트 코드의 기능을 확인하실 때 도움이 되셨으면 좋겠습니다.