JAVASCRIPT - 초급 3편

* JQuery : javascript 라이브러리

$() = 선택자 ( css선택자를 사용한다 )

$("#id명") = /* => document.getElementById("id명") */
$(".class명") /* => document.getElementByClassName("class명") */

on() = 이벤트 리스너

$("#id명").on("메소드", function () {
}

.css() = style 변경

$('.class명').css('속성명', '속성값');

.addClass(), removeClass(), toggleCalss() = 클래스 추가, 삭제, 토글

$("$id명").addClass("추가할 클래스명");
$("$id명").removeClass("삭제할 클래스명");
$("$id명").toggleClass("토글할 클래스명");

.hide(), .show(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown() ... = 간단한 애니메이션

$("$id명").hide();
$("$id명").show();
$("$id명").fadeIn();
$("$id명").fadeOut();
$("$id명").slideUp();
$("$id명").slideDown();

주의점

javscript를 사용하여 애니메이션을 구현하게 되면
성능적으로 느려질 수 있기 때문에
css를 사용하는 것을 권장

* input 이벤트와 change 이벤트

input 이벤트 : input에 입력된 값이 변경될때 마다 이벤트 발생 (실시간)

document.getElementById('email').addEventListener('input', function(){
  console.log('email 변경중')
}); /* id 값이 email인 값이 변경될때 마다 이벤트가 발생하여 email 변경중을 console창에 log를 출력 */

change 이벤트 : input에 입력된 값이 변경될때 마다 이벤트 발생 (포커스 해제시)

document.getElementById('email').addEventListener('change', function(){
  console.log('email 변경중')
}); /* id 값이 email인 값이 변경되고 포커스가 해제될때 이벤트가 발생하여 email 변경중을 console창에 log를 출력 */

* 간단한 공백검사

html

<form action="success.html">
  <div class="my-3">
    <input type="text" class="form-control-id">
  </div>
  <div class="my-3">
    <input type="password" class="form-control-pwd">
  </div>
  <button type="submit" class="btn btn-primary">전송</button>
  <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

javascript

//전송버튼 눌렀을때
// input값이 공백이면
// alert창 띄우기
document.querySelector("form").addEventListener("submit", function (event) {
  if((document.querySelector(".form-control-id").value &&
      document.querySelector(".form-control-pwd")) == "") {
    event.preventDefault();
    alert("아이디와 비밀번호를 입력해주세요");
  } else if (document.querySelector(".form-control-id").value == "") {
    event.preventDefault();
    alert("아이디를 입력해주세요");
  } else if (document.querySelector(".form-control-pwd").value == "") {
    event.preventDefault();
    alert("비밀번호를 입력해주세요");
  } else {
    alert("아이디는" + document.querySelector(".form-control-id").value + "입니다");
    alert("비밀번호는" + document.querySelector(".form-control-pwd").value + "입니다");
  }
});

* 글자수 세기

.length를 사용하면 글자의 길이을 알 수 있다.

html

<form action="success.html">
  <div class="my-3">
    <input type="text" class="form-control-id">
  </div>
  <div class="my-3">
    <input type="password" class="form-control-pwd">
  </div>
  <button type="submit" class="btn btn-primary">전송</button>
  <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

javascript

//전송버튼을 눌렀을때
//input-pwd값이 6자 미만이면
// alert창 띄우기
document.querySelector("form").addEventListener("submit", function (event) {
  if ( document.querySelector(".form-control-pwd").value.length < 6 ) {
    event.preventDefault();
    alert("비밀번호는 6자리 이상 입력해주세요");
  }
});

* preventDefault : 창 이동, 새로고침 동작 막는 메소드

주로 input에 정보 입력후 창 이동, 새로고침 되는 동작시 조건에 맞지 않는 값을 입력될때 사용한다.

html

<form action="submit.html">
  <button type="submit"></button>
</form>

javascript

document.querySelector("button").addEventListner("submit", function (event) {
  event.preventDefault();
}