javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

javascript 수업 HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

사용자 정의 객체

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

사용자 정의 객체란?

사용자가 직접 만든 객체를 의미하고 아래와 같은 방법으로 정의 할 수 있다.

// new 연산자와 object() 생성자 함수를 이용해서 객체생성
new Object();
// 객체 리터럴을 이용해서 객체 생성
{속성의 이름: 속성의 값, 속성의 이름:속성의 값....}

예제

example1.html - 객체를 사용하지 않은 프로그래밍 스타일 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			// 객체를 사용하지 않은 코딩 스타일
			var age = 30;
			var job = '프로그래머';
			function introduce() {
				alert('저는' + age + '세의 ' + job + '입니다');
			}

			introduce();
		</script>
	</head>
	<body></body>
</html>

example2.html - 객체를 사용한 코딩 스타일 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			// 객체를 사용한 코딩 스타일
			var person = new Object();
			person.age = 30;
			person.job = '프로그래머';
			person.introduce = function() {
				alert('저는 ' + this.age + '세의 ' + this.job + '입니다');
			}
			person.work = function() {
				alert('coding');
			}
			alert(person.age);
			person.introduce();
		</script>
	</head>
	<body></body>
</html>

example3.html - 객체 리터럴을 이용한 객체의 정의 (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<!-- 객체 리터럴 -->
		<script type="text/javascript">
			var person = {
				age : 30,
				job : '개발자',
				introduce : function() {
					alert('저는 ' + this.age + '세의 ' + this.job + '입니다');
				},
				work : function() {
					alert('coding');
				}
			}
			alert(person.age);
			person.introduce();
		</script>
	</head>
	<body></body>
</html>

객체지향이란?

객체에 연관되어 있는 속성과 메소드를 포함시켜서 다음의 목적을 달성하기 위한 프로그래밍 패러다임으로 영어로 Object oriented programming라고 하고, 줄여서 OOP라고 부른다. 

  • 캡슐화
  • 추상화
  • 다형성
  • 상속
  • 인스턴스
  • 메시지전달

참고

댓글

댓글 본문
  1. thesoul214
    저도 공부를 하는 학생이므로 제가 아는 한도 내에서 답변 드리겠습니다.

    모든 내장객체(String, Number, 등등)들의 부모객체가 Object라는 최상위 객체입니다.

    그러므로 자기만의 객체를 생성하기 위해서 최상위객체를 이용하는 것입니다.

    라고 알고 있습니다만..;; 이해가 되실까요??;; 틀린점 있으면 답글 달아주세요 ㅎ
    대화보기
    • 조중현
      var person = new Object();
      person.age = 30;
      person.job = '프로그래머';
      person.introduce = function() {
      alert('저는 ' + this.age + '세의 ' + this.job + '입니다');

      이부분이 잘이해가안가네요
      java에서 이렇게 사용하려면 class가 있고 그안에 age , job , 등이 있어야하는데
      그냥되네요
      무엇보다 Object대신 다른 type을 사용하려고하면 안되네요
      여기서 Object가 뭔가 다른 역할을 하는것같은데 맞나요 ?
    • 비기너
      객체가 바탕화면에있는 폴더라면 person 이라는 폴더가 있고
      그속에 age라고하는 파일이있는데
      그파일 이 가지고있는 내용이 30이란 말이죠?
      객체로해줘야하는이유는 내용물이다른 age라는 이름의 파일을 바탕화면에 또 만들고싶으니까인가요?
      동영상보면서 머리속에 어느정도 정리가되는데 객체지향이라는 단어가 나오면 머리속이 하얘지네요 ㅋㅋㅋㅋ한국어로 객체지향이라고해도 그렇고 영어로 object oriented 라고해도 ㅋㅋㅋ명칭자체가 사람머리아프게만드는듯
    • 내일은
      참고 링크중 nhn 링크가 변경된 것 같습니다 :)
    • 격한눈팅
      사용자 정의 함수에서 변수는 속성이 되고, 함수는 메소드 된다.

      요 설명 쏙 들어오네요.!!!!
    • egoing
      있습니다. 객체지향 수업에서 알아봅니다. 상속이라고 부르죠 ^^
      2013년 7월 17일 수요일에 Disqus님이 작성:
      대화보기
      • 유도훈
        JavaSricpt는 인스턴스를 생성할 때마다 그 인스턴스의 속성과 메서드를 일일히 만들어줘야 하나요? 아예 C#이나 Java와 같이 클래스를 만들어 놓고 그 안에 속성이나 메서드를 미리 담아 놓아 필요할 때마다 생성자만 간단히 호출함으로써 그 속성과 메서드를 갖는 인스턴스를 만드는 방법은 없나요?
      • egoing
        동일한 목적 조금 다른 접근이라고 말씀 드려야 할 것 같습니다.
        2013/6/24 Disqus <notifications@disqus.net></notifications@disqus.net>
        대화보기
        • 마리
          자바에서의 객체와 자바스크립트에서의 객체의 의미가 차이가 있나요?? 아니면 완전 동일한 개념인가요??
        • 이광현
          감사합니다.
        • 권태준
          자바스크립트를 공부하면서 느끼는 건데 정말 자바랑 은 쥐와 햄스터의 관계라는 말에 공감이 가네요..
        • bluesky
          설명이 참 간명하고 전달코자하는 의미를 느끼게 되네요. 그리고 강의스타일에 휴머니즘이 듬뿍 담겨있음을 또한 느낍니다. 감사합니다.
        • JunYong Jeong
          이럴수가...
          그렇게 어렵게 느껴 졌던 객체 지향의 개념이이 수업 과정과 또 참고 글을 통해서 이해가 되네요.
          감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기