css javascript html 에 연결

head태그안

css

<link rel="stylesheet" href="./style.css">

href 는 css경로를 넣어준다

 

javascript

<script src="main.js" defer></script>

defer는 html에 먼저 나오게하고 그 다음 jvavascript를 나오게한다

src에 js경로를 넣어준다

asyn boolean타입의 속성 true로 자동으로 설정한다

웹페이지동작법은 html파일위에서부터아래로 실행된다

 

 

asyn(async)

<script asyn src="main.js" ></script>

브라우저가 html 다운로드받아서 파싱하다가 js파일 만나면 다운받으라고 명령하고 

다시 파싱하다가 js파일이 다운이 다 되었으면 그때 파싱하는 것을 멈추고

다운로드된 js파일을 실행하게된다

 

장점은  파싱하는동안 다운받아서 다운받는시간 줄일수있다 

단점은 js파일이 html 파싱 전에 실행되어서 만약 js파일에서 querySelector 이용해

DOM요소를 조작하려고하면 조작시점에 html의 원하는요소가 아직 정의 되지않을수가있다

 

html Parsing 하는동안 언제든지 js실행위해 멈출수있어 서 사용자가 페이지보는데 시간이 좀걸림

다운로드먼저된 js부터바로실행

 

 

defer

<script defer src="main.js"></script>

html 파싱하다가 defer js파일을 만나면 먼저 js다운명령하고 나머지 html 끝까지 파싱하게된다

그리고 html파싱이 다끝난 다음에 다운로드된 js를 실행하게된다

 

html 다 파싱하는동안 js다운받아서 다운받은 순서대로 실행된다

효율적 유용하다

 

* parsing (파싱)

구문분석

데이터를 분해 분석하여 원하는 형태로 조립하고 다시 빼내는 프로그램

 웹상에서 주어진 정보를 원하는 형태로 가공하여 서버에서 불러들이는 것이다

 

 

 

js파일에

'use strict'; 을 선언해야 비정상적인 코드제거

js파일에 변수선언되지 않은 것을 'use strict'을 사용하지 않고 

적게되면 전혀 문제가 없게 되지만

'use strict'을 선언하게되면 정의 되어있지 않다고 나온다

 

ex) use strict 선언안했을때

   a = 1;  에러뜨지 않음

 

use strict 선언했을때

a =1; 에러뜸

let = a;

a = 3;

변수 선언해줘야 에러가 뜨지 않음