1. JavaScript 개요

1-1. 표기법

표기법은 크게 4가지로 되어있다.

1. dash-case(kebab-case)
2. snake_case
3. camelCase
4. ParcelCase

1. dash-case(kebab-case)

dash를 사용한 표기법
ex) the-blue-fish-looks-like-marlin

2. snake_case

_(under score, under bar)를 사용한 표기법
ex) the_blue_fish_looks_like_marlin

3. camelCase

낙타 표기법이라고도 하며 단어 시작은 소문자, 그 다음으로 오는 단어는 첫 글자를 대문자로 작성하여 사용한다.
주로 JavaScript에서 사용하는 표기법
ex) theBlueFishLooksLikeMarlin

4. ParcelCase

camelCase와 유사하며 단어 시작부터 대문자로 작성하여 사용하는 표기법
ex) TheBlueFishLooksLikeMarlin

1-2. Zero-based Numbering

0 기반 번호 매기기, 특수한 경우를 제외하고 숫자를 셀 때 "0"부터 시작한다.

  let fruits - ['Apple', 'Banana','Cherry'];

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

  console.log(new Date('2022-04-09').getDay()); // 6, 토요일
  console.log(new Date('2022-04-10').getDay()); // 0, 일요일
  console.log(new Date('2022-04-11').getDay()); // 1, 월요일

1-3. 주석

  1. // 한 줄 메모
  2. /* 한 줄 메모 */
  3. 
    /**
     *	여러줄
     *	메모1
     *	메모2
    */

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

데이터의 종류에는 String, Number, Boolean, Undefined, Null, Object, Array가 있다.

2-1. String(문자 데이터)

따옴표(큰, 작은, 백틱)를 사용해서 묶어낼 수 있다.

  let myName = "HUN";
  let email = 'toffg6450@naver.com';
  let hello = `Hello ${myName}?!`

  console.log('myName : ', myName);  // HUN
  console.log('email : ', email);   // toffg6450@naver.com
  console.log('hello : ', hello);   // Hello HUN?!

2-2. Number(숫자 데이터)

정수 및 부동소수점 숫자를 나타낸다.

  let number = 123;
  let opacity = 1.57;

  console.log('number : ', number);  // 123
  console.log('opacity : ', opacity); // 1.57

2-3. Boolean(불린 데이터)

true, false 두 가지 값밖에 없는 논리 데이터이다.

  let checked = true;
  let isShow = false;

  console.log('checked : ', checked);  // true
  console.log('isShow : ', isShow);  // false

2-4. Undefined

값이 할당되지 않은 상태를 나타낸다.

  let undef;
  let obj = { abc:123 };


  console.log('undef : ', undef)  // undefined
  console.log('obj.abc : ', obj.abc)  // 123
  console.log('obj.xyz : ', obj.xyz) /// undefined

2-5. Null

어떤 값이 의도적으로 비어있음을 의미한다.

  let empty = null;

  console.log('empty : ',empty);  // null

2-6. Object(객체 데이터)

여러 데이터를 Key:value 형태로 저장한다. { Key:value }

  let user = {
      // Key: value,
      name: 'Hun',
      age: 27,
      isValid: true
  };


  console.log('user.name : ', user.name);			// Hun
  console.log('user.age : ', user.age);			// 27
  console.log('user.isValid : ', user.isValid);	// true

2-7. Array(배열 데이터)

여러 데이터를 순차적으로 저장한다. ['data1', 'data2', 'data3']

  let fruits = ['Apple', 'Banana','Cherry'];

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

3. 변수, 예약어

3-1. 변수

변수란 데이터를 저장하고 참조(사용)하는 데이터의 이름
var(권장사항x), let, const 총 3개의 종류가 있다.

1. let : 값의 재할당이 가능한 변수이다.

  // 재사용이 가능!
  // 변수 선언!

  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 a1 = 12;
  console.log(a1); // 12

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

