본문 바로가기

자바스크립트

[자바스크립트 기초 ] - 작성 규칙(코딩 컨벤션) / 내부 외부 스크립트

* 코딩 컨벤션 : 코딩에서 약속된 규칙을 말한다. 

자바스크립트는 오류가 나면 그 아래 코드들은 실행하지 않는다. 


< 자바스크립트 코드를 작성할 때 규칙 = 코딩 컨벤션 / 코딩 스타일 >

1. 자바스크립트는 대/소문자를 구분하여 작성해야한다.  대소문자 틀리면 오류난다.

ex) document.write(); -> 올바른 문법  /   Document.Write(); -> 틀린 문법. 오류난다. 

 

2. 코드를 한 줄 작성한 후에는 ; 으로 마무리 해야한다. 세미콜론을 쓰지 않고 한 줄에 두 개의 코드를 작성하면 오류난다.

한 줄에 한 문장만 쓰는 것이 가독성이 좋음.

 

3. 문자형 데이터를 작성할 때에는 " "(큰 따옴표)와 ' '(작은 따옴표)의 겹침 오류를 조심해야한다. 교차되면 안된다.

ex)  document.write('hello '지구' world'); -> 이렇게 썼을 때 어디서부터 어디까지가 한 문장인지 파악하지 못한다.오류남.

따옴표를 중간에 넣고 싶다면  document.write('hello "지구" world'); 처럼 따옴표를 달리 써서 큰 따옴표와 작은 따옴표를 구분해줘야한다. document.write("hello '지구' world"); 바깥 따옴표가 큰 따옴표도 상관없다.  

- document.write('hello '지구' world');  X

- document.write('hello "지구" world'); O

- document.write("hello '지구' world"); O

- document.write('hello  \ '지구  \ ' world'); O -> 엔터 위에 있는 \ 역슬래쉬( ₩  )를 기호 앞에 붙여주면 문자의 시작과 끝을 구분자가 아니라 다음에 오는 기호를 단순한 문자로 처리한다.  \'  \ ' 안에 있는 문구를 단순 문자로 처리. 

 

4. 코드를 작성할 때에는 { }나 [ ], ( )의 짝이 맞아야한다. 

 

* 자바스크립트의 확장자는 .js 


< 주석 >

- 여러 줄 주석을 쓸 때 쓰는 주석 : /* */

- 한 줄짜리 주석 쓸 때 쓰는 주석 : //


자바스크립트에는 '내부 자바스크립트'와 '외부 자바스크립트'가 있다.

< 내부 자바스크립트 >

 head 안에 쓰거나,  body의 가장 마지막 줄 혹은, body와 </html> 사이에 위치시킨다.

html 태그를 읽은 후에 script 안의 코드를 실행한다. 

( 다른 코드들을 다 해석하고 마지막에 자바스크립트를 읽을 수 있도록 해야한다. )

 <script></script>

태그 사이에 쓰면 내부 자바스크립트를 쓸 수 있다.

<script defer></script>

defer 이라는 속성을 추가하면 script 를 어디 위치에다 쓰던지에 상관없이 가장 마지막에 해석할 수 있게 해준다.

(css ,html을 읽고 가장 마지막에 해석할 수 있도록 함.)

head안에 script 파일을 연결해서 쓸 땐  defer 속성을 같이 써주는 게 좋다. 

 

 

< 외부 자바스크립트 >

자바스크립트는 기본 구조가 없다. 

ES6 버전의 엄격한 문법을 쓸 꺼면 첫 줄에 'use strict'; 써준다.

"use strict"; 첫 줄 - ES6의 엄격한 문법을 사용하겠다라는 뜻

 

! - html에서 외부자바스크립트 연결하는 법 - (자바스크립트 선언문)

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

-> head에 연결했을 땐 defer 같이 써주기.

 

script에 src 속성으로 상대 경로로 불러와준다.