JavaScript_04

객체

객체란, 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용한 데이터를 가져오게 되는 이 객체이다.

생성 방법

객체의 선언

var object = {'one': 1, 'two':2, 'three': '3'}
// Object {one: 1, two: 2, three: "3"}  

객체의 호출

var object = {'one': 1, 'two':2, 'three': '3'}  // 객체 선언
for(key in object){  
    document.write(key + " "+ object +"</br>")  
}  
/*
one [object Object]
two [object Object]
three [object Object]
*/

 

객체와 함수

객체는 배열과는 달리 객체 안에 함수를 넣을 수 있다.

var object = {   
    'number' : {'one': 1, 'two':2, 'three': '3'},  
    'show' : function() {   
               document.write('obj func')  
     }  
} // 객체 선언
object.show() // obj func

 

모듈

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장 되기에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있다. (브라우저에만 해당)

사용 방법

먼저 필요한 기능을 입력 할 JS 파일을 생성한다.

var print  
print = function(){  
    document.write("print 함수가 호출 되었습니다.");  
}  

임의의 파일명 “printf_func.js”으로 저장한다.

기능을 사용할 파일에서 head에서 JS파일을 호출한다.
만약 메인 파일과 동일한 위치에 있을 경우는 src = “” 안에 파일명만 적어주면 된다.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <script src="print_func.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
    print(); // print함수가 호출 되었습니다.
</script>  
</body>  
</html>  

 

라이브러리

라이브러리란 모듈과 비슷한 개념으로 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다.

사용 방법

모듈과 같이 유명한 jquery등의 라이브러리를 다운 받아 head에 추가하여 사용한다.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <script src="jquery.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
    $(/*commend*/) //jquery와 같은 경우에는 $표시를 이용해 라이브러리 안에 함수를 호출 한다.  
</script>  
</body>  
</html>  

 

글의 문제가 있다면 댓글을 달아 주세요.

This site uses Akismet to reduce spam. Learn how your comment data is processed.