JavaScript

Javascript

“동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 등을 할 수 있는 스크립트 언어”

1. 자바스크립트의 핵심

• 변수안에 값을 저장할 수 있다.
• 프로그밍에서 ‘문자열(strings)’이라고 불리는 문자들도 조작 가능하다.
• 웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있다.

특히나, 자바스크립트에서의 기능이 어마어마하다. Application Programming Interfaces (APIs) 라는 것은 여러분의 자바스크립트 코드에 사용할 수 있는 추가적인 강력한 마법들을 제공한다고 볼 수 있다.

API란, 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있다.

• Browser API : 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게 한다.
• Third party API : 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것이다.

2. 자바스크립트의 연결

자바스트립트는 CSS와 같이 HTML페이지에 적용이 된다. CSS는 외부의 스타일시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는데 반해, 자바스크립트는 HTML상에서 오직 script 태크만으로 사용이 가능하다.

1. HTML 내부의 자바스크립트 연결

<script>

  // 이 안에 자바스크립트 코드를 입력

</script>

** </body> 직전에 작성할 것.

1. 외부의 자바스크립트 연결

HTML 파일이 있는 폴더 안에 script.js라는 새로운 파일을 만들어서 연결한다.

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

3. 자바스크립트 실행

자바스크립트를 실행한 후, 상단에 use strict를 선언해주면 좋다.

그 이유는 자바스크립트를 만들 때 빠르게 만들어야 해서 굉장히 유연한 언어이며, 이로인해 위험성이 높기 때문이다. 그래서 선언되지 않은 변수에 값을 할당할 수 있는 등 문제들이 많으며, 이 문제 해결을 위해 ECMA5에 추가되었기 때문이다.

a = 1;
// 선언되지 않은 a에 값을 할당하면 브라우저 상에 문제는 없다.

("use strict");
a = 1;
// use strict 선언하게 되면 a는 정의되어 있지 않다고 에러가 뜬다.
// 이 에러를 해결해주기 위해서는 아래와 같이 작성할 수 있다.

("use strict");
let a = 1;

• use strict의 장점
  1. 좀 더 상식적인 범위 내에서 개발 가능
  2. 자바스크립트 엔진을 더욱 효율적이고 빠르게 자바스크립트의 분석 가능
  3. 실행하는데 있어 더 나은 성능 개선 기대

4. script async 와 defer의 차이점

1. script async

async는 boolean타입의 속성이기 때문에 선언하는 것만으로도, True로 설정되어 async옵션을 사용할 수 있다.

• 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 스크립트의 다운로드가 끝나자 마자 이를 실행한다.
• 외부 스크립트끼리의 구체적인 실행 순서는 보장하지 않는다.
• 나머지 페이지가 나타나는 동안 스크립트가 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장한다.
• 각각의 스크립트가 독립적으로, 서로에게 의존하지 않는 관계일 때 적절하다.

<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

위처럼 입력 시, 3개의 스크립트를 로딩하지만 이들의 순서는 보장할 수 없다.

1. script defer

defer는 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행한다.

<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

script1.js → script2.js → script3.js 의 순서가 보장된다.

출처 : 드림코딩 by 엘리 https://youtu.be/tJieVCgGzhs

• javascript