자바스크립트 시작하기

JavaScript30 Challenge는 실제 웹페이지의 인터랙션을 Day 당 한 페이지씩 구현해보도록 구성되어있습니다. 무작정 코드를 따라치기보다는 기초문법을 정리하고 시작하는 편이 효율적 일 것 같아, 공부할 겸 본 포스트를 작성합니다. 대부분 MDN web documentation에 있는 내용을 정리한 것 입니다. 더 자세한 내용을 확인하려면 링크를 따라들어가 docs를 직접 확인하는 것도 좋습니다.

1. JavaScript는 주로 클라이언트 사이드에서 웹 페이지의 동적 인터랙션을 제공하기 위해 사용되는 *동적 프로그래밍 언어입니다. 

*동적 프로그래밍 언어는 컴파일 타임에 수행되는 작업을 런타임에 수행 할 수있는 프로그래밍 언어이다. 예를 들어 JavaScript에서는 프로그램이 실행되는 동안 변수의 유형을 변경하거나 새 속성이나 메소드를 객체에 추가 할 수 있다.

2. JavaScript는 Java가 아닙니다.

이름이 비슷하다는 이유로 Java와 혼동하기도 하지만, 이 둘의 문법, 의미론, 그리고 사용 목적은 매우 다릅니다. JavaScript가 본래의 이름인 LiveScript를 고수했다면, 보다 직관적으로 언어의 목적을 전달 할 수 있었을 것 입니다.

3. 입출력 개념이 없습니다.

코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환되는 인터프리터형 언어이기 때문입니다. 따라서 대부분의 (컴파일러형) 프로그래밍 언어와 달리 입출력 개념이 없습니다. 외부 세계와 통신하기 위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 

4. 다양한 호스트 환경에 사용할 수 있습니다.

대부분의 호스트 환경은 브라우저(예를 들어 Firefox, Chrome.) 이고, Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품, Node.js 와 같은 서버 측 환경에서도 사용할 수 있습니다. 그리고 NoSQL 데이터베이스, Apache CouchDB, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 GNOME 과 같은 데스크톱 환경까지 JavaScript가 사용되는 분야는 계속 넓혀지고 있습니다.

Basic Syntax for JavaScript.

- 웹 콘솔을 키면 브라우저 내에서 간단한 코드를 테스트해볼 수 있습니다. 

- Firefox와 Chrome의 경우 단축키 ` Shift+Ctr+I `를 통해 바로 웹콘솔 창을 켤 수 있습니다. 

- 한 줄 끝에 있는 ; (세미콜론)이 statement의 끝을 나타냅니다. 

 (자세한 세미콜론 규칙 안내는 여기로)

- 대소문자를 구분합니다.

- built-in Error Type들이 있습니다.

- 데이터 타입 (Data Types):

Type	설명	예제
String	문자열, 일련의 텍스트. 자바스크립트에서는 문자열도 객체이다.	var Name = 'hon';
Number	숫자.	var Age = 300;
Boolean	true / false 값.	var Flag = true;
Array	여러 값을 하나의 단일한 reference에 저장할 수 있도록 해주는 구조.	var myArray = [1, 2, 3, 4];
Object	data와 instructions를 담고 있는 객체. 아래의 타입들이 포함된다. 함수 (Function), 배열 (Array), 날짜 (Date), 정규식 (RegExp)	var SelctQuery = document.querySelector('h1');
null	값이 없음을 나타내는 object 타입.	var empty = ""
undefined	아직 어떠한 값(data)도 주어지지않은 정의되지 않은 object 타입.

- 변수의 종류 (Variables)

keyword
let	블록 유효 범위 변수. 선언된 변수가 포함 된 함수 블록에서만 사용할 수 있다.
const	값이 변경되지 않는 변수 선언.
var	위의 변수들과 같은 제한을 가지고 있지 않은 일반적인 변수선언.

- 연산자의 종류 (Operators)

keyword
+	두 수를 더하기, 문자열 합치기.
-	빼기
*	곱하기
/	나누기
%	나머지
=	할당: 우변의 값(data)을 좌변의 변수에 할당함.
===	일치연산자: 두 값이 동등한지 아닌지에 따라 true/false 값을 반환.
==	일치연산자인데, ===와 다른 점이 있다. 비교하는 두 값이 서로 타입이 다를 때 강제로 타입을 맞춰준다.
! , !==	두 값이 동등한지 확인하고, 논리적으로 반대인 값을 반환; true면 false로, false면 true로.