📌Today I Learned

JavaScript

ex64

// 객체
const o1 = new Object();
const o2 = {}; // 리터럴 표기. 간편하다

o1.name = "홍길동";
o1.hello = () => {
  console.log("hello");
};

o2.name = "아무개";
o2.hello = () => {
  // 오타나 실수가 있다면 어떻게 파악하지?
  console.log("안녕");
};

위의 방식을 사용하면 프로퍼티에 오타나 실수가 있을 때 확인할 수 없다.
-> 생성자 함수를 사용한다.

생성자 함수

• 자바의 생성자와 유사
• 함수명을 파스칼 표기법으로 작성한다.

// 예시
function User(name, age) {
  // 해당 객체의 프로퍼티 지정
  this.name = name; // 여기의 this는 window다.
  this.age = age;
}

var로 선언한 전역 변수 > window의 프로퍼티

생성자 함수는 절대로 일반 함수처럼 그냥 호출하면 안된다.
생성자 함수는 반드시 new 연산자와 같이 사용해야 한다.

const o3 = new User("홍길동", 20);
console.log(o3);

순서

new -> 빈 객체 생성
User 함수 실행
매개변수를 new가 만든 객체에 넣는다.(초기화)

각 객체의 생성자를 구체적으로 확인하려면 생성자 함수명을 사용한다.

console.log(typeof desk); // object
console.log(typeof today); // object
console.log(typeof list2); // object

// object > 구체적으로 확인하려면 > 생성자 함수명 사용
console.log(today.constructor.name); // Date
console.log(list2.constructor.name); // Array

// 익명 함수 사용
const o5 = {
  name: "홍길동",
  age: 20,
  info: function () {
    // info: () => { // -> 이거는 this가 안된다. function을 써야 한다.
    console.log(this.name, this.age);
  },
};

o5.info();

// 실명 함수 사용
const o6 = {
  name: "호호호",
  age: 27,
  info: m1,
};

function m1() {
  console.log(this.name, this.age);
}

o6.info(); //o6.name, o6.age

m1(); // 함수의 원형: window.m1(); > window.name, window.age

실명 함수를 사용하면 사용하는 환경에 따라 결과가 달라진다.

ex65

화살표 함수

• 자바의 람다 > 익명 객체의 추상 메소드를 표현하는 기술
• 자바스크립트 > 익명 함수를 표현하는 기술
  
  

1. 함수 선언문

function f1() {
  console.log("f1");
}
f1();

2. 함수 표현식(리터럴) == 익명 함수

const f2 = function () {
  console.log("f2");
};
f2();

(function () {
  console.log("f2_1");
})(); // 즉시 호출. 위에가 더 일반적이다.

3. 화살표 함수 == 익명 함수

const f3 = () => {
  // 자바는 ->
  console.log("f3");
};
f3();

이벤트 발생 객체의 정보

상대 표현

alert(event.target.value);
alert(event.srcElement.value);
alert(event.currentTarget.value);
alert(this.value);

절대 표현 > 비추천

alert(document.getElementById("btn1").value);

*** 화살표 함수는 어떤 식으로 사용(호출)되든 그 안에서의 this는 항상 window 객체를 가리킨다.

alert(this.value); // undefined  this > window 객체

반복문

for (let i = 0; i < list.length; i++) {
  console.log(list[i]);
}

프로퍼티 탐색

for (let p in list) {
  console.log(p); // 인덱스 출력
}

forEach() - 향상된 for문

list.forEach(function (num) {
  console.log(num);
});

flist.forEach((f, index, list) => console.log(f, index, list));

map()

• 요소를 다른 값으로 변환 > 새로운 배열 반환
• 가공 + 변환

console.log(list.map((n) => (n % 2 == 0 ? "짝수" : "홀수")));
console.log(flist.map((item) => item.length));

flist.map((item) => item.length).forEach((length) => console.log(length));

const olist2 = names.map((name) => {
  return {
    name: name,
    age: 20,
    address: "서울시",
  };
});
console.log(olist2);

