반응형
□ 소개
입력 창에 "문구"를 입력하고, 확인 버튼을 클릭하면, 경고창에 입력한 내용을 표시하는 html 파일을 생성 합니다.
동적 기능을 사용하기 때문에 javascript 기능을 사용 합니다.
▷ Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 창과 확인 버튼</title>
<script>
function showMessage() {
let userInput = document.getElementById("para").value;
alert("입력한 내용: " + userInput);
}
</script>
</head>
<body>
<label for="para">입력: </label>
<input type="text" id="para" placeholder="텍스트를 입력하세요">
<button onclick="showMessage()">확인</button>
</body>
</html>▷ <script> . . </script> 설명
- 함수 선언:
function showMessage()는 showMessage라는 이름의 함수를 선언합니다.
- 이 함수는 사용자가 입력한 값을 처리하고 그 결과를 경고창으로 보여주는 역할을 합니다. - 변수 선언 및 값 할당:
let userInput = document.getElementById("userInput").value;
1) userInput이라는 변수를 선언합니다.
2) 해당 변수에 id가 "para"인 HTML 요소의 값을 할당합니다.
즉, 사용자가 입력한 값이 userInput 변수에 저장됩니다.
3) 경고창 출력:
alert("입력한 내용: " + userInput);는 경고창을 띄우고, 경고창 안에 "입력한 내용: "이라는 문자열과 userInput 변수에 저장된 값을 함께 표시합니다.
▷ <body> . . </body> 설명
- 레이블 요소: <label for="para">입력:
</label>는 입력 요소의 레이블을 제공합니다. for 속성은 레이블이 어떤 입력 요소와 연관되어 있는지를 나타내며, 여기서는 id="para"인 입력 요소와 연결되어 있습니다. - HTML 입력 요소:
<input type="text" id="para" placeholder="텍스트를 입력하세요">는 사용자가 텍스트를 입력할 수 있는 입력 요소를 만듭니다. type="text"는 텍스트 입력 필드임을 나타내며, id="para"는 이 입력 요소를 JavaScript 코드에서 참조하기 위한 고유 식별자입니다. placeholder="텍스트를 입력하세요"는 입력 필드가 비어 있을 때 보이는 임시 텍스트로, 사용자에게 무엇을 입력해야 하는지 안내합니다. - 버튼 요소:
<button onclick="showMessage()">확인</button>는 버튼을 만듭니다. 이 버튼을 클릭하면 JavaScript 함수 showMessage()가 호출됩니다. - JavaScript 함수:
앞서 설명드린 바와 같이, showMessage() 함수는 사용자가 입력한 값을 가져와 경고창으로 출력하는 기능을 합니다. - 이벤트 연결:
onclick 속성은 버튼을 클릭했을 때 실행할 JavaScript 함수를 지정합니다. 여기서는 showMessage() 함수가 호출되도록 설정되어 있습니다.
by korealionkk@gmail.com
'JavaScript For Creo' 카테고리의 다른 글
| browser_test.html (0) | 2025.02.06 |
|---|---|
| 자비스크리트 예제 사이트 (0) | 2025.02.06 |
| Creo.JS (1) | 2025.02.04 |
| 현재 모델의 파일 이름을 가져오는 코드 #2 (1) | 2025.02.04 |
| 현재 모델의 파일 이름을 가져오는 코드 #1 (0) | 2025.02.02 |
