[js] 객체, 프로퍼티, 메소드

객체란?

• 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위이다.
• 프로그램에서 인식할 수 있는 모든 대상을 가르킨다. (웹과 관련된 대상은 모두 객체로 인식한다.)
• 자바스크립트는 모든 것이 객체

 

자바스크립트에서 사용하는 객체는 다음과 같다.

• 문서 객체 모델 (DOM) : 웹 문서 자체도 객체이고, 그안에 삽입되어 있는 링크나 이미지 텍스트 필드 등도 모두 객체이다. ex) document, image, link 객체 등이 있다.
• 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낸다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다.
• 내장 객체 : 웹 프로그래밍을 할때 자주 사용하는 요소는 자바스크립트안에 미리 객체로 정의되어 있는 경우가 많다. 이를 내장 객체라고 하며 Date, alert 객체 등이 있다.

객체의 인스턴스

자바스크립트에서 객체는 참조 형태로 사용해야 한다. 이말이 무슨말이냐

객체 자체(Date() )로 사용하는게 아니라 인스턴스의 형태(now = new Date())로 만들어 사용하라는 의미이다.

객체는 그대로 두고 객체와 똑같은 속성과 기능을 가진것이 인스턴스이다.

인스턴스를 만들때는 new 식별자를 사용한다.

new 객체명

 

Date 객체의 인스턴스 만들기

Date객체의 인스턴스를 만든다 -> 아래 예에서 인스턴스 ?  now

var now = new Date(); //Date 인스턴스 만들고 변수에 저장하기
document.write(now);

프로퍼티와 메서드

객체에는 프로퍼티와 메서드가 있다.

프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할수있는 동작을 말한다.

예를들어 자동차 객체가 있다고 했을떄 자동차 프로퍼티는 자동차 제조사나, 모델명, 색상 등이고 자동차 메소드는 시동 걸기, 움직이기, 멈추기 등이된다.

 

인스턴스는 객체의 프로퍼티와 메소드를 그대로 물려받아 똑같이 사용한다.

프로퍼티와 메소드를 표시하려면 인스턴스명 뒤에 마침표를 붙이고 객체의 프로퍼티나 메소드 이름을 작성한다. 이때 메서드는 함수와 같은 역할을 하므로 옆에 괄호를 붙여줘야한다.

 

Date객체의 toLcaleString() 메소드 ( 현재 날짜와 시간 정보를 로컬 형식으로 바꾸어 준다.) 를 사용해보자 

로컬 형식 ? 2020.5.14. 오후 2:45:31 과 같이 친숙한 형태임

var now = new Date();
document.write("현재 시각은 " + now.toLocaleString() );

---

자바 스크립트 내장 객체

 

Array 객체

배열을 다루는 객체이다.

Array 객체 인스턴스 만들기 ( 배열의 크기 지정, 미지정 둘다 가능)

var numbers = new Array();
var numbers = new Array(4);

초깃값 지정(인스턴스 선언과 요솟값 한번에 할당해 작성하는 경우)

var numbers = ["one" , "two" , "three" , "four"];
var numbers = Array("one", "two", "three", "four");

length 프로퍼티

배열 요소의 개수를 알 수 있다.

var numbers=["one","two"];

for(i=0;i<numbers.length;i++){

}

Array객체의 메소드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4_%EB%A9%94%EC%84%9C%EB%93%9C

Array - JavaScript | MDN

배열끼리 합치는 concat() 메서드

서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 준다.

var nums = [1,2,3];
var chars = ["a","b","c","d"];

var numsChars = nums.concat(chars); //numsChars = 1,2,3,a,b,c,d

배열 안 요소끼리 합치는 join()메소드

배열 안 요소 사이에 원하는 구분자를 넣을 수 있다. 따로 지정하지 않으면 쉼표로 구분한다.

var nums = [1,2,3];
var chars = ["a","b","c","d"];

var string1 = nums.join() // string1 = 1,2,3
var string2 = chars.join('/'); // string2 = a/b/c/d

