💻 1. 웹개발_Front end/1-4 Javascript
[Javascript] 04-2 내장 객체
달님🌙
2021. 9. 12. 20:47
반응형
내장 객체
- 내장 객체란, 브라우저의 자바스크립트 엔진에 내장된 객체를 말함
- 필요한 경우 객체를 생성해서 사용할 수 있음
- 내장 객체로는 문자, 날짜, 배열, 수학, 정규 표현 객체 등이 있음
내장 객체 생성하기
1. 내장 객체를 생성하는 기본형 :
참조변수(인스턴스 이름) = new 생성 함수()
2. 문법 이해
- 객체를 생성할 때는 new라는 키워드와 생성 함수( 예. Object( ) )를 사용
- 생성된 객체는 변수 tv가 참조하고 있고 이를 이용해서 객체의 속성과 메서드를 생성한다
- 생성된 객체를 이용할 때는 앞으로 참조 변수를 사용하겠다는 의미
3. 예제 - tv와 car 객체 생성
<!DOCTYPE html>
<html lang="ko">
<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>object</title>
</head>
<body>
<script>
//ES6 객체 생성 방식
// class tv2 {
// constructor(color, price) {
// this.color = color;
// this.price = price;
// }
// info() {
// document.write("tv2 색상 : " + this.color, "<br>");
// document.write("tv2 가격 : " + this.price, "<br>");
// }
// }
// var tv2 = new tv2("red", 500000);
//사용자 정의 객체 생성
//ES5까지는 아래 두 가지 방식으로 객체 선언 및 생성
//ES6부터는 자바와 동일하게 class로 객체 선언하고 호출 따로 가능
var tv = new Object();
// 객체 속성 정의 및 값 할당
tv.color = "white";
tv.price = 300000;
//객체 메서드 정의
tv.info = function() {
//this 객체 : 현재 선택된 객체
document.write("tv 색상 : " + this.color, "<br>");
document.write("tv 가격 : " + this.price, "<br>");
}
//사용자 정의 객체 생성 (구조체 형식)
var car = {
// 객체 속성 정의 및 값 할당
color: "black",
price: 5000000,
//객체 메서드 정의
info: function() {
document.write("car 색상 : " + this.color, "<br>");
document.write("car 가격 : " + this.price, "<br>");
}
}
document.write("<h1>tv 객체 메서드 호출</h1>");
tv.info();
document.write("<h1>car 객체 메서드 호출</h1>");
car.info();
</script>
</body>
</html>
객체 속성 관련 메서드
1. 종류
<script>
// 1. 속성 값으로 접근하기
// id 값이 "img"인 객체를 변수 img에 담는다.
var img = document.getElementById("img");
// tag 값이 "img"인 객체를 변수 img에 담는다.
var img = document.getElementByTag("img");
// class 값이 "btn"인 객체를 변수 btn에 담는다.
var btn = document.getElementByClass("btn");
// 2. 버튼 클릭 이벤트 등록 메서드
// 변수 btn에 들어있는 객체에 이벤트 추가 (버튼을 'click'하면 function() 안의 코드가 실행됨)
btn.addEventListener('click', function() { 실행코드 } );
// 3. 객체 속성을 get / set 하는 메소드
// img 객체의 속성들 중 'src' 속성의 값 가져와서 그 값이 'images/3.png'와 일치하는지 비교하기
if(img.getAttribute('src') == 'images/3.png') { 실행코드 }
// img 객체의 속성들 중 'src' 속성의 값을 'images/4.png'로 변경하기
img.setAttribute('src', 'images/4.png');
</script>
2. 예제 - 이미지 변경하기
<!DOCTYPE html>
<html lang="ko">
<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>DOM</title>
<style>
button {
display: block;
}
img {
display: block;
}
</style>
</head>
<body>
<h1>이미지 변경</h1>
<button type="button" id="btn" class="btn">이미지 변경</button>
<img src="images/3.png" id="img" class="img">
<script>
// id 선택자
var img = document.getElementById("img");
//tag 선택자
// var img = document.getElementsByTagName("img");
//class 선택자
// var img = document.getElementsByClassName("img");
var btn = document.getElementById("btn");
// var img = document.getElementsByTagName("button");
// var img = document.getElementsByClassName("btn");
//button 클릭 이벤트 등록
btn.addEventListener('click', function() {
//버튼 클릭 시 img 태그의 src 속성을 변경
// getAttribute 메소드를 이용해서 토글되도록 수정
img.setAttribute('src', 'images/4.png');
});
</script>
</body>
</html>
3. 예제 - 이미지 변경하기 (토글)
<script>
//button 클릭 이벤트 등록
btn.addEventListener('click', function() {
//버튼 클릭 시 img 태그의 src 속성을 변경
// getAttribute 메소드를 이용해서 토글되도록 수정
if(img.getAttribute('src') == 'images/3.png') {
img.setAttribute('src', 'images/4.png');
} else {
img.setAttribute('src', 'images/3.png');
}
});
</script>
4. 예제 - 이미지 이동하기
<!DOCTYPE html>
<html lang="ko">
<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>DOM</title>
<style>
img {
display: block;
position: absolute;
}
button {
display: block;
}
</style>
</head>
<body>
<h1>이미지 이동</h1>
<button type="button" id="btn" class="btn">이미지 이동</button>
<img src="images/3.png" id="img" class="img">
<script>
// id 선택자
var img = document.getElementById("img");
//tag 선택자
// var img = document.getElementsByTagName("img");
//class 선택자
// var img = document.getElementsByClassName("img");
var btn = document.getElementById("btn");
// var img = document.getElementsByTagName("button");
// var img = document.getElementsByClassName("btn");
//button 클릭 이벤트 등록
btn.addEventListener('click', function() {
//버튼 클릭 시 img 태그의 left, top 속성을 변경
img.style.left = '500px';
img.style.top = '500px';
img.style.background = 'pink';
img.style.border = '5px solid red';
});
</script>
</body>
</html>
5. 예제 - 색상 바꾸기
<!DOCTYPE html>
<html lang="ko">
<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>DOM</title>
<style>
button {
display: inline;
}
img {
display: block;
}
div {
display: block;
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>색깔 바꾸기</h1>
<div id="div1" style="background-color: red"></div>
<div id="div2" style="background-color: yellow"></div>
<div id="div3" style="background-color: red"></div>
<div id="div4" style="background-color: yellow"></div>
<button type="button" id="btn">색상 변경하기</button>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
if(div1.getAttribute('style') == "background-color: red") {
div1.setAttribute('style', 'background-color: yellow');
} else {
div1.setAttribute('style', 'background-color: red');
}
if(div2.getAttribute('style') == "background-color: yellow") {
div2.setAttribute('style', 'background-color: red');
} else {
div2.setAttribute('style', 'background-color: yellow');
}
if(div3.getAttribute('style') == "background-color: red") {
div3.setAttribute('style', 'background-color: yellow');
} else {
div3.setAttribute('style', 'background-color: red');
}
if(div4.getAttribute('style') == "background-color: yellow") {
div4.setAttribute('style', 'background-color: red');
} else {
div4.setAttribute('style', 'background-color: yellow');
}
});
</script>
</body>
</html>
날짜 정보 객체
1. 의미 : 날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체(Date Object)를 생성
예) 달력만들기, D-day 계산기
2. 기본형 :
<script>
// 현재 날짜
var today = new Date();
// 특정 날짜 (2002년 월드컵)
var worldcup = new Date("2002/5/31"); // 큰따옴표 안에 쓸 때는 그냥 해당 월 그대로 쓰기
var worldcup = new Date(2002, 4, 31); // 큰따옴표 안쓸 때는 월 - 1 로 계산한 값 쓰기
</script>
3. 날짜 관련 메서드
- 날짜의 정보를 가져오는 메서드 : get ~
- 날짜를 수정하는 메소드 : set ~
3. 예제 - 현재 날짜와 2002 월드컵 날짜 출력
<!DOCTYPE html>
<html lang="ko">
<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>dateob</title>
</head>
<body>
<script>
//현재 날짜와 현재 시간을 가지는 날짜 객체 생성
var today = new Date();
//월
var nowMonth = today.getMonth() + 1;
//일
var nowDate = today.getDate();
//요일 0:일요일 ~ 6:토요일
var nowDay = today.getDay();
//시간
var nowHour = today.getHours();
//분
var nowMinute = today.getMinutes();
//초
var nowSecond = today.getSeconds();
document.write("<h1>현재 날짜 시간 정보</h1>");
document.write("현재 월 : " + nowMonth + "<br>");
document.write("현재 일 : " + nowDate + "<br>");
document.write("현재 요일 : " + nowDay + "<br>");
document.write("현재 시간 : " + nowHour + "<br>");
document.write("현재 분 : " + nowMinute + "<br>");
document.write("현재 초 : " + nowSecond + "<br>");
//입력한 날짜로 된 날짜 객체 생성, 시간 미 입력시 시간은 00:00:00으로 초기화
// 원래 5월 31일임
// var worldcup = new Date("2002/5/31");
// var worldcup = new Date("2002, 5, 31");
// var worldcup = new Date("2002-05-31");
//시간까지 초기화
// var worldcup = new Date(2002, 5, 31, 09, 30, 30);
var worldcup = new Date("2002-05-31 09:30:30");
//월
var wMonth = worldcup.getMonth() + 1;
//일
var wDate = worldcup.getDate();
//요일
var wDay = worldcup.getDay();
//시
var wHour = worldcup.getHours();
//분
var wMinute = worldcup.getMinutes();
//초
var wSecond = worldcup.getSeconds();
document.write("<h1>월드컵 날짜 시간 정보</h1>");
document.write("월드컵 월 : " + wMonth, "<br>");
document.write("월드컵 일 : " + wDate, "<br>");
document.write("월드컵 요일 : " + wDay, "<br>");
document.write("월드컵 시 : " + wHour, "<br>");
document.write("월드컵 분 : " + wMinute, "<br>");
document.write("월드컵 초 : " + wSecond, "<br>");
</script>
</body>
</html>
4. 연말까지 D-day 계산기
<!DOCTYPE html>
<html lang="ko">
<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>dateob</title>
</head>
<body>
<script>
var today = new Date();
var nowYear = today.getFullYear();
//날짜 객체 생성시에도 Month는 -1해서 입력
var theDate = new Date(nowYear, 11, 31); // 12월 31일을 표현한 것임
//getTime() 1970/1/1부터 경과된 시간을 밀리초로 변환해서 리턴
var diffDate = theDate.getTime() - today.getTime();
//Math.ceil() 소수 점 첫째자리에서 반올림
//밀리초로 된 diffdate를 일단위로 변환
var result = Math.ceil(diffDate / ( 1000*60*60*24));
document.write("오늘 날짜 : " + today + "<br>");
document.write("연말까지 D - " + result + "일 남았습니다.<br>");
</script>
</body>
</html>
수학 객체
1. 의미 : 더하기, 곱하기, 나누기는 산술 연산자를 사용하면 되지만 최댓값, 최솟값, 반올림값 등은 이번에 배울 수학 객체 메서드를 이용하여 처리한다.
2. 수학 객체의 메서드 및 상수
3. 예제 - 수학 메서드에 숫자 입력하여 결괏값 반환
<!DOCTYPE html>
<html lang="ko">
<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>수학객체</title>
</head>
<body>
<script>
var num = 2.1234;
//최대 값 반환
var maxNum = Math.max(10, 5, 8, 30); // 30
//최소 값 반환
var minNum = Math.min(10, 5, 8, 30); // 5
//소수점 첫 째 자리에서 반올림
var roundNum = Math.round(num); // 2
//소수점 첫 째 자리에서 올림
var ceilNum = Math.ceil(num); //3
//소수점 첫 째 자리에서 버림
var floorNum = Math.floor(num); // 2
//0~1사이의 난수 반환
var rndNum = Math.random();
//0~10사이의 난수 반환
var rndNum1 = Math.random() * 10;
//0~10사이의 난수 반환, 소수점 버림
var rndNum2 = Math.floor(Math.random() * 11);
//0~30사이의 난수 반환, 소수점 버림
var rndNum3 = Math.floor(Math.random() * 31);
//120~150사이의 난수 반환, 소수점 버림
//원하는 구간의 난수(정수) 반환
//Math.floor(Math.random() * (최대값(150) - 최소값(120) + 1)) + 최소값(120)
var rndNum4 = Math.floor(Math.random() * 31) + 120;
//원주율 반환
var piNum = Math.PI; // 3.141592653589793
//거듭제곱 값 반환
var powNum = Math.pow(10, 3); // 1000
//제곱근 값 반환
var sqrtNum = Math.sqrt(100); // 10
document.write("Math.max() = " + maxNum, "<br>");
document.write("Math.min() = " + minNum, "<br>");
document.write("Math.round() = " + roundNum, "<br>");
document.write("Math.ceil() = " + ceilNum, "<br>");
document.write("Math.floor() = " + floorNum, "<br>");
document.write("Math.random() = " + rndNum, "<br>");
document.write("Math.random() * 10 = " + rndNum1, "<br>");
document.write("Math.floor(Math.random() * 11) = " + rndNum2, "<br>");
document.write("Math.floor(Math.random() * 31) = " + rndNum3, "<br>");
document.write("Math.floor(Math.random() * 31) + 120 = " + rndNum4, "<br>");
document.write("Math.PI = " + piNum, "<br>");
document.write("Math.pow() = " + powNum, "<br>");
document.write("Math.sqrt() = " + sqrtNum, "<br>");
</script>
</body>
</html>
4. 예제 - 가위바위보 맞추기
<!DOCTYPE html>
<html lang="ko">
<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>가위바위보</title>
</head>
<body>
<script>
document.write("<h1>컴퓨터 가위, 바위, 보 맞추기</h1>");
var game = prompt("가위, 바위, 보 중 선택하세요.", "가위");
var gameNum;
switch(game) {
case "가위" :
gameNum = 1;
break;
case "바위" :
gameNum = 2;
break;
case "보" :
gameNum = 3;
break;
default :
alert("잘못 입력하셨습니다.");
location.reload();
}
//var com = Math.ceil(Math.random() * 3);
var com = Math.floor(Math.random() * 3) + 1;
document.write("<img src=\"images/math_img_" + com + ".jpg\">");
// document.write('<img src="images/math_img_' + com + '.jpg">');
// document.write("<img src='images/math_img_" + com + ".jpg'>");
if(gameNum == com) {
document.write("<img src=\"images/game_1.jpg\">")
//document.write("<img src='images/game_1.jpg'>");
//document.write('<img src="images/game_1.jpg">');
} else {
document.write("<img src=\"images/game_2.jpg\">");
//document.write("<img src='images/game_2.jpg'>");
//document.write('<img src="images/game_2.jpg">');
}
</script>
</body>
</html>
배열 객체
1. 의미 : 변수에는 데이터가 한 개만 저장되지만 배열에는 여러 개의 데이터를 하나의 저장소에 저장할 수 있다.
2. 배열 객체 생성 기본형
<!DOCTYPE html>
<html lang="ko">
<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>배열객체 생성하기</title>
</head>
<body>
<script>
// 방법 1. 배열 먼저 생성(크기지정X) 후 인덱스로 하나씩 추가
var arr1 = new Array();
arr1[0] = 30;
arr1[1] = "따르릉";
arr1[2] = true;
document.write(arr1, "<br>");
// 방법 2. 크기 지정해주기 (값을 넣지 않으면 쉼표만 계속 출력된다)
var arr2 = new Array(10);
document.write(arr2, "<br>");
// 방법 3. new 키워드를 사용하여 배열 생성
var arr3 = new Array(30, "따르릉", true);
document.write(arr3, "<br>");
// 방법 4. new 키워드를 사용하지 않고 []에 값 넣어서 생성
var arr4 = [30, "따르릉", true];
document.write(arr4);
</script>
</body>
</html>
3. 예제 - 배열 객체에 저장된 데이터 불러오기
<!DOCTYPE html>
<html lang="ko">
<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>배열객체</title>
</head>
<body>
<script>
var arr = [30, "따르릉", true];
document.write("<h3>배열 값 가져오기 - 1</h3>");
// 방법 1. 하나씩 적어서 가져오기
document.write(arr[0], "<br>");
document.write(arr[1], "<br>");
document.write(arr[2], "<br>");
// 방법 2. for문을 이용해서 가져오기
document.write("<h3>배열 값 가져오기 - 2</h3>");
for(var i = 0; i < arr.length; i++) {
document.write(arr[i], "<br>");
}
// 방법 3. for in 구문을 이용해서 가져오기
document.write("<h3>배열 값 가져오기 - 3</h3>");
//for in 구문 : 배열의 인덱스값 하나씩 꺼내오기
for(i in arr) {
document.write(arr[i], "<br>");
}
</script>
</body>
</html>
4. 배열 객체의 메서드 및 속성
5. 예제 - join(), concat(), slice(), sort(), reverse(), length
<!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>배열객체</title>
</head>
<body>
<script>
var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];
var arr_3 = [
"0",
["1", "2"],
["3", "4"]
];
var result1;
//배열 값 사이사이에 - 를 넣어 하나의 문자형 변수로 반환
var result = arr_1.join("-");
console.log("========== join ===========");
console.log(result);
//2개의 배열을 합쳐서 하나의 배열로 반환
result = arr_1.concat(arr_2);
result1 = arr_1.concat(arr_3);
console.log("========== concat ===========");
console.log(result);
console.log(result1);
//배열 값 오름차순 정렬
arr_1.sort();
console.log("========== sort ===========");
console.log(arr_1);
//배열 잘라서 배열 만들기(lastindex - 1)
console.log("========== slice ===========");
console.log(arr_1.slice(0, 1)); // 사당
console.log(arr_1.slice(0, 2)); // 사당, 교대
//배열 순서 거꾸로 뒤집기
arr_2.reverse();
console.log("========== reverse ===========");
console.log(arr_2);
//배열 길이 반환하기
console.log("========== length ===========");
console.log(arr_2.length);
</script>
</body>
</html>
6. 예제 - splice(), pop(), push(), shift(), unshift()
<!DOCTYPE html>
<html lang="ko">
<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>배열객체</title>
</head>
<body>
<script>
var greenArr = ["교대", "방배", "강남"];
var yellowArr = ["미금", "정자", "수서"];
//index 2부터 데이터 1개 삭제
//삭제된 구간에 서초, 역삼 삽입
greenArr.splice(0, 1, "서초", "역삼"); // 인덱스가 2인 "강남"이 빠짐
console.log("====== splice =======");
console.log(greenArr);
//배열의 마지막 인덱스의 데이터 꺼내고 삭제
var data1 = yellowArr.pop(); // "수서"가 빠지고 data1에 입력됨
console.log("====== pop =======");
console.log(yellowArr.length); // 2
console.log(yellowArr); // 미금, 정자
console.log(data1); // 수서
//배열의 첫번째 인덱스의 데이터 꺼내고 삭제
var data2 = yellowArr.shift();
console.log("====== shift =======");
console.log(yellowArr); // 정자
console.log(data2); // 미금
//마지막 인덱스에 데이터 밀어넣기
yellowArr.push(data2);
console.log("====== push =======");
console.log(yellowArr); // 정자, 미금
console.log(data2); // 미금
//첫번째 인덱스에 데이터 밀어넣기
yellowArr.unshift(data1);
console.log("====== unshift =======");
console.log(yellowArr); // 수서, 정자, 미금
console.log(data1); // 수서
</script>
</body>
</html>
* 더 자세한 설명
[JavaScript]33 - Array객체 , concat() , join() , push(), pop() , unshift() , shift()
단순 for 반복문으로 Array 객체의 요소를 확인할 때 다음과 같이 length를 사용한다. concat() 메서드joi...
blog.naver.com
문자열 객체
1. 문자열 객체 : 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.
2. 문자열 객체 생성하기 기본형
<script>
// 방법1. new 키워드와 String() 메서드 사용
var t = new String("hello javascript");
// 방법2. 문자형 데이터 입력
var t = "hello javascript";
</script>
3. 문자열 객체의 메서드 및 속성
4. 예제 - 문자열 객체 메서드
<!DOCTYPE html>
<html lang="ko">
<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>문자열객체</title>
</head>
<body>
<script>
var t = "Hello Thank you good luck to you";
//index가 16인 문자 반환
document.write("======charAt======", "<br>");
document.write(t.charAt(16), "<br>");
//왼쪽에서 시작하여 오른쪽으로 가면서 "you"를 가장 처음 만나는 index 반환 -> 12
document.write("======indexOf======", "<br>");
document.write(t.indexOf("you"), "<br>");
//index 16부터 오른쪽으로 "you"를 가장 처음 만나는 index 반환 -> 29
document.write("======indexOf(16)======", "<br>");
document.write(t.indexOf("you", 16), "<br>"); // 상대적인 위치값 X
//왼쪽으로 가장 처음 찾은 you의 index 반환 -> 29
document.write("======lastIndexOf======", "<br>");
document.write(t.lastIndexOf("you"), "<br>"); // 29번째 you가 왼쪽에서 보면 더 가까워서
//index 25부터 왼쪽으로 가장 처음 찾은 you의 index 반환 -> 12
document.write("======lastIndexOf(25)======", "<br>");
document.write(t.lastIndexOf("you", 25), "<br>"); // 인덱스 25부터하면 29번째 you는 범위안에 없음
//처음으로 찾은 luck이라는 문자열 반환 -> match() 메소드는 숫자가 아닌 문자열을 반환!
document.write("======match======", "<br>");
document.write(t.match("luck"), "<br>"); // luck
//처음으로 찾은 you의 index 반환
//indexOf와의 차이점 : search는 검색 위치 지정 불가
document.write("======search======", "<br>");
document.write(t.search("you"), "<br>"); // 12
//index 21부터 4개의 문자열 반환 -> substr(a, b)은 a부터 b개 만큼 반환!
document.write("======substr======", "<br>");
document.write(t.substr(21, 4), "<br>"); // luck
//index 6~12사이의 문자열 반환 -> substring(a, b)은 a부터 b-1까지 문자열 반환
document.write("======substring======", "<br>");
document.write(t.substring(6, 11), "<br>"); // Thank
//문자열에서 '처음'으로 찾은 you를 me로 치환하여 반환
document.write("======replace======", "<br>");
document.write(t.replace("you", "me"), "<br>"); // Hello Thank me good luck to you
//대문자를 소문자로 변환하여 반환
document.write("======toLowerCase======", "<br>");
document.write(t.toLowerCase(), "<br>"); // hello thank you good luck to you
//소문자를 대문자로 변환하여 반환
document.write("======toUpperCase======", "<br>");
document.write(t.toUpperCase(), "<br>"); // HELLO THANK YOU GOOD LUCK TO YOU
//문자열 길이 반환
document.write("======length======", "<br>");
document.write(t.length, "<br>"); // 32
//공백문자 기준으로 문자열 분리하여 배열객체로 반환
document.write("======split======", "<br>");
var s = t.split(" ");
document.write(s, "<br>"); // Hello,Thank,you,good,luck,to,you
document.write(s[0], "<br>"); // Hello
document.write(s[4], "<br>"); // luck
//해당하는 문자의 아스키 코드 값 반환
var str = "ABCD";
document.write("======charCodeAt======", "<br>");
document.write(str.charAt(1), "<br>"); // B
document.write(str.charCodeAt(1), "<br>"); // 66 (B의 아스키코드)
//아스키 코드 값에 해당하는 문자 반환
document.write("======fromCharCode======", "<br>");
document.write(String.fromCharCode(97), "<br>"); // a (아스키코드가 97인 문자 반환)
var phoneNum = "01012345678";
document.write("======phonNum======", "<br>");
//phoneNum.substring(0, phoneNum.length - 4) : 0~length-4까지의 문자열 반환
document.write(phoneNum.substring(0, phoneNum.length - 4) + "****", "<br>");
</script>
</body>
</html>
5. 예제 - 이메일 유효성 검사
<!DOCTYPE html>
<html lang="ko">
<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>문자열객체(이메일 유효성 검사)</title>
</head>
<body>
<script>
var userEmail = prompt("당신의 이메일은?", "");
var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];
var check1 = false;
var check2 = false;
//문자열에 "@"가 있으면 "@"의 index 반환, 없으면 -1 반환
document.write('=============indexOf("@")=============', "<br>");
document.write(userEmail.indexOf("@"), "<br>");
if(userEmail.indexOf("@") > 0) {
check1 = true;
}
document.write('=============indexOf(arrUrl[i])=============', "<br>");
for(var i = 0; i < arrUrl.length; i++) {
//arrUrl의 형식 하나씩 꺼내서 비교하고 해당하는 값이 존재하면 해당되는 index 반환
// 해당하는 값이 존재하지않으면 -1 반환
document.write(userEmail.indexOf(arrUrl[i]), "<br>");
if(userEmail.indexOf(arrUrl[i]) > 0) {
check2 = true;
}
}
document.write('=============이메일 형식 결과=============', "<br>");
if(check1 && check2) {
document.write(userEmail);
} else {
document.write("이메일 형식이 잘못되었습니다.");
}
</script>
</body>
</html>
반응형