[Javascript] 간단한 주소록 만들기 - 1 0

DB연동없이 html과 javascript를 이용한 기초학습
해당 과정은 javascript를 처음 접하거나, 기초 개념이 부족한 사람들에게 유용한 정보이다.

이름 , 나이 , 직업 , 전화번호를 담고있는 전화번호부를 만들 것이다.

번호 이름 나이 직업 전화번호
1 김정말 30 개발자 01012345678
2 신우헝 30 퍼블리셔 01056781234
3 이퍼블 23 퍼블리셔 01078123456
4 김개발 33 개발자 01034567812
5 박사서 24 사서 01034567812
6 최무직 16 무직 01045678123

위의 전화번호부를 만들고 싶다면 어떻게 해야할까?

우선 번호, 이름, 나이, 직업, 전화번호를 가지고 있는 Object를 생성하자



var phoneBook = {

'name' : '이름',

'age' : '나이',

'job' : '직업',

'phone' : '전화번호'

};


그리고 전화번호부를 저장할 배열 객체를 만든다.




var phoneBookArr = [];


생성한 전화번호부를 배열에 담는다.




phoneBookArr.push(phoneBook);



그리고 화면에 표시할 내용은 생성한다.
javascript의 반복문인 for문을 이용해서 table의 내부에 있는 값을 생성할 예정이다.
table 내부에는 tr, th, td가 있는데 
tr의 경우 테이블의 row
th는 테이블의 헤더
td는 테이블의 데이터를 의미한다.




var html = '';
        for (var i = 0 ; i < phoneBookArr.length ; i++) {
            var phoneBookObject = phoneBookArr[i];
            html += '    <tr>'
                  + '        <td>'
                  + phoneBookObject['name']
                  + '        </td>'
                  + '        <td>'
                  + phoneBookObject['age']
                  + '        </td>'
                  + '        <td>'
                  + phoneBookObject['job']
                  + '        </td>'
                  + '        <td>'
                  + phoneBookObject['phone']
                  + '        </td>'
                  + '    </tr>';
        };
        document.getElementById("해당 태그 id값").innerHTML = html;


덧글

댓글 입력 영역