'자바스크립트' 태그의 글 목록

자바스크립트

[JAVASCRIPT] - 동기 , 비동기 2022.01.05
javascript - throw 예외처리 2022.01.05
HTML5 태그 (2) - article,section,nav 2019.02.28
javascript - DOM 선택 STYLE 바꾸기 2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) 2019.02.27

[JAVASCRIPT] - 동기 , 비동기

2022. 1. 5. 13:57

▼ 프로젝트를 진행하다보면 HTTP 통신을 통해 데이터를 가져와야할 경우가 있습니다. 기본적으로 HTTP통신은 비동기적으로 이루어집니다. 그렇다보니 데이터를 받아오기전에 Rendering이 이루어지는 경우도 있고 미리 연산처리를 해버려 에러를 발생시키는 경우도 빈번하게 발생합니다.

이번 포스팅에서는 위와 같은 일을 방지하기 위해 Javascript 에서의 비동기를 동기로 실행하는 방법에 대해서 알아보려합니다 👍

📋비동기 / 동기

▼ 우리는 카페에가서 음료를 주문하고 진동벨을 받아옵니다. 자리에가서 앉아 있다 진동벨이 울리면 커피를 받아옵니다. 이를 ‘비동기 처리’에 비유할 수 있습니다.

각자의 일을 처리하다 자신의 차례가 오면 자신의 일을 수행합니다. 서로에게 영향을 주지 않습니다.

진동벨이 없다고 생각해보세요 카페에가서 음료를 시키고 음료가 나올때까지 카운터에서 기다려야한다면 우리는 커피가 나오기전까지는 자리에 앉아 업무를 볼 수 없을거에요 이처럼 앞의 일이 끝나야 다음일을 처리할 수 있는 것을 ‘동기의 처리’에 비유할 수 있습니다.

📋비동기를 동기로 동작시키는법

▼자바스크립트에서의 비동기를 동기로 동작시키는 대표적인 3가지의 방법을 알아보겠습니다.

Callback Function

Promise

Async / Await

Generator (이 포스트에서는 다루지 않습니다)

📋 1. Callback

첫번째로 Callback을 이용한 방법을 알아보겠습니다.

기본적인 Callback의 사용법은 위와 같습니다 😉

a 는 callback 즉 function을 받는 함수입니다.

a 는 받은 함수에 ‘i am A’ 라는 값을 넣어줍니다.

b 는 a에서 넘겨준 ‘i am A’ 라는 값을 받아 console 에 찍어줍니다.

위의 코드의 동작을 이해하셨다면 비동기를 동기로 바꾸는 코드도 쉽게 이해하실 수 있습니다.

두개의 함수가 있습니다.

step1은 실행 후 2초가 걸리고, step2는 1초가 걸립니다.

우리는 step1이 실행되고 step2 가 실행되기를 바랍니다.

위의 코드를 실행해보면 우리가 원했던 결과가 나오지 않습니다.

step2 가 실행하고 step1 이 실행됩니다.

어떻게 하면 우리가 원하는대로 실행시킬 수 있을까요 ? 바로 ‘Callback’ 을 이용하면 됩니다.

step1 은 함수를 인자로 받는 함수입니다.

step1 은 받은 함수를 실행해주는 역할을 합니다.

우리가 의도한대로 step1 이 실행된 후 step2 가 실행됩니다.

위와 같은식으로 Callback을이용하면 비동기를 동기처럼 동작하게 할 수 있습니다.

하지만 지금은 함수가 2개 뿐이지만 함수가 많아질 수록 함수의 깊이가 깊어집니다. 표현방법 2 처럼 말이죠 함수안에 함수 함수안에 함수…. 그안에 또 함수 … 다들 한번쯤 들어보셨을만한 Callback Hell 이 되는 것이죠 .. 그래서 조금더 깔끔하게 처리할 방법이 필요했습니다.

그것이 2번째 방법인 Promise 입니다.

📋2. Promise

기본적인 Promise 객체의 사용법 입니다.

