HTML과 JS 상호작용 (실습)

<실습 Login 파트>

 

 

JS에서 HTML의 요소를 가져와 변수에 그 요소를 담을 수 있다.

보통은 const(상수와 같은 변수)로 담고, 추후 다른 값을 할당해야할 것 같은 경우에는 let(재할당 가능한 변수)으로 선언하면 되겠다.

 

HTML 요소를 불러올 때는 getElementById, getElementByClassName, getElementByTagName 등 이나

querySelector, querySelectorAll 등으로 불러올 수 있고, getElement로 시작하는 명령어로 불러올 때는 id, class, tag임을 명시하기 때문에 그 이름만 큰 따옴표 " " 안에 작성하면 되지만, 

querySelector 명령어로 요소를 불러올 때는, 그 안의 요소 이름이 id의 이름인지, tag를 지칭하는지, class의 이름인지 모르기 때문에, id 이름으로 요소를 찾아갈 때는 #을, 태그 일때는 그냥 아무 것도 붙이지 않고 그냥 태그 이름을, class 이름으로 요소를 찾아갈 때는 .을 붙여서 작성해주면 된다 !

 

 

 

위에 작성한 요소 선택자를 다음과 같이 작성할 수도 있다.

 

 

#login-form input : id 이름이 login-form인 태그의 하위 태그(space, 빈칸으로 표현)인 input 요소를

                              JS 변수 loginInput에 담았다.

#login-form button : id 이름이 login-form인 태그의 하위 태그(space, 빈칸으로 표현)인 button 요소를

                                JS 변수 loginButton에 담았다.

 

 

 

 

 

 

Log In이라고 내용을 넣어준 버튼에 클릭 이벤트를 걸어주고,

작동할 함수의 내용(작업)에 console.dir(loginInput);과 console.log("Click!")를 넣어

click 이벤트가 잘 작동하는지 확인해보니, 콘솔창에 Click!이 출력되는 것으로 잘 작동됨을 확인할 수 있고,

변수 loginInput에 담은 input 요소(Object)의 속성 list를 나열해 보여준다.

 

 

input 창에 입력되는 내용은 이 객체의 value 속성에 값으로 저장되는 것을 확인해볼 수 있다 !

다시 말해 JS에서 input 창의 값을 다룰 때는 input.value로 접근하여 다룰 수 있다는 이야기이다.