이때까지 배운 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 같은 동작을 하는 기능들은 재미 있게 느껴졌다.