.fadeIn() & .fadeOut() & .slideDown() & .slideUp() & .slideToggle() & .fadeToggle() & .toggle()

.fadeIn()

$(".black-background").fadeIn();

• 숨겨놨던 것을 스무스하게 나타나게 한다.

.fadeOut()

$(".black-background").fadeOut();

• 스무스하게 사라진다.

.slideDown()

$(".black-background").slideDown();

• 스무스하게 아래로 나타난다.

.slideUp()

$(".black-background").slideUp();

• 스무스하게 위로 사라진다.

.slideToggle()

$(".list").slideToggle();

• .slideDown() 과 .slideUp()을 합쳤다.

.fadeToggle()

$(".list").fadeToggle();

• .fadeIn() 과 .fadeOut()을 합쳤다.

.toggle()

$(".list").toggle();

• .hide() 과 .show()을 합쳤다.

---

링크 이벤트만들 때, 주의할 점

<a href="" class="nav-sub-btn">products</a>

• href="" 속성있으면, 클릭 이벤트 만들어도 실행이 안된다.

---

jQuery .val() input에 입력된 값 가져오기

$("#input").val()

---

조건문 & 클릭이벤트 코드작성시 잘못한 점

• 클릭이벤트에 조건문을 사용하여, 특정한 조건에만 이벤트가 발생하도록 코드를 짜려고 하였음
• 정답 : 클릭이벤트안에 조건문을 넣었어야 했음
  • 조건 만족하면, 모달창이 뜨도록 만들어야 함

$(".login-btn").on("click", function () {
  if ($("#input").val() === "안녕") {
    $(".black-background").fadeIn();
  }
});

$("#close-login").on("click", function () {
  if ($("#input").val() === "안녕") {
    $(".black-background").fadeOut();
  }
});

• 실수 : 조건문안에 클릭이벤트를 넣어서 이벤트가 계속 실행이 안됬음

if ($("#input").val() === "안녕") {
  $(".login-btn").on("click", function () {  
    $(".black-background").fadeIn();
  });

  $("#close-login").on("click", function () {  
    $(".black-background").fadeOut();
  });
}

• 피드백 : 무엇이 본체이고, 무엇이 도구인지 생각해서 코드를 짜자

---

단축키 원하는 코드를 주석처리 하는 방법

• 드래그후에 command+?

---

form tag에서 제출할 때, 이벤트 만들기

//jQuery
$(".form").on("submit", function () {});

//자바스크립트
document.querySelector(".form").addEventListener("submit", function () {})

---

form tag에서 제출 이벤트에서 특정 조건에서, 제출 막기

$(".form").on("submit", function (e) { 
  if(){
    e.preventDefault();
  }  
});

• 특정 조건에서 제출을 막도록 코드를 작성하였음

  핵심 : 이벤트 익명함수에 매개변수 e넣기
  e.preventDefault();

---

코드리뷰 간단한 게임을 만들 때, 일단 함수를 이용해서 짜자

• 나는 값을 입력받는 input tag, 버튼에다가 클릭 이벤트 가져오고, input tag 값 가져오고, 게임을 만들었다.
• 처음에는 함수를 이용해서 간단하게 코드를 짜라

---

코드리뷰 숫자 쪼개기

• 예시 : 123 -> 1,2,3
• 방법
  1. 숫자를 문자열로 변환 String(123)
  2. 배열처럼 찾아서 사용 String(123)[0] === "1"

---

if if(if를 2개 쓰기)

if ($("#email").val() === "") {
  $("#email-alert").show();
  e.preventDefault();
}
if ($("#password").val() === "") {
  $("#password-alert").show();
  e.preventDefault();
}

• if if 2개 쓸 수 있음
  • 2개 모두 실행된다.
• if else if와 차이
  • 둘 중에서 하나만 실행시킨다.

---

input tag와 관련된 이벤트

• input
  • 입력하면, 바로 이벤트 실행

document.querySelector(".login-btn").addEventListener("input", function () {})

• change
  • 입력하고, input tag가 아닌 다른 곳 클릭하면, 이벤트 실행

document.querySelector(".login-btn").addEventListener("change", function () {})

---

빈 값 체크하는 방법

//jQuery
$("#email").val() === ""

---

html 가져오는 것($() , querySelector())이 반복될 때, 변수에 넣어서 써라

• 코드가 실행될 때, 시간이 절약된다.

---

변수의 3가지 개념

• 선언
  • 변수를 만든다.

let a;

• 할당
  • 변수에 값을 넣는다.

a = 3;

• 범위
  • 변수를 사용할 수 있는 범위
  • 함수안에서 변수를 선언했다면, 함수 밖에서는 사용이 불가능하다.

function(){
  let a = 3;
  return
}

console.log(a); //함수 밖에서 사용해서 오류가 뜬다.

---

변수 var, let, const차이

• var
  • 재선언이 가능하다.
  • 범위 : 함수안에 만든 변수는 밖에서 쓸 수 없음
    • let, const와 달리 {}안에 만든 변수를 밖에서도 사용가능하다.

var a;
var a;

• let
  • 재선언 불가
  • 범위 : {}안에 만든 변수는 밖에서 쓸 수 없음

let a = 3;
a = 4;

• const
  • 재선언 불가
  • 재할당 불가
  • 범위 : {}안에 만든 변수는 밖에서 쓸 수 없음

const a; //오류뜬다

const b = 3;
b = 4;

---

변수 재활용

• 나의 코드
  • 리필마다 새로운 변수를 만들었음
  • 변수 3개

function cof(커피) {
  let 리필1 = (커피 * 2) / 3;
  let 리필2 = (리필1 * 2) / 3;
  return 커피 + 리필1 + 리필2;
}

• 정답 코드
  • 리필을 구한 후에 커피와 값을 합쳐서, 리필 변수를 다시 재활용하였음
  • 변수 2개
  • 리필 가능 횟수가 많아지면 많아질수록 나와 정답의 코드의 길이차가 많이날 것 같음

function cof(커피) {
  let 리필;

  리필 = (커피 * 2) / 3;
  커피 = 커피 + 리필;

  리필 = (리필 * 2) / 3;
  커피 = 커피 + 리필;

  return 커피;
}