2024.08.08. 객체 -1

- 범위 :  메서드 < 함수

  단독으로 존재하는 것 : 함수
  객체 안에 있는 기능들 : 메서드

- 객체와 인스턴스 
  객체 : 자주 사용하는 요소로 미리 정의되어 있음.
  인스턴스 : 필요할때마다 만들어서 사용함. 객체를 복제해서 만듦.
- 프로퍼티(속성)와 메서드(기능)  

 

* 객체의 종류 : 내장객체 , 사용자 정의 객체, 브라우저와 관련된 객체

- 내장객체
  ex. Array 객체의 length : 요소사용방법 - 배열명.length
- 사용자 정의 객체

  사용자가 필요데 따라 직접 정의한 객체
   [ 사용자 객체 정의 기본 문법]

 let 객체를 저장할 변수명 = {
	속성명1 : 값1,
	속성명2 : 값2,
	... 생략 ...
	속성명n : 값n
 }

- 객체 내의 속성에 접근하는 방법 : 객체명.속성명 ex. Array.length

// 객체 선언, 할당.
let person = {
	name : "홍길동",
	age : 20
}
let person2 = {
	name : "이순신",
	age : 44
}

function test1(){
	
	document.write(person + "<br>"); // 결과 : [object Object] - 속성명으로 접근해야 출력됨.
	console.log(person); // colsole은 속성 출력됨.  결과: {name: '홍길동', age: 20}
	
	// person 객체의  속성에 접근하는 방법 : person.속성명
	document.write("이름 : " + person.name + "<br>");
	document.write("나이 : " + person.age + "<br>");	
}

 

- 웹브라우저가 제공하는 내장 객체 
  웹브라우저에서 제공하는 다양한 속성 및 기능을 활용할 수 있는 객체 
  window 라는 이름의 최상위 객체에서부터 계층구조로 다양한 객체가 제공됨.

  [ window 객체 ]
- 최상위 객체, 기본 객체이므로 생략이 가능함.(window. 생략가능.)
- 속성(프로퍼티, 변수) : window.속성명으로 접근(window.status, window.opener, window.document 등으로 접근)
- 메서드(=기능 =동작 =함수) : window.메서드명() 으로 호출
 => window.open(), window.close() 등

<button onclick="openWindow()">새창 열기</button>
<button onclick="openWindow2()">새창 열기2</button>
<button onclick="openWindow3()">네이버 열기</button>
<button onclick="closeWindow3()">네이버 닫기</button>

 

function openWindow(){
 	window.open("http://www.naver.com", "", "");
 	// => 옵션 항목에 크기 지정 생략 시 버튼을 누를때 마다 새 창 대신 새탭에 열림.
 	window.open("test1_popup.jsp", "", "width=500, height=400");
	// => 창이름 생략시 버튼 클릭할 때마다 매번 새 창에 test1_popup.jsp가 열림(복수개 창 생성)
	// 창이름( 아무 문자열 ) 지정 시 항상 동일한 하나의 창에 페이지 열림. 
	let popup = window.open("test2_popup.jsp", "my_popup", "width=500, height=400");
	console.log(popup); // 창이 열리면 window 객체가 리턴되고, 차단되면 null 저장됨.
}

function openWindow2(){
    // top, left 속성 지정 시 새창 열릴 좌표설정 가능(픽셀단위)
    // 웹 사이트 URL 이나 문서파일 또는 이미지 파일 등 다양한 대상을 새창에서 표시 가능
    // 기존에 열려있는 창의 이름과 동일한 이름을 지정 시 하나의 창에 다른 내용을 표시(갱신) 가능
	window.open("../images/1.jpg", "my_popup", "width=400, height=300, top=400, left=400");
	// => openwindow() 함수에서 열어놓은 새 창이 있을 경우 해당 창에 1.jpg 이미지 표시
	window.open("../images/1.jpg", "my_popup2", "width=400, height=300, top=400, left=400");
	// => 만약 my_popup이라는 이름이 아닌 다른이름 지정시 새 창에 열림.
	window.close(); 
    // 호출한 창을 닫는다. = 이 함수가 있는 창 = test2.jsp를 닫고, 1.jpg 창은 열려있다.
}

let naver_window; // 다른 함수에서도 naver_window 변수에 접근 가능. 전역변수
function openWindow3(){
    naver_window = window.open("http://www.naver.com", "naver", "width=400, height=300");
    // => 	window.open() 메서드 리턴값을 변수에 저장 시 window 객체가 리턴되므로 
    //		새창에 대한 다양한 제어를 수행할 수 있다.
    // => 단, naver_window 변수가 openwindow3() 함수 내에 선언되어 있으면 
    //		다른 함수에서는 접근이 불가능하다.
    // => 따라서 다른 함수에서 naver_window 제어하려면 변수 선언부를 메서드 밖으로 빼면 됨.
    window.close(); 
    // 여기에 close 함수가 있으면 버튼이 있던 창(test2.jsp)이 꺼지고 
    //    naver 창만 새로 열려있다. 
}
function closeWindow3(){
	window.close(); // 현재창 닫기 종료
	naver_window.close(); // 에러msg :  naver_window is not defined 
    					  // naver_window는 openWindow3() 함수에서만 쓰고 있을 경우 나오는 에러
                          // 현재는 let 전역변수로 사용하므로 자용 가능하다.
// 주의! naver_window 변수가 현재 함수에서 접근 가능하도록 전역변수 형태고 선언되어야 한다. 
}

 

 

* 오늘의 퀴즈 *

<input type="button" value="장바구니담기" onclick="cart()">

Q. 장바구니 버튼을 클릭하면  "장바구니에 상품이 담겼습니다! 장바구니로 이동하시겠습니까?" 메시지 출력 후 
     확인버튼 클릭시 "test3_cart.jsp"페이지로 이동.

-tip. if문 안의 boolean 처리 방법 잊지말기!!

function cart(){
	// "장바구니에 상품이 담겼습니다!\\n 장바구니로 이동하시겠습니까?" 메시지 출력 후 
	// 확인버튼 클릭시 "test3_cart.jsp"페이지로 이동처리
	let msg = confirm("장바구니에 상품이 담겼습니다!\n 장바구니로 이동하시겠습니까?");
	if(msg) { //msg == true 와 같은 뜻이다!!	
		location.href = "test3_cart.jsp"; 	
	}
}