자바스크립트

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

​

웹 요소를 제어한다.

• 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.
• 웹 사이트 UI 부분에 많이 활용
• 예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠

​

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

• 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남

-> 라이브러리와 프레임워크가 계속 등장

• 예) 시각화를 위한 d3.js 머신러닝을 위한 tensorflow.js DOM조작을 위한 jQuery 등
• 예) 웹 애플리케이션 개발을 위한 React, Angular, Vue 등

​

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

• 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작
• 예) 온라인 지도의 길찾기 서비스, 데이터시각화 서비스, 공개된 API를 활용한 다양한 서비스

​

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

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

​

​

웹 브라우저가 자바스크립트를 만났을 때

​

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

• <script> 태그와 </script>태그 사이에 자바스크립트 소스 작성
• 웹 문서 안의 어디든 위치할 수 있지만, 주로</body> 태그 앞에 작성
• 자바스크립트 소스가 있는 위치에서 실행된다.

​

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

자바스크립트 소스를 별토 파일(*js)로 저장한 후 웹 문서에서 연결

​

​

​

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

식과 문

​

식(expression)

• 값을 만들어 낼 수 있다면 모두 식이 될 수 있다.
• 식은 변수에 저장된다

​

문(statement)

• 문의 끝에는 세미콜론(;)을 붙여서 구분하는게 좋다.
• 넓은 의미에서 식이나 값을 포함할 수 있다.

​

​

간단한 입출력 방법

​

알림 창 출력

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

alert(메세지)

​

확인 창 출력

• '확인' 과 '취소' 버튼이 있는 창 표시
• 클릭하는 버튼에 따라 프로그램 동작

confuirm(메세지)

​

프롬프트 창에서 입력받기

• 텍스트 필드가 있는 창 표시
• 사용자 입력 값을 가져와 프로그램에서 사용

prompt(메세지) 또는 prompt(메세지, 기본값)

​

​

document.write( )

• 괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨
• 따옴표 안에는 HTML 태그도 함께 사용할 수 있다.

​

console.log( )

• 괄호 안의 내용을 콘솔 창에 표시
• 괄호 안에 변수가 들어갈 수 있고, 따옴표 안에 텍스트를 넣을 수도 있다.
• 따옴표 안에 태그는 사용할 수 없다.

​

​

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

​

스타일 가이드 란?

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

​

코딩 규칙이 왜 필요할까?

• 자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦다.
• 오픈 소스에 기여하거나 누군가와 공유할소스라면 더욱 깔끔한 소스가 중요하다
• 팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요하다
• 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어든다

​

​

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

​

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

• 'Tap' 키나 '스페이스바' 를 눌러 2칸이나 4칸 들여씀
• 최근에는 공백 2칸 들여쓰기를 많이 사용함

​

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

• 세미콜론을 붙일 것을 권장한다.
• 소스는 한 줄에 한 문장만 작성하는 것이 좋다.

​

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

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

​

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

• 한 줄 주석 : 슬래시 2개(//) 바로 뒤에 작성
• 여러 줄 주석 : 여는 기호(/*)를 맨 앞에, 닫는 기호 (*/)를 맨 뒤에 넣고 그 사이에 주석 내용을 작성

​

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

• 첫 글자는 반드시 영문자나 언더스코어(_), 달러 기호($)로 시작해야 한다.
• 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다.
• 예약어는 식별자로 사용할 수 없다.