Array Object


Home > Document > JavaScript > Object > Array object

Array object

Array Object는 여러 개의 변수가 필요할 때 변수 이름을 여러 개 만들지 않고 new Keyword 를 사용하여1 개의 변수 이름에 0번 부터 index를 붙여 사용하는 편리한 Object라고 할 수 있습니다. 특히 차후에 변수가 더 필요 하다든지 필요가 없어서 삭제 한다든지 할 때 더 더욱 편리하져...

new

new Keyword는 Array, Date 등의 Object를 만들 때 사용하는 Keyword로서 사용법은 아래와 같습니다.

입력
var 변수명 = new Array(i) // i는 사용할 element의 개수

또는

var 변수명 = new Array("element[0]", "element[1]", ......) // 사용할 element 이름을 직접 나열




Element 개수로 Array한 예제
<html>
    <head>
        <title>Element 개수로 Array한 예제</title>
    <script type="text/javascript">
    <!--
    var fam_name = new Array(6) // 변수 fam_name 선언하고 6개의 element를 사용
    fam_name[0] = "Jane Egil"
    fam_name[1] = "Tod"
    fam_name[2] = "Herold"
    fam_name[3] = "Stacy"
    fam_name[4] = "Kate Jim"
    fam_name[5] = "Bernard"
    
    for (i=0; i<fam_name.length; i++)
    // element 개수(length) 만큼 1씩 증가하며 for loop 반복한다. 조건식을 i<6 으로 줄 수도 있지만
length Method를 사용하면 변수가 추가 / 제거 될 때 수정할 필요 없음.
{ document.write(fam_name[i] + "<br />") // [0] ~ [5] 까지 6개의 element 출력 } // --> </script> </head> <body> </body> </html>
코드 실행 하기

Element 나열하여 Array한 예제
<html>
    <head>
        <title>Element 개수로 Array한 예제</title>
    <script type="text/javascript">
    <!--
    // 변수 fam_name 선언하고 6개의 element를 comma로 구분하여 나열.
    var fam_name = new Array("Jane Egil", "Tod", "Herold", "Stacy", "Kate Jim", "Bernard")
    
    for (i=0; i<fam_name.length; i++)
    // element 개수(length) 만큼 1씩 증가하며 for loop 반복한다. 조건식을 i<6 으로 줄 수도 있지만
length Method를 사용하면 변수가 추가 / 제거 될 때 수정할 필요 없음.
{ document.write(fam_name[i] + "<br />") // [0] ~ [5] 까지 6개의 element 출력 } // --> </script> </head> <body> </body> </html>
코드 실행 하기


Array Object의 Method

NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
Array Object Methods
length Array에 포함된 element(변수)의 개수 return.
***new Keyword로 Array object를 만든 후에 사용합니다.
3.0 4.0
concat() Array element 중 2개 의 element를 합친 값을 return 4.0 4.0
join() Array에 사용된 element 모두를 합친 값을 return 3.0 4.0
reverse() Array에 사용된 element 의 순서를 역(reverse)으로 나열한 값을 return 3.0 4.0
slice(element[i]) Array에 사용된 element 중 특정 순번( [i] ) 의 element 값 return 4.0 4.0
sort() Array에 사용된 element 들을 오름 차순으로 정렬 3.0 4.0


Array object의 Method
<html>
    <head>
        <title>Array object의 Method</title>
    <script type="text/javascript">
    <!--
    //new Keyword로 array object 생성하고 element 6개 사용 [0] ~ [5]
    var fam_name = new Array("Jane Egil","Tod","Herold","Stacey","Kate Jim","Bernard")

    var temp = fam_name.length //array에 사용된 element수 return
    document.write("Element의 개수는 : " + temp + "<br />")
    
    var temp = fam_name[2].slice() 
    document.write("fam_name[2]만 빼내면 : " + temp + "<br />") 

    var temp = fam_name[0].concat( ", " + fam_name[3])
    document.write("fam_name[2]와 fam_name[3]을 합치면 : " + temp + "<br />")
    
    var temp = fam_name.join()
    document.write("Element 전부를 합치면 : " + temp + "<br />")
    
    var temp = fam_name.sort()
    document.write("fam_name을 정렬하면 : " + temp + "<br />")

    var temp = fam_name.reverse()
    document.write("fam_name을 역순으로 나열하면 : " + temp + "<br />")
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>
코드 실행 하기



Array 를 이용한 시스템에 설치된 font 모양 보기 예제

아래의 예제는 element를 나열하는 방법으로 font-family 들을 나열하고 table 속에 영문 및 한글의 sample을 출력하도록 한 예제입니다. W3C에 있는 sample이며 추가 하고 싶은 글꼴이 있으면 단순히 family name을 추가하므로서 간단히 글꼴을 볼 수 있습니다. 만약 아래의 글꼴 중에서 여러분 컴퓨터에 설치된 글꼴이 아닌게 있으면 회색 글꼴(Default)로 보이게 됩니다. 이와 같이 Array Object는 일일히 변수를 지정하지 않고도 마치 변수를 지정한 것과 같은 기능을 제공해 주는 Object로서 반드시 알아야 될 Object라고 할 수 있습니다.

Source code
<html>
<head>
<title>Array 를 이용한 시스템에 설치된 font 모양 보기 예제</title>
<style type="text/css">
<!--
@font-face {
font-family: Almagro;
font-style: normal;
font-weight: normal;
src: url(../../web_font/ALMAGRO0.eot);
}
td, table{border:1px solid #000000;border-collapse:collapse;}
-->
</style>
</head>
<body>
<script Language="JavaScript">
<!--
function faceshow(){
document.write("아래의 회색글자는 시스템 글꼴입니다. 회색 글자와 같은 모양으로 보이면 System에 설치되지 않은 font입니다.")
var faceAry=new Array('default','Almagro','굴림','굴림체','궁서','궁서체','돋움','돋움체','바탕','바탕체','휴먼엽서체','Andale Mono','Arial','Arial Black','Arial Narrow','Bookman Old Style','Comic Sans MS','Copperlate Gothic','Courier','Courier New','Fixedsys','Garamond','Georgia','Impact','Webdings','WingDings');
stre='abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ';
strk=' 가나다라마바사아자차카타파하 1234567890';
document.write('\n<table cellspacing=0>');
for (i=0; faceAry.length>i; i++){ // array 괄호속에 지정한 변수 만큼 반복
document.write('<tr><td colspan=2><font color=#2e8b57>&lt;FONT face=\"<b><font color=#0033cc>'+faceAry[i]+'</font></b>\"></font><br></td></tr>\n');
document.write('<tr><td><font face=' + faceAry[i] + '>'+stre+'<br>'+strk+'\n');
document.write('<br></font><font color=gray face=defalut>' + stre + '<br>' + strk+'</font>\n');
document.write('</font><br><br></td></tr>\n\n');
}
document.write('</table>\n\n')
}
faceshow()
// --->
</script>
</body>
</html>


코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색