Javascript : 배열 객체, 문자열 객체, 특수기호 표현, 템플릿 리터럴로 연결
배열 Array
변수에는 데이터가 오직 한 개 저장된다.
데이터를 여러개 저장하고 싶다면 배열로 묶어 저장할 수 있다.
배열 데이터를 여러개 저장하면 첫번째 순서부터 인덱스 번호 부여받음.
0부터 시작해 마지막 데이터까지 오름차순으로 인덱스 번호가 부여된다.
다양한 형식의 데이터를 배열할 수 있다.
[기본형]
- var 변수명 = new Array();
변수명[0] = 값;
변수명[1] = 값;
변수명[2] = 값;
: 배열객체를 먼저 생성하고 데이터를 한개씩 넣는 방식. 잘 안 씀.- var 변수명 = new Array(값1, 값2, 값3...);
: 값이 많아지면 역시 가독성이 떨어져 잘 쓰이지 않음.- var 변수명 = [값1, 값2, 값3...]; ★★
: []은 곧 배열을 의미한다. 많이 사용되는 방식
배열 객체에 저장된 데이터 불러오기 ★
배열 객체에 저장된 여러 데이터 중 필요한 것을 꺼내 쓸 수 있다.
[기본형]
변수명[인덱스 번호];
배열객체의 메서드와 속성(프로퍼티)
1. join(연결문자)★
배열객체의 데이터를 연결문자 기준으로 1개의 문자형 데이터로 반환
2. reverse()★
배열 객체 데이터 순서를 거꾸로 바꾼 후 반환
(게시판처럼 최신 글이 맨 위에 와야하는 경우)
3. sort()★
배열객체의 데이터를 오름차순으로 정렬
4. slice(시작 인덱스 번호, 끝 인덱스 번호)★
배열객체의 데이터 중 원하는 구간만큼 잘라서 배열객체로 반환
slice(0, 3)이면 0번부터 2번까지 반환한다
5. splice(시작 인덱스, 데이터 갯수, 새로 넣을 데이터)
배열 객체에서 시작 인덱스부터 지정한 데이터를 갯수만큼 삭제 후 그자리에 새로운 데이터를 넣을 때 사용
6. concat(배열1, 배열2)
2개의 배열 객체를 하나로 합쳐 반환
7. pop()
배열의 저장된 데이터 중 마지막 인덱스의 데이터를 삭제
8. push(new data)
배열의 저장된 데이터 중 마지막 인덱스에 새 데이터를 삽입
9. shift()
배열에 저장된 데이터 중 첫번째 인덱스에 있는 데이터 삭제
10. unshift(new data)
배열의 첫번째 위치에 새 데이터 삽입
11. length★
배열에 저장된 데이터의 총 개수 반환
12. forEach(함수)
배열에 저장된 데이터나 요소 갯수만큼 반복하면서 함수를 실행해 자바스크립트 코드 실행. 기존배열을 변화시키지 않고 새롭게 배열 반환.
13. filter(함수)
배열에 저장된 데이터 갯수만큼 반복 실행해 조건에 맞는 데이터 필터링
14. find(함수)
배열에 저장된 데이터 갯수만큼 반복 실행해 배열에 해당 데이터가 있으면 특정 코드를 실행하거나 해당 데이터 반환
<script>
// 배열 객체 생성
var arr = [30, "hello", true, false, undefined, 50];
document.write("<h2>배열값 가져오기</h2>");
document.write(arr[0], "<br/>"); // 인덱스 번호 0번째 데이터
document.write(arr[1], "<br/>"); // 인덱스 번호 1번째 데이터
document.write(arr[2], "<br/>"); // 인덱스 번호 2번째 데이터
document.write("---------------------------", "<br/>");
// 배열 안의 데이터 반복문으로 불러오기
// length 배열 안의 데이터 총 개수
for (var i = 0; i < arr.length; i++) {
document.write(arr[i], "<br/>");
}
document.write("---------------------------", "<br/>");
// for문으로 배열 데이터 모두 불러오기2
// 배열 arr 안에 있는 인덱스 번호 0번부터 모든 데이터를 불러와라
for (i in arr) {
document.write(arr[i], "<br/>");
}
</script>
<script>
var arr_1 = ["사당", "교대", "방배", "서초"];
var arr_2 = ["신사", "압구정", "옥수"];
// arr_1에 저장된 값을 -로 연결해 하나의 문자형 데이터로 반환
var result = arr_1.join("-");
console.log(result);
// 결과 : 사당-교대-방배-서초
// arr_1을 기준으로 arr_2를 합쳐 하나의 배열로 반환
result = arr_1.concat(arr_2);
console.log(result);
// 결과 : ['사당', '교대', '방배', '서초', '신사', '압구정', '옥수']
// arr_1의 1번 데이터부터 3번 앞 데이터까지 잘라 반환
result = arr_1.slice(1, 3);
console.log(result);
// 결과 : ['교대', '방배']
// arr_1의 데이터를 오름차순으로 변경
arr_1.sort();
console.log(arr_1);
// 결과 : ['교대', '방배', '사당', '서초']
// arr_2의 데이터 순서를 거꾸로 뒤집음
arr_2.reverse();
console.log(arr_2);
// 결과 : ['옥수', '압구정', '신사']
var greenArray = ["교대", "방배", "강남"];
var yellowArray = ["미금", "정자", "수서"];
// green의 2번 데이터부터 1개의 데이터 삭제하고 입력 데이터를 추가
greenArray.splice(2, 1, "서초", "역삼");
console.log(greenArray);
// 결과 : ['교대', '방배', '서초', '역삼']
// yellow에서 마지막 데이터 잘라 data1에 대입 [수서]
var data1 = yellowArray.pop();
// yellow에서 첫번째 데이터 잘라 data2에 대입 [미금]
var data2 = yellowArray.shift();
// yellow에는 ['정자']만 남아있다
// 마지막 위치에 data2 미금 추가
yellowArray.push(data2);
console.log(yellowArray);
// 결과 : ['정자', '미금']
// 첫번째 위치에 data1 수서 추가
yellowArray.unshift(data1);
console.log(yellowArray);
// 결과 : ['수서', '정자', '미금']
</script>문자열 객체 String
문자열 객체는 문자형 데이터를 객체로 취급
첫번째 글자부터 인덱스 번호 0번 부여
문자 사이 공백도 데이터이므로 번호를 부여받음
[기본형]
1. var 참조변수 = new String('문자형 데이터');
2. var 참조변수 = "문자형 데이터"
문자열 객체의 메서드와 속성
1. charAt(index)
문자열에서 인덱스 번호에 해당하는 문자 반환
2. indexOf('찾을 문자') ★
문자열 왼쪽부터 찾을 문자와 일치 문자를 찾아 가장 먼저 일치하는 문자의
인덱스 번호를 반환. 없다면 -1 반환.
3. lastIndexOf('찾을 문자')
문자열 오른쪽부터 찾을 문자와 일치 문자를 찾아 가장 먼저 일치하는 문자의
인덱스 번호를 반환. 없다면 -1 반환.
4. match('찾을 문자')
문자열 왼쪽부터 찾을 문자와 일치 문자를 찾아 가장 먼저 일치하는 '문자'를 반환
찾는 문자가 없다면 null 반환
5. repalce('바꿀 문자', '새 문자')
문자열 왼쪽부터 바꿀 문자를 찾아 가장 먼저 찾은 문자를 새 문자로 바꿈
6. search('찾을 문자')
indexOf와 기능이 같으나 indexOf를 주로 사용
7. slice(a, b) ★
a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환
인덱스 번호 자리에 -마이너스 쓸 수 있는데
-는 a의 앞 글자부터 세서 -숫자 개수만큼 잘라서 반환
8. substring(a, b) ★
a인덱스부터 b 인덱스 이전 구간의 문자 반환
인덱스 번호 자리에 -마이너스 쓸 수 있는데
-는 a의 앞 글자부터 세서 -숫자 개수만큼 잘라서 반환
9. substr(a, 문자 개수)
a인덱스부터 지정한 문자 개수만큼 문자열 반환
10. split('문자')★
지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장해 반환
11. toLowerCase()
문자열에서 영문 대문자를 모두 소문자 변환
12. toUpperCase()
문자열에서 영문 소문자를 모두 대문자 변환
13. length
문자열 문자 총 개수 반환
14. concat('새로운 문자')
문자열에 새로운 문자 결합
15. charCodeAt(index)
문자열 index에 해당하는 아스키 코드값 반환
16. fromCharCode(아스키 코드 값)
아스키 코드값에 해당하는 문자 반환
17. trim()
문자열 앞 또는 뒤 공백 문자열을 제거
<script>
var str = "Hello Thank you good luck to you";
// 7번 위치 글자 반환
document.write(str.charAt(7), "<br/>"); // h
// you의 첫글자 y의 인덱스 번호 반환, 없으면 -1
document.write(str.indexOf("you"), "<br/>"); // 12
document.write(str.indexOf("hi"), "<br/>"); // -1
// 오른쪽부터 찾은 you의 y의 인덱스 값 반환
document.write(str.lastIndexOf("you"), "<br/>"); // 29
// 16번 인덱스부터 you를 찾아 y인덱스 값 반환
document.write(str.indexOf("you", 16), "<br/>"); // 29
// 일치하는 문자 luck이 있으면 문자를 반환, 없으면 null
document.write(str.match("luck"), "<br/>"); // luck
document.write(str.match("hi"), "<br/>"); // null
// 가장 먼저 찾은 you를 찾아 y인덱스 값 반환, 없으면 -1
document.write(str.search("you"), "<br/>"); // 12
document.write(str.search("hi"), "<br/>"); // -1
// 일치하는 문자 you이 있으면 문자를 반환, 없으면 -1
document.write(str.search("you"), "<br/>"); // 12
document.write(str.search("hi"), "<br/>"); // -1
// 12번 인덱스부터 5개의 문자 잘라 반환
document.write(str.substr(12, 5), "<br/>"); // you g
// 6번 인덱스부터 12번 인덱스 바로 앞까지 잘라 반환
document.write(str.substring(6, 12), "<br/>"); // Thank
// 왼쪽부터 가장 먼저 찾은 you를 me로 치환
document.write(str.replace("you", "me"), "<br/>"); // Hello Thank me good luck to you
// 대문자를 모두 소문자로 치환
document.write(str.toLowerCase(), "<br/>"); // hello thank you good luck to you
// 소문자를 모두 대문자로 치환
document.write(str.toUpperCase(), "<br/>"); // HELLO THANK YOU GOOD LUCK TO YOU
// 문자 총 개수 반환
document.write(str.length, "<br/>"); // 32
// 공백을 기준으로 문자를 나눠 배열로 반환
var splitText = str.split(" ");
console.log(splitText);
// splitText의 인덱스 번호 4번째 데이터 화면에 출력
var txt = splitText[4];
document.write(txt, "<br/>");
// splitText의 인덱스 번호 6번째 데이터 화면에 출력
var txt = splitText[6];
document.write(txt, "<br/>");
var a = "A";
// 변수 a의 0번 인덱스 문자의 아스키코드 값 반환
var result = a.charCodeAt(0);
document.write(result, "<br/>"); //65
// 아스키코드 65에 해당하는 문자 출력
// 객체명.메서드() / 객체명.속성
document.write(String.fromCharCode(65), "<br/>"); //A
</script>특수 기호 표시하기
문자열에는 화면에는 표시되지 않으나 줄바꿈이나 탭처럼 기능을 수행하는 이스케이프 문자나 특수 문자가 포함된다. 특수 문자를 표시하려면 \ 다음에 기호를 입력한다.
템플릿 리터럴로 문자열 연결★
문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식
이전에는 문자 연결 연산자인 + 이용하여 식이나 변수를 연결했으나
문자 연결 연산자는 더하기로도 쓰기 때문에 예상 외 결과가 나와
현재는 템플릿 리터럴 사용을 권장
템플릿 리터럴은 `(백틱)을 이용해 문자열을 만든다.
안에 변수나 식을 넣을 때는 ${}로 묶고 넣는다.
[기본형]
${태그 또는 띄어쓰기, 이스케이프 문자, 변수 등}
<script>
console.log('I\'m studing javascript');
// I'm studing javascript
var name = "김땡땡";
var classRoom = 502;
document.write(`${name}님, ${classRoom}호로 입장하세요.`);
//김땡땡님, 502호로 입장하세요.
</script>🚗🚗 사용자가 입력한 전화번호의 뒷자리 ****로 나타내기
<script>
var userName = prompt("당신의 영문 이름은?");
var upperName = userName.toUpperCase();
document.write(upperName);
//사용자에게 전화번호 입력받아 끝 4자리 ****로 표시
var userNum = prompt("연락처를 입력해주세요.");
var result = userNum.substring(0, userNum.length - 4) + "****";
//var result = userNum.substring(userNum.length, -4) + "****"; 같은 표현
document.write(result);
</script>
🚗🚗 이메일 유효성 검사
<script>
var userEmail = prompt("이메일 주소 입력");
var arrUrl = [".co.kr", ".com", ".or.kr", ".go.kr", ".net"];
var check1 = false;
var check2 = false;
// 사용자 이메일 주소에 @가 있고 인덱스 번호가 0보다 크면 true
if (userEmail.indexOf("@") > 0) {
check1 = true;
}
// for문은 arrUrl 데이터 개수만큼 반복 실행
// 인덱스 초기값은 0이므로 i=0, length는 5. 4번 인덱스까지 검사하므로 < 5(length)
for (var i = 0; i < arrUrl.length; i++) {
// 입력 이메일에서 arrUrl 중 일치 데이터 있는지 찾는다
// url은 이메일 끝에 위치해 0보다 커야 옳다
// 일치값이 없다면 -1 반환해 false가 되어 if문 실행하지 않음
if (userEmail.indexOf(arrUrl[i]) > 0) {
check2 = true;
}
}
if (check1 && check2) {
document.write("😀 유효한 이메일입니다.");
} else {
document.write("😭 잘못된 이메일 형식입니다.");
}
</script>
