WEB/JavaScript
JavaScript 개요
p3chaeyeon
2024. 8. 18. 23:38
JavaScript
- HTML 페이지에 결과 출력
- HTML 페이지의 <body> 태그 안을 document(문서)라고 부른다
- Document document;
- <body> 안에 새로운 내용을 출력
- document.writ("출력할 내용");
- <body> 태그 안에 출력되는 내용이므로, 다른 HTML 태그를 포함하여 출력할 수 있다
⚒️ 예제
| // JavaScript\webapp\js | |
| exam01.html | document.write(" "); |
변수 & 상수
1. 개념
- 변수의 자료형은 값이 할당될 때 자동으로 결정된다
- var, let, const 으로 선언
//선언
var a;
var b;
//할당
a = 10;
b = 43.5;
2. 종류
cf) [Do it! HTML CSS JavaScript] 560p 변수 스코프, 호이스팅
cf) hoisting : 자바스크립트에서 변수와 함수의 선언이 코드의 실행 컨텍스트가 생성될 때 최상단으로 끌어올려지는 동작
| var | let | const | |
| hoisting | 함수 또는 전역 스코프의 최상단으로 끌어올려지는 것처럼 동작 이는 변수 선언부만 최상단으로 이동하고, 변수 초기화는 선언 위치에서 실행 |
let으로 선언한 변수도 호이스팅이 되지만, 변수를 선언하기 전에는 접근 불가능 // Temporal Dead Zone(임시 사각지대) |
const로 선언한 변수는 호이스팅되지만, 초기화되기 전에는 접근 불가능 let과 동일하게 Temporal Dead Zone이 적용 |
| 선언만 호이스팅되고, 초기화는 선언된 위치에서 이루어진다 선언되기 전에도 접근할 수 있지만 undefined가 반환 |
선언과 초기화 모두 호이스팅되지만, 선언되기 전에는 접근할 수 없으며 Temporal Dead Zone이 존재 | 선언과 초기화 모두 호이스팅되지만, 선언되기 전에는 접근할 수 없으며 Temporal Dead Zone이 존재 | |
| scope | 전역 변수, 구역 단위 함수 스코프 즉, 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다 |
지역 변수, 구역 단위 블록 스코프 즉, 변수가 선언된 블록({}) 내에서만 유효 |
|
| 중복 선언 (재선언) |
동일한 스코프 내에서 변수를 중복 선언 가능 | 중복 선언 금지 동일한 스코프 내에서 변수를 중복 선언 불가능 |
중복 선언 금지 동일한 스코프 내에서 변수를 중복 선언 불가능 |
| 재할당 | 가능 | 가능 | 불가능 |
| 상수 | 선언과 동시에 초기화해야 하며, 이후에는 값을 변경 불가능 단, 객체나 배열의 경우 내부 속성이나 요소는 수정 가능 |
일반적으로 let과 const를 사용하는 것이 권장된다
3. 예제
| // JavaScript\webapp\js | |
| exam02.html | |
| exam02-let.html | let |
| exam02-var.html | var |
| exam02-const.html | const |
자료형
JavaScript는 자료형이 딱히 없다 (굳이 나누자면 ↓)
| 종류 | 설명 | 예시 | |
| 원시 유형 | 숫자형 | 따옴표 없이 숫자로만 표기 | let birthYear = 2000; |
| BigInt | 숫자형으로는 표현할 수 없는 아주 큰 정수 끝에 n 을 붙여서 표시 |
let bigIntNumber = 12345678901234567890...n |
|
| 문자열 | 작은따옴표(' ')나 큰따옴표(" ")로 묶어서 표현 | let greeting = "Hello!"; let birthYear = "2000"; |
|
| 논리형 | true or false (소문자로만 표시) | let isEmpty = true; | |
| 복합 유형 | 배열 | 하나의 변수에 값을 여러 개 지정 | let seasons = ['봄', '여름', '가을', '겨울'] |
| 객체 | 함수와 속성을 함께 포함 | let date = new Date(); | |
| 특수 유형 | undefined | 자료형이 지정되지 않았을 때의 상태 예) 변수 선언만 하고 값을 할당하지 않은 변수 |
|
| null | 값이 유효하지 않을 때의 상태 | ||
1. 숫자형
- 정수
- 실수
2. 문자열
템플릿 리터럴 (Template literal)
- 새로운 문자열 표기법
backtick ( ` )
변수 처리는 ${변수}
⚒️ 예제
| // JavaScript\webapp\ES6 | |
| 01_templateLiterals.html | |
3. 논리형
- undefined
- null
4. 배열
배열명["값1", "값2", ... ]
배열명[] // 비어 있는 배열 선언
5. 자료형 변환
자료형 변환 함수
| Number() | 분자열이나 논리형 값을 숫자로 변환 |
| parseInt() | 문자열을 정수 숫자로 변환 |
| parseFloat() | 문자열을 실수 숫자로 변환 // Java 에는 parseFloat(), parseDouble() 2개 |
| String() | 숫자나 논리형 값을 문자열로 변환 |
| Boolean() | 괄호 안의 값을 논리형으로 변환 |
연산자
1. 산술 연산자
+ - * / %
++ -- // 증감 연산자
2. 할당 연산자 [대입 연산자]
= += -= *= /= %=
3. 비교 연산자
== === != !== < <= > >= ? : (삼항 연산자)
==, != vs ===, !===
| ==, != | 피연산자의 자료형을 자동으로 변환 |
| ===, !== | 피연산자의 자료형 변환 X |
3 == "3" // true
3 != "3" // false
3 === "3" // false
3 !== "3" // true
조건 연산자 (삼항 연산자)
(조건)? true 일 때 실행할 명령 : false 일 때 실행할 명령
4. 논리 연산자
&& (AND) || (OR) ! (NOT)
⚒️ 예제
| // JavaScript\webapp\js | |
| exam03.html | 산술 연산자 |
| exam04.html | 대입 연산자 |
| exam05.html | 증감 연산자 |
조건문
1. if
if (조건) {
조건 결과가 true 일 때 실행할 명령;
}
else {
조건 결과가 false 일 때 실행할 명령;
}
2. switch
switch (조건) {
case 값1: 명령1;
break;
case 값2: 명령2;
break;
......
default: 명령n;
}
3. 예제
| // JavaScript\webapp\js | |
| exam06.html | if |
| exam07.html | switch, 숫자 처리 |
숫자 처리
- 숫자 메서드
- toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환
- 내장 함수 (자료형 변환 함수)
- 내장 함수 (자료형 변환 함수)
- parseInt() : 문자 -> 정수 "123" -> 123
- parseFloat() : 문자 -> 실수 "45.3" -> 45.3 // Java 에는 parseFloat(), parseDouble() 2개
- 내장 객체
- Number() : 문자 -> 정수&실수
- 내장 객체 (수학 객체)
- Math.ceil() : 소수점 올림, 정수 반환
- Math.floor() : 소수점 버림, 정수 반환
- Math.round() : 소수점 반올림, 정수 반환
반복문
1. for
for (초기값; 조건; 증감식) {
실행할 명령;
}
2. while
while (조건) {
실행할 명령;
}
3. do ~ while
do {
실행할 명령;
} while (조건)
4. 예제
| // JavaScript\webapp\js | |
| exam08.html | for |
cf) 자바스크립트 스타일 가이드