HTML객체에서 값 가져오기

이번시간에는  HTML객체 제어에 관해서 쓰도록 하겠습니다. 이번에도 역시 회원가입 페이지를 예를 들도록 하겠습니다.

이전 게시물과 마찬가지로 계정중복검사를 예로 들겠습니다. 우리가 <input>테그(텍스트 상자) 안에 사용할 계정을 입력한 후에 중복검사 버튼을 클릭하면 우리는 그 계정의 사용가능여부를 알 수 있습니다. 이미 있는 계정을 찾거나 하는 방법은 일단 신경쓰지 않으셔도 됩니다. ㅋㅋ 지금 상황에서 우리가 중점을 두고 볼것은 우리가 입력한 계정입니다. 우리가 입력한 계정이 클릭이라는 이벤트를 통해서 자바스크립트로 만들어놓은 중복검사 함수로 옮겨진 후에, 이미 있는 계정 리스트와 우리가 입력한 계정을 비교하는 방법으로 계정중복검사를 시행할것입니다. 그럼 우리가 입력한 계정은 어떠한 방식으로 옮겨지는 것인지 알아보도록 하겠습니다.

이제 코드를 보겠습니다. 이전시간부터 봐온 익숙한것들이 많이 보입니다. 그런데 눈에띄는것이 보이는군요.

우리는 document까지는 알겠는데 . 뒤에 getElementById()는 처음보는것입니다. 처음보는 이놈(?)에 대해서 설명하겠습니다. 설명이라기보다 해석해볼께요 ㅋㅋ 

getElementById() : Id가 ()안의 내용과 일치하는 객체를 가져온다.

위의 문장만으로 이해하시는 분도 있을꺼라 생각하지만, 그렇지 않은 분들도 생각해서 설명하겠습니다. 코드를 보시면 <input> 안에 속성중에 id가 보시실겁니다. id="test"로 되어있네요. 그럼 위에 자바스크립트 코드를 보겠습니다. 변수는 이미 배웠기 때문에 생략하고 getElementById("test")라고 코딩이 되어 있습니다. 이것을 위의 문장과 같이 해석하면 

getElementById("test") : Id가 "test"와 일치하는 객체를 가져온다. 입니다. 한줄 전체를 설명하면

변수명이 msg인 변수에 document(웹문서) 안에서 Id가 "test"와 일치하는 객체를 가져와서 변수에 넣어줘라. 가 되겠습니다. 그럼 이제 변수  msg 는 id가  test 인 객체가 되는것과 같습니다. 이제 다음줄을 보겠습니다. 다음줄에는 경고창을 띄우는데 내용이  msg .value 입니다. 이게 무슷뜻인가 하면, 아래 <input>태그를 보시면 value가 보이실겁니다.  msg 변수에  Id 가  test 인 <input>박스가 들어있는데, 그 속성중에  value  속성의 내용을 출력하겠단 뜻입니다.

이제 결과화면을 보겠습니다.