<모던 JavaScript 튜토리얼 - 코어 자바스크립트>
https://ko.javascript.info/
🖐️Hello, world!
코어 자바스크립트 (core JavaScript) - 실행 환경에 독립적
<script> 태그
웝페이지에 자바스크립트 코드 삽입
모던 마크업, 외부 스크립트
- type : 모듈 사용
<script type=…> - language : 사용중인 언어
<script language=…> - src : 외부 스크립트 파일, URL 삽입 (*내부코드 무시됨)
<script src="/path/to/script.js"></script>
그 외
- 메시지 창 띄우기
alert( 'Hello, world!' );
과제
1. alert 창 띄우기
<!DOCTYPE html>
<html>
<body>
<script>
alert( "JavaScript!" );
</script>
</body>
</html>2. 외부 스크립트를 이용해 alert 창 띄우기
<!DOCTYPE html>
<html>
<body>
<script src='alert.js'></script>
</body>
</html>🔧코드 구조
문(statement)
- 문법 구조(syntax structure)와 명령어(command)
- 서로 다른 문은 세미콜론(;)으로 구분 (줄바꿈이 있다면 생략 가능 = automatic semicolon insertion(세미콜론 자동 삽입))
세미콜론(; semicolon)
- 줄바꿈이 있다면 생략 가능 = automatic semicolon insertion(세미콜론 자동 삽입)
- '항상'은 아니기 때문에 세미콜론은 넣는 것이 안전함!
주석(comment)
- 한줄
// - 여러줄
/* ... */
(중첩 주석은 지원X/* /* ... */ */)
Window 단축키
- 한줄 주석
Ctrl+/ - 여러줄 주석
Ctrl+Shift+/
Mac 단축키
- 한줄 주석
Cmd+/ - 여러줄 주석
Cmd+Option+/
👮엄격 모드
기존의 기능을 제정한 변경사항 활성화
use strict
"use strict";
- 최상단에 오면 스크립트 전체에 엄격 모드 적용
- 함수 맨앞에 오면 함수만 엄격 모드 실행
- 사용 후 취소할 수 없음
브라우저 콘솔
브라우저 콘솔에서 사용하는 법
1. 'use strict'; 입력
2. Shift + Enter
3. 코드 입력
4. Enter 실행
필요성
모던 스크립트는 '클래스'와 '모듈'을 제공
이미 둘을 사용한다면 엄격 모드가 자동 적용
이 튜토리얼에 나오는 모든 예시는 엄격 모드 적용
🧩변수와 상수
변수(variable)
-
데이터를 저장하는 용도 (이름이 붙은 저장소)
-
변수 선언 (한 번만 선언)
let 변수; -
변수 안에 데이터 저장
변수 = 'Hello'; -
변수 선언과 값 할당
let 변수 = 'Hello'; -
한 줄에 여러 변수 선언, 값 할당
let user = 'John', age = 25, message = 'Hello'; -
두 개 선언 후 변수 데이터 복사
let Hello = 'Hello world!';
let message;
message = Hello; -
다른 변수 선언 방법 (차이점 추후에 다룸)
var- 예전 변수 선언 키워드
함수형 언어 (functional)
- 변수값 변경 금지
- Scala (스칼라)
- Erlang (얼랭)
변수 명명 규칙
- 변수명에는 오직 문자와 숫자, 기호
$,_만 들어갈 수 있다. - 첫 글자에 숫자는 올 수 없다.
- 대소문자를 구별한다. (
apple과AppLE은 다른 변수) - 영어 외 다른 언어 사용 X
- 예약어 사용 X (let, class, return, ...)
- let 없이 X
num = 5;
카멜 표기법 (camelCase)
여러 단어를 조합하여 변수명을 만들 때, 단어를 차례대로 나열하면서
첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성 myVeryLongName
상수(constant)
- 변화하지 않는 변수
- 상수 선언
const myName = 'knk';
대문자 상수
- 값을 변수에 할당해 별칭으로 사용
- 대문자와
_로 구성 - 실행 전에 이미 값을 알고 있고 코드에서 그 값을 사용하는 경우 (ex. 색상)
const COLOR_RED = "#F00";
let color = COLOR_RED;
변수의 값이 절대 변하지 않음 = 상수
const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;
페이지가 로드되기 전까지는 정해지지 않음
최초 할당 이후에 변경되지 않으므로 상수
바람직한 변수명
간결하고 명확해야 한다.
참고
- 사람이 읽을 수 있는 이름
- 줄임말, 짧은 이름,
aX - 서술적이고 간결하게
data,valueX- 자신만의 규칙이나 소속 팀의 규칙
과제
1. 변수 가지고 놀기
<!DOCTYPE html>
<html>
<body>
<script>
let name = "John";
let admin = name;
alert(admin);
</script>
</body>
</html>2. 올바른 이름 선택하기
let ourPlanetName = "Earth"; //우리 행성명이 들어갈 변수
let currentUserName; //현재 접속 중인 사용자의 이름을 저장하는 변수3. 대문자 상수 올바로 사용하기
const birthday = '18.04.1982';
const age = someCode(birthday);
// 대문자 상수로 바꿔도 괜찮을까요?
const BIRTHDAY = '18.04.1982';
const AGE = someCode(BIRTHDAY);상수
birthday는 값이 정해져 있고 변하지 않기 때문에 대문자 상수로 적합하다.
반면,age는 런타임에 평가되고 나이는 매년 바뀌기 때문에 값이 변할 수 있으므로, 대문자 상수로 적합하지 않다.
