메인메뉴 바로가기

HOME으로 가기


Javascript

기본문법 | [기초] 3. 객체, 속성, 메소드의 개념 이해

본문

3.객체, 속성, 메소드의 개념 이해

 
자바스크립트는 객체 지향적 언어라고 하였습니다. 생활주변에서 볼 수 있는 사람, 동물, 자전거, 꽃 등 모든 사물이 객체입니다.
 
자바스크립트에서 객체(object)란 웹브라우저를 포함한 웹 문서의 모든 구성요소를 말합니다.
즉, 웹브라우저의 상태표시줄, 스크롤바, 웹문서 자체, 레이어, 하이퍼링크, 이미지, 폼버튼 등등 대부분의 구성요소를 객체라고 합니다.
객체들은 또다른 하위 객체들을 가지고 있을 수 있습니다. 이런 이유로 자바스크립트의 객체구조를 계층적구조라고 말할 수 있습니다.
 
모든 객체는 속성(Property)을 가집니다.
window 객체는 frames(프레임), name(윈도우 이름), location(위치) 등의 속성을 가지며 이미지 객체는 가로크기, 세로크기등의 속성을 가집니다.
 
예를들어 어떤 웹문서의 배경색상이 검정색이라면 이 웹문서의 배경색은 검정이라는 속성을 가지며 자바스크립트에서는 다음과 같이 표현할 수 있습니다.
 
document.bgColor="black" (객체.속성="속성값")
 
 
객체와 속성, 객체와 메소드를 연결 할 때에는 (.) 으로 연결합니다
 
 
메소드 이해하기
메소드(method)는 객체의 동작과 관련된 것입니다.
「토끼」라는 객체를 예를 들면, 「빛깔이 희다」, 「앞다리가 짧다」 등은 속성에 관한 사항이고, 「뛰어간다」, 「풀을 뜯어 먹는다」 등의 행동은 메소드에 해당합니다.
자바스크립트에서 open() 메소드는 팝업 윈도우를 열어주고, write() 메소드는 문자열을 출력하며 alert() 메소드는 경고창을 열어 줍니다.
 
 
--------------------------------------------------------------------------------------------------------
 
- 기본 명령어(메소드) 맛보기
 
(1) document.write()
이번에는 HTML 의 태그들을 사용하여 글자의 색상과 모양을 좀 더 예쁘게 장식하는 법을 실습해 보기로 합니다.
앞의 예문을 다음과 같이 고쳐서 적용시켜 보겠습니다
기존에 단순한 문자열만 들어가 있던 9번째줄에 HTML 태그들을 넣어 원하는 모양으로 출력시켜 보려고 합니다.
 
docwrite.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <script>
8 <!--
9 document.write("<font size='2' color='blue'>안녕하세요?<br>자바스크립트를 공부하는 중입니다</font>");
10 //-->
11 </script>
12 </BODY>
13 </HTML>
 
이처럼 document.write() 메소드(특별한 행동을 하는 자바스크립트 함수; 동사에 해당)에 들어가는 문자열에는 태그도 사용이 가능합니다.
한가지 명심할 것은 문자열은 반드시 따옴표 사이에 들러싸여 있어야 되고, 따옴표 안에 또 따옴표를 넣어야 될 경우에는 반드시 홑따옴표(' ')를 사용해야 됩니다. 그렇지 않으면 브라우저는 에러를 발생시키게 됩니다.
또, 따옴표로 둘러싸여진 문자열은 아무리 길이가 길어도 절대 엔터키를 쳐서 줄바꿈은 하지 않도록 합니다.
 
(2) alert()
이번에는 경고창(alert box)를 나타내 주는 스크립트에 대해 알아보도록 하겠습니다
경고창을 나타낼 때는 alert() 라는 메소드를 사용합니다.
alert함수는 메시지와 OK 버튼만을 가진 다이얼로그 박스를 보여주는 함수로 사용자의 요구를 받을 필요가 없는 메시지와 경우에 사용합니다.
 
