[JS] 실습예제

 

이 문서는 Nomad Coders의 강의를 듣고 작성한 문서입니다.

 

---

상황 별 Event 실행하기

1. 모든 기능은 superEventHandler={} 안에 작성하기

2. 구현해야 할 기능: 마우스 우 클릭/ 마우스 떠날 때/ 마우스가 있을 때/ 창 크기 변경할 때

 

실행결과 미리보기

 

객체 안에 함수 넣기

// 1. 이름이 지정된 function 함수
const myObj = {
  myMethod(params) {
    // ...do something here
  },
}

// 2. 익명 함수를 사용함
const myObj = {
  myMethod: (params) => {
    // ...do something here
  },
}

// 3. ES6 이전 스타일
const myObj = {
  myMethod: function myMethod(params) {
    // ...do something here
  },
}
// 3-1.
const myObj = {
  myMethod: function (params) {
    // ...do something here
  },
}

//호출할때
myObj.myMethod();

• function객체 내부에 함수를 정의할 때 더 이상 키워드를 지정할 필요가 없습니다.
• 객체 내부의 함수는 js에서 종종 “메서드”로 참조됩니다.
• 화살표 함수 표현식은 메서드가 아닌 함수에 가장 적합합니다. (mozilla문서)

참고할 마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

---

if / if else 문 사용하기

1. if / if else 문 사용하기

2. 생성된 h1 문서에 class 이름 추가해서 CSS 작성하기

 

실행결과 미리보기

 

className  vs  classList

<div class='이름A'></div>

 

className

• 기존에 있던 class를 모두 없애고 새로운 class 추가

• className은 추가하려는 클래스가 이미 있어도 중복하여 추가합니다.

// class 이름 읽기
element.className;

// class 이름 추가
element.className = '이름B';

• element에 class가 '이름A' 로 지정되어 있지만 className으로 '이름A' 가 '이름B' 로 바뀝니다. 

 

classList

• .add(): 기존에 있던 class 를 유지하고 새로운 class 추가

• 추가하려는 클래스가 이미 class 속성에 포함되어 있다면 해당 클래스를 중복하여 추가하지 않습니다.

// class 이름 읽기
element.classList;

// class item 하니씩 읽기
element.classList.item(index);

// class 추가
element.classList.add('이름B');

• element에 class가 '이름 A' 에서 class '이름 B' 가 추가 된다 
  = element의 class를 읽으면 '이름A' , '이름B' 두 가지가 적용되어 있다.

// class 제거
element.classList.remove('이름');

// class 존재 확인
// 존재하면 true, 존재하지 않으면 false 반환
element.classList.contains('이름');

// 존재하면 class 제거, 존재하지 않으면 class 추가
element.classList.toggle('이름');

// class 교체
element.classList.replace('이름');

---

Background Random Color

1. color는 배열의 색을 사용하기

2. linear-gradient 을 사용해 배경에 그라데이션 넣기

 

 

Random color

function getRandomColor() {
  return colors[Math.floor(Math.random() * 17)];
}

linear-gradient

button.addEventListener("click", function () {
  const color01 = getRandomColor();
  const color02 = getRandomColor();
  const backgroundColor = `linear-gradient(to right, ${color01}, ${color02})`;

  document.body.style.background = backgroundColor;
});

• 기존에 있던 class를 모두 없애고 새로운 class 추가

linear-gradient( direction, color1, color2, …, color3 )

•  direction에는 그라데이션 방향을 입력합니다.
  1. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
  2. to top : 아래에서 위로 그라데이션을 만듭니다.
  3. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
  4. to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
  5. ndeg : n도의 방향으로 그라데이션을 만듭니다.