새로운 요소를 추가하는 push(), unshift()메소드

• 배열에 맨끝에 새로운 요소를 추가하려면 push()
• 배열 맨 앞에 새로운 요소를 추가하려면 unshift()메소드를 사용한다.
• 추가한 배열로 기존 배열 변경됨

var nums = [1,2,3];

var ret1 = nums.push(4,5); // nums=1,2,3,4,5
var ret2 = nums.unshift(0); //nums=0,1,2,3,4,5

배열에서 요소를 꺼내는 pop(), shift() 메소드

• 배열에서 맨 뒤에 있는 요소를 꺼낼떄는 pop()
• 맨 앞에 있는 요소를 꺼낼떄는 shift() 사용
• 두 메소드는 꺼낸 요솟값을 반환하며 기존 배열도 변경된다.

var chars = ["a","b","c","d"];

var popped1 = chars.pop(); 
document,write(popped1, chars); // popped1=d chars=a,b,c

원하는 위치에 요소를 추가.삭제 하는 splice() 메소드

삭제한 값을 반환하고, 기존 배열을 변경한다.

1. 인수가 1개인 경우 : 괄호 안의 인수는 배열의 인덱스값으로, 인수가 지정한 인덱스의 요소부터 맨 끝까지 요소를 삭제한다.

var numbers = [1,2,3,4,5];
var newNumbers = numbers.slice(2); //2번째 인덱스부터 끝까지 삭제하고 반환함
document.write(newNumbers, numbers) // newNumbers = 3,4,5 numbers=1,2

2. 인수가 2개인 경우 : 첫번째 인수는 인덱스값, 두번째 인수는 삭제할 요소 개수 이다. 설정한 인덱스값부터 ~ 몇개를 삭제할건지 지정하여 삭제한 값을 반환한다. splice(2,1)인경우 2번째 인덱스 하나만 삭제함

var study = ["html","css","web","jquery"];
var newStudy = study.splice(2,1);
document.write(newStudy,study); // newStudy = web study=html,css,jquery

3. 인수가 3개인 경우 : 첫번째 인수는 배열에서 삭제할 시작위치를 나타내고, 두번째 인수는 삭제할 개수, 세번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정한다.

	var study = ["html","css","web","jquery"];
      var study2 = study.splice(2,1,"js");
      document.write("반환된 배열: "+study2); //web
      document.write("기존 배열: "+study);// html,css,js,jquery

 

기본 배열을 바꾸지 않으면서, 요소를 꺼낸다. slice()메소드

• slice배열에서 인수를 하나만 지정하면? 그 인수를 시작으로 마지막 요소까지 꺼내서 반환한다. 기존 배열 변환 x
• 인수 2개를 사용하면? 꺼낼 요소의 구간을 나타낸다. 첫번째 인수는 배열의 시작 두번째 인수는 끝 인덱스의바로 직전 인덱스를 가르킨다. slice(2,4) -> 2,3번째 인덱스 꺼냄

splice()메소드와 다르게 slice()메소드는 기존 배열을 변경하지 않는다.

 

---

Date 객체

현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일 까지 얼마나 남았는지 알려주는 등 응용가능

 

Date 객체 인스턴스 만들기

new Date(); //현재 날짜로 설정할 경우에는 간단히 예약어 new를 붙여 주면 된다.
new Date("2020-02-25") // 특정한 날짜를 지정한 Date객체를 만들고 싶다면, 괄호 안에 날짜 정보 입력
new Date("2020-02-25T18:00:00") // 시간 정보까지 나타내려면 T를 추가한 후 그 뒤에 시간을 입력한다.

자바스크립트의 날짜 , 시간 입력 방식을 알아보자.

1. YYYY-MM-DD

연도만 나타낼떈 "YYYY" 형식, 연도와 월을 나타낼떈 "YYYY-MM", 연도와 월과 일을 나타낼떈 "YYYY-MM-DD"형태로 입력한다.

 

2. YYYY-MM-DDTHH 

