(03.23)첫번째 Javascript

김진석·2022년 3월 23일
0

1.javascript의 이해

이때까지 배운 html과 css의 기본은 기본적으로 사용자가 볼 수 있는 디스플레이적인 부분이라고 할 수 있다면 javascript는 사용자와의 상호작용이나 보이지 않는 일을 하여 동작을 추가할 수 있다고 본다
예시) 연산 작용, 버튼 동작, 알림이나 질문등...

-연산 작용

       console.log(1);
       console.log(2);
       console.log(3);
    
    

을 통하여 소스에 숫자를 표기 할 수 있으며

document.write(1+1);

등을 통한 연산이나

document.write(Math.random());
// Math.random()은 1~0사이 숫자를 표기

를 통하여 랜덤한 숫자표기가 가능하다

-버튼 공식

<input type="button" value="Hello" onclick="alert('안녕');">

여기서 input type="button"이 버튼 생성
value="Hello"는 구성 onclick은 동작시 반응을 뜻하며
alert는 알림이며 알림은 사용자에게 직접 전달된다
그외에 confirm이라고 있는데 이는 직접 사용자에게 질문이가능하다.

콘솔 표시

콘솔에는 직접보이지 못하는 javascript에 대한 데이터값을 출력할 수 있다.
기본 공식은

console.log(내용);

이며

        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.floor(1.9));
        console.log(Math.floor(Math.random()*100))

함수

console.log('Hello World');
console.log("Hello World");
console.log("Hello \
world")
console.log(Hello world);

같은 문자열을 쓸 수있다.

onsole.log('Hello World'.length);
console.log('Hell World'.replace('Hell','Hello')); // Hello World
console.log('Hello '+'World');
console.log('1'+'1'); // 11

등으로 수정같은 것 또한 가능하다.

변수

변수는 variable로 약어는 var을 사용할 수있다.

		var a = 1;
        a = 2;
        console.log(a);  // 2

a는 변수로써 어떠한 값도 나올 수 있다.

var과 비슷 한 기능을 하는 것이 있는 데 바로 let이다.

		let b = 1;
        b = 2;
        console.log(b); // 2
        

하지만 let은 좀 더 다양한 기능이 있는데

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

같은 주석을 코드에 바로 반영이 가능한 유용한 기능이다.

유용한 코드

document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';">

첫번째코드는 배경화면 색지정 코드이고 두번째코드는 폰트 코드이다. 이를 통해 다크모드 같은 모드를 만들 수 있다.

오늘의 감상

오늘은 특별히 어려운 부분 없이 잘해낸 것 같다.
다 기본적인 개념이라 그저 머리에 쑤셔박기만 잘하면 될 것 같다. 특히 javascript 같은 동작을 하는 기능들은 재미 있게 느껴졌다.

    
profile
새로 시작한 코딩 초급자

0개의 댓글