학습] 버튼을 클릭하면, 메세지 보이기

"클릭하세요"버큰을 클릭하면, 위 이미지와 같이 안녕하세요가 표시됩니다.

▷ 전체 html 코드

<!DOCTYPE html>
<html>
    <head>
        <title>버튼 클릭 예제</title>
    </head>
    <body>
        <button onclick="displayGreeting()">클릭하세요!</button>
        <p id="greeting"></p>

        <script>
            function displayGreeting() {
                document.getElementById("greeting").innerHTML = "안녕하세요";
            }
        </script>
    </body>
</html>

hrml 파일 내용을 설명 합니다

1. <Body> 태그

HTML 문서의 <Body> 태그는 문서의 본문 내용을 담는 컨테이너 역할을 합니다.

웹 페이지의 시각적 내용, 즉 텍스트, 이미지, 링크, 폼 등이 모두 <body> 태그 안에 포함됩니다. <body> 태그는 <html> 태그의 자식 태그로, 웹 페이지의 실제 내용이 들어가는 부분입니다.

▷ html 예제 코드

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

▷ 실행 화면

2.<button onclick="displayGreeting()">클릭하세요!</button>

<button> 태그는 HTML에서 버튼을 만드는 태그입니다. 여기서는 onclick 속성을 사용하여 버튼을 클릭했을 때 실행할 JavaScript 함수를 지정하고 있습니다. onclick 속성은 HTML 요소에 이벤트 핸들러를 추가하는 속성입니다. 이 경우에는 버튼을 클릭했을 때 displayGreeting() 함수가 실행되도록 설정되어 있습니다.

displayGreeting() 함수는 JavaScript에서 정의된 함수로, 버튼을 클릭했을 때 실행됩니다.
이 함수는 document.getElementById("greeting").innerHTML = "안녕하세요" 코드를 실행하여 HTML 문서에서 "greeting"이라는 id를 가진 <p> 태그 안에 "안녕하세요"라는 텍스트를 추가합니다.

따라서, <button onclick="displayGreeting()">클릭하세요!</button>는 사용자가 버튼을 클릭했을 때 "안녕하세요"라는 텍스트가 표시되도록 하는 버튼을 만듭니다.

3. <p id="greeting"></p>

<p> 태그는 HTML에서 단락(paragraph)을 나타내는 태그입니다. 여기서는 id 속성을 사용하여 해당 <p> 태그를 식별할 수 있는 고유한 이름인 "greeting"을 부여했습니다.
id 속성은 HTML 문서 내에서 특정 요소를 참조하는 데 사용됩니다. id는 HTML 요소를 고유하게 식별하기 위해 사용되는 속성으로, 개발자가 원하는 대로 자유롭게 이름을 지정할 수 있습니다.
예를 들어, 위 코드에서는 document.getElementById("greeting")를 사용하여 <p> 태그를 참조하고 있습니다.
이렇게 하면 JavaScript 코드에서 해당 <p> 태그에 접근하여 내용을 변경하거나 스타일을 적용하는 등의 작업을 할 수 있습니다. 예를 들어, 위 코드에서는 displayGreeting() 함수에서 innerHTML 속성을 사용하여 <p> 태그 안에 "안녕하세요"라는 텍스트를 추가하고 있습니다. 요약하자면, <p id="greeting"></p>는 HTML 문서에서 "greeting"이라는 이름으로 식별되는 빈 단락을 생성하며, JavaScript 코드에서 이 단락에 접근하여 내용을 변경할 수 있도록 합니다.

<body>
        <button onclick="displayGreeting()">클릭하세요!</button>
        <p id="greeting"></p>
</body>

<body> </body> 태그 사이에 html 화면을 구성 합니다. 첫번째 줄에 "버튼"을 표시 합니다. 두번째 줄에는 사전 정의된 내용을 표시 합니다. html에 "버튼"의 이름은 "클릭하세요"입니다. 버튼을 클릭하면 함수 displayGreeting()를 실행 합니다.

함수를 실행하면 <script> </script> 내용을 실행 하고, 실행된 결과를 id에로 가져와서 출력 됩니다.

HTML 문서에서 특정 동작을 수행하도록 하는 JavaScript 스크립트입니다.

 <script>
            function displayGreeting() {
                document.getElementById("greeting").innerHTML = "안녕하세요";
            }
 </script>

▷함수 정의

사용자가 HTML 문서 내의 버튼을 클릭했을 때 호출됩니다. 함수의 이름은 " displayGreeting()" 입니다. "{ }"에 실행되는 내용을(함수 내부) 입력 합니다.

 function displayGreeting() {

}

함수 내부

document.getElementById("greeting").innerHTML = "안녕하세요";

document.getElementById("greeting")를 사용하여 HTML 문서에서 "greeting"이라는 id를 가진 요소를 찾습니다. 이 경우, "greeting"이라는 id를 가진 요소는 <p> 태그입니다. 그런 다음, innerHTML 속성을 사용하여 해당 요소의 내부 내용을 "안녕하세요"로 변경합니다. 따라서, 사용자가 버튼을 클릭하면 "안녕하세요"라는 텍스트가 "greeting"이라는 id를 가진 <p> 태그 안에 표시됩니다.

예제1 html 코드

<!DOCTYPE html>
<html>
    <head>
        <title>메시지 창 예제</title>
    </head>
    <body>
        <button onclick="alert('안녕하세요')">클릭하세요!</button>
    </body>
</html>

예제1 html 실행

예제2 html 코드

<!DOCTYPE html>
<html>
    <head>
        <title>계산기 예제</title>
    </head>
    <body>
        <button onclick="alert(1 + 1)">클릭하세요!</button>
    </body>
</html>

예제2 html 실행

저작자표시 비영리 변경금지 (새창열림)

'JavaScript For Creo' 카테고리의 다른 글

학습] Creo.js 및 browser.creojs 불러오기 (웹에서 경로표기법) (0)	2025.02.23
Chrome 문제를 해결을 위한 Creo,Chrome DevTools를 사용하는 방법 (0)	2025.02.23
부트스트랩 프레임웍 학습 #2 - 컨테이너 란? (1)	2025.02.18
부트스트랩 프레임웍 학습 #1 (0)	2025.02.17
Creo.JS를 사용하는 방법 (0)	2025.02.17