data 형에 대한 설명입니다.
문자열, 수치 데이터, 날짜, 배열에 대한 설명입니다.
문자열
문자열의 길이 .length
특정 위치의 문자 확인 .charAt(index)
문자열 연결 1) "문자열" + "문자열 2) 문자열 변수 + "문자열" 3) 문자열변수.concat("문자열1", "문자열2", "문자열3")
특정문자의 위치 문자열변수.indexOf('문자') (문자가 없을 때는 -1 반환)
소문자로 .toLowerCase()
대문자로 .toUpperCase()
문자열 슬라이싱 .substring(시작 위치, 끝 위치) / .substr(시작점, 반환 갯수)
기준을 잡아서 문자열 분리 .split("기준(/ , (공백) 등)")
문자 교체 .replace("old", "new")
공백 삭제 .trim()
특정문자로 시작하는지 확인 .startsWith("문자")
특정문자로 종료하는지 확인 .endsWith("문자")
특정문자(열)이 포함되는지 확인 .includes("문자(열)")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 데이터</title>
<script type="text/javascript">
var str = "Hello";
var str2 = new String("hello"); // JavaScript의 객체 생성
//sss = String() //python의 객체 생성
console.log(str);
console.log("1.문자열 길이:", str.length); // python : len(str)
var x = str.charAt(1);
console.log("2.특정 위치의 문자(0번째와 1번째):", str.charAt(0), x);
console.log("3. 문자열 연결:", "Hello"+" World");
console.log("3. 문자열 연결:", str+" World");
console.log("3. 문자열 연결:", str.concat(" World"));
console.log("3. 문자열 연결:", str.concat(" World", " I'm", " your_","mother."));
console.log("4. 특정 문자의 위치:(H와 o의 위치?), 없는 문자 = -1", str.indexOf('H'), str.indexOf("o"));
//특정 클래스의 함수 정보 확인 f String() => prototype
console.dir(String);
console.log("5. 소문자로: ", str.toLowerCase());
console.log("6. 대문자로: ", str.toUpperCase());
var str = "sequence"
console.log(str);
console.log("7. substring(start, end):", str.substring(0,5));
console.log("8. substr(start, 갯수):", str.substr(0,5));
//split
var str = "aaa/bbb/ccc";
var result = str.split("/")
console.log(str);
console.log("8. split(구분자):", result, result[0], result[1], result[2]);
console.log("9. replace(old, new):", "hello".replace("h", "X"))
var hello = " Hello "
console.log(hello,"length: ", hello.length);
console.log("10. trim():", " Hello ".trim());
console.log("10. trim().length():", " Hello ".trim().length);
console.log("11. 특정문자 시작여부:", "hello".startsWith("h"));
console.log("12. 특정문자 종료여부:", "hello".endsWith("o"));
console.log("13. 특정문자 포함 여부:", "Helloabcdefg003".includes("Hel"));
</script>
</head>
<body>
</body>
</html>
수치 데이터
.isNaN(변수) : 해당 변수의 타입이 NaN(Not a Number) 넘버가 아닌지 확인. (해당 변수가 정수/실수 - False)
Number.parseInt("문자열") : 문자열을 Int 값으로 변경
Number.parseFloat("문자열") : 문자열을 Float 값으로 변경
.toString() : 10진수로 변환
.toString(2) : 2진수로 변환
.toString(8) : 8진수로 변환
.toString(16) : 16진수로 변환
.toFixed() : 실수를 정수로 변환
.toFixed(2) : 실수를 소숫점 2번째 짜리까지 표현
.toFixed(5) : 실수를 소숫점 5번째 자리까지 표현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수치형</title>
<script type="text/javascript">
var n = 10; //권장
var n2 = new Number(10);
console.dir(Number);
console.log("1. isNaN:", Number.isNaN(n));
console.log("2. parseInt:", Number.parseInt("15")+10);
console.log("3. parseFloat()", Number.parseFloat("3.14"+10));
console.log("4. tostring()", n.toString()+"입니다.") // 10진수
console.log("4. tostring()", n.toString(2)+"입니다.") // 2진수
console.log("4. tostring()", n.toString(8)+"입니다.") // 8진수
console.log("4. tostring()", n.toString(16)+"입니다.") // 16진수
var n = 3.141592;
console.log("5. 지정된 자리수 표현:", n.toFixed()); // 3
console.log("5. 지정된 자리수 표현:", n.toFixed(2)); // 3.14
console.log("5. 지정된 자리수 표현:", n.toFixed(5)); // 3.14159
</script>
</head>
<body>
</body>
</html>
날짜 데이터
var 변수 = new Date() : 오늘 날짜로 날짜 데이터 변수 생성
Date.now() : 1970.1.1 ~ 현재까지의 시간
.getFullYear() : 현재 년도 반환
.getMonth() + 1 : 현재 월 반환
.getDate() : 현재 일자 반환
.getHours() : 현재 시간 반환
.getMinutes() : 현재 분 반환
.getSeconds() : 현재 초 반환
.getTime() : .now()와 동일, 1970.1.1부터 현재까지 시간
원하는 날짜로 변경하여 설정하기
.setFullYEar(원하는 년도)
.setMonth(원하는 월)
.setDate(원하는 일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날짜</title>
<script type="text/javascript">
var d = new Date();
console.dir(Date);
console.log("1. 현재날짜:", d); //Fri Sep 18 2020 15:52:17 GMT+0900 (대한민국 표준시)
console.log("2. 현재날짜:", Date.now()); //1970.1.1 ~ 현재까지 시간
console.log("3. 년도 ", d.getFullYear(), "년");
console.log("4. 월:", d.getMonth()+1, "월"); // getMonth() + 1 해줘야 해당 월이 나옴. 배열로 관리
console.log("5. 일:", d.getDate(), "일");
console.log("6. 시간:", d.getHours(), "시");
console.log("7. 분:", d.getMinutes(), "분");
console.log("8. 초:", d.getSeconds(), "초");
console.log("9. getTime()", d.getTime()); // .now()와 동일, 1970.1.1 ~ 현재까지 시간
/* //설정
d.setFullYear(2021);
d.setMonth(1);
d.setDate(1);
console.log("10. set함수로 변경한 날짜:", d);
*/
</script>
</head>
<body>
</body>
</html>
배열 생성, 요소 접근
var 배열 변수명 = new Array(10, 20, 30);
var 배열 변수명 = [10, 20, 30]; (권장)
배열 변수명[index] : index의 요소 접근 (0부터 시작)
.length : 배열의 길이 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 배열 생성방법
var n = new Array();
var n2 = []; //권장
var n3 = new Array(10, 20, 30);
var n4 = [10, 20, 30]; //권장
console.dir(Array)
//2. 배열 요소 접근
var n = [10, 20, 30, 1, 2, 3, 4, 5, 6];
console.log("1. 첫 번째 요소:", n[0]);
console.log("2. 두 번째 요소:", n[1]);
console.log("3. 배열 길이:", n.length);
for(var i=0; i < n.length; i++){
console.log(">>>", n[i]);
}
for(var i of n){
console.log(">>>", i);
}
for(var i in n){
console.log(">>>", n[i])
}
</script>
</head>
<body>
</body>
</html>
배열 값 추가, 삭제, 중간 삽입/삭제
배열.push(value) : 배열에 값 추가 (뒤에)
배열.pop(); : 배열 값 삭제 (뒤부터)
.splice(start, 삭제할 갯수, [추가할 데이터]) : 배열의 값을 중간부터 삭제할 수 있고 추가적으로 [데이터]를 추가할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
console.dir(Array);
var n = [];
//1. 배열에 값 추가 ==> 뒤에서 추가
n.push(10);
n.push(1,2,3);
console.log("1. push:", n);
//2. 값 삭제 ==> 뒤부터 삭제
n.pop();
n.pop();
console.log("2. pop으로 삭제:", n);
//3. 중간 삽입, 중간 삭제
/*
splice(start, 삭제할 갯수, 추가할 데이터, ...)
예> splice(1, 4)==> 1부터 시작해서 4개 요소 삭제
splice (1, 2, "홍길동") ==> 1부터 시작해서 2개 요소 삭제하고 "홍길동" 삽입
splice (1, 0, 1,2,3)==> 1부터 시작해서 0개 요소 삭제하고 1, 2, 3 추가
*/
var m = ["홍길동", "이순신", 10, "유관순"];
console.log("m =", m)
console.log("3. m.splice(1,2)", m.splice(1, 2));
console.log("m =", m)
console.log("3. m.splice(1,2, 홍길동2)", m.splice(1, 2, "홍길동2"));
console.log("m =", m)
</script>
</head>
<body>
</body>
</html>
배열 뒤집기, 슬라이싱, 특정문자 위치 확인, 정렬, Join
.reverse() : 배열 순서를 뒤집어서 원본 파일에서 변경
변수 = 배열.reversed() : 뒤집힌 배열을 새로운 변수에 저장
.slice(시작 index, 끝 index) : 해당 시작 ~ 끝까지 값을 슬라이싱
.indexOf('특정문자') : 해당 문자의 index 반환 (문자 없으면 -1)
.sort(function(a,b)) : 배열 정렬
.sort(function(a,b){return b-a}) : 배열 정렬 내림차순
.join("원하는 사잇값") : 배열 값을 '사잇값'으로 연결하여 한 문자열로 반환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.dir(Array);
var n = [76, 3, 26];
/*
Python
변수.reverse() : 원본 변경
변수2 = 변수.reversed() : 변경해서 복사본 생성 (변수에 저장)
*/
console.log("원본 : ", n);
n.reverse();
console.log("1. reverse():", n);
var n = [9,8,7,6,5,4,3,2,1];
var sub_arr = n.slice(0,4); // 0 ~ 3까지, slice(start, end)
console.log("원본:", sub_arr);
console.log("2. slice:", sub_arr);
var m = ["A", "B", "C"];
console.log("3.특정문자위치:", m.indexOf('A'));
console.log("3.특정문자위치:", m.indexOf('a')); //없으면 -1
//정렬
var n = [7, 6, 10, 35, 59, 100, 1];
n.sort(function(a,b){return a-b});
console.log("4. sort()정렬 / 오름차순:", n);
n.sort(function(a,b){return b-a;});
console.log("5. 정렬 / 내림차순:", n);
//join
var m = ['A', 'B', 'C'];
//python : " 와".join(["A", "B", "C"])
console.log("6. Join:", m.join("와 "));
</script>
</head>
<body>
</body>
</html>
'SK 행복성장캠퍼스 > Java Script' 카테고리의 다른 글
| 2020-09-21,JavaScript_3일차 (Event, DOM) (0) | 2020.10.05 |
|---|---|
| 2020-09-21,JavaScript_3일차 (BOM) (0) | 2020.10.04 |
| 2020-09-18,JavaScript_2일차 (0) | 2020.09.28 |
| 2020-09-17,JavaScript_1일차 (0) | 2020.09.27 |
댓글