20220323 Javascript

m.mg·2022년 3월 23일

Javascript

목록 보기

1/3

학습한 내용

javascript의 syntax, datatype, variable의 개념에 대해 배움.

javascript는 사용자와 상호작용 한다.

syntax

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

datatype

<html>
    <body>
        <h1>Number</h1>
        <script>
            console.log(1); // 정수
            console.log(1.1); // 실수
            // Operator
            console.log(1+1); // 2
            console.log(2-1); // 1
            console.log(2*2); // 4
            console.log(4/2); // 2
            // 함수
            console.log(Math.random());
            console.log(Math.PI);
            console.log(Math.floor(1.9));
            console.log(Math.floor(Math.random()*100));
        </script>
        <h1>문자열(String)</h1>
        <script>
            console.log('Hello World');
            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>
    </body>
</html>

variable

<html>
    <body>
        <h1>Variable</h1>
        <script>
            var a = 1;  // var 붙이기, 한 번만 붙이면 됨
            a = 2;
            console.log(a);
            //1 = 2;  // 상수, constant
            let b = 1;  //요즘은 let을 쓰기도 함.
            b = 2;
            console.log(b);
        </script>
        <script>
            // 10000 : 가격
            // 0.1 : 부가가치세율
            let 가격 = 10000;
            let 부가가치세율 = 0.1;
            let 부가가치세 = 가격*부가가치세율;
            console.log(10000*0.1);
        </script>
    </body>
</html>

WEB에 적용하기

https://ujamong.github.io/daegu-ai-school-web/

<body>
    <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';
    ">
</body>

학습한 내용 중 어려웠던 점 또는 해결못한 것들

var과 let의 차이가 헷갈린다.

해결방법 작성

var과 let의 변수선언 형식은 같다.

var
var은 선언한 변수를 재선언하고 값 재할당이 가능하다.
var a = 100;
console.log(a)
var a= 200;
console.log(a)
let
let은 선언한 변수를 재선언할 수 없지만, 값 재할당은 가능하다.
let b = 100;
console.log(b)
let b = 200;        
console.log(b)  -->error 
b = 300;
consol.log(b)

학습 소감

html, css는 단순한 문법에 비슷하다는 느낌이 드는데 javascript는 조금 더 문법적으로 들어가는 느낌이다.

m.mg

데이터를 다룰 줄 아는/공부기록

다음 포스트