TIL 2023.02.03 JavaScript 3

선택자

document.getElementsByTagName('h1');
document.getElementsByClassName('cl1');
document.getElementById("i3");

var h1 = document.getElementsByTagName('h1')[0];
// h1.innerText='문자열변경';
var ul = document.getElementsByTagName('ul')[0];
// ul.innerHTML='<li>edit</li>';
// h1.outerHTML='<h3>outer</h3>'; // 기존 element 빼버림
// ul.outerHTML='<ol><li>edit</li></ol>'
// document.getElementsByTagName('ol')[0].outerHTML; //새로잡아야함
// h1.outerText='aaa' // h1태그가 사라짐

document.querySelector('h1');
document.querySelectorAll('h1')[0];
document.querySelector('.cl1');
document.querySelectorAll('.cl1');

carousel 캐러셀

<script type="text/javascript">
    var carousel = document.getElementsByClassName('carousel')[0];
    var arr = [];
    for(var i = 0; i < 6; i++){
        // var img = document.createElement('img');
        // img.src="imgs/thumnail"+(i+1)+".jpg";
        // arr.push(img);
    }
    cnt = 1;
    carousel.innerHTML="<img src='imgs/thumnail"+(cnt)+".jpg'>";
    var loop = function() {
        cnt++
        if(cnt==7)cnt=1;
        carousel.innerHTML="<img src='imgs/thumnail"+(cnt)+".jpg'>";
    };
    setInterval(loop, 3000);
</script>



<script type="text/javascript">
    var arr2 = [];
    var ul = document.getElementsByTagName('ul')[0];
    function callback(){
        var firstli = ul.firstElementChild
        ul.removeChild(firstli);
        ul.appendChild(firstli);
        setTimeout(callback, 3000);
    };
    setTimeout(callback, 3000);
</script>



<script type="text/javascript">
    var carousel3 = document.getElementsByClassName('carousel3')[0];
    carousel3.innerHTML=
    '<img src="imgs/thumnail1.jpg"/>'
    + '<img src="imgs/thumnail2.jpg"/>'
    + '<img src="imgs/thumnail3.jpg"/>';
    var arr = 
    ['<img src="imgs/thumnail1.jpg">',
    '<img src="imgs/thumnail2.jpg">',
    '<img src="imgs/thumnail3.jpg">',
    '<img src="imgs/thumnail4.jpg">',
    '<img src="imgs/thumnail5.jpg">',
    '<img src="imgs/thumnail6.jpg">',]
    cnt2 = 1;
    var loop3 = function() {
        cnt2++;
        if(cnt2==6) cnt2=0;
        carousel3.innerHTML=arr[cnt2];
        cnt2++;
        if(cnt2==6) cnt2=0;
        carousel3.innerHTML=carousel3.innerHTML+arr[cnt2];
        cnt2++;
        if(cnt2==6) cnt2=0;
        carousel3.innerHTML=carousel3.innerHTML+arr[cnt2];
    }
    setInterval(loop3, 3000);
</script>



<script>
var carousel, btn1, btn2, cnt;
window.onload = ()=>{
    carousel = document.querySelector('.carousel');
    // 최초 그림
    carousel.innerHTML = '<img src="imgs/thumnail1.jpg">'
    cnt = 1;
    btn1 = document.querySelector('.btn1');
    btn2 = document.querySelector('.btn2');
    btn1.onclick = () => {
        cnt--
        if(cnt == 0) cnt = 6;
        carousel.innerHTML = '<img src="imgs/thumnail'+cnt+'.jpg">'
    }
    btn2.onclick = () => {
        cnt++
        if(cnt > 6) cnt = 1;
        carousel.innerHTML = '<img src="imgs/thumnail'+cnt+'.jpg">'
    }
    function callback() {
        btn2.click();
        setTimeout(callback, 3000);
    }
    setTimeout(callback, 3000);

}
</script>

// carousel 완성
var carousel, prv, nxt, ul, div, nxtTime;
window.onload = () => {
  nxt.onclick= (e) => {
    nextCallback();
    return false; // href 무효화 이벤트는 작동됨
  }
  nxtTime = setTimeout(nextCallback, 2000);
}
function nextCallback() {
  clearTimeout(nxtTime);
  var x = parseInt(ul.style.marginLeft)-100;
  if(x == -600) x = 0;
  ul.style.marginLeft= x + 'px';
  nxtTime = setTimeout(nextCallback, 2000);
}

event

