자바스크립트 문제 풀기2

책에서 나온 문제를 풀어봤다.

첫번째 문제는

1. 날짜,시간 정보가 들어 있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.
2. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드를 실행해서 currentTime변수에 저장한다.

setInterval(displayNow,1000);

function displayNow(){
  var now = new Date();
  var currentTime = now.toLocaleTimeString();
  document.querySelector('#current').innerHTML = currentTime;
}

이렇게 하면 현재 시간이 나온다.

setInterval로 1초마다 갱신할 수 있도록 설정하며 시작한다. displayNow로 함수를 만든다. 

date객체를 만들고 currentTime 변수에 now.toLocaleTimeString()을 저장한다. 

마지막에 #current에 currentTime이 나올 수 있도록 설정한다.

 

두번째 문제는

1. 화면의 너빗값에서 팝업 창의 너빗값(400px)을 빼고 2로 나누면, 팝업 창이 시작할 가로 좌푯값(left)을 만들 수 있다.
2. 마찬가지로 화면의 높잇값에서 팝업 창의 높잇값(200px)을 빼고 2로 나누면, 팝업 창이 시작할 세로 좌푯값(top)이 된다.
3. 이렇게 만들어진 팝업 창의 좌푯값(left,top)과 팝업 창의 크기 width, height를 하나의 문자열로 저장한다.
4. window.open()메서드를 실행하여 팝업 창을 보여 준다.

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("current.html", "", opt);
    }

#bttn을 누르면 displayTime이 실행되도록 한다.

displayTime함수 안에는 2를 해결할 변수들이 있다.

left와 top 변수는 팝업 창의 좌푯값을, opt 변수는 window.open("","","") 중 마지막 따옴표에 들어갈 내용을 미리 만들어둔다.

screen.availWidth는 화면의 너빗값을, screen.availHeight는 화면의 높잇값을 나타낸다.

 

---

이 문제에서 객체를 배웠다. 객체가 간단하면서도 어려운 것같다. 하지만 활용만 잘한다면 효율적으로 사용하기 좋다는 생각이 든다.

항상 jQuery로 해서 쉽다고 느껴졌는데 순수 자바스크립트로 코드를 해보니 내가 부족한 부분이 무엇인지 파악이 된다. 

객체 파트는 어려운 만큼 여러번 반복해서 공부해야겠다.