HTML과 CSS 학습에 조금 지루해 질 때 자바스크립트를 배워보면 다시 코딩에 대한 흥미를 느낄 수가 있습니다. HTML과 CSS가 웹디자인 영역이라면 자바스크립트는 웹프로그래밍 영역에 가까울 수 있겠지만 한번 배워 보는 것도 좋을 것 입니다.
그동안 자바스크립트에 대하여 잘 올리지 않은 것 같은데 이제 자바스크립트에 대하여 종종 포스팅을 해 보고자 합니다. 이번 시간에는 현재시간을 웹 화면에 출력하는 방법에 대하여 알아 보고자 합니다.
자바스크립트 소스
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 현재시간</title>
</head>
<style type="text/css">
body {
background: #000;
font-size: 40px;
font-weight: bold;
color: #fff;
}
</style>
<script type="text/javascript">
var nowDate = new Date();
document.write(nowDate + "<br>");
document.write("현재시간 : ");
var newHours = nowDate.getHours();
document.write(newHours + "시 ");
var newMinutes = nowDate.getMinutes();
document.write(newMinutes + "분 ");
var newSeconds = nowDate.getSeconds();
document.write(newSeconds + "초");
</script>
<body>
</body>
</html>
브라우저 실행 결과
소스설명
- var nowDate = new Date()
- var nowDate : newDate라는 이름의 변수를 선언합니다.
- new : 객체생성
- Date() : 현재시간을 넘겨주는 함수
- 즉, nowDate라는 변수에 현재시간 객체 생성하여 담아 둡니다.
- new 라는 부분을 빼면 첫줄 부분은 나타나지만 현재시간 이후 값은 보이지 않게됩니다. 객체를 생성한 것이 아니기 때문입니다.
- document.write(nowDate + "<br>")
- document.write() : 화면에 쓰기 기능을 합니다.
- nowDate + "<br>" : 변수 nowDate 에 담긴 문자열 값과 줄바꿈을 화면에 표시 합니다.
- var newHours = nowDate.getHours()
- var newHours : newHours라는 이름의 변수를 선언합니다.
- nowDate.getHours() : nowDate라는 변수에 담아둔 객체에서 getHours() 함수를 호출하여 현재 시간을 가져 옵니다.
마무리
자바스크립트를 활용하면 밋밋하던 웹화면을 더욱 역동적으로 만들 수 있습니다. 이 번 시간에는 Date() 함수를 이용한 현재시간을 웹 화면에 표시하는 방벙에 대하여 예제를 통하여 알아 보았습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3) | 2018.06.25 |
|---|---|
| [자바스크립트] 일정간격으로 배경 색 변경하기- setInterval (2) | 2018.06.20 |
| [HTML/CSS] 텍스트 그림자 효과 꾸미기 (4) | 2018.06.19 |
| [HTML/CSS] 카테고리 DIV 박스 만들기 (2) | 2018.06.17 |
| CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow (1) | 2018.05.27 |
