개발/html,css,javascript,typescript

html, JavaScript 예제1

컴공카 2025. 4. 27. 19:00
반응형

좋아!! 😎🔥
네가 말한 4가지 예시를 하나씩 차근차근 직접 해볼 수 있게 같이 가보자.
(각 예시마다 HTML + JavaScript 코드 같이 보여줄게!

 

 

1. 버튼 누르면 글자 바뀌게 하기

<!DOCTYPE html>
<html>
<head>
  <title>글자 바꾸기</title>
</head>
<body>

<h2 id="text">여기를 눌러주세요!</h2>
<button id="changeBtn">글자 바꾸기</button>

<script>
  const text = document.getElementById("text");
  const button = document.getElementById("changeBtn");

  button.addEventListener("click", function() {
    text.textContent = "글자가 바뀌었어요!";
  });
</script>

</body>
</html>

 

 

2. 입력창에 글 쓰고 출력하기

<!DOCTYPE html>
<html>
<head>
  <title>입력창 출력</title>
</head>
<body>

<input type="text" id="userInput" placeholder="여기에 입력하세요">
<button id="showBtn">출력하기</button>
<p id="result"></p>

<script>
  const input = document.getElementById("userInput");
  const button = document.getElementById("showBtn");
  const result = document.getElementById("result");

  button.addEventListener("click", function() {
    const text = input.value;
    result.textContent = "입력한 내용: " + text;
  });
</script>

</body>
</html>

 

3. 여러개 버튼 제어하기

<!DOCTYPE html>
<html>
<head>
  <title>여러 버튼</title>
</head>
<body>

<button class="colorBtn">빨강</button>
<button class="colorBtn">초록</button>
<button class="colorBtn">파랑</button>

<h2 id="displayText">색을 선택해보세요!</h2>

<script>
  const buttons = document.querySelectorAll(".colorBtn");
  const display = document.getElementById("displayText");

  buttons.forEach(function(btn, index) {
    btn.addEventListener("click", function() {
      if (index === 0) {
        display.style.color = "red";
      } else if (index === 1) {
        display.style.color = "green";
      } else if (index === 2) {
        display.style.color = "blue";
      }
    });
  });
</script>

</body>
</html>

 

4. 간단한 계산기 만들기 (덧셈)

<!DOCTYPE html>
<html>
<head>
  <title>간단 계산기</title>
</head>
<body>

<input type="number" id="num1" placeholder="첫 번째 숫자">
<input type="number" id="num2" placeholder="두 번째 숫자">
<button id="calcBtn">더하기</button>
<p id="sumResult"></p>

<script>
  const num1 = document.getElementById("num1");
  const num2 = document.getElementById("num2");
  const button = document.getElementById("calcBtn");
  const result = document.getElementById("sumResult");

  button.addEventListener("click", function() {
    const number1 = Number(num1.value);
    const number2 = Number(num2.value);
    const sum = number1 + number2;

    result.textContent = "결과: " + sum;
  });
</script>

</body>
</html>

 

html에 이를 복붙해서 확인해보고 GPT에게 각 코드와 함사들을 해석해달라고해주면 학습을 시작하기 좋아

 

학습의 이해를 위해 나에게 질문해주고 추가적으로 무엇을 학습할수 있는지 알려주면 좋을것 같다고 이야기해

반응형