JavaScript(3/3) 복습

학습한 내용

buttons

<html>
    <body>
        <script>
var tag = '';
for(var i=0; i<2000; i++){
    tag = tag + `<input type="button" onclick="        
        this.style.backgroundColor='red';
    " 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>

어려웠던 점 또는 해결못한 것들

없었다.!!

해결방법 작성

없었습니당

학습 소감

이후 정리하여 다시 수정할 계획이다.

c# 특성(Property)
Unity c# Lock Thread

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage