JavaScript(3/3) 복습

Leejihye·2022년 3월 25일

AI School Advanced Class

목록 보기

3/9

학습한 내용

buttons

<html>
    <body>
        <script>
var tag = '';
for(var i=0; i<2000; i++){
    tag = tag + `<input type="button" value="${i}">`
}
document.write(tag);
        </script>
    </body>
</html>

loop

<!doctype html>
<html>
    <head></head>
    <body>
        <h1>배열(Array)</h1>
        <script>
            let topic1 = 'html';
            let member1 = 'jihye';
            let topic2 = 'css';
            let member2 = 'jongjong';
            let topic3 = 'js';
            let member3 = 'jaejun';

            let topics = ['html', 'css', 'js'];
            let members = ['egoing', 'leezche', 'duru'];
            console.log(topics.length);
            console.log(topics[0]);
        </script>

        <h1>반복문(Loop)</h1>
        <script>
            console.log(1);
            for(let i=0; i<2 ;i=i+1){
                console.log(2);
                console.log(3);
            }
            console.log(4);            
        </script>

        <h1>Array + Loop</h1>
        <script>
            topics = ['html', 'css', 'js'];
            for(let i=0; i<topics.length; i=i+1){
                document.write('<li>'+topics[i]+'</li>');
            }
        </script>
    </body>
</html>

index

<!doctype html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <input type="button" value="night" onclick="
        let btn = this;
        if(btn.value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            btn.value = 'day';
            document.querySelector('#a1').style.color = 'white';
            document.querySelector('#a2').style.color = 'white';
            document.querySelector('#a3').style.color = 'white';
            document.querySelector('#a4').style.color = 'white';
        } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            btn.value = 'night';
            document.querySelector('#a1').style.color = 'black';
            document.querySelector('#a2').style.color = 'black';
            document.querySelector('#a3').style.color = 'black';
            document.querySelector('#a4').style.color = 'black';
        }
    ">

    <h1><a id="a1" href="index.html">WEB</a></h1>
    <div id="container">
        <ol>  
            <li><a id="a2"  href="1.html">html</a></li>
            <li><a id="a3"  href="2.html">css</a></li>
            <li><a id="a4"  href="3.html">JavaScript</a></li>
        </ol>
        <div>
            <h2>Welcome!</h2> 
            Hello <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">WEB</a>
        </div>
    </div>


</body>
</html>