![[자바 스크립트] 2. 첫 Java Script](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-31T07%3A48%3A01.759Z-7eb5a408-01d9-4d07-a72a-ef319be67ae2&w=3840&q=75)
<!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 = "임꺽정"; (이름 변경 버튼을 누르면 이름이 바뀐다.)
버튼을 누를 때 마다 로그가 찍힌다. console.log(d1);
Share article