javascript_자바스크립트 기본

주석

1. 한줄 : //
2. 블록(n줄) : /**/

스크립트의 위치

• 스크립트는 어디든 명시 가능.
  단, 컴퓨터가 읽자마자 바로 실행하기 때문에(순간순간 실행함) 건드릴 요소보다는 밑에 명시되어야 한다. 즉시 실행하므로 script는 적용해야할 요소가 없으면 에러가 난다.
  추천하는 자리는 body가 끝나기 직전(렌더링 끝나자 마자)
• 그러나 구조상 body 직전이 아닌 head에 작성해야 되는 경우가 있는데 그것은 렌더링하기 전에 현재 브라우저의 width값이 필요할 때이다.
  • (웹용 화면과 모바일용 화면을 따로 개발해놓고 들어오는 브라우저의 사이즈를 구해서 웹용 화면을 띄울지, 모바일용 화면을 띄울 지(m주소) 체크해야하는 경우)

로드 방식

• async : html코드를 읽다가 '<script' 부분을 보면 html 읽던/그리던 것을 잠시 멈추고 해당 스크립트 파일을 다운 받아오는데 async 는 병렬 방식으로 DOM 도 그리면서 script 를 다운 받아온다.
  • <script async src="경로"></script>
  • 장점: 스크립트를 다운받는 시간이 별도로 없기 때문에 상대적으로 기본 script 다운 방식 보다 로드가 빠르다
  • 단점: script가 다 받아지면 DOM 이 멈추고 스크립트를 실행하기 때문에 어짜피 스크립트에서 오류가 나면 페이지가 멈춘다.
• defer : DOM 을 로드하면서 동시에 script 들을 다운만 받는다. DOM 이 다 로드 된 후, 다운받은 스크립트를 실행한다.
  • header 안에 명시하면서 렌더링 이후 동작시킬거면 defer 쓰는게 좋다.
  • <script defer src="경로"></script>
  • 장점: 외부파일이 여러개인 경우 DOM 구조가 그려지는 동안 다운받은 script 들을 코드 순서대로 실행하기 때문에 로드가 빠르다.
    

선언

• 내부 선언 : 자바스크립트와 제이쿼리를 <script></script> 태그 안에 명시
  보통 style 밑에 script 작성한다.
• 외부 선언 : <script src="경로"></script>
  외부 css쓸 때는 닫는 주석이 없었지만 script는 무조건 닫는 주석이 있다.

DOM구조

중요5대장

1. 변수
2. 조건문
3. 반복문
4. 함수(메서드. function)
5. 객체(클래스, 배열 등)