Day 26 - js 속성 이어서, js로 브라우저 제어하기

ksyke 2024. 8. 28. 14:50

Javascript

// number
// string
// boolean
// array
// object
// function
// null
// undefined

var a;
console.log(a); // undefined
var b = null;
console.log(a, typeof a); // undefined 'undefined'
console.log(b, typeof b); // null 'object'
var c = [];
console.log(c, typeof c); // [] 'object'
var d = {};
console.log(d, typeof d); // {} 'object'
var e = function(){};
console.log(e, typeof e); // (){} 'function'

for(var i=0; i<5; i++){
    console.log('in', i);
}
console.log('out', i); // out 5
// - 모든 변수는 전역변수가 되는 특징이 있지만 지역변수로 사용하기 위해서는 function()안에서 변수를 선언한다.

js의 `let`과 `const`

let

let d = 1111;
for(let d=0; d<5; d++){
    console.log(d);
}
console.log(d); // 1111

const

const f = 34;
// f=34; // 에러가 나옴
console.log(f);

js의 function

var a = 111;
function Func01(){}
var obj1=new Func01();
console.log(typeof obj1); // object
obj1.num=1111;
console.log(obj1); // Func01 {num: 1111}


function Func02(b){
    this.b=b;
}
var obj2=new Func02(2222); // Func02 {b: 2222}
console.log(obj2);

class Func03{
    f1(){}
}
var obj3=new Func03();
console.log(obj3.f1); // f1(){}

문자열을 숫자로 바꾸기

var msg = "1,000";
msg=msg.replaceAll(',','');
var su=parseInt(msg);
console.log(su*2); // 2000

var msg2=3.14;
var su2=parseFloat(msg2);
console.log(su2); // 3.14

var su3=new Number('11.11');
console.log(su3+1); // Number {12.11}

JS의 내장객체

alert

alert('주의'); // 사용자에게 알림창을 띄운다.
alert('개행은 \n로 이루어진다.'); // 사용자가 확인을 누르기 전까지는 이후 행을 진행하지 않는다.

confirm

var result=confirm('확인해주세요.'); // 사용자에게 확인과 취소의 선택을 준다.
console.log(result);

prompt

var result=prompt('사용자의 입력을 받는다.');
console.log(result); // 입력을 안하거나 취소를 누를시 null이 반환된다.

Date

var d1=new Date();
console.log(d1.getFullYear()); 
console.log(d1.getYear()+1900); 
console.log(d1.getMonth()+1);
console.log(d1.getDay());
console.log(d1.getHours());
console.log(d1.getMinutes());
console.log(d1.getSeconds());

JSON

통신에서 사용하는 js object

var obj1={key1:'val1',key2:1234,key3:['item1','item2']};
var msg3=JSON.stringify(obj1);
console.log(msg3); // {"key1":"val1","key2":1234,"key3":["item1","item2"]}
console.log(typeof msg3); // string
var obj2=JSON.parse(msg3);
console.log(obj2); // {key1: 'val1', key2: 1234, key3: Array(2)}

setTimeout, setInterval, setTimeout

function func1(){
    console.log(new Date());
}
setTimeout(func1,3000);
var t=setInterval(func1,3000); // 무한반복 
clearInterval(t); // 무한반복 중지
var t=setTimeout(func1,1000); // 1초 뒤에 수행할 기능을 예약하는 객체
clearTimeout(t);

BOM (Browser Object Management)

Window

var w;
function func1(){
    w=window.open('http://naver.com','_blank','width=200');
}
function func2(){
    w.close();
}
---<cmd>
<button onclick="func1();">open</button>

Screen

console.log(
    window.screen.width, window.screen.height // 1707 1067
);
console.log(
    window.screen.availWidth, window.screen.availHeight // 1707 1019
);
console.log(
    window.screen.colorDepth // 24 (윈도우에 표현할 수 있는 비트수)
);

Location

console.log(
    window.location.href // 현재 주소
);
function func1(){
    window.location.href="http://google.com"; // 주소 이동
}
function func2(){
    window.location.reload(); // 새로고침
}
function func3(){
    window.location.replace('http://naver.com'); // 주소 변경
}

History

console.log(history.length);

