본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[8일차 연습] moving clock, return, document.getElementsByClassName, for, if, getElementsByClassName, Math.floor / Math.random

알로호모라 2021. 3. 25. 00:00
반응형


1. moving clock 만들어 보기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="slider">
        <ul id="banner">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        
        function a(){
            banner=document.querySelector('#banner');
            li=document.querySelectorAll('#banner>li');
            banner.appendChild(li[0]);
        }

        setInterval(a, 1000)
        
    </script>
</body>
</html>

#banner>li 는 html 이 많~~이 복잡할 때 어떤 # or . 의 li 인지 확인해야하기 때문에 ! 

li=document.querySelecorAll('#banner>li') -> 각 li 를 배열 [0], [1],[2]로 만듬 (Element type 으로!) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{
            list-style: none;
        }
        #a,#b,#c{
            display:inline-block;
            width:60px;
            height:60px;
            text-align: center;
            line-height: 55px;
        }
        #a{
            background-color: palevioletred;
            color:white;
        }
        #b{
            background-color: yellow;
        }
        #c{
            background-color:turquoise;
        }
    </style>
</head>
<body>
    <div id="root">
        <ul id="list">
            <li>Hello</li>
            <li>There</li>
            <li>Howaya</li>
        </ul>
    </div>
    <script>
        function myTimer(){
            list=document.querySelector('#list');
            li=document.querySelector('li');
            list.removeChild(li);
            list.appendChild(li);
        }
        setInterval(myTimer,1000);
    </script>
</body>
</html>

list.removeChild(li)

list.appendChild(li) -> 사라진 li 가 다시 append 됨. ( 살짝 이해가 안감........????????) 

새로운 li 가 append된게 아니라 제거된 li [0] 가 붙음. 

 

 

 

2. 함수, Return 

    <script>
        function sum(a,b){
            return a+b;
        }
        
        c=sum(1,2);
        document.write(c);

    </script>

return 이 없으면 출력 undefined 

return은 계산해놓고 나중에 필요할 떄마다 쓰는거 ! (출력x , 가지고있는)

 

 

 

3. document.getElementsByClassName 겅부 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    


</head>
<body>
    <div id="good" class ="one">
        <h1>GOOD</h1>
    </div>
    <input type= "button" id="btn" value="press" onclick="c();"></button>

    <div id="good2" class ="one">
        <h1>GOOD</h1>
    </div>
    <input type="button" id="btn2" value="press!" onclick="d();"></button>

    <script>
        
        function c(){
            A=document.getElementsByClassName('one');
            A[0].innerHTML="Luck";
        }
        function d(){
            A=document.getElementsByClassName('one');
            A[1].innerHTML="JOB";
        }
    
    </script>
</body>
</html>

그냥 class 이름으로 가져온다는 의미인듯???

+ 배열로 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="list">
        <ul id="content">
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
        </ul>
    </div>
    <input type="button" id="btn" value="press" 
    onclick="A();">

    <script>
        function A(){
            a=document.getElementsByClassName('a');
            a[0].innerHTML="GOOD";
            a[3].innerHTML="JOB";

    }
    </script>


</body>
</html>

 

 

 

4. for, if, getElementsByClassName 사용해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="list">
        <ul id="content">
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
            <li class="a">Here</li>
        </ul>
    </div>
    <input type="button" id="btn" value="press" 
    onclick="A();">

    <script>
        function A(){
            a=document.getElementsByClassName('a');

            for(i=0; i<a.length; i++){
                if(i==0||i==2||i==4||i==6||i==8){
                a[i].innerHTML="GOOD";}
            }
    }
    </script>
</body>
</html>

 

위에 for 구문 안에 i==0 을 a[i]=a[0]으로 바꾸쓸 수 있음. a[i]=0 은 string = number 이기 때문에 오류

    <script>
        function A(){
            a=document.getElementsByClassName('a');

            for(i=0; i<a.length; i++){
                if(a[i]==a[0]||a[i]==a[2]||a[i]==a[4]||a[i]==a[6]||a[i]==a[8]){
                a[i].innerHTML="GOOD";}
            }
    }
    </script>

모두 요렇게 바꿔주면 ok

 

 

 

5. getAttribute(" ") - "" 안에 속성값 ex) "class" 를 넣어서 가져오는

getElementByTagName("")

getAttribute("")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="YES">Hi there</h1>
    <p>Click the button to display the value of the class atrribute of the h1 elemnet.</p>
    <button onclick="a();">press</button>
    <p id="here"></p>

    <script>
        function a(){
            var x=document.getElementsByTagName("h1")[0].getAttribute("class");
            document.querySelector("#here").innerHTML=x;
        }
    </script>
    
</body>
</html>

 

6. 배열 a[3,4] 와 같이 여러개의 ele를 한번에 쓸 수 있는 함수 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--배열 여러개 쓸 때 -->

    <script>
        a=[1,2,3,4,5,6,7];
        result=a.map((v) =>
        {if(v==3|| v==5) {a='aaa'}
        else {a=v} return a;});
        console.log(result);
    </script>
</body>
</html>

 

근데 아직 이해를 몬하겟다. 한 달 뒤에는 이해 할 수 있으려나.....................

 

7. Math.floor / Math.random 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a=Math.floor(Math.random()*45+1);
        document.writeln(a);

        // min<=b<max

        function b(min,max){
            return Math.floor(Math.random()* (max-min))+min;
        }
        document.writeln(b(1,46));

        // min<=b<=max

        function b(min,max){
            return Math.floor(Math.random()* (max-min+1))+min;
        }
        document.writeln(b(1,46));

    </script>
</body>
</html>

writeln 을 하면 해당 text의 오른쪽에 space 하나 생김 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[9일차 연습]to do list, 움직이는 배너 imgs  (0) 2021.03.26
[9일차]20210325 움직이는 배너 함수 적용  (0) 2021.03.25
[8일차]20210324 object, 함수 method 직접 찾아 적용하기  (0) 2021.03.24
[7일차 연습] to do list & moving clock  (0) 2021.03.24
[7일차]20210323 to do list 삭제  (0) 2021.03.23

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바