[코딩챌린지] 사용자로부터 input 값 받기
<HTML 코드>
1. HTML 구조
<!DOCTYPE html> : HTML 문서라고 선언하는 코드
<html lang = "en"> : 쓰는 코드의 기본 언어는 영어(english)
2. 헤드 영역
<meta charset = "UTF-8"> : 대부분의 언어 문자를 지원하도록 하는 설정
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0"> : 모바일 장치에서도 페이지를 잘 볼 수 있도록 설정
<title> 쓸 말 </title> : 쓸 말 = 웹 페이지 제목
3. 바디 영역(웹 페이지의 본문 영역, 사용자에게 실제로 보여지는 콘텐츠가 들어가는 부분)
<div id = "login-form"> : id는 login-form인 컨테이너로, 로그인 폼의 구조 형성
<input type = "text" placeholder = "What is your name?" /> : 사용자가 텍스트를 입력할 수 있게
// type = "text" : 텍스트를 입력할 수 있는 필드
// placeholder = "What is your name?" : 필드에 표시되는 텍스트(사용자가 입력하면 사라짐)
<button> Log In </button> : 클릭 가능한 버튼
<script src = "script.js"> </script> : script라는 java script 파일과 연결 (이제 이 파일을 통해 동적 기능 처리)
<자바 스크립트>
document.querySelector: HTML 문서에서 특정 요소를 선택
#login-form input : id = "login-form 을 가진 <div> 내부의 <input> 요소 선택
loginInput 변수는 사용자가 입력한 값을 가져올 수 있는 텍스트 필드에 접근
#login-form button: id = "login-form" 내부의 <button> 요소 선택
loginButton 변수는 버튼 클릭 이벤트 처리
onLoginBtnClick: 사용자가 버튼을 클릭했을 때 실행될 함수.
loginInput.value: 사용자가 입력한 값
console.log(loginInput.value): 사용자의 인풋값 콘솔에 출력
loginButton.addEventListner("click", onLoginBtnClick) : #login-form 내부의 <button> 태그 지칭
.addEventListner(eventType, calbackFunction)은 자바스크립트의 특정 요소에 이벤트 리스너를 추가하는 메서드
<출력 결과>
// html을 통해서 CSS와 자바 스크립트가 모두 열림
//html 브라우저로 여는 법: 1) html 파일 오른쪽 클릭 후 'Open with Live Server' 클릭
2) 맥북이라면 command + L + O
<이름 입력 후 Log In 버튼 클릭>
입력이 됐는지 확인하는 법(브라우저 콘솔 여는 법): 맥북이라면 command + option + j
