<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script>
fr = ["사과", "바나나", "참외","사과","복숭아","사과","파인애플"];
function proc1(){
str = "원래배열 : " + fr + "<br>";
while(true){
frname = prompt("추가 이름을 입력하세요");
fr.push(frname); //배열 끝에 요소를 추가한다.
cont = confirm("계속할래???");//yes먄 true no이면 false
if(!cont) break;
else continue;
}
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) //1번째 부터 3사이의
str = "원래배열: " + fr + "<br>";
str += "추출된 배열 : " + frsli + "<br>";
document.querySelector('#result3').innerHTML = str;
}
function proc4(){
fr.splice(2, 1);//2번째 위치에서 1개를 삭제한다
fr.splice(3, 2, "딸기", "수박", "자두")
//3번째 위치에서 2개를 삭제하고 딸기(3번째)수박(4번째)자두(5번째)가 삽입한다
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(start, n) : index위치에서 n개를 삭제 <br>
splice(start, 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() :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>
신입 개발자 입니다!!!