자바스크립트 응용편

 

 

카운트다운 타이머

 

1. 남은 시간을 계산하는 함수

var countdown = function (due) {
    var now = new Date();

    var rest = due.getTime() - now.getTime();
    var sec = Math.floor(rest / 1000 % 60);
    var min = Math.floor(rest / 1000 / 60) % 60;
    var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
    var days = Math.floor(rest / 1000 / 60 / 60 / 24);
    var count = [days, hours, min, sec];

    return count;
}

var goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

 

 

Date 객체 초기화

Date 객체를 초기화 하여 변수 now에 대입.

아무것도 지정하지 않아 현재 시간이 설정된다.

 

Date 객체의 getTime 메서드

1970년 1월 0시 0분 0초 UTC 부터 해당 객체의 기준일까지의 차를 밀리초로 반환.

console.log(new Date(2021,5,3,10,14).getTime());

이를 23시 59분 59초를 밀리로 변환한 것에서 뺀 후 변수 rest 에 대입.

rest의 밀리를 초, 분, 시, 일로 다시 변환.

 

2진수 오차, 2진수 나머지 오차

10진수 숫자를 2진수로 변환하여 계산할때 정수가 돼야 할 나머지가 소수가 되는 경우가 있음.

따라서 var sec=rest/1000%60 이 아닌 Math.floor를 이용하여 소수점을 버린다.

 

 

2. 함수 반복 실행

var recalc = function () {
    var counter = countdown(goal);
    var time = counter[1] + 'hours' + counter[2] + 'minutes' + counter[3] + 'seconds';
    document.getElementById('timer').textContent = time;
    refresh();
}

var refresh = function () {
    setTimeout(recalc, 1000);
}

 

setTimeout(함수, 대기시간)

: 대기 시간 후에 함수를 한 번만 실행하라.

 

여기에 들어가는 함수명 되에 괄호()는 생략한다.

함수명이나 메서드명 뒤에 붙는 ()는 해당 함수나 메서드를 바로 실행한다는 뜻.

setTimeout 처리가 끝나기도 전에 매개변수인 함수가 실행되어 버리므로-

 

3. Date객체에 일시를 설정하는 다른 방법

var goal = new Date(2021, 8, 30); //month-1
//goal.setHours(23);
//goal.setMinutes(59);
//goal.setSeconds(59);

var recalc = function () {
    var counter = countdown(goal);
    //    var time = counter[1] + 'hours' + counter[2] + 'minutes' + counter[3] + 'seconds';
    //    document.getElementById('timer').textContent = time;
    document.getElementById('day').textContent = counter[0];
    document.getElementById('hour').textContent = counter[1];
    document.getElementById('min').textContent = counter[2];
    document.getElementById('sec').textContent = counter[3];
    refresh();
}

* 일시를 설정한 상태로 Date 객체를 초기화 한다.

 

 

---

 

select 메뉴로 페이지 이동하기

document.getElementById('form').select.onchange = function () {
    location.href = document.getElementById('form').select.value;
}

 

onchange 이벤트

폼에 입력된 내용이 바뀔 때 발생

 

select.value

select에는 value를 설정하지 않았으나, 선택된 option의 value 속성을 확인하기 위해.

 

location 객체

url을 조사하거나 열람이력을 관리하는 역할

//url 변경, 지정
location.href = 새로운 url;

 

selected 속성 추가

var lang = document.querySelector('html').lang;

var opt;
if (lang === 'ko') {
    opt = document.querySelector('option[value="index.html"]');
} else if (lang === 'en') {
    opt = document.querySelector('option[value="index-en.html"]');
} else if (lang === 'zh') {
    opt = document.querySelector('option[value="index-zh.html"]');
}
opt.selected = true;

 

querySelector

 

document.querySelector('css 선택자')

html, option 태그 등 id 속성이 없는 경우 getElementById가 아닌 querySelector를 사용한다.

일치하는 요소가 여러 개일 경우 첫 요소만 가져온다.

 

 

if 문에서 모든 조건식에서 === 의 왼쪽 값이 같고 해당 변수의 값을 조사하고 싶을 때는 switch 문을 사용할 수 있다.

즉, 위의 예시에서는 모든 조건식에서 lang 값을 확인하고 있다.

switch (lang) {
    case 'ko':
        opt = document.querySelector('option[value="index.html"]');
        break;
    case 'en':
        opt = document.querySelector('option[value="index-en.html"]');
        break;
    case 'zh':
        opt = document.querySelector('option[value="index-zh.html"]');
        break;
}

 

---

 

querySelectorAll('css 선택자')

일치하는 요소를 모두 가져와서 NodeList라는 객체에 요소를 저장한다.

배열과 비슷해보이지만 배열 객체는 아니므로 배열 메서드는 사용할 수 없다.

가져온 요소에 대해 for문을 반복하며 처리할 수는 있다.

var thumbs=document.querySelectorAll('.thumb');
//NodeList[<img.thumb>,<img.thumb>,<img.thumb>]

for(var i = 0; i < thumbs.length; i++{
	thumbs[i].onclick=function(){}
}

 

 

data-*

 

설정:

<태그명 data-*="~~">

 

속성 값 가져오기:

요소.dataset.*

 

* 부분을 자유롭게 설정 가능 (대문자 제외)

태그에 데이터를 심거나 자바스크립트에서 값을 읽고 변경할 때 사용한다.

 

<img data-image="img1.jpg">

thumbs[i].onclick=function(){
	console.log(this.dataset.image);
}

 

 

preload

로딩타임을 줄이기 위해 사진을 먼저 읽어두는 테크닉.

var preloadImage = function (path) {
    var imgTag = document.createElement('img');
    imgTag.src = path;
}

for (var i = 0; i < images.length; i++) {
    preloadImage(images[i]);
}

 

createElement()

괄호 안에 지정한 태그를 생성하여 메모리에 저장하는 메서드.

html에 삽입하지 않음.

 

따라서 아직 읽지 않은 파일을 다운로드하여 캐시하므로 실제로 표시할 때는 다운로드할 필요가 없음.

크기가 큰 사진을 처리할 때 자주 사용한다.

 

---

 

noscript

사용자가 자바스크립트 기능을 끄거나 자바슼느립트가 탑재돼있지않은 브라우저를 사용하는 경우

<noscript> 태그를 사용한다.

이 태그 안에 작성한 요소는 자바스크립트가 실행되지 않는 환경에서만 유효하다.

 

 

 

※ 상기 내용은 '처음 만나는 Javascript (제이펍)' 내용을 정리한 것입니다.