9일차

JS 선행 이어서

---

JS 선행

2. 변수, 예약어

변수

변수 : 데이터를 저장하고 참조(사용)하는 데이터의 이름 var, let , const

// 재사용이 가능!
// 변수 선언!
let a = 2;
let b = 5;

console.log(a + b); // 7
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4

//값(데이터)의 재할당 가능!
let a = 12;
console.log(a); // 12

a = 999;
console.log(a); /// 999

// 값(데이터)의 재할당 불가!
const a = 12;
console.log(a); // 12

a = 999;
console.log(a); // TypeError: Assignment to constant variable

let은 재할당 가능
const는 재할당 불가

예약어

예약어 : 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어. Reserved word

let this = 'Hello!'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError

에디터에서 알려줌 에디터의 도움받자

3.함수

함수

함수 : 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) function

// 함수 선언
function helloFunc() {
  // 실행 코드
  console.log(1234);
}

// 함수 호출
helloFunc(); // 1234

function returnFunc() {
  return 123;
}

let a = returnFunc();

console.log(a); // 123

// 함수 선언!
function sum(a, b) { // a와 b는 **매개변수**(Parameters)
  return a + b;
}

// 재사용!
let a = sum(1, 2); // 1과 2는 **인수**(Arguments)
let b = sum(7, 12); 
let c = sum(2, 4);

console.log(a, b, c); // 3, 19, 6

매개변수와 인수 차이 확실히!

// 기명(이름이 있는) 함수
// **함수 선언**
function hello() {
  console.log('Hello~');
}

// 익명(이름이 없는) 함수
// **함수 표현**
let world = function () {
  console.log('World~');
}

// 함수 호출!
hello(); // Hello~
world(); // World~

함수 선언
함수 표현

// 객체 데이터
const taewook = {
  name: 'TAEWOOK',
  age: 100,
  // 메소드(Method)
  getName: function () {
    return this.name;
  }
};

const hisName = taewook.getName();
console.log(hisname); // TAEWOOK
// 혹은
console.log(taewook.getName()); // TAEWOOK

객체데이터 내부에 하나의 속성부분에 일반적인 데이터가 아닌 함수데이터가 있을경우 메소드라고 부름

this 객체데이터 안

4. 조건문

조건문 : 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문. if, else

let isShow = true;
let checked = false;

if (isShow) {
  console.log('Show!'); // Show!
}

if (checked) {
  console.log('Checked!');
}

false 라서 checked는 출력되지 않음

let isShow = true;

if (isShow) {
  console.log('Show!');
} else {
  console.log('Hide?');
}

//Show

isShow가 false일경우 hide출력

5. DOM API

DOM API : Document Object Model, Application Programming Interface

<script src="./main.js"></script>

<script defer src="./main.js"></script>
html코드를 다 읽고나서 main.js 실행

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();

// 인수(Arguments)를 추가 가능!
boxEl.addEventListener(1, 2);

// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);

// 2 - 이벤트(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
  console.log('Click~!');
});

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {});

// 첫 번째 매개변수(boxEl): 반복 중인 요소.
// 두 번째 매개변수(index): 반복 중인 번호.
boxEls.forEach(function (boxEl, index) {});

// 출력!
boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index +  1}`);
  console.log(index, boxEl);
});

boxEls 배열데이터로 출력 [ ] 하지만 유사 배열(Array-like)
forEach 메소드 여러개 요소를 찾았을때 사용
보간 사용할때는 백틱사용

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!   text 내용이 반환

// Setter, 값을 지정하는 용도
boxEl.textContent = 'TAEWOOK?!';
console.log(boxEl.textContent); // TAEWOOK?!

메소드 체이닝

Method Chaining

const a = 'Hello~';
// split : 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse: 배열을 뒤집기.
// join : 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝...

console.log(a); // Hello~
console.log(b); // ~olleH

메소드 체이닝
여러개의 메소드를 이어서 작성