연도,월,일,시간을 표시하는 형식이다. 시간을 나타낼땐 날짜 뒤에 T를 붙히고 THH:MM:SS형태를 사용한다. 맨끝에 Z를 붙히면 국제표준시가 된다.

 

3.MM/DD/YYYY

연도를 마지막에 나타내고 싶다면 사용

 

4. 이름 형식

맨앞에 요일을 함께 작성할수도있음

new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")

 

Date 객체 메소드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4_%EB%A9%94%EC%84%9C%EB%93%9C

Date - JavaScript | MDN

날짜 계산하는 프로그램 만들기

• getTime()메소드 : 1970년 1월 1일 자정부터 ~ 특정한 날까지 시간을 밀리 초로 표시합니다.
• Math.round() : 매개변수의 소숫점 이하 부분 반올림
• 2020-10-01 부터 2020-10-15까지 날짜가 얼마나 지났는지 나타내는 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>독서 챌린지</title>
  <style>
    #container{
      margin:50px auto;
      width:300px;
      height:300px;
      border-radius:50%;
      border:2px double #222;
      background-color:#d8f0fc;
      text-align: center;
    }
    h1 {
      margin-top:80px;
    }
    .accent {
      font-size:1.8em;
      font-weight:bold;
      color:red;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>책 읽기</h1>
    <p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
    <p>축하합니다!</p>
  </div>  

  <script>
    var now = new Date("2020-10-15");       // 마지막 날짜를 객체로 지정
    var firstDay = new Date("2020-10-01");   // 시작 날짜를 객체로 지정

    var toNow = now.getTime();         // 1970.1.1 ~ 마지막날 까지 지난 시간(밀리 초)
    var toFirst = firstDay.getTime();  // 1970.1.1 ~ 첫날 까지 지난 시간(밀리 초) 
    var passedTime = toNow - toFirst;  // 첫날부터 마지막 날까지 지난 시간(밀리 초)

    passedTime = Math.round(passedTime/(1000*60*60*24));  // 밀리 초를 일 수로 계산하고 반올림

    document.querySelector('#result').innerText = passedTime; //id="result"위치에 passedTime값을 넣는다.
  </script>
</body>
</html>

---

Math 객체

수학계산 뿐만아니라, 무작위 수, 반올림 프로그램 등에서 사용

Date, Array객체는 인스턴스를 만든 후 사용했지만, Math객체는 따로 인스턴스를 만들지 않는다.

 

Math객체의 프로퍼티, Math객체 메소드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math#%EC%86%8D%EC%84%B1

Math - JavaScript | MDN

 

이벤트 당첨자 뽑기 프로그램

전체 응모자를 입력하면 번호를 무작위로 골라 당첨자를 뽑는 프로그램을 만들어보자

• Math.random() : 0~1사이 무작위 수를 반환
• Math.random() * 100 : 0 ~99.99사이 값 반환
• Math.random()*100 +1 : 1~100사이 값 반환
• Math.floor() : 소수점 이하를 버림, 정수만 남김

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>당첨자 발표</title>
    <style>
      h1 {
        border:1px solid black;
        padding:10px;
        text-align:center;
        background:#eee;
      }
    </style>
  </head>
  <body>    
    <h1>당첨자 발표</h1>
    <script>
      var seed = prompt("전체 응모자 수: ","");
      var picked = Math.floor((Math.random() *seed)+1); // 1~ 응모자 수 사이 값 뽑기

      document.write("전체 응모자 수: "+seed+"명");
      document.write("<br>");
      document.write("당첨자: "+picked+"번");
    </script>
  </body>
</html>

---

브라우저와 관련된 객체

웹 브라우저 창에 문서가 표시되는 순간, 사용자는 눈치채지 못하지만 브라우저는 HTML 소스를 한 줄 씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다. 웹 브라우저가 열리면 가장 먼저 window객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다.

주로 사용하는 내장 객체로는 window, document, navigator, history, location, screen 등이 있다.

 

window 객체

브라우저 창이 열릴때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다. 때문에 자바스크립트 모든 객체는 window 객체 안에 포함된다. 

window객체의 프로퍼티는 주로 웹 브라우저 창 정보를 가져오거나 값을 바꿀때 사용한다.

https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%86%8D%EC%84%B1

Window - Web API | MDN

• window객체의 메소드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알내고 지정하는 등 웹브라우저 창 자체와 관련된다.
• 우리가 앞에서 사용한 alert(), prompt()문은 window객체의 메소드 이므로 원래는 window.alert()라고 해야하나, window 객체는 기본객체이므로 window.을 생략하고 사용할 수있다.

 

새 브라우저 창을 여는 open() 메소드 , 브라우저 창을 닫는 close() 메소드

주로 홈페이지의 팝업 창을 띄울때 사용한다.

window.open(경로, 창 이름, 창 옵션)

// 경로 : 팝업 창에 표시할 사이트 주소
// 창 이름 : 지정하지 않으면 팝업창이 계속 새로 나타난다. 창이름을 지정하면 새로고침해도 팝업창이 한번만 나옴
// 창 옵션 : left, top 속성을 사용해 위치를 정하거나, width height 속성을 사용해 크기를 지정할 수 있다. 
위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타남

window.close()

main.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
    <p>문서를 열면 팝업 창이 표시됩니다</p>
    <script>
        var newWIn = window.open("notice.html","pop", "width=500, height=400, left=100, top=200"); //px 생략
        if(newWIn == null){
          //팝업 차단 여부를 확인해주어야함, 팝업이 차단되어 있으면 null을 반환하는데,,
          alert("팝업이 차단되어있습니다. 팝업을 해제해주세요.")
        }
        
        
    </script>
</body>
</html>

notice.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>공지사항</title>   
  <style>
    #content {
      border : 2px double skyblue;
      border-radius:10px;
      padding:10px;
    }
    ul {
      margin-left:15px;
      list-style-type:none;
    }
    ul li {margin : 10px 5px;}
    button{ 
      position:absolute;
      bottom:20px;
      right:20px;
    }
  </style>     
