22-04-25

JS 선행
01. 개요

<표기법>

• dash-case(kebab-case)
• snake_case
• camelCase : js주로 사용
• ParcelCase : js에서 new를 이용한 생성자함수의 경우 쓰임

Zero-based Numbering: 특수한 경우를 제외하고 0부터 숫자를 시작

<주석>

// 한 줄 메모
/* 한 줄 메모 */

/**
 * 여러 줄
 * 메모1
 * 메모2
 */

2. 데이터 종류(자료형)

• String

let myName = "HEROPY"
let email = 'thesecon@gmail.com';
let hello = `Hello ${myName}?!`  백틱기호는 보간법을 제공.

let hello = `Hello ${123}?!`;

• Number
• Boolean(불린)
• Undefined

값이 할당되지 않은 상태.
let undef;
let obj = { abc: 123 };

console.log(undef); //undefined
console.log(obj.xyz); //undefined

• Null

어떤 값이 의도적으로 비어있음을 의미
let empty = null;

console.log(empty); //null

• Object(객체)

여러 데이터를 Key:Value 형태로 저장. { }
let user = {
  // Key: Value,
  name: 'HEROPY',
  age: 85,
  isValid: true
};

console.log(user.name); // HEROPY
console.log(user.age); //85
console.log(user.isValid); // true

• Array(배열)

여러 데이터를 순차적으로 저장. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

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

값(데이터)의 재할당 불가
const a = 12;

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

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

4. 함수 function

//함수 선언
function helloFunc() {
  console.log91234);
}

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

return

function returnFunc() {
  turn 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)

기명 함수, 익명 함수

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

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

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

메소드

const heropy = {
  name: 'HEROPY',
  age: 85,
  // 메소드(Method)
  getName: function () {
    return this.name;
  }
];

const hisName = heropy.getName();
console.log(hisName); //HEROPY
// 혹은
console.log(heropy.getName()); // HEROPY

조건문 if, else

---

6. DOM API (1)
   Document Object Model, Application Programming Interface(html를 제어하는 명령들)

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

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

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

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

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

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

---

// 요소의 클래스 정보 객체 활용!
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): 반복 중인 요소.
// 두 번째 매개변수9index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

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

---

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

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!

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

8. 메소드 체이닝 Method Chaining

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

console.log(b0; // ~olleH