function func4(){
    history.back();
}
function func5(){
    history.forward();
}
function func6(){
    history.go(0); // 새로고침
    history.go(2); // 앞으로 두번 가기
    history.go(-2); // 뒤로 두번 가기
}

Navigator

console.log(navigator.appVersion);

DOM (Document Object Manager)

<body>
    <h1>DOM</h1>
    <ul>
        <li>item1</li>
    </ul>

    <script type="text/javascript">
        var ul=document.lastElementChild.lastElementChild.firstElementChild.nextElementSibling;
        function nli(msg){
            var li=document.createElement('li');
            var msg=document.createTextNode(msg);
            li.appendChild(msg);
            return li;
        }

    </script>
</body>

    <style rel="stylesheet" type="text/css">
        div{
            width:500px;
            height: 151px;
            overflow:hidden;
        }
        img{
            width:500px;
        }
    </style>
</head>
<body>
    <div>
        <img src="imgs/img1.jpg"/>
        <img src="imgs/img2.jpg"/>
        <img src="imgs/img3.jpg"/>
        <img src="imgs/img4.jpg"/>
        <img src="imgs/img5.jpg"/>
        <img src="imgs/img6.jpg"/>
    </div>
    <script type="text/javascript">
        var div=document.lastElementChild.lastElementChild.firstElementChild;
        function loop(){
            div.appendChild(div.firstElementChild);
        }
        setInterval(loop,1000);
    </script>
</body>

태그로 엘리먼트 불러오기

document.getElementsByTagName('input')[0];

클래스, Id로 엘리먼트 불러오기

document.getElementsByClassName('class');

document.getElementById('id');

HTML5의 querySelector

document.querySelector('ul');

document.querySelectorAll('li');

