성장을 위한 기록

자바스크립트를 배우기 전 본문

FE (Front End) (구)/javascript

자바스크립트를 배우기 전

B_Tae 2022. 2. 3. 23:18

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

자바스크립트를 배우기 전

자바스크립트의 역할

  1. 웹 요소를 제어
  2. 웹 어플리케이션 제작 가능
  3. 서버 개발 가능

 

자바스크립트 작성하기

자바스크립트는 html, css와 다르게 대소문자를 구분한다. 따라서 sum과 Sum은 다른 변수로 인식된다.
또한 문서에 이미지나 텍스트 등의 요소를 제어하는 경우가 많아 보통</body> 태그 바로 직전에 소스를 작성한다.

자바스크립트 작성 방법은 css와 동일하게 2가지 방법이 있다.

  1. 직접 작성하기

문서 안에서 <script></script> 태그에 소스를 직접 작성하여 적용한다.

짧은 소스에 경우 바로 확인이 가능하다는 장점이 있지만, 단점이 많아 잘 사용하지 않는 방법이다.

  1. 외부 스크립트 파일을 연결하기

확장자는 .js를 사용하고, 문서에 연결할 때에는 html 문서 <script> 태그 안에 링크를 연결한다.

기본형

<script src="외부 파일 경로"></script>

자바스크립트 스타일 가이드

다른 사람과 소스를 공유하거나 오류를 찾아낼 때 가독성을 높이기 위해 몇가지 규칙이 존재한다.

 

1. 코드 들여쓰기
소스 간의 관계를 알아보기 편하게 들여쓰기를 사용하여 작성해야한다.

 

2. 세미콜론으로 문장 구분
세미콜론(;)이 없어도 자바스크립트는 실행되지만, 디버깅 등에 이유로 문장을 구분하는 것이 좋다. 또한 짧은 소스라도 한 줄에 한 문장만 작성하는 것이 좋다.

 

3. 공백 넣기
공백의 유무는 자바스크립트 실행과 관련은 없지만 마찬가지로 가독성을 높이기 위해 구분하는 것이 좋다.
var num=2; 보다는 var num = 2;가 읽기 편하다.

 

4. 주석으로 설명하기 **소스를 빠르게 이해하기 위해 주석을 통해 설명을 덧붙인다.

주석은 **한 줄 용으로 // 내용이 있고 여러줄일 경우 /* 내용 */ 을 사용한다.

 

5. 식별자는 정해진 규칙으로 작성 
식별자는 변수 등을 구별하기 위해 지정한 이름이다. var name = promt("이름은?"); 이란 소스에서 name이 식별자가 된다.

  • 식별자는 영문자나 언더스코어(_), $기호로 시작을 해야한다.
  • 두 단어가 모여 사용할 경우 공백은 사용이 불가하며 언더스코어(_)나 하이픈(-)을 이용하여 연결한다
  • 두 단어를 그냥 붙일 경우 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작한다.

 

6. 예약어는 식별자로 사용이 불가
var name = promt("이름은?"); 에서 var이 예약어이며 자바스크립트에서 미리 정해놓은 단어를 가르킨다. 이 언어는 식별자로 사용이 불가하다.

Comments