</head>
<body>
  <div id="content">
  <h1>공지사항</h1>
    <ul>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
      <li>항목 4</li>
      <li>항목 5</li>
    </ul>    
    <button onclick="javascript:window.close();">닫기</button>
  </div>
</body>
</html>

 

최근에는 window 메소드로 팝업창을 만들지 않음, 사이트 디자인과 일관성을 유지하기 위해 레이어 방식을 이용한다. 레이어 방식을 이용해 기존 사이트 위에 팝업 창을 겹쳐 놓는다. Document 객체 이용, 팝업 창에서 [오늘 하루 그만 보기] 와 같은 옵션은 js의 쿠키로 제어할수있다고 함

 

---

웹 브라우저와 렌더링 엔진

웹 브라우저를 만들때 가장 먼저 생각해야 할 부분은 렌더링 엔진이다. 아직 표준화 되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스를 지정한다. 이렇게 지정하는 이유는 웹 브라우저마다 HTML,CSS를 해석하는 렌더링 엔진이 다르기 때문이다. 또한 내장된 자바스크립트 엔진도 다르다. (크롬: 렌더링 엔진 - KHTML, 블링크 / js엔진 - V8)

 

 

navigator 객체

웹 브라우저 버전, 프로그인 설치 정보, 온 오프라인 등 정보가 들어있음. 사용자가 수정할 수 없으며 가져와서 보여주는것만 가능.

 

 

userAgent 프로퍼티

사용자 에이전트 문자열을 의미한다. 사용자의 웹브라우저 정보를 서버에 보낼떄 사용한다. 

userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트 엔진 종류 등 여러 정보가 들어있다. 서버에서는 그정보를 확인해 사용자에게 맞는 웹 페이지를 보여줄 수 있다.

 

//크롬 userAgent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

• 진동 감지 속성이나 배터리 상태를 체크하는 프로퍼티 등도 새롭게 추가되고 있다고 한다.
• 콘솔 창에 navigator를 입력하면 다양한 정보를 알 수 있음.
• https://developer.mozilla.org/ko/docs/Web/API/Navigator 에서,, 삼각 플라스크처럼 표시된 항목은 일부 브라우저에서만 지원한다는 뜻

---

• history 객체
• 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
• 브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
• history 객체에는 방문한 URL정보가 저장되므로 메소드는 방문했던 URL을 앞뒤로 이동하며 페이지를 불러온다.

https://developer.mozilla.org/ko/docs/Web/API/History

History - Web API | MDN

---

location 객체

브라우저의 주소 표시줄과 관련이있다. location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데, 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.

 

location 자주 사용하는 프로퍼티와 메소드

• href  : 전체 URL이다. 
• host  : URL의 호스트 이름과 포트 번호를 담고 있다.
• protocol : URL의 포로토콜이다.
• replace() 메소드 : 현재 문서의 URL을 지우고 다른 URL 문서로 교체합니다.

다음 예제는 replace()메소드를 이용해 현재 문서 주소가 새로운 문서 주소로 대체되므로 브라우저 창 [뒤로]버튼이 활성화되지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>location Object</title>
	<style>
		#container {
			width:500px;
			margin:10px auto;
		}
		#display {
			margin-top:10px;
			padding:10px;
			border:1px solid #222;
			box-shadow: 1px 0 1px #ccc;			
		}
		p {
			font-size:1em;
		}
		button {
			margin-top:20px;
			text-align:center;
		}
	</style>
</head>
<body>	
	<div id="container">
		<h2>location 객체 </h2>
		<div id="display">
			<script>
				document.write("<p><b>location.href : </b>" + location.href + "</p>");
				document.write("<p><b>location.host : </b>" + location.host + "</p>");
				document.write("<p><b>location.protocol : </b>" + location.protocol + "</p>");
			</script>		
		</div>
		<button onclick="location.replace('http://www.easyspub.com')">이지스퍼블리싱 홈페이지로 이동하기</button>
</div>		
</body>
</html>

팝업 창에서 클릭한 내용을 메인 창에 나타내기

팝업 창에서 [자세히 보기]링크를 눌렀을때 상세 정보를 보여주는 웹 사이트에 내용이 많다면,, replace()로 팝업창 주소를 바꾸어 보여주는것보단 더 큰 창인 메인 창에서 보여주는게 낫다.

 

1. 팝업창을 객체로 할당한 후 부모가 누구인지 알려준다.

2.  loadURL() 함수 작성

• href 속성값을 인수로 넘겨준다.
• loadURL(this.href)에서 this는 click 이벤트가 발생한 대상인 a 객체를 가르키고, a 객체의 href를 가져오는것이다. 즉 내가 보여줄 상세페이지 URL
• return false는 링크를 클릭했을때 기본동작을 취소한다는것이다.

 

main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>팝업 창 열기</title>
</head>
<body>
  <p>문서를 열면 팝업 창이 표시됩니다.</p> 
  <script>
    popWin = window.open("doit-event.html", "popup", "width=750, height=600"); //1.프로그램 실행 시 팝업 창 열음, 그리고 연 팝업창이 popWin
    popWin.opener = self; // popWin 객체를 만든 부모가 자신 즉 메인 창임
  </script>
</body>
</html>

doit-event.html   팝업창

<!DOCTYPE html> 
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이벤트 공지</title>
  <style>
    #container 
    {
      width:600px;
      margin:10px auto;
      padding:10px;
      text-align:center;
    }        
  </style>
</head>
<body>
  <div id="container">
    <h1>이벤트 공지</h1>
    <img src="images/doit.jpg">
    <p><a href="doit-main.html" onclick="loadURL(this.href);return false;">자세히 보기</a></p>  
  </div>

  <script>
    function loadURL(url){ //자세히보기에는 a태그로 상세페이지 내용이 있는 문서 링크가 있는데..
      window.opener.location = url;  // 부모 창(creator)의 location에 상세페이지 url을 넘겨줍니다.
      window.close();  // 현재 창을 닫습니다.
    }
  </script>
