개발일지2

38595 단어 자바스크립트함수반복문배열반복문

.학습한 내용.

리뷰3 (복습) , 배경 이미지 설정 및 style.css로 적용, 버튼 설정

<!DOCTYPE html>
<html>
    <head>
        <title>web</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <input type="button" value="night" onclick="
            document.querySelector('body').style.backgroundColor = '#000F08';
            document.querySelector('body').style.color = '#F4FFF8';
        ">
        <h1><a href="index.html">web</a></h1>
        <div id="container">
            <ol>
                <li><a href="1.html">html</a></li>
                <li><a href="2.html">css</a></li>
                <li><a href="3.html">js</a></li>
            </ol>
            <div>
                <h2>Welcome</h2>
                Hello, WEB.
            </div>
        </div>
    </body>
</html>

-----자바 스크립트 반복문, 함수-----

Boolean , Comparison Operator, Conditional Statements

<html>
    <body>
        <h1>Boolean</h1>
        <script>
            console.log(true);
            console.log(false);
        </script>

        <h1>Comparison Operator</h1>
        <script>
            console.log(1<1);
            console.log(1===1);
        </script>

        <h1>Conditional Statements</h1>
        <script>
            console.log(1);
            if(true){
                console.log('2 - true');
            } else {
                console.log('2 - false');
            }
            console.log(3);

            console.log(4);
            if(false){
                console.log('5 - true');
            } else {
                console.log('5 - false');
            }
            console.log(6);
        </script>
    </body>
</html>
<html>
   <body>
       <script>
           let input_id = prompt('아이디?');
           if(input_id === 'egoing'){
               alert(input_id+'님 안녕하세요 ^^');
           } else {
               alert('뉘슈?');
           }
           
       </script>
   </body>
</html>

배열은 서로 연관된 데이터를 그룹핑해서 이름을 붙인 것.

<!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>

배열(Array) , 반복문(Loop)

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

            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>

.학습한 내용 중 어려웠던 점.

전부 다 어렵다...ㅠ너무 어렵다..특히 배열+반복문 ㅠㅠㅠㅠㅠㅠㅠ
역시 자바스크립트는 HTML보다 훨씬 어렵구나.
사용하는 단어도 다양한데다가 한꺼번에 여러 내용을 배우니까 앞에 배웠던 것과 또 헷갈리면서 더 복잡하게 느껴지는 것 같다..

.해결방법 작성.

반복, 복습만이 유일한 방법인 듯.

.학습 소감.

강사님이 설명해주시면 이해는 되는데, 막상 내가 직접 해보려고 하면 갑자기 머릿속이 복잡해지면서 모든 문법이 꼬이고 답답해진다.
더 열심히 공부하면서 따라가야 할 듯 하다.

Credit Card Fraud Detection
typescript npm패키지를 dual package로 만들기.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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