[0324 개발일지] javascript 2/3

1. 학습한 내용

style.css 사용

ipsum image 사이트에서 이미지 찾기
css background image 태그 찾아 사용하면 레이어 표현도 가능

style 안의 태그를
style.css 파일에 붙여넣고
기존 자리에는 아래 링크 붙여넣기

<link rel="stylesheet" href="style.css">

비교연산자

    <script> 비교연산자
        console.log(1<1);
        console.log(1===1);
        console.log(1!==1); (1과 1이 같지않으면)
    </script>

조건문(conditional statement)

    <h1>Conditional Statements</h1>
    <script>
        console.log(1);  조건
        if(true){  
            console.log('2 - true');  맞으면 실행
        } else {
            console.log('2 - false'); 그 외는 실행안됨
        }
        console.log(3);


    

반복문(Loop)

    <script>
        console.log(1);
        for(let i=0; i<3 ;i=i+1){ 약속덩어리
          console.log(2);
          console.log(3);
        }
        console.log(4);
        </script>

배열+반복(Array+Loop)

       </script>

        <h1>array+loop</h1>
        <script>
            var topics = ['html', 'css', 'js'];
            for(let i=0; i<topic.length; (토픽의길이) i=i+1){
                console.log('i=>',i);
                }


                document.write ('<li>'+topics[i]+'</li>'); (화면에나타남)
                -> 리스트를 다 꺼내서 컴퓨터에게 처리를 위임
            
        </script> 

if ~ else 조건문으로 로그인 창

    <script>
        let input_id = prompt('아이디가?');
        if(input_id === 'jiwon'){ 
            alert(input_id+'님 반갑습니다');
        }
        else {
           alert('누구세욘')
        }

    </script>

night에서 day로 반응하는 버튼

          <input type="button" id="dnbtn" value="night" onclick="    
             let button = document.querySelector('#dnbtn')
        if (button.value === 'night'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        button.value = 'day';
        }  else {
        document.querySelector('body').style.backgroundColor='yellow';
        document.querySelector('body').style.color='black'; 
        button.value = 'night';
        }
        ">
  

2. 어려웠던 점

여기서 = 는 동등하다는 의미가 아니다.
=== 가 동등하다는 의미.
조건문까지는 재미있고 간단해보였는데 ..

3. 해결방법

주말에 다시 복습 또 복습

4. 학습소감

if~else를 직접 적용해서 반응하는 버튼을 만든 것이 흥미로웠다.
쌩초보에게는 점점 어려워지는 것 같아서 잠시라도 눈을 떼면 안될 것 같다.
; { ( " ' 가 난무하는 스크립트를 보니 머리가 아파옴.