제목에서 " Q "가 있는 경우는 해결하지 못한 궁금증이 있는 글들입니다.
JavaScript 에서 Events 기능 정리
Coursera X K-mooc에서 Javascript basic 수강 중 따로 정리해두면 좋을 JS 기초들에 대해서 정리해보았습니다.
<form> 태그에서 data를 보내는 방식을 "GET" 방식으로 보내고 이때 보내지는 data들이 도착할 URL을 action을 이용해서 지정할 수가 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 (DOM) </title>
</head>
<body>
<h1>JavaScript Events</h1>
<form method= "get" action="processor.php"> //action ="url" - name을 보내고 그 data가 도착할 URL
<label>Your name : <input type="text" name = "name"></label>
<input type="submit">
</form>
<script>
var myForm = document.querySelector('form');
myForm.addEventListener('submit', function(event){
// event.preventDefault(); 이게 없으면 주소 창 ?name=emma get방식 입력 받
var formData = document.querySelector('input').value;
alert(formData);
});
</script>
</body>
</html>그렇다면 데이터를 Get 방식으로 보낸다는 것이 무슨 의미 일까요? 이에 대해서 다음 링크 : CS 기초 에서 정리해두겠습니다.
Q1.
신기한 점은 <script> 태그에서 주석 처리한 // event.preventDefault(); 부분을 주석 처리 해제를 하면 주소창에 get 방식으로 data가 전달 되지 않았습니다. 왜일까요???
Q2.
그리고 var formData = document.querySelector('input').value; 부분에서 .value를 지우면 data 입력 시 뜨는 alert 창에서 입력한 값이 뜨지 않고 HTMLInputElement 라는 글자가 뜹니다. 왜 일까요??
#.value가 있는 경우
#.value가 없는 경우
참고 : TCP School - form 태그의 action 속성
참고 : Coursera x K-Mooc -JavaScript Basic Module3
'Programming > Java Script' 카테고리의 다른 글
| coursera week 4 (0) | 2022.11.24 |
|---|---|
| [틈새 JS 기초] Mouseover - out Events (0) | 2022.11.18 |
| [🍭JS 기초] Property 란 ?? (프로퍼티) (0) | 2022.11.18 |
| [K-MOOC x Coursera ] JavaScript Basic - Module 3 : Events (0) | 2022.11.16 |
| [🍭JS 기초] 자바스크립트에서 Private 속성 + a (0) | 2022.11.14 |