foo 는 Promise 객체를 Return 합니다. 그렇기 때문에 foo().then 처럼 이어갈 수 있습니다.

foo().then 에서 then은 foo의 동작이 마무리된 후 동작합니다. Promise resolve 안에 넣어준 값이 들어옵니다.

then 을 계속 이어쓸 수 있습니다

Callback 으로 해결했던 것을 Promise 로 변경해보겠습니다.

a는 Promise 객체를 반환합니다. 그렇기 때문에 a().then 을 통해 순서를 제어할 수 있습니다. then 은 a의 동작이 마무리된 후 실행됩니다.

a 가 실행되며 console.log(‘a run …..’) 이 제일 먼저 실행되고

resolve를 통해 then 으로 (str === ‘a run …..’) 을 넘겨줍니다.

a의 실행이 끝나고 then 에서 b를 실행하며 str을 넘겨줍니다. 이때 console.log(‘b run …..’) 이 찍히게 됩니다.

마지막으로 1초 후 console.log(‘넘겨받은 값: ’, str) 이 찍히게 됩니다.

또 여러개의 비동기 작업이 있을때 비동기 작업이 모두 완료된 후에 어떤 작업이 이루어져야 할때도 Promise를 이용할 수 있습니다.

2개의 작업이 있습니다. 한가지 작업은 1초가 걸리고 다른 한가지 작업은 2초가 걸립니다. 우리가 원하는 것은 두개의 작업이 ‘모두’ 마무리 된 후에 다른 작업이 이루어지기를 바랍니다.

Promise.all 에 [첫번째 Promise, 두번째 Promise] 의 형태로 넘겨주면 모든 Promise의 작업이 끝난후 then 에 결과값을 배열형태로 넘겨줍니다

어떤가요 Callback 보다는 편리해졌나요 ? 하지만 Promise 또한 깊이가 깊어진다면 가독성이 현저히 떨어질 수 있습니다. 사실 Promise를 사용하는데 보기가 너무 힘들고 불편한 현상이 생겼다면 (본인의 코드를 의심해봐야 될 수 있습니다…😉)

📋3. Async / Await

마지막으로 살펴볼 방법은 Async / Await 입니다.

Async /Await 은 말그대로 동작을 일시정지 시킨것처럼 보이게 해줍니다. Promise 나 Callback 보다는 직관적인 코드 패턴을 가질 수 있습니다. (Async 와 Promise 의 차이점에 대해서는 후에 포스트에서 다뤄볼 예정입니다)

async 함수 표현식을 이용합니다.

async 함수 내부에서는 promise 객체들의 순서를 await을 이용하여 순서 조절이 가능합니다.

foo 는 async 함수입니다.

foo 를 실행가된다면 console.log(‘foo run….’) 이 가장 먼저 찍히게되고 아래 await 을 만나게 됩니다.

promise() 은 Promise 객체입니다. promise() 을 실행하면서 console.log(‘promise run ….’) 이 찍히게 되고 2초 후에 resolve(10) 을 실행하게됩니다. 앞에서 살펴봤던 Promise 에서는 then으로 10 으로 들어가지만 await 을 이용하게되면 10 이 return 됩니다. 즉 const num = 10 이 됩니다.

promise() 종료 후 num 에 10이 들어오고 console.log(‘num’, 10) 이 실행된 후 종료됩니다.

📢마무리

▼ 비동기를 동기처럼 사용할 수 있는 3가지 방법에 대해서 알아봤습니다. 어떤 것이 좋고 어떤 것이 안 좋다고 말하기에는 저의 경험과 지식이 아직 부족하기도 하고 상황마다 필요한 것들이 다르기 때문에 감히 말할 수는 없습니다.

Promise와 Async 는 디버깅 시 에러가 걸리는 포인트가 다르기도 하고 개인의 취향에 따라 어떤 것이 더 보기 편하다 나쁘다 등등 굉장히 많은 이야기가 오가는 것으로 알고 있습니다. 이에 대한 이야기는 자료를 더 수집한 후 뒤에 포스터에서 정리해보려 합니다. 😉

