1. Javascript의 기초

Index

1. Javascript의 기초

1.1 Javascript란?

• HTML을 프로그래밍으로 제어한다

• 웹브라우저가 해석해서 실행할수 있는 유일한 프로그래밍 언어

• 요즘에는 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고 있음.

.box{
	height: 300px;
	width: 300px;
	background-color: blue;
	transition: all 2s;
}

<!-- javascript 소개 -->
<h1>자바스크립트로는 어떤 것을 할 수 있나요?<h1>
<button type="button"
onclick="document.getElementById('demoOne').innerHTML = Date()">
Click me (One)</button>

<button type="button"
onclick="document.getElementById('demoTwo').innerHTML = 'hello world'">
Click me (Two)</button>

<button type="button"
onclick="document.getElementById('demoThree').style.backgroundColor = 'red'">
Click me (Three)</button>

<p id="demoOne"></p>
<p id="demoTwo"></p>
<p class="box" id="demoThree"></p>

<h1 id='title'>Hello World</h1>
<script>
  // https://ko.javascript.info/ 소개
  // https://www.w3schools.com/ 소개

  // 자바스크립트로 출력하는 방법
  // let age = 10; //지금은 다루지 않습니다.
  // const pi = 3.141592; // 지금은 다루지 않습니다.
  var name = '사용자';
  var age = 20;

  document.getElementById('title').innerHTML = 'Welcome to JS100제';
  document.write(20 + 20);
  window.alert(name);
  console.log(age);
  // 한 줄 주석
  /* 주석
  입니다. */
</script>

1.2 실습방법

• 에디터는 VSC를 사용합니다.

• 브라우저는 Chrome을 사용합니다.

1.3 환경설정

1.4 HTML에서 Javascript 로드하기

1.5 Javascript로 출력하기

// 출력방법 4가지
window.console.log('hello world')
document.write('hello world')
document.getElementById('one').innerHTML = 'hi'
//'hi'
window.alert('hello world')
window.innerWidth
//150
window.innerWidth
//266
console.dir(window)
//접근방법(멤버접근 연산자 '.'(닷, dot))
window.console.log
ƒ log() { [native code] }
console.error()
undefined
console.error('hello')
tableSample = [{
	 ...json gen에서 data 생성...
}]
console.table(tableSample)
// let 나변수 = 10
// 나변수 (00AAFFDD)
// 10 (00AAFFDA)
// 00000010 10010010 00000010 = 4
// 8bit == 1byte
// 1024byte == 1KB
// 1024KB == 1MB
// 1024MB == 1GB
// 1024GB == 1TB
// (KB,MB,GB,TB,PB)갈매기털빼
0b100
//4
0o100
//64
0x100
//256

/*
2진수 - 01    10
8진수 - 01234567    10
16진수 - 0123456789abcdef     10

10진수 225
2진수 100
8진수 100
16진수 100

(10^2)*2 + (10^1)*2 + (10^0)*5 = 225
(2^2)*1 + (2^1)*0 + (2^0)*0 = 4
(8^2)*1 + (8^1)*0 + (8^0)*0 = 64
(16^2)*1 + (16^1)*0 + (16^0)*0 = 256
*/

// 재선언 안되는 것이 맞음
var 하나 = 100;
var 하나 = 200;
let a = 100
let a = 200

// https://velog.io/@nittre/JavaScript-%EC%BD%98%EC%86%94-%EB%AA%A8%EB%93%9C%EC%97%90%EC%84%9C-let%EC%9D%80-%EC%9E%AC%EC%84%A0%EC%96%B8%EC%9D%B4-%EB%90%98%EB%8A%94%EB%8D%B0-const%EB%8A%94-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

0.1 + 0.2
//0.30000000000000004
0.1 + 0.1
//0.2
0.1 * 0.1
//0.010000000000000002
0.1 * 3
//0.30000000000000004
0.3 + 0.6
//0.8999999999999999
99999999999999999999+3
//100000000000000000000
99999999999999999999n+3n
//100000000000000000002n
parseInt(10, 10)
//10
parseInt(10, 2)
//2
parseInt(10, 8)
//8
parseInt(10, 16)
//16
let n = 10000
n.toFixed(4)
//'10000.0000'
n.toFixed(5)
//'10000.00000'
(0.1 * 3).toFixed(2)
//'0.30'