var h1;
function myload(){
    h1 = document.getElementsByTagName('h1')[0];
}
window.onload = myload; // 로딩 됬을 때 myload가 호출됨(콜백)
window.onbeforeunload = function () {console.log('unload')}; // 페이지 이동할 때
window.onerror = function() {}; // DOM을 그리는데 문제가 있어 실패 할 때
window.onbeforeprint = function() {console.log('before')}; // 인쇄하기 전 실행
window.onresize = function() {console.log(window.innerWidth)}; // 사이즈 변경될 때 반응형 웹
window.onscroll = function() { // 스크롤 될 때
    console.log(window.innerHeight, window.pageYOffset)
    if(window.innerHeight-688 < window.pageYOffset){
        document.querySelector('body').innerHTML=document.querySelector('body').innerHTML + 'abcdefg';
    }
} 

var input, select;
window.onload = ()=>{
    input = document.querySelector('input');
    select = document.querySelector('select');
    input.onfocus = () => {
        console.log('포커스 얻음');
    }
    input.onblur = () => {
        console.log('포커스 잃음');
    }
    select.onchange = () => {
        console.log('change...')
    }
    input.onchange = () => {
        console.log('change...')
    }
    input.focus();
}

mouse event

var btn1, btn2, btn3, btn4, btn5, target;
window.onload = function() {
    btn1 = document.querySelector('button');
    target = document.querySelector('#target');
    btn1.onclick=function () {
        target.innerHTML = target.innerHTML + '<div>클릭</div>';
    };
    btn1.onmouseover = function() {
        target.innerHTML = target.innerHTML + '<div>안으로</div>';
    };
    btn1.onmouseout = function() {
        target.innerHTML = target.innerHTML + '<div>밖으로</div>';
    };
    btn1.onmousedown = function() {
        target.innerHTML = target.innerHTML + '<div>눌림</div>';
    };
    btn1.onmouseup = function() {
        target.innerHTML = target.innerHTML + '<div>뗌</div>';
    };
    btn1.ondblclick = function() {
        target.innerHTML = target.innerHTML + '<div>더블클릭</div>';
    }
}

var div1;
window.onload = function() {
    div1 = document.querySelector('div');
    div1.onmouseover = function() {
        console.log('over마우스 들어옴');
    }
    div1.onmouseout = function() {
        console.log('out마우스 나감');
    }
    div1.onmouseenter = function() {
        console.log('enter마우스 들어옴');
    }
    div1.onmouseleave = function() {
        console.log('leave마우스 나감');
    }
}

key event

var div, span;
window.onload = function() {
    div = document.querySelector('div');
    span = document.querySelector('span');
    // div.onmousemove = function(e) {
    //     console.log(e.x, e.y, e.pageX, e.pageY, e.screenX, e.screenY)
    //     span.style.left=e.x+'px';
    //     span.style.top=e.y+'px';
    // }
    // div.onclick = function(e) {
    //     span.style.left=e.x+'px';
    //     span.style.top=e.y+'px';
    // }
    div.ondragstart = function(e) {
        console.log('start');
        console.log(e.x, e.y, e.pageX, e.pageY, e.screenX, e.screenY)
    }
    div.ondragend = function(e) {
        console.log('end');
        console.log(e.x, e.y, e.pageX, e.pageY, e.screenX, e.screenY)
        span.style.left=e.x+'px';
        span.style.top=e.y+'px';
    }
};

var input;
var callback = (e)=>{
    console.log(e.type, e.keyCode, e.code, e.key);
    if(e.keyCode == 40) {
        div.style.marginTop = parseInt(div.style.marginTop) + 10 + 'px';
    }
    if(e.keyCode == 38) {
        div.style.marginTop = parseInt(div.style.marginTop) - 10 + 'px';
    }
    if(e.keyCode == 39) {
        div.style.marginLeft = parseInt(div.style.marginLeft) + 10 + 'px';
    }
    if(e.keyCode == 37) {
        div.style.marginLeft = parseInt(div.style.marginLeft) - 10 + 'px';
    }
}
window.onload = () => {
    // 키입력 이벤트는 포커스가 있는 태그에서만 작동함
    // button은 한번 클릭한 뒤에 포커스가 생기면 작동됨
    // 최초 포커스는 document 이므로 document에 키입력 주기 가능
    input = document.querySelector('input');
    div = document.querySelector('div');
    div.style.marginLeft = '10px';
    div.style.marginTop = '10px';
    document.onkeydown = callback;
    input.onkeyup = callback;
    input.onkeypress = callback;
}