자바스크립트를 이용해 텍스트박스안의 사용자 개인정보 얻기

 

앞의 글에서  클릭을 통해서 팝업창을 띄우고 스타일을 바꾸는 법에 대해 알아 보았습니다. 이제 텍스트박스안에 입력되어진 사용자의 정보를 가져오는 법에 대해 알아보겠습니다. 

 

 

 

 

 

 

홈페이지를 검색하다보면 텍스트를 입력한 다음 그안의 내용을 서버에 제출하는 홈페이지 구성을 자주 보셨을겁니다  아래와 같은 모습입니다. 

 

 

위의 박스안에 글을 입력하고 submit을 누르면 박스안에 입력된 자료가 지정한 서버로 송출이 되어집니다.  그럼 예제를 통해 연습해 봅시다

 

문제) 페이지에서 링크와 자바스크립트를 삭제하고 텍스트영역을 만들어라. 그리고 'submit'라는 이름의 버튼을 추가한다. 버튼을 클릭하면 "click!"라는 팝업창이 뜨도록 설정한다. 먼저 충분히 생각해 보시고 아래의 정답을 보시기를 권장합니다

 

 

 

 

위의 파일을 실행하면 아래의 결과가 나타납니다 

 

 

 

 

또 위의 'submit' 버튼을 클릭하면  아래와 같은 팝업창이 뜹니다 

 

 

 

 

 

자 그렇다면 이제는 이 기능을 조금 업그레이드해서 텍스트창에 입력된 값이 팝업창으로 뜨도록 코드를 작성해 보겠습니다 (이해가 안되시면 여러번 반복해서 읽어보시기 바랍니다)