스크립트 객체
Array 객체의 메소드
메서드 설명
push(a,b,c,…) 배열 끝에 요소를 추가한다.
pop() 마지막 요소를 제거하고 리턴한다.
shift() 배열 처음의 원소를 제거하고 리턴한다.
unshift(a,b,c,…) 배열 처음에 요소를 추가한다.
reverse() 배열을 거꾸로 뒤집는다.
sort(sortfunction) 배열을 정렬한다. 인수로 값을 비교하는 함수를 지정할 수 있으며 생략시 사전순으로 정렬된다.
slice(start, end) start ~ end 범위의 요소를 따로 떼어내어 새로운 배열을 만든다.
splice(index, n, a, b, c, …) 배열 일부를 수정한다. 일정 범위를 삭제하고 새로운 요소를 삽입힌다.
a.concat(b,c…) 여러 개의 배열을 합친다.
join(deli) 배열 요소를 하나의 문자열로 합친다. 구분자를 지정할 수 있으며 생략시 콤마로 구분한다.
멀리있는 변수를 사용하려면 window:변수명
Date 객체
Date 객체는 날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체
new Date() // 현재 날짜와 시간
new Date(milliseconds) //1970/01/01 이후의 밀리초
new Date(dateString)
new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
UTC
1972년 1월 1일부터 시행된 국제 표준시이다..
UTC는 그리니치 평균시(GMT)로 불리기도 하는데, UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용된다. 기술적인 표기에서는 UTC가 사용된다.
Date타입 객체를 날짜만 출력하고 싶을 때 쓰는 메소드 : 객체.toLocaleDateString()
Array메소드2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
fr = ["사과", "바나나", "참외","사과", "복숭아", "사과", "파인애플"];
function proc1(){
str = "원래배열 : " + fr + "<br>";
while(true){
frname = prompt("추가 이름을 입력하세요");
fr.push(frname);
cont = confirm("계속하시겠습니까?")
if(!cont)break;
}
str += "추가배열: " + fr + "<br>";
document.querySelector('#result1').innerHTML = str;
}
function proc2(){
str = "원래배열 : " + fr + "<br>";
del = fr.pop();
str += "제거된 요소 : " + del + "<br>";
str += "제거 후 배열: " + fr + "<br>";
document.querySelector('#result2').innerHTML = str;
}
function proc3(){
// start = 1;
// end = 5;
// frsli = fr.slice(start,end)
// str = "원래배열 : " + fr + "<br>";
// str += "추출된 배열 : " + frsli +"<br>";
// str += "추출후 배열 : " + fr + "<br>";
//사과와 사과 사이의 값을 추출
//사과의 인덱스값을 얻는다 0,3
start = fr.indexOf("사과");
end = fr.indexOf("사과",start+1);
frsli = fr.slice(start+1, end);
str = "원래배열 : " + fr + "<br>";
str += "추출된 배열 : " + frsli +"<br>";
document.querySelector('#result3').innerHTML = str;
}
function proc4(){
fr = ["사과", "바나나", "참외","사과", "복숭아", "사과", "파인애플"];
fr.splice(2,1); //2번째 위치에서 1개를 삭제하라
fr.splice(3,2,"딸기","수박","자두"); //3번째 위치에서 2개를 삭제하고 그 자리에 나머지 자료를 추가
// fr.splice(3,0,"딸기","수박","자두"); //3번째 위치에서 삭제하지 않고 그 자리에 나머지 자료를 추가
fr.splice(3,0,"망고","포도"); // 3번째 위치에서 0개를 삭제학 망고 포도 삽입한다
}
function proc5(){
su = [123,456,789,987,654,321];
frsu = fr.concat(su);
str = "fr :" + fr + "<br>";
str += "su : " + su + "<br>";
str += "frsu : " + frsu + "<br>";
document.querySelector('#result5').innerHTML = str;
}
function proc6(){
frst = fr.join() //배열을 문자열로 변환
str = "fr " + fr.length + "<br>";
for(i=0; i<fr.length; i++){
str += fr[i] + "<br>";
}
str += "frst : " + frst.length + "<br>";
for(i=0; i<frst.length; i++){
str += frst[i] + "<br>";
}
document.querySelector('#result6').innerHTML = str;
}
</script>
</head>
<body>
<div class="box">
배열요소 추가삭제<br>
push(a,b,c..) : 배열 끝에 요소를 추가한다<br>
pop() : 배열의 마지막 요소를 제거한다<br>
<br>
<button type="button" onclick="proc1()">push</button>
<button type="button" onclick="proc2()">pop</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
<div class="box">
배열요소 추출하기<br>
slice(start, end) : start~end 사이의 요소를 추출한다 <br>
end위치의 값은 포함되지 않는다<br>
<br>
<button type="button" onclick="proc3()">slice</button>
<div id="result3"></div>
</div>
<div class="box">
배열요소 수정/삭제하기<br>
splice(index, n) : index위치에서 n개를 삭제 <br>
splice(index, n, a, b, c) : index위치에서 n개를 삭제하고 a, b, c를 삽입<br>
n = 0 : 삭제하지 않고 삽입한다
<br>
<button type="button" onclick="proc4()">splice</button>
<div id="result4"></div>
</div>
<div class="box">
<br>
a.concat(b) : a배열과 b배열을 하나의 배열로 합친다 <br>
join() : 배열을 문자열로 변환한다 <br>
<br>
<button type="button" onclick="proc5()">concat</button>
<button type="button" onclick="proc6()">join</button>
<div id="result5"></div>
<div id="result6"></div>
</div>
</body>
</html>배열문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script>
function proc1(){
names = new Array();
while(true){
//입력
input = prompt("이름을 입력하세요");
//비교 - 입력 없이 확인? 취소?
if(input == null || input.trim().length < 1){
break;
}
//배열에 저장
names.push(input);
}//while문
//배열을 출력
document.getElementById('result1').innerHTML = names;
}
function proc2(){
nums = new Array();
str = "";
while(true){
//수 입력
num = prompt("수를 입력");
str += num + " ";
//중복확인
if(nums == null || nums.indexOf(num) < 0){
nums.push(num);
}
//5개가 되면 break
if(nums.length >= 5){
break;
}
}
res = "입력한 수 : " + str + "<br>";
res += "배열 저장한 수 : " + nums + "<br>";
document.getElementById('result2').innerHTML = res;
}
</script>
</head>
<body>
<div class="box">
<br>
사람 이름을 계속 입력 받아 배열에 저장하고<br>
그 저장된 이름을 출력하는 프로그램을 작성하시오.<br>
단, 입력은 prompt 명령을 이용하고,<br>
입력의 마지막은 공백문자를 입력하거나 "취소" 버튼을 눌렀을 때로 한다.<br>
"취소" 버튼은 null 이 입력될 때이다.)<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
수를 입력받는다. 입력시 수는 중복될 수 있다<br>
서로 중복되지 않은 정수 5개를 입력 받아 배열에 저장한다<br>
하는 프로그램을 작성하시오.<br>
<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
</body>
</html>
Date객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<style>
pre{
padding:20px;
}
</style>
<script type="text/javascript">
window.onload = function(){ //function이 페이지 시작하면 바로 시작하게 하기위해
//vp = document.getElementsByTagName("pre")[0];
vp = document.querySelector('pre');
window.setInterval(function(){
today = new Date();
tostr = today.toLocaleString();
vp.innerHTML = tostr;
}, 1000);
}
now = new Date();
function proc1(){
now2 = new Date("2000.4.12");
now3 = new Date(2000,4,12);
now4 = new Date(100928282);
str = now.toLocaleString() + "<br>";
str += now2.toLocaleString() + "<br>";
str += now3.toLocaleString() + "<br>";
str += now4.toLocaleString() + "<br>";
document.querySelector('#result1').innerHTML = str;
}
function proc2(){
week = now.getDay();
switch(week){
case 0:
str = "일요일";
break;
case 1:
str = "월요일";
break;
case 2:
str = "화요일";
break;
case 3:
str = "수요일";
break;
case 4:
str = "목요일";
break;
case 5:
str = "금요일";
break;
case 6:
str = "토요일";
break;
}
res = "오늘: " + now.toLocaleString() + "<br>";
res += str + "입니다";
document.querySelector('#result2').innerHTML = res;
}
function proc3(){
days=["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
res = "오늘: " + now.toLocaleString() + "<br>";
res += days[now.getDay()] + "입니다";
//days[now.getDay()]
document.querySelector('#result3').innerHTML = res;
}
</script>
</head>
<body>
<pre>
</pre>
<div class="box">
<br>
Date()객체 생성
new Date()
new Date(millisecond)
new Date("2000.4.12")
new Date(2000,4,12) 4월이 아닌 5월이 출력됨
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
<br>
요일 구하기
getDay() - 0(일요일)~6(토요일) 수로 리턴한다
if-else, switch_case를 이용하여 요일을 구한다
<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
<div class="box">
<br>
요일 구하기
getDay() - 0(일요일)~6(토요일) 수로 리턴한다
배열을 이용하여 요일을 구한다
days=["일요일","월요일","화요일","수요일","목요일","금요일","토요일"]
<br>
<button type="button" onclick="proc3()">확인</button>
<div id="result3"></div>
</div>
</body>
</html>Date객체 _경과시간
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script>
today = new Date();
function proc1(){
bir = new Date(1994, 11-1, 29);
//bir = new Date("2010.11.29");
ttime = today.getTime();
btime = bir.getTime();
console.log(ttime, btime);
times = ttime - btime;
res = times / 1000 /60 /60 /24 /365;
console.log(res);
str = "오늘 : " + today.toLocaleDateString() + "<br>";
str += "태어난 날: " + bir.toLocaleDateString() + "<br>";
str += parseInt(Math.ceil(res)) + " 경과하였습니다";
document.querySelector('#result1').innerHTML = str;
}
</script>
</head>
<body>
<div class="box">
경과시간 구하기
getTime() -리턴값은 millisec이다<br>
millisec를 1000으로 나누면 실제 초를 구할 수 있다<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>