01. 자바스크립트의 특징
1.1. 자바스크립트란?
웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그램.
JS는 브라우저뿐만 아니라 서버에서도 실행 가능, 자바스크립트 엔진이라 불리는 특별한 프로그램이 들어있는 모든 디바이스에서도 동작한다.
특히 브라우저에는 엔진 (자바스크립트 가상 머신)이 내장되어 있다.
V8 - Chrome, Opera
SpiderMonkey- Firefox
IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용. 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용된다.
1.2. Script란?
JS로 작성한 프로그램, 웹페이지의 HTML 안에 작성할 수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다.
특별한 준비나 컴파일 없이 보통의 문자 형태로 작성 및 실행이 가능하다.
1.3. 브라우저에서의 일
- 실행 환경에 JS 능력은 영향을 받는다. Node.js (임의의 파일 읽거나 쓰기, 네트워크 요청 수행 함수 지원) , 브라우저 환경 (웹 페이지 조작, 클라이언트와 서버의 상호작용에 관한 일)
- 할 수 없는 일: 브라우저는 보안을 위해서 기능에 제약을 걸어둠. (악성 웹 페이지가 개인 정보에 접근 및 사용자의 데이터 손상을 막기 위해서)
1.4. 자바스크립트만의 강점
- HTML / CSS와 완전히 통합될 수 있음
- 간단한 일은 간단하게 처리할 수 있게 해줌
- 모든 주요 브라우저에서 지원하고 기본 언어로 사용됨
02. 매뉴얼과 명세서
2.1. 명세서
ECMA-262 명세서: JS와 관련된 정보를 담은 공식 문서, 매년 새로운 버전이 업데이트 되기 때문에 참고하기에는 적합하지 않음.
2.2. 메뉴얼
Mozila 재단의 MDN JS: 다양한 예제와 정보, 특정 함수나 매서드에 대한 깊이 있는 정보를 얻기에 좋음
2.3. 호환성 표
끊임없이 발전하는 언어기 때문에 특정 브라우저나 엔진이 기능을 지원하는지 확인해야 한다.
- Can I use : 브라우저가 특정 기능을 지원하는지 확인 가능
- 자바스크립트 기능 목록 : 해당 기능을 특정 엔진이 지원하는지 확인할 수 있음
2.4. 그외..
경량 에디터: 속도가 빠르고 단순해서 빠르게 수정할 수 있음
ex) Atom, Visual Studio Code, Sublime text...
03. Hello, world!
3.1. 'script' 태그
웹 페이지에 자바스크립트 코드를 추가하기 위해서 사용하는 태그. type, language 속성은 더 이상 필수가 아님.
스크립트 안에 삽입할 내용이 너무 많으면 외부 스크립트 방식을 사용할 수 있다. 따로 파일로 소분하여 저장했다가 파일 경로로 가져올 수 있음.
<script src="/path/to/script.js"></script>
04. 코드 구조
4.1. 문
어떤 작업을 수행하는 문법 구조 + 명령어를 의미.
코드에 원하는 만큼 작성, 세미콜론으로 구분.
- JS에서는 줄 바꿈이 세미콜론을 의미하지만 대부분의 경우가 항상을 의미하지 않는다. 그렇기 때문에 세미콜론을 사용하도록 권장.
4.2. 주석
한 줄짜리 주석은 두 개의 슬래시 //로 시작, 여러 줄은 /* */ 으로 끝난다. 단축 키는 보통 ctrl + /, 여러 줄은 ctrl + shift + /
05. 엄격 모드
자바스크립트는 기존의 기능을 변경하지 않으면서 새로운 기능이 추가됨, 기존에 작성한 코드는 절대 망가지지 않지만 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제됨.
ES5가 등장하기 전까지 지속되었다. 그러나 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 이 변경사항 대부분은 ES5의 기본 모드에서 활성화가 되지 않음.
대신 use strict 를 사용해 엄격 모드를 활성화 했을 때만 이 변경 사항이 활성화 된다.
use strict 가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작한다. 반드시 최상단에 위치해야 한다.
브라우저 콘솔에 사용할 때는 shift + enter키로 줄바꿈 하여 사용하면 됨.
" 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠습니다. "
06. 변수와 상수
6.1. 변수
데이터를 저장할 때 쓰이는 이름이 붙는 저장소.
let 키워드를 사용하여 변수를 생성한다. 할당 연산자 =를 사용해 변수 안에 데이터를 저장한다.
let 대신 var
var는 let 과 거의 동일하게 동작한다. 오래된 방식이기 때문에 후에 다룸.
변수는 값이 변경될 수 있기 때문에 원하는 만큼 값이 변경 가능하다.
변수 명명 규칙은 다음과 같다.
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.
- 첫 글자는 숫자가 될 수 없습니다.
let Hello = 'Hello world!';
let message;
// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;
// 이제 두 변수는 같은 데이터를 가집니다.
alert(Hello); // Hello world!
alert(message); // Hello world!6.2. 상수
변화하지 않는 변수를 선언할 때에는 let 대신 const 를 사용한다. const로 선언한 변수를 상수 (constant)라고 부른다.
- 대문자 상수는 하드 코딩한 값의 별칭을 만들 때 사용한다. (COLOR_ORANGE)
- 일반 상수는 페이지 로드 전에 정해지지 않는 값들에 할당한다. 최초 할당 이후에 변경되기 않기 때문에 여전히 상수이다. (pageLoadTime)
7. 자료형
7.1. 숫자형
정수 및 부동소수점 숫자(floating number) 을 나타낸다.
그 외에 Infinity, -Infinity, NaN의 특수 숫자 값이 포함된다.
7.2. BigInt
내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다.
BigInt 형의 값은 끝에 n을 붙이면 만들 수 있다.
7.3. 문자형
자바스크립트에선 문자열을 따옴표로 묶는다.
- 큰따옴표: "Hello"
- 작은 따옴표: 'Hello'
- 백틱 (역 따옴표):
`Hello`
백틱은 변수나 표현식을 감싼 후 ${...} 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 손쉽게 쓸 수 있다.
7.4. 불린형
true 나 false 두 가지 값밖에 없는 자료형.
7.5. null 값
존재하지 않는 값, 비어있는 값, 알 수 없는 값
7.6. 'undefined' 값
값이 할당되지 않은 상태를 나타낼 때 사용.
변수는 선언했지만 값을 할당하지 않았다면 해당 변수에 undefined 가 자동으로 할당된다.
7.7. 객체와 심볼
객체형은 특수한 자료형이다.
객체형을 제외한 다른 자료형은 한 가지만 표현할 수 있기 때문에 원시 자료형이다. (primitive)
그러나 객체는 데이터 컬렉션이나 복잡한 개체 (entity) 를 표현할 수 있다.
심볼형은 객체의 고유학 식별자를 만들 때 사용된다.
7.0. typeof 연산자
- 연산자: typeof X
- 함수: typeof (X)
두 가지 형태로 사용하여 인수의 자료형을 확인할 수 있다. 괄호를 사용하면 합쳐진 자료형의 결과의 자료형 또한 알 수 있다.
8. 상호작용
8.1. alert
함수가 실행되면 사용자가 '확인(ok) ' 버튼을 누를 때까지 메시지를 보여주는 창이 뜬다. 이 메세지 창을 모달 창이라고 부른다.
모달은 페이지의 나머지 부분과 상호작용이 불가능하다는 뜻을 가지고 있다.
alert("Hello");
8.2. prompt
두 개의 인수를 받는다. 함수가 실행되면 텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 모달 창을 띄워준다.
prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. 사용자가 입력을 취소한 경우는 null이 반환됩니다.
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.
8.3. 컨펌 대화상자
confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다. 확인을 누르면 true, 그 외에는 false 를 반환한다.
let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.
