[Repl.it] JavaScript 31~32

DOM

웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델
HTML인 웹페이지와 스크립트언어를 서로 잇는 역할이다.

Document

전역객체. HTML 문서

innerHTML 요소의 content에 접근하고 수정할 수 있다.
createElement 요소를 생성한다.
className 요소에 class 이름을 넣어준다.
appendChild 요소 내부에 추가한다.

function addPTag() {
  const Ptag = document.createElement('p');
  const h1 = document.querySelector('h1');
  Ptag.className = "dom";
  Ptag.innerHTML = "DOM";
  h1.appendChild(Ptag);
}

addPTag();

querySelector id, class, tag와 같은 css selcetor에 접근하고 수정할 수 있다.

JavaScript에서 style을 수정할 때 (-)은 사용할 수 없다.
가장 첫번 째 요소에 접근한다.

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

getElementsByClassName('classname') classname이라는 클래스 이름이 있는 요소를 배열로 가져온다.

index를 부여하여 원하는 요소를 pick 한다.
getElementById ID 이름을 가진 요소를 가져온다.

Event

addEventListener 이벤트가 발생하면 함수를 실행한다.

element.addEventListener(click, function({
  //click 발생 시 실행할 내용
})`

이벤트의 종류

Click 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각자 클릭이벤트에 맞는 reaction을 실행한다.
Key keydown 키보드를 눌렀을 때 / keyup 키보드를 누르고 떼는 순간 / keypress 키보드를 눌러 어떤 텍스트가 작성되는 순간 실행한다.
-> keyCode 키보드가 가지고 있는 고유한 code. ex) Enter키의 key code = 13

로그인 화면 구현하기

로그인 버튼을 클릭했을 때

비밀번호와 비밀번호 확인에 입력한 문자열이 동일할 경우 로그인 성공!

비밀번호와 비밀번호 확인에 입력한 문자열이 동일하지 않을 경우 '비밀번호가 일치하지 않습니다'

Input의 value값은 입력받은 값을 의미한다.
-> Input이 일어난 후의 value값을 가져오기 위해 이벤트 발생 후 변수를 지정했다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인" />
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
    
    <script src="index.js"></script>
  </body>

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;

if (!password) {
  alert('비밀번호를 입력해주세요!');
  return;
}

if (!rePassword) {
  alert('비밀번호 확인을 입력해주세요!');
  return;
}

if (password !== rePassword) {
  alert('비밀번호가 일치하지 않습니다');
  return;
}

alert('로그인 성공!');
});

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keyup', function(event) {
thisIsCode.innerHTML = event.keyCode;
});

Reference

MDN: addEventListener

Author And Source

이 문제에 관하여([Repl.it] JavaScript 31~32), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songbetter/Repl.it-JavaScript-3132

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)