//자료형, Data Type
1. number
- 숫자형(정수, 실수)
2. string
- 문자, 문자열
3. boolean
- 논리형
4. object
- 객체형
- JavaScript에는 클래스가 없지만 객체는 있다.
- 자바스크립트 > 객체 기반 프로그래밍 언어 (≠ 자바 > 객체 지향 프로그래밍 언어)
5. 기타(=상수)
a. null
b. undefined
c. NaN(Not a Number)
1. 숫자(Number)
- 사칙 연산이 가능하다.
2. 문자열(String)
- '' 또는 ""
- str. length : 문자열 길이 반환
- str.toUpperCase() : 대문자로 변환
- str.toLowerCase() : 대문자로 변환
- str.indexOf("하이") : 문자열에서 특정 문자열("하이")의 위치 반환
- str.indexOf("하이", index) : 문자열에서 index 이후의 특정 문자열("하이") 위치 반환
- str.indexOf(하이) : 문자열에서 특정 문자열("하이")의 위치 반환 + 뒤에서 부터 위치 검색
- str.substring(begin index, end index) : 문자열의 begin index번째부터 end index - 1 번째까지의 문자열을 추출
- str.substr(begin index, number) : 문자열의 begin index번째부터 number개의 문자 추출
- str.charAt(index) : 특정 위치의 문자 추출
- str.charCodeAt(index) : 특정 위치 문자의 문자 코드값 추출
- str.replace(old str, new str) : 특정 부분의 요소를 원하는 요소로 치환
★ ★★ 처음 만나는 요소만 치환한다. 반복을 원하면 정규 표현식 사용 필요!
- str.trim : 공백 제거
- str.split(구분자) : 구분자를 기준으로 문자열을 분할 > 배열로 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//문자열 함수
var txt = 'Hello~ Hong~'
//1. 문자열 길이
console.log(txt.length); //자바 > field / 자바스크립트 > property
//2. 검색
console.log(txt.indexOf('~')); //5
console.log(txt.indexOf('~', 6)); //11
console.log(txt.lastIndexOf('~')); //11
//3. 대소문자 변환
console.log(txt.toUpperCase());
console.log(txt.toLowerCase());
//4. 추출
console.log(txt.substring(2, 8));
console.log(txt.substring(2));
console.log(txt.substr(2, 4));
console.log(txt.substr(2));
console.log(txt.charAt(2));
console.log(txt.charCodeAt(2)); //문자 코드값 추출 > 형변환 연산..
//5. 치환***
// - 처음 만나는 요소만 치환한다.(반복X)
// - 반복을 원하면 정규 표현식 사용
txt = 'Hello~ Hong~ Bye~ Hong~';
console.log(txt.replace('Hello', 'Hi'));
console.log(txt.replace('Hong', 'Lee'));
console.log(txt.replace(/Hong/gi, 'Lee'));
// 6. 공백 제거
txt = ' 하나 둘 셋 ';
console.log(txt.trim());
console.log(txt.trimStart());
console.log(txt.trimEnd());
//7. 분할
txt = '홍길동,아무개,하하하,호호호,후후후';
console.log(txt.split(','));
//8. 검색
txt = '홍길동';
console.log(txt.startsWith('홍'));
console.log(txt.endsWith('홍'));
</script>
</body>
</html>3. NaN
boolean isNaN(value)
- is not a number
- 자료형 검사X, 데이터 형식만 검사o
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// boolean isNaN(value)
// - is not a numebr?
// 자료형 검사X, 데이터 형식만 검사O
//사용자 입력 <input type="text"> : 나이 입력
var age = '20';
if(isNaN(age)) {
console.log('나이가 올바르지 않습니다.');
} else {
console.log('올바른 나이 입력');
}
</script>
</body>
</html>// 형변환
- 함수 제공(정수로 바꿔주고, 숫자 외에는 제거해준다.)
1. number parseInt(value)
2. number parseFloat(value)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var n1 = 3.14;
console.log(parseInt(n1));
n1 = 3.99
console.log(parseInt(1));
var n2 = '300';
console.log(n2, typeof n2);
console.log(parseInt(n2), typeof parseInt(n2));
var n3 = 100;
console.log(parseFloat(n3));
var n4 = '3.14';
console.log(parseFloat(n4));
var n5 = '100점';
console.log(parseInt(n5)); //100 > 한글 버림
var n6 = '점수100';
console.log(parseInt(n6)); //NaN
var n7 = '100점이 아니라 50점입니다.';
console.log(parseInt(n7));
//javascript > CSS w조작
var width = '200[px]'
console.log(width + 100); // 200px 100
console.log(parseInt(width) + 100);
</script>
</body>
</html>//연산자
- 비교 연산자: ==, ===, <, >, !=, !==
~ == / != : 변수 타입은 고려하지 않음
~ ===, !== : 변수 타입까지 고려함
※ HTML에서는 <, >가 태그를 나타낼 때 쓰이기 때문에 다르게 쓴다.
~ < : <
~ > : & gt
'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] 함수 (0) | 2023.03.19 |
|---|---|
| [자바스크립트(JavaScript)] 제어문(조건문, 반복문) (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 배열(Array) (0) | 2023.03.18 |
| [자바스크립트(JavaScript)] Date (0) | 2023.03.18 |
| 자바스크립트(JavaScript)란? (0) | 2023.03.16 |