JS callback으로 움직이는 이미지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        div{
            width: 400px;
            height: 120px;
            overflow: hidden;
            background-color: aqua;
            position: relative;
        }
        ul{
            list-style: none;
            padding: 0px;
            position: absolute;
            left:0px;
            top:-16px;
        }
        ul>li{
            height: 120px;
        }
        ul>li>img{
            width: 400px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="imgs/main1.jpg" alt=""></li>
            <li><img src="imgs/main2.jpg" alt=""></li>
            <li><img src="imgs/main3.jpg" alt=""></li>
            <li><img src="imgs/main4.jpg" alt=""></li>
            <li><img src="imgs/main5.jpg" alt=""></li>
            <li><img src="imgs/main6.jpg" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript">
        var ul=document.getElementsByTagName('ul')[0];
        var cnt=0;
        function loop(){
            if(cnt<15)cnt++;
            else cnt=0;
            ul.style.top='-'+(4*cnt+1)+'6px';
           time=setTimeout(loop,200);
        }

        var time=setTimeout(loop,200);
    </script>
</body>
</html>

CSS 애니메이션으로 움직이는 이미지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        @keyframes ani1{
            from{
                top:-16px;
            }
            to{
                top:-616px;
            }
        }
        div{
            width: 400px;
            height: 120px;
            overflow: hidden;
            background-color: aqua;
            position: relative;
        }
        ul{
            list-style: none;
            padding: 0px;
            position: absolute;
            left:0px;
            top:-16px;
            animation-name: ani1;
            animation-duration: 6s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            
        }
        ul>li{
            height: 120px;
        }
        ul>li>img{
            width: 400px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div>
        <ul style="animation-play-state: paused;">
            <li><img src="imgs/main1.jpg" alt=""></li>
            <li><img src="imgs/main2.jpg" alt=""></li>
            <li><img src="imgs/main3.jpg" alt=""></li>
            <li><img src="imgs/main4.jpg" alt=""></li>
            <li><img src="imgs/main5.jpg" alt=""></li>
            <li><img src="imgs/main6.jpg" alt=""></li>
        </ul>
    </div>
    <button onclick="play();">▶</button>
    <button onclick="stop();">■</button>
    <script type="text/javascript">
        var ul=document.getElementsByTagName('ul')[0];
        function play(){
            ul.style.animationPlayState='running';
        }
        function stop(){
            ul.style.animationPlayState='paused';
        }
    </script>
</body>
</html>

DOM level 2 event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var h1;
        function load(){
            h1=document.querySelector('h1');
        }
    </script>
</head>
<body onload="load();">
    <h1>test</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var h1;
        window.onload=function(){
            console.log('on load...');
        };
        window.onbeforeunload=function(){
            console.log('on unload...');
        }
        window.onloadeddata=function(){
            console.log('on loaded data');
        }
        window.onresize=function(e){
            console.log('resize',e.target.innerWidth,e.target.innerHeight);
        }
    </script>
</head>
<body>
    <h1>test</h1>
    <a href="#">link</a>
</body>
</html>

button event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var btn;
        window.onload=function(){
            btn=document.querySelector('button');
            btn.onclick=function(e){console.log('click',e);}
            btn.ondblclick=function(e){console.log('double click');}
            btn.onmouseup=function(e){console.log('mouse UP');}
            btn.onmousedown=function(e){console.log('mouse Down');}
        }
    </script>
</head>
<body>
    <button>btn</button>
</body>
</html>

mouse event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        body>div{
            width: 300px;
            height: 300px;
            background-color: rgb(183, 220, 220);
        }
        div>div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        div>div>div{
            width: 100px;
            height: 100px;
            background-color: rgb(19, 30, 145);
        }
    </style>
    <script type="text/javascript">
        var btn,div1,div2,div3;
        window.onload=function(){
            btn=document.querySelector('button');
            div1=document.querySelector('div');
            div2=document.querySelector('div>div');
            div3=document.querySelector('div>div>div');
            // div.onclick=function(e){console.log('click',e);}
            // btn.ondblclick=function(e){console.log('double click');}
            // btn.onmouseup=function(e){console.log('mouse UP');}
            // btn.onmousedown=function(e){console.log('mouse Down');}
            // div1.onmouseover=function(e){console.log(e.target,'div1 마우스가 올라옴');}
            // div1.onmouseout=function(e){console.log(e.target,'div1 마우스가 내려감');}
            // div2.onmouseover=function(e){console.log(e.target,'div2 마우스가 올라옴');}
            // div2.onmouseout=function(e){console.log(e.target,'div2 마우스가 내려감');}
            // div3.onmouseover=function(e){console.log(e.target,'div3 마우스가 올라옴');}
            // div3.onmouseout=function(e){console.log(e.target,'div3 마우스가 내려감');}
            div1.onmouseenter=function(e){console.log(e.target,'div1 마우스가 enter');}
            div1.onmouseleave=function(e){console.log(e.target,'div1 마우스가 leave');}
            div2.onmouseenter=function(e){console.log(e.target,'div2 마우스가 enter');}
            div2.onmouseleave=function(e){console.log(e.target,'div2 마우스가 leave');}
            div3.onmouseenter=function(e){console.log(e.target,'div3 마우스가 enter');}
            div3.onmouseleave=function(e){console.log(e.target,'div3 마우스가 leave');}
        }
    </script>
</head>
<body>
    <button>btn</button>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</body>
</html>

input event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">

    </style>
    <script type="text/javascript">
        var input,btn,div,select;
        window.onload=function(){
            input=document.querySelector('input');
            btn=document.querySelector('button');
            div=document.querySelector('div');
            select=document.querySelector('select');
            // input.onkeydown=function(e){console.log('down',e.key,e.keycode,input.value);}
            // input.onkeypress=function(e){console.log('press',e.key,e.keycode,input.value);}
            // input.onkeyup=function(e){console.log('up',e.key,e.keycode,input.value);}
            // input.onchange=function(e){console.log(e.target,this,e.target.value);}
            select.onchange=function(e){console.log(e.target==this,e.target.value);}
            input.onfocus=function(e){console.log('focus on');}
            input.onblur=function(e){console.log('focus out');}

            input.onselect=function(e){alert(input.value);}

            // btn.onclick=function(e){input.focus();console.log('클릭');}
            btn.onclick=function(e){input.select();console.log('클릭');}
        }
    </script>
</head>
<body>
    <div></div>
    <input/>
    <select>
        <option>item1</option>
        <option>item2</option>
        <option>item3</option>
        <option>item4</option>
    </select>
    <button>입력</button>
</body>
</html>

event bubbling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        body>div{
            width: 300px;
            height: 300px;
            background-color: rgb(183, 220, 220);
        }
        div>div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        div>div>div{
            width: 100px;
            height: 100px;
            background-color: rgb(19, 30, 145);
        }
    </style>
    <script type="text/javascript">
        var box1,box2,box3;
        var myClick=function(e){
            console.log(e.target.className);
        };
        window.onload=function(){
            box1=document.querySelector('div');
            box2=document.querySelector('div>div');
            box3=document.querySelector('div>div>div');

            box1.onclick=function(e){
                console.log('box1');
            }
            box2.onclick=function(e){
                console.log('box2');
            }
            box3.onclick=function(e){
                console.log('box3');
            }
        }
    </script>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

event capturing (bubbling의 반대방향)

        window.onload=function(){
            box1=document.querySelector('div');
            box2=document.querySelector('div>div');
            box3=document.querySelector('div>div>div');
            box1.addEventListener('click',function(e){
                // e.stopPropagation();
                console.log('box1');
            },true);
            box2.addEventListener('click',function(e){
                // e.stopPropagation();
                console.log('box2');
            },true);
            box3.addEventListener('click',function(e){
                // e.stopPropagation();
                console.log('box3');
            },true);

이벤트 전파 막기

box1.onclick=function(e){
    e.stopPropagation();
    console.log('box1');
}
box2.onclick=function(e){
    e.stopPropagation();
    console.log('box2');
}
box3.onclick=function(e){
    e.stopPropagation();
    console.log('box3');
}

DOM Level 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var input,btn;
        window.addEventListener('load',function(){
            console.log(document.querySelector('h1').innerHTML);
        });
        var callback1=function(e){
            console.log('또다른 버튼 이벤트');
        }
        window.onload=function(){
            input=document.querySelector('input');
            btn=document.querySelector('button');

            // btn.onclick=function(e){console.log('버튼 이벤트')};
            // btn.onclick=function(e){console.log('또 다른 버튼 이벤트')};
            btn.addEventListener('click',function(e){
                console.log('버튼클릭');
            });
            btn.addEventListener('click',callback1);
        };

        //btn.removeEventListener('click',callback1);//
    </script>
</head>
<body>
    <h1>DOM level 3</h1>
    <input /><button>btn</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var input,btn1,btn2,btn3;
        var arr=[];
        window.addEventListener('load',function(){
            console.log(document.querySelector('h1').innerHTML);
        });
        var callback1=function(e){
            console.log('또다른 버튼 이벤트');
        }
        window.onload=function(){
            input=document.querySelector('input');
            btn1=document.querySelector('button');
            btn2=document.querySelector('button+button');
            btn3=document.querySelector('button+button+button');

            // btn.onclick=function(e){console.log('버튼 이벤트')};
            // btn.onclick=function(e){console.log('또 다른 버튼 이벤트')};
            // btn.addEventListener('click',function(e){
            //     console.log('버튼클릭');
            // });
            // btn.addEventListener('click',callback1);
            btn1.addEventListener('click',function(e){
                var msg=input.value;
                var func=function(e){
                    console.log(msg+"이벤트 기능");
                };
                arr.push(func);
                btn2.addEventListener('click',func);
            });
            btn3.addEventListener('click',function(e){
                btn2.removeEventListener('click',arr.shift());
            })
        };

        //btn.removeEventListener('click',callback1);//
    </script>
</head>
<body>
    <h1>DOM level 3</h1>
    <input /><button>add</button><button>function</button><button>remove</button>
</body>
</html>

Day 26 - js 속성 이어서, js로 브라우저 제어하기

Javascript

js의 let과 const

let

const

js의 function

문자열을 숫자로 바꾸기

JS의 내장객체

alert

confirm

prompt

Date

JSON

setTimeout, setInterval, setTimeout

BOM (Browser Object Management)

Window

Screen

Location

History

Navigator

DOM (Document Object Manager)

태그로 엘리먼트 불러오기

클래스, Id로 엘리먼트 불러오기

HTML5의 querySelector

JS callback으로 움직이는 이미지 만들기

CSS 애니메이션으로 움직이는 이미지 만들기

DOM level 2 event

button event

mouse event

input event

event bubbling

event capturing (bubbling의 반대방향)

이벤트 전파 막기

DOM Level 3

js의 `let`과 `const`