📌객체(object)란?
✔하나의 변수에 여러 속성을 저장할 수 있도록 해주는 데이터 타입
✔key/value가 한쌍으로 저장되는 구조, 그중 value가 함수로 정의된 것은 객체가 가지는 동작(메소드)
✔JavaScript는 객체 기반의 스크립트 언어로서, 거의 모든 것이 객체로 이루어져 있다.
Array[배열]객체
✔배열은 하나의 변수에 많은 값을 담을 수 있다.
✔인덱스 번호를 참조하여 값에 접근할 수 있다.
✔배열 요소의 타입이 고정되 있지 않으므로 같은 배열에 서로 다른 타입의 요소가 존재할 수 있다.
✔현재 배열의 크기보다 큰 인덱스를 사용하여 크기를 자동으로 증가 시킬 수 있다.
❗Array객체의 메소드
| indexOf(item, start) | 배열에서 요소를 찾아 위치를 반환 |
| lastIndexOf(item, start) | 역순으로 요소를 찾아 위치를 반환 |
| push(a,b,c…) | 배열 끝에 요소를 추가 |
| pop() | 마지막 요소를 제거하고 반환 |
| shift() | 배열 처음의 원소를 제거하고 반환 |
| unshift(a,b,c…) | 배열 처음에 요소를 추가한다. |
| reverse() | 배열의 순서를 반대로 나타낸다 |
| sort(sortfunction) | 배열을 정렬한다 |
| slice(start,end) | start~end(포함하지 않음)범위의 요소들을 따로 떼어내어 새로운 배열을 만든다 |
| join(deli) | 배열 요소를 하나의 문자열로 합친다. 구분자를 지정할 수 있으며 생략시 콤마로 구분한다 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/public.css">
<script>
const arr = ["사과", "바나나", "복숭아", "사과", "참외", "수박", "사과", "파인애플"]
proc1= ()=>{
//찾을 과일을 입력
vfr = prompt("찾을 과일을 입력하세요")
//입력한 과일이 몇번째 있는지 ?
idx = arr.indexOf(vfr);
str="";
if(idx < 0){
str += `입력한 ${vfr}은(는) 없는 과일입니다...`;
} else {
str += `입력한 ${vfr}은(는) ${idx}번째 과일입니다...`;
}
document.querySelector("#res1").innerHTML = str;
}
proc2= ()=>{
//찾을 과일을 입력
vfr = prompt("찾을 과일을 입력하세요")
//입력한 과일이 몇번째 있는지 ?
idx = arr.lastIndexOf(vfr);
str="";
if(idx < 0){
str += `입력한 ${vfr}은(는) 없는 과일입니다...`;
} else {
str += `입력한 ${vfr}은(는) ${idx}번째 과일입니다...`;
}
document.querySelector("#res2").innerHTML = str;
}
proc3= ()=>{
vfr = prompt("찾을 과일을 입력하세요");
idx = 0;
str = `입력한 ${vfr}은(는)`;
flag = false;
while(true){
idx = arr.indexOf(vfr, idx);
if(idx < 0){
//처음부터 없는 것 또는 있다가 없는것
if(!flag)
str += `없습니다`
else
str += `있습니다..`
break;
}
str += ` ${idx}번째 `;
flag = true;
idx++;
}
document.querySelector('#res2').innerHTML = str;
}
proc4=()=>{
str =`원래 배열 ${arr} <br>`
arr.push("자두", "오렌지");
str +=`추가 후 배열: ${arr} <br>`
document.querySelector('#res4').innerHTML = str;
}
proc5= ()=>{
str =`원래 배열 ${arr} <br>`
vpop = arr.pop();
str +=`제거 후 배열: ${arr} <br>`
str += `제거된 물품 : ${vpop} <br>`
document.querySelector('#res5').innerHTML = str;
}
proc6=()=>{
str =`원래 배열 ${arr} <br>`
narr = arr.slice(1,6);
str +=`arr.slice(1,6) 후 : ${arr} <br>`;
str += `arr.slice(1,6) 결과 새로운 배열 : ${narr}`;
document.querySelector('#res6').innerHTML = str;
}
proc7=()=>{
str =`원래 배열 : ${arr} <br>`
//3번째 위치에서 1개를 삭제
//arr.splice(3,1)
//str +=`삭제 후 배열: ${arr} <br>`
//-----------------------------------------------
//2번째 위치에서 2개를 삭제하고 100,200,300을 삽입
//arr.splice(2, 2, 100,200,300);
//str +=`변경 후 : ${arr} <br>`;
//-----------------------------------------------
//5번째위치에 1,2,3,4,5를 삽입
arr.splice(5,0,1,2,3,4,5);
str +=`변경 후 : ${arr} <br>`;
document.querySelector('#res7').innerHTML = str;
}
proc8 =()=>{
str =`arr배열의 길이 : ${arr.length} <br>`;
for(x in arr){
str += `arr[${x}] : ${arr[x]} <br>`
}
document.querySelector('#res8').innerHTML = str;
vs = arr.join(); //배열을 문자열로 변환
str="vs문자열의 길이 : " + vs.length + "<br>";
for(i in vs){
str += `vs[${i}] : ${vs[i]} <br>`
}
document.querySelector('#res8').innerHTML += str;
}
</script>
<style>
input[type=button]{
width : 150px;
}
</style>
</head>
<body>
<div class="box">
<br><br>
<input type="button" value="indexof" onclick="proc1()">
<input type="button" value="lastIndexof" onclick="proc2()">
<input type="button" value="indexof_start" onclick="proc3()">
<br>
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>
</div>
<div class="box">
<br><br>
<input type="button" value="push" onclick="proc4()">
<input type="button" value="pop" onclick="proc5()">
<br>
<div id="res4"></div>
<div id="res5"></div>
</div>
<div class="box">
<br><br>
<input type="button" value="slice" onclick="proc6()">
<input type="button" value="splice" onclick="proc7()">
<br>
<div id="res6"></div>
<div id="res7"></div>
</div>
<div class="box">
<br><br>
<input type="button" value="join" onclick="proc8()">
<br>
<div id="res8"></div>
</div>
</body>
</html>'웹프로그래밍' 카테고리의 다른 글
| [Java Script] 자바 스크립트 객체_난수 객체(random) (0) | 2023.01.09 |
|---|---|
| [Java Script] 자바 스크립트 객체_String객체의 메소드 (0) | 2023.01.06 |
| [Java Script] 자바 스크립트 객체_Date객체 (0) | 2023.01.05 |
| 목록표시(LIST) (0) | 2022.12.27 |
| HTML5&Script 기초 (1) | 2022.12.27 |