[3월 23일] JavaScript 1/3

정서이·2022년 3월 23일

1) 학습한 내용

1. 애널리틱스

링크텍스트
가입 & 내가 만든 웹 통계보기

2. page-검사-console 창에서 코드입력

alert(1);alert(2);alert(3); //확인창
confirm("확인,취소") //확인,취소창
prompt("아이디") //내용입력창

3. Visual Studio Code 작성

<html>
<body>
    <script>
        console.log(1);
        console.log(2);
        console.log(3);
    </script>
    1+1 <br>
    <script>
        document.write(1+1);
        document.write('<br>');
        document.write(Math.random());
    </script>
    <input type="button" value="Hello" onclick="alert('안녕');">
</body>
</html>

console.log() : 확인창은 안뜨지만 console 창에 기록된다.
<script></script> :스크립트 태그안에 내용입력

숫자

<script>
    console.log(1); // 정수
    console.log(1.1); // 실수
</script>

operator

<script>
   console.log(1+1); // 2   
   console.log(2-1); //1     
   console.log(2*2); // 4
   console.log(4/2); // 2
</script>

문자열

<script>
    console.log('Hello World');
    console.log('Hello \
                World');
    console.log(`hello
                world`);
    console.log('Hello World'.length);
    console.log('HEll World'.replace('Hell','Hello'));
    console.log('Hello'+'World');
    console.log('1'+'1');
</script>

문자열은 원래 한줄에 입력이 원칙!
한줄띄우고 싶으면 ""이나 ''가 아닌 ``로 표시하기

함수

<script>
    console.log(Math.random());
    console.log(Math.floor(1.9));
    console.log(Math.floor(Math.random()*100));
</script>

Math.random() :0~1사이의 임의의 수
Math.floor() : 가우스계산

변수

    <script>
        let 가격=10000;
        let 부가가치세율=0.1;
        let 부가가치세=가격*부가가치세율;
        console.log(부가가치세);
    </script>

var을 사용하기도 하지만 let 사용하기

4. 버튼만들기

<input type="button" value="Hello" onclick="alert('안녕');">
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">

다크모드설정: 배경색과 글씨색 바꾸기

2) 학습내용 중 어려웠던 점

다크모드를 설정할때 console 창을 이용하는 것을 놓쳤다.
index.html에 코드를 입력해도 안되었다.

3) 해결방법

이고잉 강사님 드랍박스로 들어가 코드를 복사해서 하니 바로 다크모드가 실행되었다.

4) 학습소감

코드가 점점 길어지고 복잡해지니 어려워지고 있다.
들여쓰기를 잘해야겠고, 오타가 나지 않도록 정확한 타이핑이 필요한 것 같다.

정서이

다음 포스트