-출처 https://medium.com/@appear.ko/javascript-async-to-sync-157c57208598

저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - throw 예외처리 (0)	2022.01.05
D3.JS - 날짜 라인 그래프 그리기 (0)	2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등) (0)	2019.04.30
javascript - foreach 문 , for in 문 , for of문 (1)	2019.03.03
javascript 구동방법이해하기 (0)	2019.03.03

javascript - throw 예외처리

2022. 1. 5. 13:51

📢JAVASCRIPT THROW 예외처리

▼ 내용
throw 에 에러가 걸리면 이하 구문은 실행안하고 catch문으로 들어간다

💻코드

function getRectArea(width, height) {
  if (isNaN(width) || isNaN(height)) {
    console.log("시작 1");
    throw "Parameter is not a number!";
    console.log("시작 2");
  }
  console.log("시작 3");
}

console.log("시작 4");

try {
  getRectArea(3, 'a');
  console.log("시작 5");
}
catch(e) {
  console.log("에러22"+e);
  // expected output: "Parameter is not a number!"
}

//console.log 에러일경우
> "시작 4"
> "시작 1"
> "에러22Parameter is not a number!"

//console.log 정상일경우
> "시작 4"
> "시작 3"
> "시작 5"

저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JAVASCRIPT] - 동기 , 비동기 (0)	2022.01.05
D3.JS - 날짜 라인 그래프 그리기 (0)	2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등) (0)	2019.04.30
javascript - foreach 문 , for in 문 , for of문 (1)	2019.03.03
javascript 구동방법이해하기 (0)	2019.03.03

HTML5 태그 (2) - article,section,nav

2019. 2. 28. 10:29

article :

1. (신문·잡지의) 글, 기사

2. (합의서·계약서의) 조항

3. (특히 세트로 된 물건의 개별) 물품

section:

1. (여러 개로 나뉜 것의 한) 부분, 부문, 구획

2. (조립식) 부품

3. (문서책 등에서) 절(節), (신문의) 난(欄)

nav (navigation):

1. (지도 등을 보며) 길을 찾다

2. (바다·강 등을) 항해하다

3. (힘들거나 복잡한 상황을) 다루다

각각의 이런뜻이 있습니다.

옜날에는 모든것을 div로 묶어서 표현하였지만 HTML5 로 오면서 묶는거에도

의미를 두자 해서 여러가지 태그들이 나왓습니다

그중 많이쓰이는것이 HEADER , FOOTER , MAIN , NAV ,SECTION ,ARCTILE 등등

여러가지가 있찌만 (HTML5에서 나온태그들입니다.) 각각의 태그들은 이름 그대로의 의미를 가지고

딲히 다른 태그들처럼 특별한 기능은 없이 HTML문서를 레이아웃으로 구역화시키고 나누고 레이아웃을 짜고 묶는데를 주력으로 만들었다고 생각합니다.

자그럼 이태그들을 어떨때 사용해야하는지를이제 알아보겠습니다. 간단하게!

arctile 은 내용이 각기 독립적이고, 홀로 설 수 있는 내용 (블로그 글 , 뉴스기사)

section 은 내용이 서로 관계있을 경우 (주로 문서를 다른주제로 구분 짓기)

div 는 오로지 내용을 묶는 역할.

여러개의 section을 article 로 묶을수 있고,

마찬가지로 여러개의 article 을 section 으로 묶을수 있습니다.

nav 는 메뉴바 등의 다른 링크들을 모으는 구역? 레이아웃을 설정할떄 젤 상위로 사용합니다.

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML 태그 (0)	2019.02.27

javascript - DOM 선택 STYLE 바꾸기

2019. 2. 27. 09:47

자바스크립트에서 String 는 '' 나 "" 로 할수있지만

`` 로 사용할 수 도있다 ''로 사용할경우 변수를 넣을수도있다