alert(출력할 문자열)
alert.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <script>
8 <!--
9 alert("안녕하세요?\n자바스크립트를 공부하는 중입니다");
10 //-->
11 </script>
12 </BODY>
13 </HTML>
 
 
\n 은 한줄바꿈 표시입니다. 두줄을 바꾸려면 연속해서 \n\n을 넣어주면 됩니다.
alert() 메소드를 사용할 때는 HTML 태그는 사용할 수 없습니다.
 
 
(3) confirm()
메시지를 방문자들에게 보여주고 확인/취소를 선택하면 특별한 행동을 할 수 있게 해 주는 확인상자에 대해 알아보도록 합니다.
confirm함수는 메시지와 OK/Cancel버튼을 포함한 다이얼로그 박스를 보여주는 함수로, 사용자로부터 응답을 듣고 싶을 때 사용합니다. 사용자가 OK버튼을 누르면 true를, Cancel버튼을 누르면 false를 반환합니다.
 
confirm(출력할 문자열)
confirm.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <script>
8 <!--
9 yesorno = confirm("당신은 남자분 이시군요. 그렇죠?")
10 if(yesorno == true)
11 document.write("당신은 <font color=red>남성</font>입니다")
12 else
13 document.write("당신은 <font color=blue>여성</font>입니다")
14 //-->
15 </script>
16 </BODY>
17 </HTML>
 
 
yesorno = confirm("당신은 남자분 이시군요. 그렇죠?") 에서 confirm() 이라는 함수를 사용하였습니다.
따옴표 안에는 사용자들에게 하는 질문이 들어 있는데 그 결과값을 yesorno 라는 변수에 담아두고, 확인 버튼을 클릭하면 11번째 구문이, 그렇지 않으면 13번째 구문이 실행 됩니다.
 
자바스크립트에서 A = 변수값 이라는 형태가 자주 사용되는데 이는 변수값을 A 라는 변수 에 저장한다는 뜻으로 이해하면 됩니다
즉, 위의 예에서는 confirm() 함수의 결과값을 yesorno 라는 변수에 담아둔다는 말이 됩니다.
 
 
(4) prompt()
prompt 함수는 메시지와 입력 필드를 가진 다이얼로그 박스를 보여주는 함수로 사용자로부터 숫자나 문자열을 입력받고자 할 때 사용합니다.
 
prompt(문자열, 초기값)
만약 초기값을 지정하지 않으면 <undefined>가 나타납니다.
prompt.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <script>
8 <!--
9 name = prompt("손님의 이름을 적어주세요","나그네")
10 document.write("<font color=blue>" + name + "</font>님 감사합니다")
11 //-->
12 </script>
13 </BODY>
14 </HTML>
 
name 이라는 변수를 사용한 것과 함수의 따옴표 안에 문자열을 넣어주는 법은 앞전의 confirm() 함수를 사용할 때와 비슷한 것 같아 보입니다.
prompt() 함수에서 '손님의 이름을 적어주세요' 라는 부분은 입력상자에 나타낼 메시지입니다. 그리고 오른쪽에 '나그네' 라고 되어 있는 부분에는 디폴트값을 넣어 주었습니다.
형식은 prompt("메세지","디폴트값") 의 모양으로 사용합니다
그리고, 사용자가 입력한 값을 name 이라는 변수에 담아 두었다가 10번째 라인에서 써먹게 됩니다.
10번째 라인을 자세히 보면 document.write() 함수의 괄호안에 따옴표가 좀 복잡하게 사용된 듯 합니다.
 
보시는대로 HTML 태그나 일반 문자열은 따옴표 안에 들어 있고, 10번째 라인에서 사용한 name 이라는 변수는 따옴표를 사용하지 않았죠? 그렇습니다. 자바스크립트 내에서 선언된 변수는 따옴표를 붙이지 않습니다.
 
그리고, 문자열과 변수를 이어주는 부분에 + 부호를 사용한 것도 기억 해 두기 바랍니다.
 
 

---------------------------- 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기