Guidelines
Practice
JavaScript sendEmail
함수
sendEmail 함수는 웹 페이지에 있는 'SEND EMAIL' 버튼을 클릭했을 때 이메일 보내기 기능을 구현해요.
사용자가 입력한 이름, 이메일, 메시지 값을 포함한 이메일을 작성하게 됩니다.
동작 방식
-
버튼 객체 가져오기:
document.getElementById('send-button')
를 사용해 'SEND EMAIL' 버튼에 해당하는 DOM 객체를 가져옵니다. -
이벤트 리스너 추가:
button.addEventListener('click', function (e) {...})
을 통해 버튼 클릭 시 실행될 함수를 정의합니다. -
기본 동작 방지:
e.preventDefault()
는 버튼 클릭 시 발생하는 기본 동작(폼 제출 등)을 방지합니다. 이렇게 함으로써 JavaScript에서 원하는 동작만 수행되게 합니다. -
입력값 가져오기:
각 입력 필드(
input-name
,input-email
,input-message
)의 값을 JavaScript로 가져옵니다. -
메일 내용 구성:
subject
와body
변수를 사용해 메일 제목과 본문을 구성합니다. -
이메일 보내기:
window.location.href
를 'mailto:' 프로토콜과 함께 사용해 기본 이메일 클라이언트를 통해 이메일을 작성합니다.
코드 설명
function sendEmail() { // 'SEND EMAIL' 버튼의 DOM 객체를 가져옵니다. const button = document.getElementById('send-button'); // 버튼 클릭 시 실행될 이벤트 리스너를 추가합니다. button.addEventListener('click', function (e) { // 버튼 클릭 시의 기본 동작을 방지합니다. e.preventDefault(); // 사용자의 입력값을 가져옵니다. const name = document.getElementById('input-name').value; const email = document.getElementById('input-email').value; const message = document.getElementById('input-message').value; // 이메일의 제목과 본문을 구성합니다. const subject = 'Contact Information'; const body = `Name: ${name}\nEmail: ${email}\nMessage: ${message}`; // 메일 클라이언트를 통해 이메일을 작성하는 창을 엽니다. window.location.href = `mailto:recipient@example.com?subject=${subject}&body=${body}`; }); }
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help