[KH국비지원 웹개발자 과정] Day_45 키워드 JS, DOM, BOM

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

HTML + CSS -> 정적으로 화면의 구조를 만들고 꾸미는 기능
JavaScript -> 화면의 동적인 처리. HTML에 입력된 값의 유효성 검사 등을 자바스크립트로 처리할 수 있다.

자바스크립트의 역사.
네스케이프라는 회사에서 자바스크립트를 개발함.
브랜던 아이크 Brendan Eich 라는 사람이 며칠만에 만들었다고 한다...
모카 , 라이브스크립트의 명칭 변경을 거쳐 최종적으로 자바의 인기에 편승하고자 자바스크립트라고 명명하였다고 한다.

자바 스크립트는 한 줄 한 줄 해석하는 인터프리터 언어이다.
MS사 등 여러 회사에서 스크립트 언어를 만들어 혼용을 하다가 표준이 정해지게 된다.
->ECMA 스크립트 표준을 따르는 대표적인 웹 기술이 자바스크립트이다.
 ECMA(European Computer Manufactures Association)
->ECMA Script = ES , ES1부터 버전이 발전되어 왔음.
학원에서는 ES5 기준으로 학습을 한다. ES5기준으로 익혀두면 널리 사용하는 ES6 등의 버전을 익히기 수월하다고 한다

자바스크립트는 크롬 브라우저가 나오면서 떡상을 하게 되었다고 함.
크롬 브라우저의 V8엔진 덕분에 자바스크립트의 기능이 비약적으로 상승하였기 때문.

자바스크립트는 원래 브라우저에서만 동작을 했었음.
-> 자바스크립트를 프로그램으로 동작시키고자 하는 욕구
->node.js는 자바스크립트를 프로그램에서 동작시킨다.
->자바스크립트로 서버부터 프론트까지 풀스택 개발이 가능하다는 것.
-> react.js , vue.js등을 많이 사용한다고 함.

자바스크립트의 작성방법 3가지
1. 인라인 방식
  :HTML태그 안에 속성값으로  스크립트를 작성한다. on으로 시작하는 속성들이다.
2. 인터널 방식
  :<script> 스크립트 태그 안에 작성하는 방식이다.
3. 익스터널 방식
  :<script src="경로"> 외부의 js 코드를 호출하여 사용하는 방식이다.

DOM( Document Object Model, 문서 객체 모델)
:자바스크립트는 HTML 문서 안에서 사용하지만 자바스크립트 영역과 HTML영역은 다른 영역이기 때문에  서로 연결이 되어 있지 않다. -> HTML의 내용을 자바스크립트에서 가져다 쓰기 위해서 DOM이 필요하다.
DOM에는 작성한 HTML에 대한 모든 태그 및 요소 들이 전부 객체화되어 저장이 되어있다.
DOM을 통해 HTML과 JS가 연결된다.
DOM을 통하여 HTML, CSS, JS가 연결 된다.
DOM은 구조화된 노드와 프로퍼티와 메소드를 가지고 있는 오브젝트 문서이다.

브라우저 개발자 모드의 콘솔 창에 JS코드를 직접 입력하고 필요한 요소 정보를 확인할 수 있다.

DOM의 각종 메소드를 이용하는 방법 실습.
getElementById
getElementByName
getElementByClass 등..
Id처럼 유일한 값이 아닌 경우 가져오는 요소는 배열로 저장이 되기 때문에
인덱스로 접근을 하여 사용하여야 한다. JS로 CSS의 속성값 조작도 가능하다.

vscode) Ctrl + Alt + 방향키로 여러 줄을 선택하여 여러 줄에 같은 내용을 동시에 입력 가능.

appendChild(" ") 요소 추가
innerHTML에 텍스트 값을 대입하여 요소 추가 가능 ( 더 편리)

변수.onclick = function(){ } 
익명함수. 재사용하지 않을 경우 익명 함수를 쓰는 것이 좋다.

요소(태그)의 childNodes를 콘솔에 확인해보면
다음과 같이 자식 노드들을 확인하여 인덱스로 접근할 수 있다.
NodeList(7) [text, h1, text, div, text, div, text]
0: text
1: h1
2: text
3: div
4: text
5: div
6: text

요소(태그)의 children을 콘솔에 확인해보면
다음과 같이 나온다.
HTMLCollection(3) [h1, div, div]
0: h1
1: div
2: div
length: 3
[[Prototype]]: HTMLCollection

BOM(Browser Object Model, 브라우저 객체 모델)
:윈도우 객체라고도 한다. 브라우저를 컨트롤하는 메소드를 가지고 있다.
윈도우 객체는 자바스크립트의 최상위 객체이다.

<script> 태그가 HTML 이전에 오는 경우, 아직 읽지 않은 HTML의 요소를 스크립트 태그에서 사용할 경우 작동이 되지 않는다. 이런 경우 HTML 보다 <script>태그를 뒤에 작성하여야 하는데 이렇게 할 경우
가독성이 떨어지는 문제가 발생하기 때문에 윈도우 객체의 window.onload() = function(){}
함수를 사용한다. 해당 함수 안의 내용은 HTML 내용을 읽은 다음 실행이 된다.

setTimeout()
setInteval()
clearInterval()

바닐라JS는 순수 자바스크립트를 칭한다.

document.write(" ")
브라우저 화면에 값을 출력한다. 기존에 있던 코드는 사라지고 함수에 적힌 값만 브라우저에 출력된다.