</body>
</html>

doit-main.html 상세페이지 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Do it!</title>
  <style>
    #container{
      width:750px;
      margin:0 auto;
      text-align:center;
    } 
  </style>
</head>
<body>
  <div id="container">
    <img src="http://www.easyspub.co.kr/upload/smarteditor/BOOK/2016/20160418190258778248.jpg">
  </div>
</body>
</html>

---

screen 객체

사용자의 화면 크기나 정보를알아낼때 사용한다.

screen 객체에서 사용하는 메소드는 화면 방향을 잠그거나 , 잠근 화면의 방향을 해제하는 역할을 한다. 주로 풀 스크린 상태일때나 방향전환을 할 수 있는 앱에서 사용한다.

https://developer.mozilla.org/ko/docs/Web/API/Screen

Screen - Web API | MDN

 

 

 

팝업 창을 화면 가운데에 표시하기

 

• screen.availWidth : 브라우저의 가로 길이 반환 px단위 
• screen.availHeight : 브라우저의 화면 높이 반환 px 단위
• 팝업 창을 가운데에 표시하려면 브라우저 화면 가로 길이, 세로길이에서 팝업창의 가로 길이, 세로길이 를 뺀 값에서 2로 나눈 값을 팝업창의 left, top으로 설정해주면된다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
    <p>문서를 열면 팝업 창이 표시됩니다</p>
    <script>
      function openCenter(doc, win, w, h){        
        var left = (screen.availWidth-w) / 2;  // 팝업 창의 왼쪽 좌표
        var top = (screen.availHeight-h) / 2;   // 팝업 창의 위쪽 좌표 
        var opt = "left=" + left + ",top=" + top + ",width=" + w + ",height=" + h;
        window.open(doc, win, opt);
      }
      openCenter("notice.html","pop", 500, 400)        
    </script>
</body>
</html>

---

마무리 문제 1 

현재 시각을 브라우저에 표시하는 프로그램을 작성해볼거다

Date.prototype.toLocaleTimeString() : Date 의 시간 부분을 나타내는 문자열을 시스템에 설정된 현재 지역의 형식으로 반환합니다.

setInterval() : 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우사용한다.  첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시각은?</title>
  <style>
    p {
      margin-top:20px;
      font-size:1.2em;
      text-align: center;
    }
    .display {
      font-size:1.5em; 
      font-weight:bold;
      color:blue;      
    }
  </style>
</head>
<body>
  <p>현재 시각 <span id="current" class="display"></span></p>
  <script>
    setInterval(displayNow, 1000); //1초마다 displayNow 함수를 실행한다.
    
    function displayNow(){
      var now = new Date();
      var currentTime = now.toLocaleTimeString();//현재시각 반환
      document.querySelector("#current").innerHTML = currentTime; //id=current인 span태그 내부에 currentTime값을 넣겠단의미
    }
  </script>
</body>
</html>

마무리문제 2

[현재 시간 보기] 버튼을 클릭하면 마무리문제1 파일이 팝업창으로 나오게 만들어보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시간 보기</title>
  <style>
    #container{
      width:200px;
      margin:50px auto;
    }
    button {
      border:1px solid #ccc;
      background:#fff;
      padding:20px 30px;
    }
  </style>
</head>
<body>
  <div id="container">
    <button id="bttn">현재 시간 보기</button>
  </div>

  <script>
    document.getElementById('bttn').onclick = displayTime;

    function displayTime(){        
      var left = (screen.availWidth - 400) / 2;  // 팝업 창의 왼쪽 좌표
      var top = (screen.availHeight - 200) / 2;   // 팝업 창의 위쪽 좌표 
      var opt = "left=" + left + ",top=" + top + ",width=" + 400 + ",height=" + 200;
      window.open("main.html", "", opt);
    }
  </script>
</body>
</html>