const abcd = ` abcdefg 	`;
console.log(`abd ad` + `adf egfle ${abcd}`);
//bd   adadf    egfle  abcdefg 	

상수의 계산에서

3*2 는 6 단순 곱하기이지만

3**2 는 3의 2제곱 9가 된다

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    const basecolor = (function(){
            if(div.style.color === 'yellow' && div.style.background === 'red'){
                div.style.color = 'white';
                div.style.background = 'black';
            } else {
                div.style.color = 'yellow';
                div.style.background = 'red';               
            }
                });
    
    function init(){
    
     div.addEventListener("click",basecolor); // 클릭할때마다 바뀜
   //  div.addEventListener("mouseenter",basecolor); // 클릭할때마다 바뀜
   //window.addEventListener("online",basecolor);  //인터넷이 연결됫을때 바뀜
   //window.addEventListener("offline",basecolor); // 인터넷이 연결이 끈겻을때 바뀜
   // 각종 마우스 이벤트 모음 구글키워드 javascript dom event mdn
    }
    init();

</script>
</html>

색깔바꾸기 예제

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<style>
.div{
    color : red;
    background-color: yellow;
}
.div2{
    color : white;
    background-color: black;
}
</style>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    
    const colorClick = function(){
        if(div.className === 'div2'){
            div.className = 'div';
        } else {
            div.className = 'div2';
        }
    }
    const clickEvent = function(){
        div.addEventListener('click',colorClick);

    }
    
    clickEvent();
    
</script>
</html>

위 예제는 스타일은 css 자바스크립트는 로직 으로 바꿔서 한 처리이다

보기좋게 한파일로햇지만 파일을 따로 나눠서 사용하는데 목적을 둔다

-------------------------------------------------------------------------------------------------------------------------------

클릭이벤트

div.addEventListener("click",hangleClick); 와

div.addEventListener("click",hangleClick()); 의 차이는?

아래껀 한번만 실행되고 위에껀 클릭할때마다 실행됨?

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

javascript - 바닐라자바스크립트 예제(nomad by nicollas)

2019. 2. 27. 09:44

이 예제는 https://academy.nomadcoders.co/courses/435558/lectures/6701513

공지사항

크롬 앱 클론코딩하며, JS 이론 배우기 <br></br>[초급] HTML, CSS, JS

academy.nomadcoders.co

위 강의에 들어있는 니콜라스 선생님의 강의를 토대로 제가 연습겸 작성한

js 문서들 입니다.

무료강의니깐 한번 들어보시길 추천드리겠습니다.

신기술? 신개념? 등을 좀 배울수 있어 유익했습니다.

플젝은 localStorage 에 name , to dolist , 날씨API사용하여 가져오기 , 실시간 시계 , 배경이미지(랜덤)

등이 포함된 기술입니다.

CSS는 포함안되있고 JS적인 부분만 다루고있습니다.

예제파일도 첨부하니 필요하시분은 받아서 보시기 바랍니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Real Time</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div class="realTime_div">
        <h1>00 : 00</h1>
    </div>
    <form id="form" class="form">
        <input id="input" type="text" placeholder="your name?"/>
    </form>
    <h4 id="h4" class="h4"></h4>
    <form id="todoform"> 
            <input type="text" placeholder="what is todo?">
    </form>
    <ul id="ul"></ul>
    <span class="weather"></span>
    <script src="../js/clock.js"></script>
    <script src="../js/user.js"></script>
    <script src="../js/todo.js"></script>
    <script src="../js/bg.js"></script>
    <script src="../js/weather.js"></script>
</body>
</html>

index.css

.h4,
.form {
    display:none;
}

.show{
    display:block;
}

