반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Jerry

[JAVASCRIPT.INFO/Series #2]자바스크립트 기본(Javascript Basic) 본문

Front/JavaScript

[JAVASCRIPT.INFO/Series #2]자바스크립트 기본(Javascript Basic)

juicyjerry 2021. 6. 1. 23:38
반응형

 

이 글은 JAVASCRIPT.INFO를 공부하면서 정리한 글입니다.

본문을 보고 싶으시다면, JAVASCRIPT.INFO (<<< )를 클릭하시면 됩니다!

 

 

 

 

 

 

[자바스크립트 기본]

'script' 태그

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분에 위치에 삽입 가능합니다.

 

<!DOCTYPE HTML>
<html>
<body>
  <script> 
  	alert('Hello World!');
  </script>
</body>
</html>

 

모던 마크업(Modern Markup)

<script> 속성(attribute)

1. type 속성: <script type=...>

HTML4에서 스크립트에 type을 명시하는 것이 필수였다고 합니다. 

<script type="text/javascript"></script>

 

2. language 속성: <script language=...>

현재 사용하고 있는 스크립트 언어를 나타낸다고 합니다. 지금은 JS가 기본 언어여서 퇴색되어 사용할 필요가 없어졌습니다.

 

 

 

외부 스크립트

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있는데,

 

1. (분해한 파일을) src 속성을 사용해 HTML에 삽입합니다.

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

 

2. URL 전체를 속성으로 사용

<script src="image.google.com"></script>

 

3. 복수의 스크립트를 HTML에 삽입

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

 

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때 사용합니다.

스크립트를 별도의 파일에 작성하면, 브라우저가 스크립트를 다운로드하여 캐시에 저장하기 때문에, 성능상 이점이 있습니다.

여러 페이지에서 동일한 스크립트를 사용할 경우, 브라우저는 페이지가 바뀔 때마다 새로 다운로드하지 않고 캐시로부터 스크립트를 가져와 사용하여, 트래픽이 절약되며 웹페이지의 속도도 빨라집니다.

 

 

[코드 구조]

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.

 

아래 예시는 두 개의 console.log 문으로 나눈 예시입니다.

console.log('Hello');
console.log('World');

 

 

세미콜론(semicolon)

줄 바꿈이 있다면, 세미콜론을 생략할 수 있습니다.

줄 바꿈이 있다면, '암시적' 세미콜론으로 해석합니다. 

(세미콜론 자동 삽입: automatic semicolon insertion)

 

하지만, 문(statement) 사이에 세미콜론을 넣는 것이 더 안전하므로 붙이시길 바랍니다.

 

ex) 

직접 개발자 도구를 켜서 테스를 해보세요!

직접 해보기전까지 모르는 겁니다!! 

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

 

어떻게 다르게 결과가 나오는지 확인하셨나요?

alert("제대로 동작합니다.");

[1, 2].forEach(alert)

 

위 같이 에러가 나는 이유는 자바스크립트가 대괄호 앞에는 세미콜론이 있다고 가정하지 않기 때문입니다.

 

 

 

주석(comment)

두 개의 슬래시 // 로 한 줄짜리 주석을 만들 수 있습니다. (shortcut: ctrl + /)

/* */ 로 여러 줄의 주석을 만들 수 있습니다.

 

주석을 달면 코드의 전체적인 길이가 증가하는데,
프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많기도 하고, 이 도구들은 주석을 삭제해주기 때문입니다.

최종적으로 배포되는 코드에 주석이 들어가지 않으므로 부정적인 영향을 끼치지 않습니다.

 

 

 

 

 

 

 

 

출처: JAVASCRIPT.INFO | https://ko.javascript.info/

반응형

'Front > JavaScript' 카테고리의 다른 글

[JAVASCRIPT.INFO/Series #4]자바스크립트 변수와 상수 & 자료형 (data type)  (0) 2021.06.09
[JAVASCRIPT.INFO/Series #3]자바스크립트 엄격 모드(strict mode)  (0) 2021.06.07
[JAVASCRIPT.INFO/Series #1]자바스크립트란? (What is Javascript)  (0) 2021.05.30
promise란?  (0) 2021.05.03
이벤트 버블링(Event Bubbling), 이벤트 캡처링(Event Capturing), 이벤트 위임(Event Delegation), 이벤트 등록, 이벤트 흐름 정복하기!!  (0) 2021.04.28
'Front/JavaScript' Related Articles more