KH_JAVASCRIPT_1_자바스크립트 시작

자바스크립트로 무엇을 할까

웹 요소를 제어한다.

 - 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음

 - 웹 사이트 UI 부분에 많이 활용

 - 마우스 포인터를 올렸을 때 펼쳐지는 메뉴. 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠

 

다양한 라이브러리를 사용할 수 있다.

 - 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장

 - 예를 들어 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등

 - 웹 어플리케이션 개발을 위한 React나 Angular, Vue 등이 있다.

 

웹 어플리케이션을 만든다.

 - 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 어플리케이션처럼 동작한다.

 - 예를 들어 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스 등 공개된 API를 활용한 다양한 서비스 등이 있다.

 

서버를 구성하고 서버용 프로그램을 만들 수 있다.

 - node.js -> 프론트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크

 

웹 문서 안에 자바스크립트 작성하기

 - <script> 태그에 자바스크립트 소스 작성.

 - 웹 문서 안의 어디든 위치할 수 있지만, 주로 body태그 앞에 작성한다.

 - 자바스크립트 소스가 있는 위치에서 실행된다.

 

외부 스크립트 파일 연결해서 작성하기

 - 자바스크립트 소스를 별도의 파일로 저장한 후 웹 문서에 연결.

 

자바스크립트 용어와 기본 입출력 방법

식과 문

식(expression)

 - 값을 만들어 낼 수 있다면 모두 식이 될 수 있다.

 - 식은 변수에 저장된다.

 

문(statement)

 - 문의 끝에는 세미콜론(;)을 붙여서 구분하는게 좋다.

 - 넓은 의미에서 식이나 값을 포함할 수 있다.

 

간단한 입출력 방법

1. 알림창 출력

 - 확인 버튼이 있는 메시지 창 표시

 

2. 확인창 출력

 - 확인과 취소 버튼이 있는 창 표시

 - 클릭하는 버튼에 따라 프로그램 동작

 

3. 프롬프트 창에서 입력받기

 - 텍스트 필드가 있는 창 표시

 - 사용자 입력 값을 가져와 프로그램에서 사용

 

간단한 입출력 방법

document.write()

 - 웹 문서에서 괄호 안의 내용을 표시하는 명령문

 - 괄호 안에서 큰따옴표나 작은따옴표 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨.

 - 따옴표 안에는 HTML 태그도 함께 사용할 수 있음.

 

console.log

 - 괄호 안의 내용을 콘솔 창에 표시

 - 괄호 안에 변수가 들어갈 수도 있고, 따옴표 안에 텍스트를 넣을 수도 있음

 - 따옴표 안에 태그는 사용할 수 없음

 

 

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

스타일 가이드란?

코딩 규칙을 스타일 가이드, 코딩 컨벤션, 코딩 스타일, 표준 스타일 등으로 부름

 

코딩 규칙이 왜 필요할까?

 - 자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦다.

 - 오픈 소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔한 소스가 중요하다.

 - 팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요하다.

 - 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어든다.

 

자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙

1. 코드를 보기 좋게 들여쓴다.

 - tab키나 스페이스바를 눌러 2칸이나 4칸 들여씀.

 - 최근에는 공백 2칸 들여쓰기를 많이 사용함.

 

2. 세미콜론으로 문장을 구분한다.

 - 세미콜론을 붙일 것을 권장함

 - 소스는 한 줄에 한 문장만 작성하는 것이 좋다.

 

3. 공백을 넣어 읽기 쉽게 작성한다.

 - 식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성한다.

 

4. 코드를 설명하는 주석을 작성한다.

 - 한줄 주석 : 슬래시 2개 바로 뒤에 작성

 - 여러 줄 주석 : 여는 기호(/*)를 맨 앞에, 닫는 기호(*/)를 맨 뒤에 넣고 그 사이에 주석 내용을 작성.

 - 주석 사이에 또다른 주석을 넣을 수 없음.

 

5. 식별자는 정해진 규칙을 지켜 작성한다.

 - 첫 글자는 반드시 영문자나 언더스코어, 달러 기호로 시작해야 한다.

 - 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다.

 - 예약어는 식별자로 사용할 수 없다.