body{
    background-color: pink;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bgIMG{
    position: absolute;  
    z-index: -1;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    animation: fadeIn 0.5s linear;
}
 /* 배경이미지의 속성 설정 
    position 절대위치로 left top 0 
    애니메이션으로 투명도를 0에서 1로 바꿈 0.5 초마다
    */

bg.js

const body = document.querySelector("body");

const IMG_NUMBER = 5;

function randomNumber(){ //랜덤숫자 생성
    return Math.ceil((Math.random()*IMG_NUMBER));
}

function IMGselect(randomNum){ 
    const image = new Image();
    image.src = `../img/${randomNum}.jpg`;
    image.className = 'bgIMG';
    body.prepend(image);
}//랜덤 숫자를 넣고 이미지 경로를 뽑아 body에 추가

function init(){
    const randomNum = randomNumber();
    IMGselect(randomNum);
}

init();

clock.js

const realTime_div = document.querySelector(".realTime_div"),
    realTime_H1 = realTime_div.querySelector("h1");
    realTime_js = (function(){
    
const realDate = new Date(),
    getHours = realDate.getHours(),  // 시간 가져오기
    getMinute = realDate.getMinutes(), // 분 가져오기
    getSecond = realDate.getSeconds();  // 초 가져오기

    realTime_H1.innerText = `${getHours < 10 ? `0${getHours}` : getHours} :`;
    realTime_H1.innerText += ` ${getMinute < 10 ? `0${getMinute}` : getMinute} :`;
    realTime_H1.innerText += ` ${getSecond < 10 ? `0${getSecond}` : getSecond}`;
    //시분초가 각각 10 미만일때 앞에 0 붙혀서 출력 삼항연산자 ex) 01:01:01 
});

//625
function init(){
    setInterval(realTime_js,1000);
}
init();

todo.js

const toDoform = document.querySelector('#todoform'),
    toDoinput = toDoform.querySelector('input'),
    LS_TODO = 'TODO',
    todolist = document.querySelector('ul');
let todos = [];


    function LS_Save(){
        localStorage.setItem(LS_TODO,JSON.stringify(todos));
        //객체를 STRING으로 변환해서저장 LOCAL은 STRING 박에 저장이 안됨
    }

    function saveTodo2(text){
        const li = document.createElement('li'), //LI 생성
            span = document.createElement('span'), //span 생성
            delBtn = document.createElement('button'), //button 생성
            newId = todos.length+1; //li에 만들어줄 id값 생성
           

        delBtn.innerText = '🤓'; // 버튼에 텍스트 이모티콘 추가
        delBtn.addEventListener('click',deleteLiBtn);
        span.innerText = text; // span 에 입력한값 추가
        li.appendChild(delBtn); // li에 버튼 추가
        li.appendChild(span); // li 안에 span 추가
        li.id = newId; //li 에 id 값 할당
        todolist.appendChild(li); // ul에 li 추가

        const todoObj = {
            text : text, //텍스트값
            id : newId  //li id값 지정
        }

        todos.push(todoObj); //객체를 배열에 저장
        LS_Save();
    }

    function deleteLiBtn(EVENT){ //버튼 클릭시 삭제 이벤트
        const BtnPaLi = event.target.parentElement;
        //버튼의 부모엘리먼트 li 찾음
        BtnPaLi.remove(BtnPaLi.id); //li의 id로 제거
        const newtodo = todos.filter(function(todo){
            //fiter 은 배열의 각각의 요소에 foreach처럼 접근해서
            //true 인 경우만 갖고 새로 배열을 만든다
            
            return todo.id !== parseInt(BtnPaLi.id)
            //true인지 false인지 확인중
        });

        todos = newtodo; //todo를 newtodo로 저장
        LS_Save(); //로컬스토리지 저장
    }

    function hanmdleSubmit2(event){  
        event.preventDefault(); //이벤트 초기화
        const todovalue = toDoinput.value;
        saveTodo2(todovalue); //text값 서브밋
        toDoinput.value = "";
    }

    function isTodo(){
        const LS_TODOSS = localStorage.getItem(LS_TODO); 
        if(LS_TODOSS !== null){
            const parseTodo = JSON.parse(LS_TODOSS); 
            //로컬 데이터를 객체로저장
           parseTodo.forEach(function(todo){ 
            //forEach로 각각 데이터 뽑기
            saveTodo2(todo.text);
           });
        }
    }

    function init(){
        isTodo();
        toDoform.addEventListener('submit',hanmdleSubmit2);
        
    }
    init();

user.js

const form = document.querySelector("#form"), 
    h4 = document.querySelector("#h4");
    input = form.querySelector("input");

function showuser(){
    h4.classList.remove('h4');
    form.classList.remove('show');
    form.classList.add('form');
    h4.classList.add('show');
    h4.innerText =localStorage.getItem("user");
}
function saveName(text){
    localStorage.setItem('user',text);
    showuser();
    //저장소에 user : 이름 저장
}

function handleSubmit(event){
    event.preventDefault(); //이벤트 초기화
    form.addEventListener("submit",saveName(input.value));

}

function isuser() {
    if(localStorage.getItem("user") === null){
        form.classList.remove('form');
        form.classList.add('show');
        form.addEventListener("submit",handleSubmit);
        //user 가 없으면 user입력
    } else {
        showuser(); //form 가리고 h4에 input.value 보여준다
        //user가 있으면 user 보여준다
    }
}

function init() {
    isuser();
}

init();

weather.js

const LS_GPSName = 'GPS';
const API_KEY = '이건 회원가입해서 받으세여 구글에 weather API 검색';
const weather = document.querySelector(".weather");

function getWeather(lat,lon){
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
        //api 호출해서 위도,경도,appid키값,화씨를 섭씨로 바꾸기 등을 넣어서 정보를 가져온다.
        ).then(function(data) {
            return data.json();
        }).then(function(json){
            const temper = json.main.temp;
            const place = json.name;
            weather.innerText = `장소 : ${place} @ 온도 : ${temper}`;

                        //속성으로 css 설정
            //weather.setAttribute('style','font-size : 30px; color : white;');

                        //프로퍼티로 css 설정
            weather.style.color = 'white';
            weather.style.fontSize = '30px';
        });        
    }

    //featch는 IE에선 작동이 안된다
    //AJAX의 상위호환 같은것인데 IE에서는 개발이안되서
    //국내에선 사용하기가 조금 꺼려진다
    //국내에선 되도록 AJAX를 호출하는게 나을거같다


