웹 페이지에서 동적인 동작을 구현하기 위해 자바스크립트(JavaScript)를 사용한다. 아래 내용은 자바스크립트의 기본 개념과 문법을 정리한 것이다.
Part 3. 자바스크립트 기초
8.1 자바스크립트 코드 작성 방법내부 스크립트 방법 (internal script)
HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성
외부 스크립트 방법 (external script)
별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성
이 파일을 HTML 문서에서 script 태그로 연결
script 태그의 사용 위치
script 태그는 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 body 태그가 끝나기 전에 사용
2. 자바스크립트 코드 실행하기
웹 브라우저의 개발자 도구에서 지원하는 콘솔창 활용하기
VSCode의 Code Runner 확장 프로그램 활용하기
NodeJS 설치
실행 시
글자 깨질 경우 document.write()로 웹 페이지에 HTML 콘텐츠 출력
document.write() 활용 예제파일명: HTMLwrite.html
8.2 프로그래밍 시작 전 알아 두기한 줄 주석
// 기호(슬래시 2개)로 작성
단축키: Ctrl + /
여러 줄 주석
/* 기호와 */ 기호 사이에 작성
단축키: Shift + Alt + A
2. 자바스크립트 오류 확인 방법
컴파일 방식
모든 코드를 기계어로 변환 후 실행
인터프리터 방식
코드를 한 번에 한 줄씩 실행
오류 발생 시
오류가 발생하면 그 즉시 실행을 멈추고 오류 메시지와 오류가 발생한 줄 번호를 웹 브라우저의 콘솔창에 출력
모든 오류 관련 메시지는 웹 브라우저의 콘솔창에서 확인 가능
9.1 변수와 상수
변수(variant) : 변하는 수. 값이 변하는 데이터를 저장하고 관리하기 위한 공간
키워드(keyword) : 자바스크립트 프로그래밍 언어에서 어떤 역할이나 기능이 정해진 특별한 단어 : 예약어(reserved word)라고도 함
식별자(identifier) : 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름
연산자(operator) : 어떠한 연산 작업을 하는 데 사용하는 기호
표현식(expression) : 평가되어 하나의 값을 반환하는 식 또는 코드
값(value) : 더 이상 평가할 수 없는 데이터
세미콜론(semicolon) : 하나의 문(statement, 문법)이 끝났음을 의미
선언, 할당, 초기화
변수 선언 : 변수를 생성하고 값을 저장하는 문법에서 var, let, const 키워드를 사용해 변수의 식별자를 지정하는 것
값 할당 : 할당 연산자인 = 기호로 우변에 있는 값을 변수 공간에 대입(저장)하는 것
변수 초기화 : 선언과 할당을 같이(한 번에) 하는 것
2. 새로운 변수 선언 키워드 let
변수명 중복이 불가능
호이스팅되지 않음
호이스팅(hoisting)
var 키워드로 변수를 선언하고 할당했을 때 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려 실행하는 것
스코프의 범위가 다름
자바스크립트에는 변수 타입 없음
변수 타입 선언하지 않음
변수에 저장되는 값에 대한 제약 없음
let score; // 변수 score 선언
let year, month, day; // year, month, day의 3 개의 변수 선언
let address = “서울시”; // address 변수를 선언하고 “서울시”로 초기화
age = 21; // let 없이, 변수 age를 선언하고 21로 초기화
let score; // 정상적인 변수 선언
int score; // 오류. 변수 타입 int 없음
score = 66.8; // 실수도 저장 가능
score = “high”; // 문자열로 저장 가능
3. 상수
상수(constant) : 변하지 않는 수
const 키워드는 재할당이 안 되는 특징 때문에 상수 변수(constant variable)를 선언할 때 사용하는 키워드라고 하기도 함
4. 식별자 명명 규칙
식별자에 키워드 사용 불가 예: var, let, const
식별자에 공백 포함 불가 예: my School, like food
식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용 예: *name, #age, @email
const.html 예제
9.2 자료형
큰따옴표나 작은따옴표로 둘러싸인 값
문자열에 따옴표가 포함된 경우
문자열에 포함되지 않은 따옴표로 감싸서 정의
문자열 연결 연산자(+) 또는 이스케이프 문자 사용
문자열 연결 연산자(+)
이스케이프 문자(, 역슬래시)
템플릿 문자열(`, 백틱)
2. 숫자형
정수, 실수를 포함한 모든 숫자
3. 논리형
논리 값(true, false)
4. undefined
변수에 아무런 값도 할당되지 않는 상태를 나타내는 값
5. null
변수를 의도적으로 비워 두기 위해 사용하는 값
6. 객체
배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형
배열(array) : 복수의 데이터를 정의할 수 있는 자료형
객체 리터럴 : 중괄호({})를 사용하며, 키(key)와 값(value)의 한쌍으로 이루어짐
9.3 연산자이항 산술 연산자
연산을 수행하는 데 피연산자가 2개 필요한 연산자
x + y : x에 y를 더함
x – y : x에 y를 뺌
x * y : x에 y를 곱함
x / y : x를 y로 나눔
x % y : x를 y로 나누어 나머지를 구함
x ** y : x의 y 거듭제곱
산술 연산 예제 (arithmetic.html)
단항 산술 연산자
단항 산술 연산자 : 연산을 수행하는 데 피연산자가 1개만 필요한 연산자
연산자를 앞에 사용하면 전치 연산, 뒤에 사용하면 후치 연산
x++(후치 연산), ++x(전치 연산) : x를 1 증가시킴
x--(후치 연산), --x(전치 연산) : x를 1 감소시킴
단항 부정 연산자
항상 피연산자 앞에 위치하며 피연산자의 부호를 부정하는 연산자
-x : x의 부호를 부정(음수 → 양수, 양수 → 음수)
2. 대입 연산자와 복합 대입 연산자
x = y : x에 y를 대입
복합 대입 연산자
3. 비교 연산자
피연산자를 비교한 뒤, 논리형 값인 참(true), 거짓(false)을 반환
x == y : x와 y의 값이 같으면 true를 반환
x === y : x와 y의 값과 자료형이 같으면 true를 반환
x != y : x와 y의 값이 다르면 true를 반환
x !== y : x와 y의 값과 자료형이 다르면 true를 반환
x < y : x가 y보다 작으면 true를 반환
x <= y : x가 y보다 작거나 같으면 true를 반환
x > y : x가 y보다 크면 true를 반환
x >= y : x가 y보다 크거나 같으면 true를 반환
4. 논리 연산자
연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자를 반환
x && y → x가 참이면 y를 반환하고, 거짓이면 x를 반환
x || y → x가 참이면 x를 반환하고, 거짓이면 y를 반환
!x → x가 참이면 false를 반환하고, 거짓이면 true를 반환
5. 삼항 연산자
세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓에 따라 나머지 두 항에 있는 피연산자를 선택적으로 반환
x ? y : z → x가 참이면 y를 반환하고, x가 거짓이면 z를 반환
6. 연산자 우선순위
연산자를 여러 개 사용했을 때 어떤 연산자를 먼저 연산할지를 결정하는 기준
가능한 한 우선순위가 가장 높은 그룹 연산자를 사용해 식의 우선순위를 단순하게 정리하는 것이 좋음
7. 형 변환
데이터의 자료형이 다른 자료형으로 바뀌는 것
암시적 형 변환
사용자가 형 변환을 의도하지 않았지만, 자바스크립트에서 자체적으로 형 변환
개발자가 놓친 부분이라는 의미이므로 암시적 형 변환이 발생하지 않도록 코드에 형 변환을 명확하게 표시하는 것이 좋음
let sum = 10 + 20 * 3;
//소괄호 적용해서 연산 순서를 변경 가능
//let sum = (10 + 20) * 3;
console.log(sum);
let num = 10;
let result = num *= 3;
console.log(result); //30
let sum = 10 + 20 * 3;
//소괄호 적용해서 연산 순서를 변경 가능
//let sum = (10 + 20) * 3;
console.log(sum);
let num = 10;
let result = num *= 3;
console.log(result); //30
//단항 산술 연산자 (후치, 전치 연산)
let increment = 10;
increment++;
let decrement = 10;
decrement--;
console.log(increment); //11
console.log(decrement); //9
let num1 = 10;
let subNum = ++num1; // 앞에 사용했으므로 전치 연산 방식
console.log(subNum); // 11
let subNum1 = num1++ // 뒤에 사용했으므로 후치 연산 방식
console.log(subNum1); // 11
console.log(num1); // 12
let num2 = -10;
num2 = -num2;
console.log(num2); // 10
let num3 = 2;
console.log(num3 *= 3); // 6
let x = 10;
let y = "10";
console.log( x == y); // true
console.log(x === y); // false 등호 3개는 자료형까지 비교한다
let i = false;
let j = true;
let f = i && j; // and연산자 false
console.log(f);
let k = i || j; //or연산자 true
console.log(k);
let score = 90;
let grade = score >= 90 ? 'A+' : 'B'; // 삼항 연산자
console.log(grade); // A+
let result1 = 10 + "10"; // 형 변환
console.log(result1); // 1010
console.log(typeof(result1)); // string
