자바스크립트 기초

내부 자바스크립트

script src로 연결한다. script는 자바스크립트를 연결하는 태그이다.
ex)link 같은 거 +src
이건 어디에서나 사용가능하다. 외부 스크립트는 바디 안의 맨 아랫줄에 사용하는 경우가 많다.
=> 바디 안에 들어가있는 태그들을 토대로 진행해서 실행되기 때문에 바디 안의 태그를 모두 읽어오고, 진행을 시키려고 바디 안의 맨 아래에 넣는다. 혹은 바디 태그의 다음에도 넣긴 함.

만약 헤드 부분에 넣고 싶다면

외부 자바스크립트

를 사용해서 쓴다.
defer: 자바 스크립트를 가장 마지막에 읽어오게 만드는 속성.

자바스크립트의 주석과
엄격한 언어로 하겠다는 표시이다.

========================================

브라우저 렌더링 과정 ★★★★ (=코딩 컨벤션 / 코딩 스타일)

브라우저 렌더링 과정이라는 것은 도메인 주소(http://www.~~~.com)를 브라우저에 요청할때
해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻한다.

1. HTML파일을 파싱
  : 웹 브라우저에서 HTML파일을 읽어오고 구조를 해석하는 과정을 말한다.
    브라우저가 HTML문서를 파싱하면Dom(Document Odject Model)트리를 만든다. 
    DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현됨. 



2. CSS파일을 파싱 
  : HTML파싱 후에 CSS파일을 파싱하여 CSSOM(CSS Object Model)트리를 생성한다. 
    CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됨. 


3. DOM과 CSSOM 결합 
  : 브라우저는 DOM과 CSSOM을 결합하여 Render Tree(렌더트리)를 생성한다.
    렌더 트리는 화면에 표시되는 요소들만 구성된 트리구조로, 각 요소는 화면에 어떻게 
    배치될지 결정하는 정보를 가지고 있다. 


4. 레이아웃
  : 렌더 트리를 기반으로 브라우저는 각 요소 크기와 위치를 계산하여 레이아웃을 수행한다. 
    이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화면에 보여지는 모습을
    그려주는 과정으로 굉장히 중요한 과정이다. 


5. 페인팅
  : 레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시함. 
    이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며 사용자가 볼 수 있는 
    최종 결과물이 나온다. 
    

========================================

자바스크립트 코드 입력시 주의사항

1. 자바스크립트는 대/소문자를 구분하여 작성한다.
  - document.write() => O 올바른 문법
  - Document.Write() => X 틀린 문법. 오류남

2. 코드를 한 줄 작성한 후에는 ;으로 마무리한다.
   세미콜론을 쓰지않고 한 줄에 두개의 코드를 작성하면 오류가 발생한다.
   * 한 줄에 한 문장만 쓰는 것이 가독성이 좋음.
  - document.write(); => 올바른 문법
  - document.write()document.write() => X 틀린 문법. 오류남

3. 문자형 데이터 작성할 때에는 ""(큰따옴표)와 ''(작은따옴표)의 겹침 오류를 조심해야한다.
  - document.write('hello "땡땡" world') => O 올바른 문법
  - document.write("hello '땡땡' world") => O 올바른 문법
  - document.write("hello \'땡땡\' world") => O 올바른 문법
  ( => \엔터 위에 있는 역슬래쉬.(￦) \를 기호 앞에 붙여주면 문자의 시작과 끝을 구분하는 
   구분자가 아니라 다음에 오는 기호를 단순한 문자로 처리한다. )
  - document.write('hello '땡땡' world') => X 모두 똑같은 따옴표로 오류남.
  - document.write('hello "땡땡' world") => X 모두 똑같은 따옴표로 오류남.

4. 코드를 작성할 때에는 {}나 [], ()의 짝이 맞아야 한다.
  - document.write(} => X 틀린 문법
  - document.write() => O 올바른 문법

-->
<!-- body의 가장 마지막줄에 선언하기. html태그를 읽은 후에 script 안의 코드를 실행함. -->

==========================================================