티스토리 뷰
1. 배열 객체 생성 확인 방법
- 타입 확인 연산자 : typeof 배열명
- 배열 객체의 메소드인 isArray 사용 : Array.isArray(배열명)
- Array 생성자의 연산자인 instanceof 사용 : 배열명 instanceof Array
2. 배열의 메소드
- 1 ) join 메소드 : 배열에 저장된 모든 요소를 문자열로 변환한 후 연결하여 출력
- 2 ) concat 메소드 : 지정된 배열에서 2개 이상의 데이터나 배열을 결합하여 출력
- 3 ) reverse 메소드 : 배열의 원소의 순서를 반대로 정렬
- 4 ) sort 메소드 : 배열 원소를 정렬
- + 숫자 데이터의 경우 사전식으로 정렬하기에 함수를 지정해야 한다.
- 5 ) slice 메소드 : 배열의 특정 범위에 속하는 원소만 선택하여 배열을 생성
- 6 ) splice 메소드 : 인덱스번호를 통해 배열의 원소를 제거하거나 추가
- 7 ) push 메소드 : 배열의 마지막 인덱스에 데이터를 추가하고 배열의 길이 반환
- 8 ) pop 메소드 : 배열의 마지막 인덱스에 있는 데이터를 삭제하고 배열의 길이 반환
- 9 ) shift 메소드 : 배열의 맨 처음(인덱스 0번)에 있는 데이터를 삭제하고 길이 반환
- 10 ) unshift 메소드 : 배열의 맨 처음(인덱스 0번)에 데이터를 삽입하고 길이 반환
- 11 ) forEach(함수) : 배열을 반복하면서 저장된 데이터를 조회( 함수를 지정해야 함 )
- 12 ) .map(함수명) : 배열의 데이터를 함수의 인자값으로 전달하고, 함수의 결과를 받아 새로운 배열에 넣어 준다.
( ex. data.map(mapArr) )
- 13 ) .filter(함수명) : 배열의 데이터 중에서 조건이 참인 데이터만 반환한다.
- 14 ) IndexOf / lastIndexOf : IndexOf는 검색 시작을 맨 처음에서 하거나, 시작 위치를 지정할 수 있으나, lastIndexOf는 배열의 마지막 원소부터 검색을 시작한다.
- + 연관배열 생성 방법 : arr = { ‘key1’:100, ‘key2’:200, ‘key3’:300, … };
- + 연관배열에서는 중괄호를 사용하여 배열을 생성하고, key는 문자열이어야 한다.
- + value의 값은 타입을 제한 받지 않는다.
[ 1. 배열의 초기화 및 삭제 ] (****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열의 초기화</title>
</head>
<body>
<script>
var arrdata = []; // 빈 배열 생성
function insertArr() { // 배열의 원소를 초기화 - 동적으로 새로운 원소 100개 추출 ( 1부터 100까지 )
console.debug("InsertArr() invoked.");
let i = 0;
for ( i = 0; i <= 99; i++ ){
arrdata[i] = i + 1; // 배열에 원소 삽입
document.write(`${arrdata[i]}`); // 데이터 출력
} // for
document.write(`<p> 배열 크기 : ${arrdata.length} </p>`); // 원소 초기화 후의 배열의 크기를 나타낸다.
} // insertArr
function delDataArr(){ // 배열의 모든 원소를 0으로 초기화
console.debug("delDataArr() invoked.");
let i = 0; // 지역 변수에서는 let을 사용하는 것이 좋다.
for ( i = 0; i < arrdata.length; i++ ){
arrdata[i] = 0; // 1부터 100까지로 초기화된 원소를 모두 0으로 변경
} // for
selectArr(); // 변경된 후의 배열의 원소를 하나씩 출력
} // delDataArr
function allDelArr(){ // 배열을 빈 배열로 만들어 버린다. - 원소를 한번에 삭제 (***)
console.debug("allDelArr() invoked.");
arrdata.length = 0; // 배열 원소 삭제 (*****)
selectArr(); // 삭제된 후의 원소 출력
} // all DelArr
function selectArr(){ // 원소 하나씩 출력
console.debug("selectArr() invoked.");
// for ( let i = 0; i < arrdata.length; i++ ){
// document.write(`${arrdata[i]} `);
// } // for
arrdata.forEach(v => document.write(v + " ")); // 위의 for와 같은 기능 (****)
document.write(`<p> 배열의 크기 : ${arrdata.length} </p>`);
document.write(`<a href='133.자바스크립트_배열의초기화.html'>돌아가기</a>`);
} // selectArr
insertArr(); // 시작
</script>
<p></p>
<button type="button" onclick="delDataArr();">배열 데이터 초기화</button>
<button type="button" onclick="allDelArr();">배열 데이터 삭제</button>
</body>
</html>[ 2. 배열 관련 메소드 - join ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 메소드 ( join ) </title>
</head>
<body>
<script>
var city = ["서울", "부산", "대전", 100, true]; // join은 어떤 원소이든 문자열로 연결하게 된다.
var joindata1 = city.join(); // 기본 구분자로 쉼표 (,)를 사용하여 출력
var joindata2 = city.join('-'); // 지정된 구분자를 사용하여 출력한다.
var joindata3 = city.join(' 그리고 '); // 지정된 구분자를 사용하여 출력한다.
document.write(`조인 결과1 : ${joindata1} <p></p>`);
document.write(`조인 결과2 : ${joindata2} <p></p>`);
document.write(`조인 결과3 : ${joindata3} <p></p>`);
</script>
</body>
</html>[ 3. 배열 관련 메소드 - concat ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - concat</title>
</head>
<body>
<script>
const city01 = ["서울", "부산", "대전"];
const city02 = ["대구", "광주", "인천"];
const city03 = ["전주", "부여", "세종"];
var data1 = city01.concat("수원", "오산"); // 해당 배열에 원소로 추가해서 출력 ( 원소로 배열을 넣을 수도 있다. )
var data2 = city01.concat(city02); // 원소로 배열 추가 ( 단, 이때는 city01에 추가하는 것이기에 수원과 오산은 추가되지 않는다. )
var data3 = city01.concat(city03, city02);
console.log(`결과1 : ${data1}`);
console.log(`결과2 : ${data2}`);
console.log(`결과3 : ${data3}`);
console.log(`원래 배열 : ${city01}`); // city01을 확인해 보면 처음 배열 그대로 유지되고 있음을 알 수 있다.
// concat을 추가보다는 연결의 의미가 더 적합하다.
</script>
</body>
</html>[ 4.배열 관련 메소드 - reverse ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - reverse</title>
</head>
<body>
<script>
const data = [ 9, 8, 7, 6, 5, 4, 3, 2, 1 ];
document.write(`배열 : ${data.join()} <p/>`);
const rdata = data.reverse(); // 배열의 원소를 반대로 정렬
document.write(`배열 : ${rdata.join()} <p/>`);
document.write(`정렬 후 오리지날 배열 : ${data.join()} <p/>`);
// 오리지날 데이터인 data도 바뀌어서 저장된다. (***)
</script>
</body>
</html>[ 5. 배열 관련 메소드 - sort ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - sort</title>
</head>
<body>
<script>
// 원소가 Number 타입인 배열 2개
var ndata1 = [ 19, 38, 67, 26, 55, 24, 53, 12, 31 ];
var ndata2 = [ 132, 2, 41, 123, 45, 1234, 6, 29, 4567 ];
// 원소가 String 타입인 배열 2개
var edata = ["Apple", "Html", "Game", "Computer", "Java"];
var kdata = ["서울", "부산", "구포", "대구", "인천"];
document.write(`수치 정렬1 : ${ndata1.sort()} <p/>`);
document.write(`수치 정렬2 : ${ndata2.sort()} <p/>`);
// 숫자 데이터가 사전식으로 정렬되고 있음을 알 수 있다.
// Number 타입을 제대로 정렬되고 있지 못하고 있음을 알 수 있다.(*)
document.write(`영문 정렬 : ${edata.sort()} <p/>`);
document.write(`한글 정렬 : ${kdata.sort()} <p/>`);
// 원 배열도 정렬시킨다.
console.log(ndata1);
console.log(edata);
// 비교함수 삽입
document.write("수치 정렬3 : " + ndata2.sort(function ( a, b ) { return a - b; }) + "<p/>"); // 오름차순
document.write("수치 정렬4 : " + ndata2.sort((a, b) => b-a) + "<p/>"); // 내림차순
// 이렇게 되면, 숫자 데이터를 정확하게 오름차순 정렬을 할 수 있다. ( 내림차순은 b와 a의 위치를 반대로 하면 된다. ) (**)
// 이처럼 숫자데이터를 정렬하기 위해서는 비교함수를 넣어야 한다. (**)
</script>
</body>
</html>[ 6. 배열 관련 메소드 - slice ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 slice 메소드</title>
</head>
<body>
<script>
const kdata = [ "서울", "부산", "구포", "대구", "인천", "대전", "세종" ];
const str1 = kdata.slice(0,4);
const str2 = kdata.slice(2, -1);
const str3 = kdata.slice(-4, -2);
// 음수는 뒤에서 부터 인덱스 번호를 -1부터 카운팅하게 된다.
// slice의 경우 두번째에 지정된 인덱스번호의 원소는 포함되지 않는 특징을 가지고 있다. (**)
document.write(`부분 배열1 : ${str1} <p/>`);
document.write(`부분 배열2 : ${str2} <p/>`);
document.write(`부분 배열3 : ${str3} <p/>`);
// slice는 범위에 해당하는 데이터를 따로 뽑아와서 출력한다.
document.write(`오리지날 배열 : ${kdata} <p/>`);
// 오리지날 배열에는 영향을 주지 못하고 있음을 알 수 있다.
</script>
</body>
</html>[ 7. 배열 관련 메소드 - splice ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 splice 배열</title>
</head>
<body>
<script>
var kdata = ["서울", "부산", "구포", "대구", "대전"];
// ================================================================================
const str1 = kdata.splice(1,2); // 인덱스번호 1번부터 2개 원소를 삭제하는 메소드이다.
document.write(`삭제 데이터 : ${str1} <br>`);
document.write(`남은 데이터 : ${kdata} <br>`);
// 이처럼 원래의 배열에 영향을 주고 있음을 알 수 있다.
// ================================================================================
const str2 = kdata.splice(1,1,"강릉","세종"); // 1번 인덱스에서 1개를 삭제하고, 삭제된 자리에 강릉과 세종을 새로 삽입하는 것이다.(***)
// 위는 삭제와 삽입을 동시에 하는 방법이며, 가장 좋은 방법이다.
// 이처럼 splice는 데이터를 삭제할 수도, 삽입할 수도 있다.
document.write(`삭제 데이터 : ${str2} <br>`);
document.write(`남은 데이터 : ${kdata} <br>`);
// ================================================================================
const str3 = kdata.splice(2, Number.MAX_VALUE); // 2번 인덱스부터 끝까지 삭제하는 것이다.
// Number은 number 타입의 Wrapper 타입이다.
// Number.MAX_VALUE은 Number이 가질 수 있는 최대의 값을 의미한다.
document.write(`삭제 데이터 : ${str3} <br>`);
document.write(`남은 데이터 : ${kdata} <br>`);
// ================================================================================
// 자바스크립트에서는 자바와 유사하게 Wrapper타입을 가지고 있는데, 각 타입의 첫문자를 대문자로 바꾸면 Wrapper 타입이 된다.
</script>
</body>
</html>[ 8. 배열 - pop / push ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 pop / push </title>
</head>
<body>
<script>
const kdata = ["서울", "부산", "구포", "대구", "대전"];
var p1 = kdata.push('청주', '세종');
// 배열에 청주와 세종이 차례대로 추가된다.
document.write(`데이터 : ${p1} <br>`);
document.write(`배열 데이터 : ${kdata} <p/>`);
// ====================================================
var p2 = kdata.pop();
document.write(`데이터 : ${p2} <br>`);
document.write(`배열 데이터 : ${kdata} <p/>`);
// 배열은 먼저 넣은 원소가 가장 밑바닥에 들어가고, 가장 최근에 넣은 원소가 가장 위에 위치해 있기에
// pop을 사용해서 가장 위의 것을 출력하게 되면, 가장 최근에 넣은 원소인 세종이 출력된다.
</script>
</body>
</html>[ 9. 배열 - unshift / shift ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 shift / unshift </title>
</head>
<body>
<script>
const kdata = ["서울", "부산"];
// ====================================================
var p1 = kdata.unshift('청주', '세종');
// unshift는 인덱스번호 0번 자리에 원소를 삽입하게 된다.
// 기존의 인덱스 0번의 원소는 뒤로 밀리게 된다.
document.write(`데이터 : ${p1} <br>`);
document.write(`배열 데이터 : ${kdata} <br>`);
// ====================================================
var p2 = kdata.shift();
// shift는 인덱스 번호 0번의 원소를 삭제하게 된다.
document.write(`데이터 : ${p2} <br>`);
document.write(`배열 데이터 : ${kdata} <br>`);
// ====================================================
// shift와 unshift는 지양해야 하며, 차라리 splice를 사용하는 것이 좋다.
</script>
</body>
</html>[ 10. 배열 - foreach ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - foreach(****)</title>
</head>
<body>
<script>
var kdata = ["서울", "부산", "청주", "대구"];
// ====================================================
function printArr(item, index){
document.write(`배열 데이터 [${index}] : ${item} <br>`);
} //function
kdata.forEach(printArr);
// 각 원소를 뽑아낼때 어떤 함수를 적용할 것인지 지정하게 되어있다.
// 각 원소는 forEach로 인해 자동으로 불러오게 된다.
// (method) Array<string>.forEach(callbackfn: (value: string, index: number) )
// callbackfn은 call back function이다.
document.write("<p/>");
// ====================================================
kdata.forEach((item, index) => document.write(`배열 데이터 [${index}] : ${item} <br>`) );
// 이와 같이 익명함수를 직접 작성할 수도 있다.
</script>
</body>
</html>[ 11. 배열 - forEach2 ] (****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - forEach 2</title>
</head>
<body>
<script>
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var sum = 0;
function addArr(value){
sum += value;
} // addArr
data.forEach(addArr);
document.write(`1.배열 데이터의 합 : ${sum} <p/>`);
// 익명함수를 사용한 버전
data.forEach((value) => {sum += value; document.write(`2.원소의 합 진행중 : ${sum} <br>`);});
// 익명함수 사용하는 연습을 많이 하는 것이 좋다.
</script>
</body>
</html>[ 12. 배열 - map ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - map</title>
</head>
<body>
<script>
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function mapArr(value){
return value * value;
} // mapArr - 제곱한 값을 반환한다.
var mapdata = data.map(mapArr);
// data 배열을 mapArr함수로 매핑한 값을 mapdata 변수에 저장한 것이다.
var mapdata2 = data.map( (value) => value**2 );
// 이처럼 익명함수로도 제곱을 구하는 함수를 만들 수 있다. (***)
document.write(`원래 배열 : ${data} <p/>`);
document.write(`map 메소드 적용 배열 : ${mapdata} <p/>`);
</script>
</body>
</html>[ 13. 배열 - filter ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - filter (****)</title>
</head>
<body>
<script>
var data = [ 21, 42, 33, 14, 25, 12, 37, 28, 16, 11];
function filterArr(value) {
console.debug(`filterArr(${value}) invoked.`);
return value >= 18; // 배열의 원소 중 이 조건식이 참이 되는 원소만 새로운 배열에 삽입한다. (**)
} // filterArr
var fdata = data.filter(filterArr); // 필터링한 데이터
// filter은 원소를 하나씩 꺼내가면서 참인지 거짓인지 파악하게 된다.
var fdata2 = data.filter((value) => value >= 18 );
// return은 생략이 가능하며, filter은 위와 같이 익명함수를 통해 작성할 수도 있다.
document.write(`필터 전 배열 : ${data} <p/>`);
document.write(`필터 후 배열 : ${fdata} <p/>`);
</script>
</body>
</html>[ 14. 배열 - Indexof / lastIndexof ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - Indexof / lastIndexof</title>
</head>
<body>
<script>
var data = [ 10, 20, 30, 40, 50, 60, 70, 30, 80, 90, 100 ];
// ====================================================
document.write(`1. 배열 데이터 : [${data}] <p/>`);
// ====================================================
document.write(`2. 처음부터 검색한 30의 인덱스 : ${data.indexOf(30)} <p/>`);
document.write(`3. 마지막에서 검색한 30의 인덱스 : ${data.lastIndexOf(30)} <p/>`);
// 해당 원소가 몇번째 인덱스 번호에 있는지를 검색해 준다.
// 출력결과로 인덱스 번호를 출력하게 된다.
// 같은 원소가 있을 경우 가장 먼저 만나게 되는 원소를 출력하게 된다.
// ====================================================
document.write(`4. 세번째부터 검색한 30의 인덱스 : ${data.indexOf(30, 3)} <p/>`);
// 처음이나 끝이 아니여도, 시작할 위치를 지정해줄 수 있다.
// ====================================================
document.write(`5. 처음부터 검색한 300의 인덱스 : ${data.indexOf(300)} <p/>`);
// 검색결과를 찾지 못하면 -1을 출력하게 된다.
</script>
</body>
</html>[ 15. 연관 배열 ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 연관 배열(***)</title>
</head>
<body>
<script>
const data = { 'f0':100, 'f1':200, 'f2':300 }; // 연관 배열
const obj = { name : "hehehehe", age : 23 }; // 객체 리터럴
// 중괄호 기호 {}는 원래 리터럴 방식으로 객체를 만드는 기호이다.
// 때문에 연관배열과 객체를 구분하기 위해서 키타입의 문자를 요구한다.
// ====================================================
// 키는 문자열로 생성해야 한다. ( value는 어느 타입이든 상관이 없다. ) (***)
// ====================================================
// 연관배열의 원소에 접근하는 방법은 2가지가 있다.
// 1. 연관배열변수['key'] 2. 연관배열변수.key (****)
data['f3'] = 400; // 새로운 연관배열의 원소 생성
data.f4 = 500; // 새로운 연관배열의 원소 생성2
// ====================================================
// 2. 연관배열변수.key 방법 (****)
document.write(`${data.f0} <br>`);
document.write(`${data.f1} <br>`);
// ====================================================
// 1. 연관배열변수['key'] 방법
document.write(`${data['f2']} <br>`);
document.write(`${data['f3']} <br>`);
document.write(`${data['f4']} <br>`);
// ====================================================
</script>
</body>
</html>[ 16. 다차원 배열 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 다차원 배열</title>
</head>
<body>
<script>
var data = [ [10, 20, 30, 40, 0], [ 60, 70, 80, 90, 0] ]; // 2차원배열 : 배열의 원소가 또 다른 배열
// ====================================================
// 2차원 이상의 다차원 배열을 사용하는 방법
data[0][4] = 50; // 0을 50으로 변경
data[1][4] = 100; // 0을 100으로 변경
// 가장 바깥의 배열에서 카운트한 인덱스 번호부터 시작해서 차근차근 인덱스 번호를 작성하면 된다.
// ====================================================
document.write(`1. 2차원 배열 첫번째 데이터 : ${data[0][0]} <br>`);
document.write(`2. 2차원 배열 마지막 데이터 : ${data[1][4]} <br>`);
document.write(`3. 2차원 배열 행의 길이 : ${data.length} <br>`);
document.write(`4. 2차원 배열의 원소의 길이 : ${data[0].length} <br>`);
// 2차원 배열 행의 길이는 가장 바깥 배열의 원소의 개수를 의미한다.
</script>
</body>
</html>[ 17. 다차원 배열 2 - 응용 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 응용</title>
</head>
<body>
<script>
const arr0 = [ 10, 20, 30, 40, 50];
const arr1 = [11, 21, 31, 41, 51];
const arr2 = [12, 22, 32, 42, 52];
const arr3 = [ 13, 23, 33, 43, 53 ];
// ====================================================
const allArr = [ arr0, arr1, arr2, arr3 ]; // 2차원 배열 생성
const partArr = [arr1, arr3];
// ====================================================
function printA(){
for( let x = 0; x < allArr.length; x++){
for( let y = 0; y < allArr[x].length; y++ ){
document.write(allArr[x][y] + " ");
} // inner for
document.write("<p></P>");
} // for
document.write("<a href='149.자바스크립트_다차원배열2.html'>돌아가기</a>");
} // printA
// ====================================================
function printPart(){
// for문을 중복해서 원소 출력하기
for( let x = 0; x < partArr.length; x++){
for( let y = 0; y < partArr[x].length; y++ ){
document.write(partArr[x][y] + " ");
} // inner for
document.write("<p></P>");
} // for
// ====================================================
// for-of를 사용하여 원소를 출력할 수도 있다. (****)
for( let temp of partArr ){
for( let number of temp ){
console.log(number);
} // inner for
} // for
// ====================================================
document.write("<a href ='149.자바스크립트_다차원배열2.html'>돌아가기</a>");
} // printpart
// ====================================================
</script>
<button type="button" onclick="printA();">전체 배열 데이터 보기</button>
<button type="button" onclick="printPart();">부분 배열 데이터 보기</button>
</body>
</html>[ 18. 객체 변수 생성 ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 객체변수(***)</title>
</head>
<body>
<p id="var1"></p>
<p id="var2"></p>
<p id="var3"></p>
<script>
var car = { name : 'Sonata', speed : 100, color : 'white'}; // 객체 생성
// id에 맞는 요소를 찾아서, 각각의 내용을 p태그 내에 콘텐츠로 넣어 준다. (***)
document.getElementById("var1").innerHTML = "자동차 이름 : " + car['name'];
document.getElementById("var2").innerHTML = "자동차 속도 : " + car.speed;
document.getElementById("var3").innerHTML = "자동차 색상 : " + car.color;
</script>
</body>
</html>[ 19. 객체 변수 생성 2 ] (******)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 객체변수 생성 2</title>
</head>
<body>
<p id="msg1"></p>
<p id="msg2"></p>
<p id="msg3"></p>
<script>
var obj = {
m1 : function(){
return "Hello Sonata.";
}, // m1
m2 : function(a){
var result = a;
return result;
}, // m2
m3 : function(a, b){
var result = a + b;
return result;
} // m3
}; // 객체 리터럴 방식으로 1회성 객체 생성 ( 재사용 불가능 )
document.getElementById("msg1").innerHTML = obj.m1();
document.getElementById("msg2").innerHTML = obj.m2(100);
document.getElementById("msg3").innerHTML = obj.m3(100, 200);
</script>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 68일차 - 문서 객체 모델 (**) / 제이쿼리 시작 (0) | 2022.06.03 |
|---|---|
| KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****) (0) | 2022.06.02 |
| KH 65일차 - 자바 스크립트 ( 함수 / ES6 / 배열 (*****) ) (0) | 2022.05.30 |
| KH 64일차 - 자바 스크립트 (***) (0) | 2022.05.27 |
| KH 63일차 - 미디어 쿼리 / 자바 스크립트 (***) (0) | 2022.05.26 |
댓글