20210521 JavaSciprt 06 : 표기법(case), 주석, 데이터 종류, 변수, 예약어, 함수, DOM API, 메소드 체이닝

JavaScript06

JavaScript : 표기법

• dash-case(kebab-case)
  • 단어와 단어 사이를 대쉬를 사용(띄어쓰기를 대신해서)
  • HTML , CSS에서 많이 사용
• snake_case
  • 단어와 단어 사이를 언더바를 사용
  • HTML, CSS에서 많이 사용
• camelCase
  • 첫글자를 소문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기
  • JS에서 많이 사용
• PascalCase
  • 첫글자도 대문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기
  • JS에서 많이 사용(JS에서도 특수한 경우)
• Zero-based Numbering
  • 0 기반 번호 매기기
  • 특수한 경우를 제외하고 0부터 숫자를 시작
  • 요일의 경우 0을 일요일로 표시하여 커짐

JavaScript : 주석

• ctrl + /

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

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

JavaScript : 데이터 종류

• JavaScript 는 데이터를 기준으로 사고 해야함.

이름	설명
String (문자 데이터)	따옴표를 사용 (큰따옴표, 작은 따옴표, 백틱)
Number (숫자 데이터)	정수 및 부동소수점 숫자
Boolean (불린 데이터)	true, false 두가지 값이 있는 논리 데이터
Undefined	값이 할당되지 않은 상태 예) let undef;
Null	어떤 값이 의도적으로 비어있을 의미 (값이 없다는 것을 명시함)
Object (객체 데이터)	여러 데이터를 Key: Value 형태로 저장 {} 사용 . 또는 [] 을 통해서 특정 key에 접근 가능
Array (배열 데이터)	여러 데이터를 순차적으로 저장 (쉼표로 구분해서 저장) []

JavaScript : 변수

• 데이터를 저장하고 참조(사용)하는 데이터의 이름
• var(최근 쓰지 않음), let, const
• 변수 선언 : 변수명을 명시하고 값을 할당 하는 것
• let : 재할당 가능 (재할당 해야 하는 경우 const 를 let으로 수정하는 방법이 좋음)
• const : 재할당 불가능 (대부분 const 사용)

JavaScript : 예약어

• 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
• this, if, break 등의 어떤 기능을 하는 이름으로 변수명, 함수명 불가

JavaScript : 함수

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

// 함수 선언
function sum(a, b) {
  // 매개변수(Parameters) a, b
  // 실행(명령) 코드
  console.log(`a: ${a}, b: ${b}`);
  // 반환 (값을 내보냄)
  return a + b;
}
// 함수 호출시 인수를 넣을 수 있음
sum(1, 2); // 1,2 는 인수(Arguments)
// a: 1, b: 2

// 함수 호출시 반환되는 데이터를 변수에 할당
let res = sum(2, 2); // a: 2, b: 2
console.log(res); // 4

• 함수 선언 : function 키워드와 함께 함수명을 명시해서 함수를 만드는 것
• 함수 표현 : function 키워드는 있지만 함수명 없이 익명 함수를 만들때 호출을 위해서, 함수를 변수명에 할당하는 것을 말함
• 메소드(Method) : 객체 데이터의 속성이 함수데이터를 가지는 경우 해당 속성을 메소드라고 부름

JavaScript : DOM API

• Document Object Model : HTML 요소들

• Application Programming Interface : 동작하기 위한 명령

• html script 요소의 defer : 해당 script 파일을 나중에 다운 받게 우선순위를 낮출 수 있음

  • html이 먼저 다 읽혀야 요소들을 제어하는 JS 파일이 해당 요소를 인식할 수 있기 때문에

• document : html의 요소들로 구성되어 조작 할수 있게 하는 기반

• querySelector : 가장 먼저 찾아진 요소 하나를 반환함

• addEventListener : 앞으로의 발생할 상황을 듣고 있음

• ClassList : 해당 요소의 여러개의 class를 조작 할수 있게 하는 기반

• contains() : classList 확인 함수

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector(".box"); // 가장 먼저 찾아진 요소를 반환함

// HTML 요소에 적용할 수 있는 메소드
// 인수 추가 가능
// 첫번째에 넣을 인수 : 이벤트(Event, 상황) -> 청취
// 두번째에 넣을 인수 : 핸들러(Handler, 실행할 함수)
boxEl.addEventListener("click", function () {
  console.log("Box was Clicked!");
});

// 요소의 클래스 정보 객체 활용 (ClassList)
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

• querySelectorAll : 해당 조건에 만족하는 요소들 모두를 배열로 반환
• forEach : 위의 배열 데이터를 loop하기 좋음

// HTML 요소 모두 검색/ 찾기
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);
// NodeList(4) [div.box, div.box, div.box, div.box]

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가

boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});
// 0 <div class=​"box order-1">​1​</div>​
// 1 <div class=​"box order-2">​2​</div>​
// 2 <div class=​"box order-3">​3​</div>​
// 3 <div class=​"box order-4">​4​</div>​

• textContent : 값을 얻거나 지정하는 용도 (Getter, Setter), 공백 포함
• innerText : 값을 얻거나 지정하는 용도, 표시되는 화면 그대로 text를 가져옴 (공백이 제거 되기 떄문에)

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

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

// Setter 값을 지정하는 용도
boxEl.textContent = "this textContent was Updated";
console.log(boxEl.textContent); // this textContent was Updated

• textContent vs innerText
  • innerText는 불필요한 공백을 제거해서 가져옴 (즉, 일반적으로 페이지에 표시되는 모양대로)
  • textContent는 수정한 값 있는 그대로 가져옴
  • html에서 일반적으로 표시할때 그냥 space는 무시됨

boxEl.textContent = " this   textContent   was   Updated  ";
console.log(boxEl.innerText); // this textContent was Updated
console.log(boxEl.textContent); //  this  textContent  was  Updated

JavaScript : 메소드 체이닝

• split : 문자를 첫번째 인수(구분자) 기준으로 쪼개서 배열로 반환

• reverse : 배열 뒤집기

• join : 배열을 첫번째 인수(구분자) 기준으로 문자로 병합해 반환

• return type과 받는 type이 같아야 메소드 체이닝이 가능함

  • String.split(): string[]
  • Array<string>.reverse(): string[] :
  • Array<string>.join(separator?: string): string

const a = "Hi~";
const b = a.split("").reverse().join("");
console.log(a); // Hi~
console.log(b); // ~iH