function LS_SaveGPS(GPSObj){
    localStorage.setItem(LS_GPSName,JSON.stringify(GPSObj));
}
function SaveGPSSuccess(position){
    const lat = position.coords.latitude; //위도 얻기
    const lon = position.coords.longitude; //경도 얻기
    const GPSObj = {
        lat,
        lon
    }
    LS_SaveGPS(GPSObj);
    getWeather(lat,lon);
}

function SaveGPSError(){
    console.log("failed");
}

function SaveGPS(){
    navigator.geolocation.getCurrentPosition (SaveGPSSuccess,SaveGPSError);
    //navigator.geolocation 객체를 이용해서 gps 정보를 얻는다
    //getCurrentPosition빠른 응답 / 정확도는 낮음
    // getCurrentPosition 은 (첫번째인자,두번쨰인자)\
    //첫번쨰인자는 석세스 콜백 함수고
    //두번째 인자는 에러 콜백 함수다.
}

function loadGPS(){
    const LS_GPSInfo = localStorage.getItem(LS_GPSName);
    if(LS_GPSInfo === null || LS_GPSInfo === undefined){
        //GPS정보얻기
        SaveGPS();
    } else {
        const parseGPS = JSON.parse(LS_GPSInfo);
        //GPS 정보 가져오기
        getWeather(parseGPS.lat,parseGPS.lon);
    }
}

function init(){
    loadGPS();
}

init();

아래 파일의 img 폴더의 배경이미지는 용량이 많아 제거하였습니다.

마음에되는 이미지로 1.jpg 2.jpg 를 5.jpg까지 만드시면 됩니다.

clock.zip

예제파일 CLOCK.ZIP 추가

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27

PREV 1 NEXT

아빠개발자의 노트