배열
- 자바스크립트에서는 배열도 객체로 표현한다.
- 자바스크립트의 배열은 자바 ArrayList 처럼 여러가지 자료형을 담을 수 있다.
let data = ["홍길동", 20, "서울시 종로구 관철동"];
data[0];
data[1];
data[2];- 배열의 요소가 객체이거나 배열일 수 있다.
- [[], [], []] 또는 [{}, {}, {}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let data = [
{dno : 10, dname : "기획팀", dloc: "종각"},
{dno : 20, dname : "영업팀", dloc: "종각"},
{dno : 30, dname : "개발1팀", dloc: "판교"},
{dno : 40, dname : "개발2팀", dloc: "가산"}
]
for(i= 0;i<data.length;i++){
let row = data[i];
console.log(row);
console.log(row.dno, row.dname, row.dloc);
for(let key in row){
console.log(row[key]);
}
}
</script>
</head>
<body>
</body>
</html>
객체
- Javascript Object Notation => JSON
- 여러가지 속성과 동작으로 구성
- 자바의 Map과 같이 key 와 value 로 이루어진 데이터 셋
- 여러가지의 데이터를 처리할 때, 배열보다 객체가 더 효율적이다.
//자바스크립트 객체
let data2 = {name : "홍길동", age: 20, addr: "서울시 종로구 관철동"};
//접근
alert(data2.name);
alert(data2["name"]);
alert(typeof(data2));
alert(data2.key);//undefined- 아래와 같이 동작을 정의할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let person = {
name : "홍길동",
age:20,
addr: "서울시 종로구 관철동",
eat : function(food){
alert(this.name + "이 "+food+"를 먹는다.");
}
}
person.eat("밥");
</script>
</head>
<body>
</body>
</html>
객체의 속성만큼 반복 실행
- for(속성명 in 객체 ){ 객체의 속성 만큼 반복 실행}
for(key in data){
alert(data.key) //X
alert(data[key]);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let person = {
name : "홍길동",
age:20,
addr: "서울시 종로구 관철동",
eat : function(food){
alert(this.name + "이 "+food+"를 먹는다.");
}
}
for(let key in person){
console.log(key+"====>"+person[key]);
console.log(person.key); //undefined
}
</script>
</head>
<body>
</body>
</html>
'Kosta DevOps 과정 280기 > Java' 카테고리의 다른 글
| 문서 객체 조작 (0) | 2024.07.10 |
|---|---|
| 문서 객체 모델 (0) | 2024.07.10 |
| 미디어 쿼리 설정 (0) | 2024.07.09 |
| 반응형 웹 (0) | 2024.07.08 |
| 수평 레이아웃 (가로로 배치하기) (0) | 2024.07.08 |
