JavaScript 기초

[브라우저 렌더링 과정]
브라우저 렌더링 과정이라는 것은 도메인 주소(https://www.~~~.com)를 브라우저에 요청할 때
해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻한다.
     
     1. HTML 파일을 파싱
     : 웹 브라우저에서 HTML파일을 읽어오고 구조를 해석하는 과정을 말한다.
       브라우저가 HTML문서를 파싱하면 DOM(Document Object 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(); => o 올바른 문법
      - 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() => o 올바른 문법
      - document.write(} => x 틀린 문법

 

html 태그를 읽은 후에 script안의 코드를 실행하기 때문에 body에 가장 마지막줄에 선언하거나 또는 body 태그 아래에 선언해준다. 

 

만약 head에 내부 자바스크립트로 넣고 싶을 때는 아래와 같은 방법을 사용한다.

     defer: 자바스크립트를 가장 마지막에 읽어오게 만드는 속성
     head태그 안에 script파일을 연결할 때 보통 사용한다.
    ex) <script src="./js/welcome.js"defer></script>