filter() > 다중값 반환

• 내가 제시한 조건을 만족하는 애들만 걸러서 넘기기

console.log(list.filter((num) => num % 2 == 0));

find()

• 요소 검색 > 단일값 반환
• 첫번째 만나는 값만 리턴한다.

console.log(flist.find((item) => item.length >= 3));

---

jQuery

ex01

jQuery

• 2006년
• jQuery is a fast, small, and feature-rich JavaScript library.

jQuery 설치

1. 로컬 설치 > 파일 다운로드 + 참조
   <script src="../asset/js/jquery-1.12.4.js"></script>

2. CDN 설치 > 원격 파일 참조

<script
	src="https://code.jquery.com/jquery-1.12.4.js"
	integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
	crossorigin="anonymous"
></script>

요소에 접근하기

1. BOM > BOM 트리

document.all.txt1.value = "BOM";

2. DOM > getXXX 메소드 or DOM 트리(Axis) or querySelectorXXX

document.getElementById("txt1").value = "DOM";

3. jQuery > jQuery()

• document.querySelectorAll()

jQuery("#txt1").val("jQuery");

ex02

jQuery() 함수

• CSS 선택자 or 다른 표현을 사용해서 태그를 검색한다.

1. jQuery()로 찾은 결과는 항상 배열이다.
2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다.
3. 자바스크립트 객체 > (변환) > jQuery 객체

=> BOM, DOM <-> jQuery 호환 불가. 각각이 서로 다른 객체이며, 각자의 메소드 사용해야 한다.
메소드 호환이 되지 않아서 형변환을 해야한다.

변환

// BOM or DOM 객체 > (형변환) > jQuery 기능 사용
jQuery(a).val("ok"); // 종종 쓴다

//jQuery 객체 > (형변환) > BOM or DOM 객체
// - jQuery 객체로부터 [index]를 사용해서 꺼내는 순간 순수 자바스크립트 객체가 반환된다.
c[0].value = "ok"; // 잘 안쓴다

ex03

1. BOM

• <input>
• btn.onclick = function(){}

2. DOM

• btn.addEventListener('click',function(){});

3. jQuery

• 이벤트 함수
  
  

아래 두 개가 같다.

jQuery("#btn1").css("color", "blue");
$("#btn2").css("color", "orange");

jQuery 이벤트 함수

1. 전용 이벤트 함수

• 객체.이벤트함수(콜백함수)

$("#btn1").click(function () {
  alert();
});

2. 범용 이벤트 함수

• 객체.on(이벤트명, 콜백함수)

$("#btn2").on("click", function () {
  alert();
});

$("#btn1").off("click"); // 이벤트 제거

// 아래와 같이 사용하면 반복문 없이 해당 클래스가 들어있는 대상에 이벤트를 건다.
$(".btn").click(function () {
  alert(event.target.value);
});

ex04_effect

jQuery Effect Function

1. hide(time), show(time), toggle(time)
2. fadeOut(time), fadeIn(time), fadeToggle(time)
3. slideUp(time), slideDown(time), slideToggle(time)
4. animate() > 사용자 정의

$("#box").hide("fast");
$("#box").fadeOut("fast");
$("#box").slideUp("fast");

animate > 대상 > 숫자형

객체 사용 시 내가 원하는 대로 프로퍼티를 추가할 수 있다.

const obj = {
  width: "400px",
  height: "400px",
};

$("#box").animate(obj);

$("#box").animate(
  {
    // margin-left: '+=50px'
    // marginLeft: '+=50px'
    "margin-left": "+=50px",
  },
  1000,
  function () {
    // alert("애니메이션이 끝날 때 하고 싶은 일");
    $("h1").text("jQuery Effect " + n);
    n++;

    if (n > 5) {
      $("#btn1").off("click");
    }
  }
);

$("#box")
  .slideup()
  .slideDown()
  .fadeOut()
  .fadeIn()
  .animate({ borderWidth: "10px" });