[DAY4]Javascript 2/3

MINJOO·2022년 3월 24일
0

2022 DaeguAI school

목록 보기
2/8

학습한 내용
1. 복습

<!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 = 'black';
        document.querySelector('body').style.color = 'white';
    ">
            <h1 style="border-bottom:10px solid skyblue;"><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>
WEB

web

  1. html
  2. css
  3. js

Welcome

Hello, WEB.

**사진 찾을수 있는 링크 : https://picsum.photos/![](https://velog.velcdn.com/images%2Fmonica8842%2Fpost%2Fe2e74da1-dfc1-4231-8271-852f73dcbf08%2Fimage.png)

  1. STYLE 코드 간략히 정리하기

  2. Night 클릭박스 만들기
    Body 코드 아래에 추가

  1. 본 수업 진도
    4-1. 제어문을 배우자! = logic.html
    종류 : 1)조건문(conditional statements) 2)반복문(loop statements)
    +참고내용
    Boolean 코드

         [true/false 조건문]


    4-1-1) 조건문

    + 로그인시 아이디 기입 팝업

<html>
    <body>
        <script>
            let input_id = prompt('아이디?');
            alert(input_id+'님 안녕하세요 ^^');
        </script>
    </body>
</html>

<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='Light'
        } else {
            document.querySelector('body').style.
            backgroundColor='white';
            document.querySelector('body').style.color='black';
            button.value='Dark'
        }
    ">
![](https://velog.velcdn.com/images%2Fmonica8842%2Fpost%2Ff36cd516-48ab-4920-a630-942d77b21ad8%2Fimage.png)

+THIS 코드 활용

4-1-2) 반복문

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

학습한 내용 중 어려웠던 점 또는 해결못한 것들
배경화면을 설정해두니 night버튼클릭해도 backgorundcolor 검은색으로 변경 안됨! 글자색만 흰색으로 변경됨

해결방법 작성
배경화면 이미지 삭제!
오류발생 이유: 배경화면의 색은 변경되었을거나 이미지 파일이 배경밑에 깔려있기때문에 가려져서 안보이는것

학습 소감
JAVAsript를 시작하면서 학습 범위가 좀 더 커진것같다. 완벽히 이해하기 위해서는 구글링 열심히 해서 공부해야겠다.

profile
코딩 신생아

0개의 댓글