2. const : 재할당이 불가능한 변수이다.

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

  a2 = 999;
  console.log(a2);  // TypeError: Assginment to constant variable.

3-2. 예약어

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어(Reserved Word)이다.

  // 예약어 예시

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

4. 함수(fuction)

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

1. 기본적인 함수 선언과 실행 예시

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

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

2. return : return이라는 키워드를 사용해 JavaScript의 어떤 데이터를 함수 밖으로 내보내기를 할 수 있다.
   내보내진 값을 새로운 변수에 할당하여 추가적으로 사용이 가능하다.

  // 함수 안의 특정 값을 반환
  function returnFunc() {
    return 123;
  }

  let a = returnFunc();
  console.log(a); // 123

3. 매개변수(Parameters) : 데이터를 받아주는 매개체 변수
   인수(Arguments) : 매개변수로 받으려고 하는 각각의 데이터

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

  // 재사용!
  let a1 = sum(1, 2); // 1과 2는 인수(Arguments)
  let b1 = sum(7, 12);
  let c1 = sum(2, 4);

  console.log(a1, b1, c1);  // 3, 19, 6

4. 기명(이름이 있는) 함수 선언, 익명(이름이 없는) 함수 표현

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

  // 함수 호출~
  hello();
  world();

5. 메소드(Method) : 객체데이터 내부에 하나의 속성 부분에 일반적인 데이터가 아닌 함수라는 데이터가 들어있는 경우를 지칭

  // 객체 데이터
  const Hun = {
    name: 'Hun',
    age: 27,
    // 메소드(Method) : 속성부분에 함수가 할당되어 있는 경우
    getName: function () { // 함수의 표현
      return this.name;
    }
  };

  const hisName = Hun.getName();
  console.log(hisName); // Hun
  console.log(Hun.getName()); // Hun

5. 조건문

조건문이란 조건의 결과(truthly, falsy)에 따라 다른 코드를 실행하는 구문이다.

• if, else

  let isShow = true;
  let checked = false;

  if(isShow) { // (조건), ( ) 안의 조건이 참이면 코드를 실행한다.
    console.log('Show!'); // Show!
  }

  if (checked) { // ( )안의 조건이 거짓이므로 코드를 실행하지 않는다.
    console.log('Checked');
  }

  // else

  if(isShow) { // 만약 isShow가 false이면 else 부분의 코드가 출력된다.
    console.log('Show!');  // Show!
  } else {
    console.log('Hide?');
  }

6. DOM API

DOM API(Document Object Model, Application Programming Interface) : JavaScript에서 HTML을 제어하는 여러가지 명령들
Document : HTML에 들어있는
Object Model : div, span, input 요소
Application Programming Interface : 웹사이트가 동작하기 위해서 입력하는 프로그래밍 명령

<!--index.html-->
<div class="box">Box!!</div>

1 ~ 4번의 index.html이며 1 ~ 4번 코드들은 전부 이어지는 내용입니다.

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

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

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

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

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

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

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

3. .classList.add();, .classList.remove();
   요소의 클래스 정보 객체를 활용한 추가와 삭제

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

  boxEl.classList.remove('active');	// active class가 삭제됨
  isContains = boxEl.classList.contains('active');
  console.log(isContains);	// false

4. Getter, Setter : 값을 얻는, 값을 지정하는 용도

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

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

---

<!--index.html-->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

5, 6번의 index.html이며 5, 6번 코드들은 전부 이어지는 내용입니다.

5. document.querySelectorAll();
   HTML 요소(Element) 모두 검색/찾기

  const boxEls = document.querySelectorAll('.box');
  console.log(boxEls);

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

  boxEls.forEach(function () {});

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

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

  // ---------------------example-----------------------

  const boxEls = document.querySelectorAll('.box');

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

7. 메소드 체이닝(Method Chaining)

메소드 체이닝은 JavaScript메소드를 체인처럼 연결해서 사용하는 것이다.

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

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