20220119 - sort(), split(), join(), push(), pop(), shift(), unshift(), splice(), date, setTimeout, setInterval

HTML & CSS

20220119 - sort(), split(), join(), push(), pop(), shift(), unshift(), splice(), date, setTimeout, setInterval

yooky 2022. 1. 20. 01:27

sort() - 오름차순으로 배열을 정렬한다.

lotto.sort();

ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음 숫자 정렬이 필요하다면 직접 반복문을 통해 정렬하자

split() - 문자열을 구분자 기준으로 쪼게어 배열로 만들어준다

var str = "사과,배,감";
var tmp = str.split(",");

join() - 배열에 구분자를 넣어 다시 문자열로 반환한다. 구분자는 생략가능

console.log(tmp.join());
console.log(tmp.join("💞💞💞"));

push() - 배열의 마지막 요소 뒤에 새 요소를 추가한다.

tmp.push("hi");

pop() - 배열의 마지막 요소를 제거한다

tmp.pop();

shift() - 배열의 첫 번째 요소를 반환하고 제거하겠다.

var a = tmp.shift(); // 반환한 값을 a에 저장
	console.log(a); 
	console.log(tmp);

unshift() - 해당 값을 배열의 첫 번째 요소로 추가

tmp.unshift("사과");

splice(위치,개수,넣을값들) - 해당 위치에 개수만큼 삭제 후 값들을 순차적으로 추가한다. 추가,제거,끼워넣기 작업 다 가능

tmp.splice(1,0,"귤") // 첫번째 요소로 귤 추가
console.log(tmp);
	
tmp.splice(1,2) // 1번인덱스부터 2개의 인덱스 삭제
console.log(tmp);
	
tmp.splice(0,1,"멜론") //0번 인덱스부터 1개 인덱스 삭제 후 멜론추가
console.log(tmp);

Date() - new Date()를 호출하면 새로운 Date 객체가 만들어지는데, 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환

var d = new Date();
console.log(d);
console.log(d.toUTCString()); // 객체에 든 시간 정보를 UTC 문자열로 리턴

타임스탬프(timestamp) - 1970년의 첫날을 기준으로 흘러간 밀리초를 나타내는 정수. 타임스탬프를 사용하면 날짜를 숫자 형태로 간편하게 나타낼 수 있다

getFullYear() - 연도(네 자릿수)를 반환한다.

getMonth() - 월을 반환한다(인덱스 번호로 반환되기때문에 0 ~ 11로 출력된다 +1해주면 해결됨)

getday() - 요일을 반환한다 (일요일 : 0 ~ 토요일 : 6)

getDate() - 날짜를 반환한다(1 이상 31 이하)

getHours(), getMinutes(), getSeconds(), getMilliseconds() - 시, 분, 초, 밀리초를 반환한다.

	var d = new Date();
	console.log(d.getFullYear());
	console.log(d.getMonth()+1);
	console.log(d.getDate());
	console.log(d.getDay());
	console.log(d.getHours());
	console.log(d.getMinutes());
	console.log(d.getSeconds());

setTimeout(함수, 시간, 값들) - 값들을 함수에 전달하고 그 함수를 시간뒤에 실행하겠다는 작업. 값들은 선택사항

var timeout = 	setTimeout(function(msg){
					alert(msg + "3초 지났다.");}
					,3000,"hi!");
	function helpme(){
		clearTimeout(timeout);
	}

<body>
<input type="button" value = "살려줘" onclick="helpme();"/>
</body>

살려줘 버튼을 클릭하면 clearTimeout이 적용되어 3초가 흘러도 alert가 뜨지 않는다

clearTimeout(타임아웃객체) - 해당 타임아웃객체를 취소 및 제거한다
1s = 1000ms

setTimeout,setInterval(함수,시간,값들 ...) - 값들을 함수에 전달하고 그 함수를 시간마다 실행하겠다는 작업. 값들은 선택사항

setInterval(function(){
		d = new Date();
		var time = d.getHours().toString().padStart(2,"0")  
		+ ":" + d.getMinutes().toString().padStart(2,"0")
		+ ":"+d.getSeconds().toString().padStart(2,"0");
		document.getElementById("txt").value = time;
	},1000);

+) padstart는 문자열에만 적용되는거여서 시간을 tostring으로 문자열로 바꾸고 padstart를 사용해야함

+) 함수를 반복호출하다가 잠시 중단하고 다시 시작하고 싶다면?

setInterval 함수의 반환값을 변수에 할당해두고, clearInterval(변수)를 호출하여 반복을 중단하고, 다시 setInterval로 재시작해주면 된다. => 애니메이션효과에서 사용

setInterval을 이용한 애니메이션 효과

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#imgBox{
	width: 250px;
}
</style>
<script type="text/javascript">
var interval = null;
var imgs = ["cat1.png","cat2.png","cat3.png"];
var pos = 0;

interval = setInterval(play,3000);

function play(){
	pos++;
	
	if(pos == imgs.length){
		pos = 0;
	}
	document.getElementById("imgBox").src = imgs[pos];
	fade();
}
function fade(){
	
	//FadeIn
	for(var i = 0; i <= 10; i++){
		setTimeout(function(val){
			document.getElementById("imgBox").style.opacity = 0.0 + 0.1 *val;
		},100*i,i);
		
	}
	
	//Fadeout
	for(var i = 0; i <= 10; i++){
		setTimeout(function(val){
			document.getElementById("imgBox").style.opacity = 1.0 - 0.1 *val;
		},2000 + 100*i,i);
		
	}
	
	
}

function pauseImg(){
	if(interval == null){
		interval = setInterval(play,3000);
		
	} else {
		clearInterval(interval);
		interval = null;
	}
}

</script>
</head>
<body>
<input type="button" value="pause" onclick="pauseImg();"/>
<img alt="이미지들" src="cat1.png" id="imgBox"/>

	<script type="text/javascript">
		fade();
	</script>
</body>
</html>