JS - setInterval / focus()

베이스캠프 5일차
​
어제 의문을 가졌던 부분에 이어, timer.js에 새로운 기능을 추가했다

 

let isStarted = false;
 
const auth = () => {
 
    if(isStarted === false){
        // 타이머가 작동 중이 아닐 때
    isStarted = true
   // document.getElementById("complete").disabled = false
   // document.getElementById("")
   // const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0")
   // document.getElementById("target").innerText = token
   // document.getElementById("target").style.color = "#" + token
    
    let time = 180
    let timer
 
    timer = setInterval(() => {
//        if(time>=0){
//          let min = Math.floor(time/60)
            // 3:0으로 나타나지 않기 위해, '나머지'를 문자열화 한 후, padStart 활용
//          let sec = String(time%60).padStart(2,"0")
            // 이때 원하는 위치인 id="timer"에 시간이 입력되게끔 함
//          document.getElementById("timer").innerText = min + ":" + sec
            // 시간을 하나씩 빼는 것 잊지 않기
//          time=time-1
        } else {
//          document.getElementById("complete").disabled = true
            isStarted = false;
            clearInterval(timer)
//        }
//      }, 1000);
 
    } else {
    // 타이머가 작동 중일 때
 
 
    }
}

isStarted 라는 새로운 변수를 추가하여, 현재 auth()가 동작 중인지 확인한 뒤

if문을 통해 isStarted 의 상태에 따라 제어하는 방식이었다

 

<input type="text" id="email" oninput="checkValidation()">
    <button id="submit" disabled="true">회원가입</button>
 
--
 
const checkValidation = function () {
 
    let email = document.getElementById("email").value
    let pw1 = document.getElementById("pw1").value
    let pw2 = document.getElementById("pw2").value
 
    // 이때 if(email&&pw1&&pw2){ 값은 문자열 0이 아닌, 
    // 숫자열 "0"로 반환되므로 true값을 반환함
    if(email&&pw1&&pw2){
        // 모든 input이 비어있지 않을 때
        document.getElementById("submit").disabled = false
    } else {
        // 하나라도 비어있을 때
        document.getElementById("submit").disabled = true
    }
}

이후 배운 것은 oninput이라는 기능이었다
​
이는 HTML내에 어떤 것이 변화할 때, 변화할 때마다 특정 function을 실행하게 만든다

<input type="text" id="p1" oninput="changeFocus1()" maxlength="3">-
    <input type="text" id="p2" oninput="changeFocus2()" maxlength="4">-
    <input type="text" id="p3" maxlength="4">
 
--
 
const changeFocus1 = () => {
    let phone1 = document.getElementById("p1").value
    if(phone1.length === 3){
        document.getElementById("p2").focus()
    }
}
const changeFocus2 = () => {
    let phone2 = document.getElementById("p2").value
    if(phone2.length === 4){
        document.getElementById("p3").focus()
    }
}

 

 

더 나아가 focus()를 통해, 원하는 위치에 자동으로 입력칸이 이동하게 할 수도 있다
(추가로 input 내, maxlength를 통해 원하는 길이만큼 숫자를 제한할 수도 있다)
​
싸이월드 5일차
​
어제 표를 div 태그를 활용하여 만드느라 약간의 고생을 했는데, 새로운 방법을 알게 되었다

 

 <table class="albumTable">
                    <tr>
                        <th class="albumtable__checkbox"><input type="checkbox"></th>
                        <th class="albumtable__number">번호</th>
                        <th class="albumtable__song">곡명</th>
                        <th class="albumtable__artist">아티스트</th>
                    </tr>
                    <tr>
                        <td class="album-table-checkbox"><input type="checkbox"></td>
                        <td class="album-table-number">1</td>
                        <td class="album-table-song">눈의 꽃</td>
                        <td class="album-table-artist">박효신</td>
                    </tr>

​​table tag를 활용한 방식인데,

tr '행'에 해당하는 개념

th 첫줄 / td 나머짓줄로 이해하면 편할 것 같다

--
추가적으로 iFrame에 지금껏 만들었던 다른 HTML에 연결하는 방식에 배웠다
​

<iframe id="contentFrame" src="home.html"></iframe></div>
    </div>
<div class="navigation">
    <div class="navigationItem" id="menuHome" onclick="menuHome()">홈</div>
    <div class="navigationItem" id="menuJukebox" onclick="menuJukebox()">주크박스</div>
    <div class="navigationItem" id="menuGame" onclick="menuGame()">게임</div>
 
// 
 
const menuHome = () => {
    document.getElementById("contentFrame").setAttribute("src","home.html")
    document.getElementById("menuHome").style = "color:black; backgorund-color:white;"
    document.getElementById("menuJukebox").style = "color:white; backgorund-color:#298eb5;"
    document.getElementById("menuGame").style = "color:white; backgorund-color:#298eb5;"

setAttribute를 활용하여, url을 통해 해당 데이터를 가져오겠다고 지시한 뒤 원하는 url을 가져온 방식인 것 같다
​

iFrame이나 다른 곳에서든 언제든 활용할 수 있는 방식이니 기억해두도록 한다
​

싸이월드 완성본

 

 

 

 

1주차 테스트