今日の勉強

JS前置き

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

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

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

*함수 선언
-function 키워드와 함수의 이름을 명시하면 "함수 선언 한다" 라고 한다

*함수 표현
-이름이 없는 익명 함수를 변수에 할당하는 것은 "함수를 표현" 한다 라고 한다


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


[DOM API]
*DOM
-문서 객체 모델(Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
-DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
-DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다.
 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
-웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에  나타나거나 HTML 소스 자체로 나타나기도 한다. HTML 소스 자체로 나타나기도 한다.
 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다.
-DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
-DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

*DOM 요소의 선택
-자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다.
 DOM 요소를 선택하는 방법은 다음과 같다.
-1.태그 이름(tag name)을 이용한 선택
-2.아이디(id)를 이용한 선택
-3.클래스(class)를 이용한 선택
-4.CSS 선택자(seletor)를 이용한 선택
-5.HTML 객체 집합(object collection)을 이용한 선택

*DOM 요소의 내용 변경
-DOM을 이용하면 DOM 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있다.
-DOM 요소의 내용을 바꾸는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것이다.
 또한, DOM 요소의 속성 이름을 이용하면 속성값을 바로 변경할 수도 있다.

*DOM API
-Document Object Model, Application Programming InterFace

*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

---

//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 = 'HELLO';
console.log(boxEl.textContent); //HELO






[메소드 체이닝]
*메소드 체이닝(Method Chaining)

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

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