[자바 스크립트] 2. 첫 Java Script

Mar 31, 2025


<!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>
        .red-box {
            border: 1px solid black;
            background-color: red;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="red-box" id="name-box"> 홍길동 </div>
    <button onclick="changeName()">이름 변경</button>
    <script>
        // 변수
        let n1 = 1;
        // 알림창
        alert(n1);
        // sysout같은 것.
        console.log(`n1:${n1}`);

        // 함수 선언
        function changeName() {
            // 유일한 것을 찾을 때는 ID로 찾는다 (# .  tag 3종류가 있다)
            // #뒤에 아이디 적어주기
            let d1 = document.querySelector("#name-box");
            console.log(d1);
            d1.innerHTML = "임꺽정";
        }
    </script>
</body>

</html>

alert(n1); (알림 창을 띄운며 내용에는 n1값이 들어간다.)

메인 화면

let d1 = document.querySelector("#name-box"); d1.innerHTML = "임꺽정"; (이름 변경 버튼을 누르면 이름이 바뀐다.)

[자바 스크립트] 2. 첫 Java Script

alert(n1); (알림 창을 띄운며 내용에는 n1값이 들어간다.)

메인 화면

let d1 = document.querySelector("#name-box"); d1.innerHTML = "임꺽정"; (이름 변경 버튼을 누르면 이름이 바뀐다.)

버튼을 누를 때 마다 로그가 찍힌다. console.log(d1);

More articles

[자바 스크립트] 4. 컬렉션, 오브젝트

[자바 스크립트] 3. 변수 타입

[자바 스크립트] 1. 자바 스크립트의 역사

[스프링부트] 28. 스프링부트 뱅크 v1 계좌 상세보기