728x90
반응형
8장 자바스크립트로 웹 동작 구현하기
1. 자바스크립트 코드 작성 방법
HTML 파일과 자바스크립트 연결
내부 스크립트(internal script)
HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법
// index.html
<body>
<script>
document.write("내부 스크립트 방법");
</script>
</body>
외부 스크립트 방법(external script)
별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성
js 파일을 HTML 문서에서 script 태그로 연결하는 방법
// script.js
document.write("외부 스크립트 방법");// index.html
<body>
<script src="script.js"></script>
</body>2. 프로그래밍 시작 전 알아 두기
주석
- 한 줄 주석: // 기호(슬래시 2개)
- 여러 줄 주석: /* 기호 */ 기호 사이에 작성
// 한 줄 주석
/*
여러 줄 주석
*/오류 확인 방법
프로그래밍 언어 실행하는 방법
- 컴파일(compile) 방식
- 코드를 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 한 번 변환 후 실행하는 방식
- 인터프리터(interpreter) 방식
- 코드를 한 번에 한 줄 씩 실행하는 방식
=> 오류 발생 -> 오류 발생 메시지 + 줄 번호 콘솔창에 출력, 오류 발생 시점부터 실행 멈춤 - 자바스크립트
- 코드를 한 번에 한 줄 씩 실행하는 방식
9장 자바스크립트 기초 문법 살펴보기
프로그래밍 언어(programming language)
- 컴퓨터(기계)에 명령 또는 연산을 수행하게 할 목적으로 설계한 언어
- 사람이 컴퓨터와 의사소통할 수 있게 해줌
1. 변수와 상수
변수/ 변수 선언 키워드 let/ 상수/ 식별자 명명 규칙
변수(Variant)
- 변하는 수
- 값이 변하는 데이터를 저장하고 관리하기 위한 공간
var num = 10 + 20;
// 키워드 식별자 연산자 표현식 세미콜론- 키워드(keyword) = 예약어(reserved word)
- 어떤 역할이나 기능이 정해진 특별한 단어
- ex. 변수라는 공간 생성 -> var 키워드
- async/ await/ break/ case/ catch/ class/ const/ continue/ debugger/ default/
delete/ do/ else/ enum/ export/ extends/ false/ finally/ for/ function/
if/ implement/ important/ in/ instanceof/ interface/ let/ new/ null /package
private/ protected/ public/ return/ static/ super/ switch/ this/ throw/ try
ture/ typeof/ void/ while/ with/ yield
- 식별자(identifier)
- 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름
- 변수 -> 컴퓨터 메모리에 저장
=> 메모리 추상적 -> 사람이 이해하고 사용하기 쉽게 특정 공간을 식별할 수 있는 식별자 사용해 나타냄 - 앞에 사용된 키워드의 역할에 따라 다르게 부여
- ex. 변수를 생성하는 var, let, const 등 키워드와 함께 사용 => 변수명
- 키워드는 식별자로 사용할 수 X
- 연산자(operator)
- 어떠한 연산 작업을 하는 데 사용하는 기호
- ex. 할당 연산자(=): 우변에 있는 데이터를 좌변에 할당하는 역할
- 표현식(expression)
- 평가(evaluatoin, 표현식 실헹 -> 하나의 값 만든는 과정)되어 하나의 값 반환하는 식 or 코드
- 값(value)
- 더 이상 평가할 수 없는 데이터
- 세미콜론(semicolon)
- 하나의 문(statement, 문법)이 끝났음을 의미
- 하나의 명령문이 끝났음을 명시적으로 표현
- 선언, 할당, 초기화
- 변수를 선언한다: let, const 키워드 -> 변수의 식별자 지정
- 값을 할당한다: 할당 연산자(=) -> 우변에 있는 값을 변수 공간에 대입(저장)
- 변수를 초기화한다: 선언 + 할당
- var num = 10 + 20;
변수 선언 키워드 let
- var 키워드보다 기능 개선
- ES6에서 추가 -> 모든 웹 브라우저 완벽하게 지원 X
- 변수명 중복 불가능
- 오류 메시지: Uncaught SyntaxError: Identifier 'num' has already been declared
- 변수명 실수로 재선언하는 경우 X
- 호이스팅(hoisting) X
- var 키워드로 변수 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려 실행하는 것
- 스코프 범위가 달라서 실무에서 let 키워드로 선언 권장
// var 키워드
console.log(num);'
var num = 10; // 실행 결과: undefined
/* 호이스팅에 의해 아래와 같이 작동
선언부가 최상위로 올라감
-> 변수 출력 시 값 X But, 선언 O => 오류 X */
var num;
console.log(num);
num = 10;
// let 키워드
console.log(num);
let num = 10; // 실행 결과: Uncaught ReferenceError: num is not found상수
const
- ES6에서 추가
- 기본 내용은 let 키워드와 같음
- (변수명 중복 선언과 호이스팅 X, 스코프 차이 O)
- 재할당 X -> 상수 변수(constant variable)를 선언할 때 사용하는 키워드
- 선언 먼저하고 할당 나중에 하는 것 X
// let 변수
let num = 10;
num = 30;
console.log(num); // 실행 결과: 30
// const 변수
const num = 10;
num = 30;
console.log(num); // 실행 결과: Uncaught TypeError: Assignment to constant variable.
const num;
num = 10; // 실행 결과: Uncaught SyntaxError: Missing initializer in const declaration식별자 명명 규칙
- 강제적
- 키워드 사용 X
- 불가능 ex. var, let, const
- 공백 포함 X
- 불가능 ex. my School, like food
- 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용
- 불가능 ex. *name, #age, @email
- 키워드 사용 X
- 관용적
- 영문으로만 작성
- (+) ex. name, age
- (-) ex. 이름, 나이
- 의미 있는 단어로 작성
- (+) ex. name, age(이름과 나이 저장 시)
- (-) ex. a, b (이름과 나이 저장 시)
- 영문으로만 작성
식별자 표기법
- 카멜 표기법(camel case)
- 첫 글자: 영문, 2개 이상의 단어 조합 -> 각 단어의 첫 글자: 대문자
- 변수명, 함수명, 객체의 속성명
- ex. firstName, lastName
- 언더스코어 표기법(underscore case)
- 2개 이상의 단어 조합
- 상수의 식별자
- ex. FIRST_NAME, last_name
- 파스칼 표기법(pascal case)
- 각 단어의 첫 글자: 대문자
- 생성자 함수명 작성 시 사용
- ex. FirstName, LastName
2. 자료형(data type)
문자열/ 숫자형/ 논리형/ undefined/ null/ 객체
- 자바스크립트에서 사용할 수 있는 데이터의 종류
- 기본(primitive) 자료형: 문자(string), 숫자(number), 논리(boolean), undefined, null, Symbol
- 참조(reference) 자료형: 객체(object)
문자열
- 큰따옴표("")나 작은따옴표('')로 둘러싸인 값의 형태
- 시작과 끝의 따옴표가 같아야 함
- 실행결과: Uncaught SyntaxError: Invalid or unexpected token
- 문자열 안에 따옴표 포함 -> 포함되지 않은 따옴표로 문자열 감싸서 정의
- let string1 = '문자열은 큰따옴표(")로 감싸면 됩니다.';
- 문자열에 큰따옴표, 작은따옴표 둘다 포함 -> 문자열 연결 연산자(+) or 이스케이프 문자
- 이스케이프 문자
- \': 작은따옴표(single quotes)
- \": 큰따옴표(double quotes)
- \n: 줄 바꿈(new line)
- \t: 수평 탭(horizontal tab)
- \\: 역슬래시(backslash)
- 이스케이프 문자
- 템플릿 문자열
- ES6에서 추가
- 백틱(`)으로 문자열 정의하는 방법
- 기존 문자열과 다른점
- enter 눌렀을 때 줄 바꿈 적용(이스케이프 문자 사용하지 않아도 됨)
- ${} 문법 이용해 문자열에 변수 or 식을 넣을 수 있음
숫자형(숫자 자료형)
- 정수, 실수 구분 X 하나의 숫자형으로 취급
- But, 부동 소수점 방식으로 실수 표현 -> 실수 사용 시 주의
논리형(논리 자료형)
- 참 or 거짓에 해당하는 논리 값인 true, false
- 논리적인 연산으로 구할 수 있음
let boolean1 = 10 < 20;
let boolean2 = 10 > 20;
console.log(boolean1); // true
console.log(boolean2); // false특수 자료형
undefined
- 변수 or 상수를 컴퓨터 메모리 공간에 선언 -> (필수) 생성한 공간에 저장할 데이터 할당
- 할당 X -> 자바스크립트 내부적으로 임시 데이터(undefined) 할당
null
변수나 상수 선언하고 의도적으로 선언한 공간 비워 둘 때 할당
객체(object)
객체 자료형에서 파생되는 자료형: 배열, 객체 리터럴, 함수
- 배열(array)
- 복수의 데이터를 정의할 수 있는 자료형, 모든 자료형 저장할 수 있음
- 요소: 배열로 정의한 데이터
- 인덱스(index)
- 배열 요소에 접근
- 각 데이터가 있는 위치를 가리키는 숫자 0부터 시작
- 데이터 접근: 변수명[인덱스 숫자]
- 객체 리터럴
- 객체를 정의하는 가장 간단한 방법
- { key1:value1, key2:value2 } => 속성: key, value
- 값을 키로 구분 -> 값의 의미 바로 파악할 수 있음
- 값에 접근: 변수명.키 or 변수명['키']
3. 연산자(Operator)
비교 연산자/ 산술 연산자/ 대입 연산자와 복합 대입 연산자/ 논리 연산자/ 삼항 연산자/ 연산자 우선순위/ 형 변환
- 연산자: 어떤 연산을 처리하는 데 사용하도록 미리 정의된 기호
- 피연산자: 연산자가 연산을 수행하는 데 필요한 연산 대상
산술 연산자
덧셈, 뺄셈, 곱셈, 나눗셈과 같은 수학 연산을 수행하는 연산자
- 이항 산술(+, -, *, /, %(나머지), **(거듭제곱))
- 단항 산술(++, --): 연산을 수행하는 데 피연산자가 1개만 필요한 연산자, 증감 연산자(증가/감소 연산자)
- 전치 연산(++x, --x): ~하기 전에 증감
- 후치 연산(x++, x--): ~한 후에 증감
// 전치 연산
let num = 10;
let subNum = ++num;
console.log(subNum); // 11
// 후치 연산
let num = 10;
let subNum = num++;
console.log(subNum); // 10- 단항 부정(-)
- 양수 -> 음수/ 음수 -> 양수
- 숫자형 데이터가 할당된 변수에만 사용할 수 있음
대입 연산자와 복합 대입 연산자
데이터를 대입(할당)하는 연산을 수행하는 연산자
- 대입 연산자(=)
- 복합 대입 연산자(+=, -=, *=, /=, %=, **=)
- ex. x+y -> x += y: x에 x+y를 대입
비교 연산자
- 피연산자를 비교한 뒤, 논리형 값인 참(true), 거짓(false)를 반환하는 연산
- ==(값 비교), ===(자료형 비교), !=, !==, <, <=, >, >=
논리 연산자
- 피연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자 반환하는 연산
- ""(빈 문자열), undefined, 0, null: 거짓/ 나머지: 참
- AND 연산자(&&) -> x && y: x 참 -> y/ 거짓 -> x
- OR 연산자(||) ->x || y: x 참 -> x/ 거짓 -> y
- NOT 연산자(!): true -> false/ false -> true
삼항 연산자
- 세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓 -> 나머지 두 항에 있는 피연산자 선택적으로 반환하는 연산
- ex. x ? y : z -> x가 참 -> y/ 거짓 -> z
연산자 우선순위
- 그룹 연산자, 대괄호 연산자, 마침표 연산자
- 증가 연산자, 감소 연산자, 단항 부정 연산자, NOT 연산자, delete 연산자, new 연산자, typeof 연산자
- 나눗셈 연산자, 곱셈 연산자, 나머지 연산자
- 덧셈 연산자, 뺄셈 연산자
- 비교 연산자
- 동등, 일치, 부등, 불일치
- AND 연산자
- OR 연산자
- 삼항 연산자
- 대입(할당) 연산자, 복합 대입 연산자
- 멀티 연산자
형 변환
데이터 자료형이 다른 자료형으로 바뀌는 것
- 암시적 형 변환
- 사용자가 형 변환 의도 X 자바스크립트에서 자체적으로 형 변환하는 것
- 명시적 형 변환
- 드러나게 형 변환을 처리하는 것
// 암시적
const result = 10 + "10";
console.log(result); // 1010 숫자형 데이터 -> 문자열 데이터
// 명시적
let num = 10;
let strNum = "10";
if(String(num) == strNum) {
console.log(`equals`);
}4. 조건문 다루기
if, else, else if 문/ switch 문/ if 문 vs switch 문
if, else, else if 문
- if문: if 뒤에 오는 소괄호안의 조건식 참 -> 중괄호 안의 코드 실행하는 조건문
- 조건식 무조건 참/거짓으로 평가
- else 문: if문의 조건식 거짓 -> 실행되는 블록문
- else if 문: if문에 조건을 추가하고 싶을 때 사용
- 개수 제한 X, 단독 사용 X, if 문 다음에 else 문 전에
if(조건식) {
// 조건식 참 -> 블록문 실행
}if(조건식) {
// 조건식 참 -> 블록문 실행
} else {
// 조건식 거짓 -> 블록문 실행
}if(조건식1) {
// 조건식1 참 -> 블록문 실행
} else if(조건식2) {
// 조건식2 참 -> 블록문 실행
} else {
// 조건식 모두 거짓 -> 블록문 실행
}블록문(block statement) == 블록 == 코드 블록
: 한 개 이상의 자바스크립트 코드를 중괄호로 묶은 것
중첩하기
분기 처리: 어떤 조건식을 만족할 때 블록문을 실행할지 결정하는 것
if(true){
if(true){
// 블록문
}else{
// 블록문
}
}else if(true){
if(true){
// 블록문
}
}else{
if(true){
// 블록문
}else if(true){
// 블록문
}else{
// 블록문
if(true){
// 블록문
}
}
}switch 문
- 소괄호 안의 값(key)과 일치하는 case문 있을 때 해당 코드 실행하는 조건문
- 일치 여부 확인 -> 일치 연산자(===)를 사용한 비교 연산처럼 값, 자료형 함께 비교
- 하나 이상의 case 문, default 문, break 문
- 의도적으로 break문 생략할 수 있음
- case 문과 default 문 중 하나 이상 있어야 함
switch(key){
case value1:
// key가 value1 -> 실행할 블록문
break;
case value2:
// key가 value2 -> 실행할 블록문
break;
default:
// 아무것도 일치 X -> 실행할 블록문
break;
}if 문 vs switch 문
조건의 형태
- if 문: 조건에 식(statement) 사용
- 범위를 이용한 조건
- switch 문: 조건에 결정(value) 사용
- 값이 하나일 때
// if 문
let score = 90;
if(score >= 90 && score < 100){
console.log("A++ 학점");
}
// switch 문
let score = 90;
switch(score){
case 90:
(중략)
case 98:
case 99:
console.log("A++ 학점");
break;
default:
break;
}5. 반복문(loop) 다루기
while 문/무한 반복문/ do...while 문/ for 문/ for ...in/ break 문/continue 문
while 문
특정 조건을 만족하는 동안 블록문 실행
while(조건식){
// 조건식 참 -> 실행
}무한 반복문
반복문의 조건이 계속 참으로 평가 -> 끝나지 않고 무한히 실행되는 것
=> 반복문 조건이 거짓(false)되는지 신경 써야함
do...while 문
특정 조건이 참으로 평가되는 동안 do 다음에 오는 블록문 실행
do{
// 블록문
}while(조건식);- while 문: 블록문 수행하기 전에 조건식 평가
- do...while 문: 블록문 한 번 수행한 후에 조건식 평가
for 문
- 횟수 지정 -> 지정한 횟수 끝날 때까지 블록문 반복 실행하는 반복문
- 순서: 초깃값 -> 조건식 -> 블록문(조건식 참) -> 증감식 -> 조건식
- 배열과 같은 자료형을 반복 횟수 용도로 사용할 수 있음
- 배열.length: 배열의 데이터 개수(배열의 길이)
for(초깃값; 조건식; 증감식){
// 블록문
}for ...in
- ES6에서 추가
- for 문의 소괄호 안에 in 키워드
- R: 탐색의 대상이 되는 배열 or 객체 리터럴
- L: 배열 or 객체 리터럴 탐색해서 키를 저장할 가변수(임시 변수)
- 배열 반복 -> 순서대로 접근하는 것 보장 X
for(가변수 in 배열/객체 리터럴){
// 블록문
}break 문
종료 조건이 만족하지 않아도 인위적으로 반복문을 종료하는 방법
반복문 즉시 종료할 수 있음 -> 반복문 내부에 break 바로 사용 X, if 문으로 처리하는 것이 일반적
continue 문
반복문을 건너뛰고 실행
// 홀수 -> 반복문 건너뛰고 짝수만 출력
for(let i = 1; i <= 10; i++){
if(i % 2 === 1) continue;
console.log(i);
}출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
