JS 선행

• 표기법
  dash-case (kebab-case) 데시기호
  html, css

• snake_case 언더바 (뱀 표기법)
  html, css

• camelCase (낙타 혹 표기법)
  대부분 PascalCase보다 훨씬 많이 js에서 사용
  js
  소문자대문자대문자대문자 방식

• PascalCase (특수 경우 사용)
  js
  대문자대문자대문자대문자 방식

• Zero-based Numbering
  0 기반 번호 매기기
  특수한 경우를 제외하고 0부터 숫자를 시작

주석 ctrl + /

데이터 종류

데이터 종류(자료형)

• String (문자 데이터)
  // 따옴표를 사용
  " ", ' ', 크게 3가지 사용
  ``을 사용하는 문자 데이터를 표기하는 방법은 그 문자 중간 어딘가에 ${ } 다른 데이터를 보관해서 끼워넣을수 있다

• Number (숫자 데이터)
  // 정수 및 부동소수점 숫자를 나타냄
  " " 따옴표가 있으면 문자 데이터, 숫자만 있어야 숫자 데이터

• Boolean (불린 데이터)
  // true, false 두 가지 값밖에 없는 논리 데이터

• Undefined
  // 값이 할당되지 않은 상태
  ex) let undef;

• Null
  // 어떤 값이 의도적으로 비어있음을 의미

• Object (객체 데이터)
  // 여러 데이터를 Key:Value 형태로 저장 { }
  ex) let user = {
  // Key:Value,
  name: ' ',
  age: 3,
  };

• Array (배열 데이터)
  // 여러 데이터를 순차적으로 저장 [ ]
  ex) let fruits = ['Apple', 'Banana', 'Cherry'];

변수, 예약어

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

• let 값(데이터)의 재할당 가능
  const 값(데이터)의 재할당 불가능

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

함수

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

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

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

• //객체 데이터
  const heropy = {
  name: 'HEROPY',
  age: 85,

• //메소드(Method)
  getName: function ( ) {
  return this.name;
  }
  };

조건문

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

DOM API(1)

• <script defer src="./main.js"></script>
  js가 데이터를 읽을수 있게 하기위해 defer 추가 기재

//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) 검색/ 찾기
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

DOM API(2)

//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);
});

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

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

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

메소드 체이닝

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