객체나 함수는 리터럴로도 사용할수 있는데, date는 new Date()으로만 사용이 가능하다.
<script>
var oToday = new Date();
var oBirthday = new Date(95,11,17); //1
var oBirthday2 = new Date(95,11,17,3,24,0); //2
var oBirthday3 = new Date("1995-11-17"); //3
var oBirthday4 = new Date("1995.11.17"); //4
console.log(oToday);
console.log(oBirthday);
console.log(oBirthday2);
console.log(oBirthday3);
console.log(oBirthday4);
</script>1의 경우, 월 month가 index로 작용해서 dec으로 반환된다.
2의 경우는 (년,월,일,시,분,초)이다.
3의경우는 그대로 월 month가 11월 nov를 출력한다.
4의경우 ie에선 지원하지 않는다.
<script>
document.write(oToday.getFullYear()+"<br/>");
document.write(oToday.getMonth()+"<br/>"); //월-1값이 출력됨을 유의
document.write(oToday.getDate()+"<br/>");
document.write(oToday.getDay()+"<br/>"); //일:0,월:1,화:2... 0부터 6까지 return값
</script>이때 getMonth는 월이 -1값으로 출력됨을 유의해야 한다.
요일은 일:0,월:1,화:2... 이런식으로 0부터 6까지 return값이 출력된다.
오늘 날짜를 출력해본다.
<script>
var sDate = oToday.getFullYear() + "." + "0" + (oToday.getMonth() + 1) + "." + oToday.getDate();
document.write(sDate);
</script><script>
var oYear = oToday.getFullYear();
var oMonth = "0" + (oToday.getMonth() + 1);
var oDate = oToday.getDate();
var aFull = [oYear, oMonth, oDate];
document.write(aFull.join("."));
</script>이 두 방법은 10월같은 달에도 앞에 0이 붙는다. 그래서 삼항연산자를 사용하는 다음과 같은 방법으로 한다.
<script>
function getFormatDate() {
var oYear = oToday.getFullYear();
var oMonth = oToday.getMonth() + 1;
var oDate = oToday.getDate();
return oYear + "." + (oMonth < 10 ? "0" + oMonth : oMonth) + "." + (oDate < 10 ? "0" + oDate : oDate);
};
document.write(getFormatDate());
</script>삼항연산자를 사용해 월 month와 일 date가 10보다 작을땐 앞에 0을 붙여준다.
브라우저 객체 모델
브라우저 객체 모델(BOM)은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체이다.
window.open : 브라우저 창 띄운다.window.close : 브라우저 창 닫는다.
setTimeout을 사용해 브라우저 창을 닫아본다.
문법: setTimeout( funtion(){함수;}, 시간셋팅);
셋팅한 일정 시간이 지나면 함수를 실행한다. 단위가 밀리세컨즈라서 4000이면 4초이다.
<body>
<button onclick="openPopup();">open</button>
<script>
function openPopup() {
var oPopup = window.open("./opentest.html", "_blank", "width=600, height=400, toolbar=no, menubar=no");
setTimeout(function (){oPopup.close();},4000);
}
</script>
</body>너비와 높이를 지정해주면 팝업창으로 뜨고 툴바와 메뉴바는 사용하지 않는다. 이런 속성들은 window.open의 3번째 인자에 입력하고 조회만 할 수 있게 하는 경우 사용한다.
팝업을 열고 4초뒤에 닫는다.
start버튼을 누르면 숫자가 1초당 1씩 증가하고, stop버튼을 누르면 멈추게 하는 실습을 진행해본다.
<body>
<div id="StopWatch"></div>
<button onclick="StartWatch();">start</button>
<button onclick="StopWatch();">stop</button>
<script>
var iStopWatch = 0;
var myStopWatch; //undefined
function StartWatch () {
if ( myStopWatch === undefined ) {
myStopWatch = setInterval ( function () {
var oStopWatch = document.querySelector("#StopWatch");
oStopWatch.innerHTML = ++iStopWatch; //--
}, 1000);
}
}
function StopWatch () {
clearInterval(myStopWatch);
}
</script>
</body>clearInterval은 멈추게 하는 함수이다.
좀더 응용해서 초시계를 만들어본다.
<body>
<div id="oDate"> </div>
<script>
setInterval(function() {
var oToday = document.querySelector("#oDate");
oToday.innerHTML = new Date().toLocaleString();
}, 1000);
</script>
</body>var oToday = new Date().toLocaleString(); 1초마다 실행해서 값 바꿔서 넣어줘야하는데 이렇게 사용하게 되면 이미 값이 들어간상태여서 1초마다 다시 실행해도 바뀌지않는다
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] Element 식별자 (0) | 2023.03.06 |
|---|---|
| [JavaScript] 문서 객체 모델(DOM) 접근 (0) | 2023.03.06 |
| [JavaScript] 배열 Array 2 (0) | 2023.03.06 |
| [JavaScript] 배열 Array (0) | 2023.03.06 |
| [JavaScript] 원시값과 참조값 (0) | 2023.03.06 |
댓글