모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다. 

배열에 데이터 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열에 데이터 추가</title>
<script>
 
/*
배열에 데이터 추가
*/
 
var student = [];
 
// 속성추가
student.push({이름 : 'ㄱㄱㄱ', 취미 : 'aaa', 특기 : 'AAA'});
student.push({이름 : 'ㄴㄴㄴ', 취미 : 'bbb', 특기 : 'BBB'});
student.push({이름 : 'ㄷㄷㄷ', 취미 : 'ccc', 특기 : 'CCC'});
student.push({이름 : 'ㄹㄹㄹ', 취미 : 'ddd', 특기 : 'DDD'});
student.push({이름 : 'ㅁㅁㅁ', 취미 : 'eee', 특기 : 'EEE'});
student.push({이름 : 'ㅂㅂㅂ', 취미 : 'fff', 특기 : 'FFF'});
student.push({이름 : 'ㅅㅅㅅ', 취미 : 'ggg', 특기 : 'GGG'});
 
alert(student[0].이름 + ' / ' + student[0].취미 + ' / ' + student[0].특기);
 
</script>
</head>
<body>
 
</body>
</html>
cs


메서드 추가해서 배열 값 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열에 데이터 추가</title>
<script>
 
/*
배열에 데이터 추가
*/
 
var student = [];
 
// 속성추가
student.push({이름 : 'ㄱㄱㄱ', 취미 : 'aaa', 특기 : 'AAA'});
student.push({이름 : 'ㄴㄴㄴ', 취미 : 'bbb', 특기 : 'BBB'});
student.push({이름 : 'ㄷㄷㄷ', 취미 : 'ccc', 특기 : 'CCC'});
student.push({이름 : 'ㄹㄹㄹ', 취미 : 'ddd', 특기 : 'DDD'});
student.push({이름 : 'ㅁㅁㅁ', 취미 : 'eee', 특기 : 'EEE'});
student.push({이름 : 'ㅂㅂㅂ', 취미 : 'fff', 특기 : 'FFF'});
student.push({이름 : 'ㅅㅅㅅ', 취미 : 'ggg', 특기 : 'GGG'});
 
//alert(student[0].이름 + ' / ' + student[0].취미 + ' / ' + student[0].특기);
 
var output = '이름\t취미\t특기\n';
for (var i in student) {
    with (student[i]) {
        output += 이름 + '\t' + 취미 + '\t' + 특기 + '\n';
    }    
}
 
alert(output);
 
</script>
</head>
<body>
 
</body>
</html>
cs



함수를 사용한 객체 생성

 위에서는 배열에 push로 객체를 하나씩 집어 넣었다. 하지만 시간이 오래걸린다. 객체도 함수 형태로 만들어 찍어내면 빠르고 쉽게 생성할 수 있다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체를 생성하는 함수</title>
<script>
 
/*
객체를 생성하는 함수
*/
 
function makeStudentInfo (name, korean, math, english) {
    var willReturn = {
        이름 : name,
        국어 : korean,
        수학 : math,
        영어 : english,
        
        // create method
        getSum : function () {
            return this.국어 + this.수학 + this.영어;
        },
        
        getAverage : function () {
            return this.getSum() / 3;
        },
        
        toString : function (){
            return this.이름 + '  ' + this.getSum() + '  ' + this.getAverage();
        }
    };
    return willReturn;
}
 
var students = [];
var output = '';
 
students.push(makeStudentInfo('ㄱㄱㄱ', 100, 90, 80));
students.push(makeStudentInfo('ㄴㄴㄴ', 90, 90, 80));
students.push(makeStudentInfo('ㄷㄷㄷ', 80, 90, 80));
students.push(makeStudentInfo('ㄹㄹㄹ', 70, 90, 80));
students.push(makeStudentInfo('ㅁㅁㅁ', 60, 90, 80));
 
for (var i in students) {
    output += students[i].toString() + '\n';    
}
 
alert(output);
 
</script>
</head>
<body>
 
</body>
</html>
cs


퇴사 관련 이야기들을 모아 책으로 출판했습니다. 

아래 링크에서 전체 목차를 읽어보세요!

대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659



아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.

http://www.bookk.co.kr/community/postscript

저작자표시 비영리 변경금지

'문돌이의 IT > JavaScript' 카테고리의 다른 글

자바스크립트 상속  (0) 2017.10.12
자바스크립트 생성자 함수  (0) 2017.10.11
자바스크립트 객체의 속성추가 및 제거  (0) 2017.10.09
자바스크립트 in / with 키워드  (0) 2017.10.08
자바스크립트 객체 javascript object  (0) 2017.10.06

+ Recent posts

티스토리툴바