02 개발 환경 만들기
# 개발 환경 만들기
## 미션
자바스크립트 학습을 위한, 개발환경을 만드시오.
<img src="http://drive.google.com/uc?export=view&id=1fvROrdIJdv_kG1zNiX_oouXP4mISkwiv" alt="홍팍-자바스크립트-개발-환경-만들기" />
## 03:45 크롬 JS 콘솔
#### 숫자 계산 및 메시지 창 띄우기
```
1+2+3+4;
5*6/7-8;
alert("헬로 월드!");
```
#### 사용자 입력 받기
```
prompt("당신은 부먹파? 나는 탕슉을 소스를 부어먹어는 편이다.");
```
## 05:17 웹문서의 동적 변경
#### 웹페이지를 동적으로, 실시간 변경!
```
// 기존 HTML 초기화
document.head.remove();
document.body.remove();
document.body = document.createElement("body");
// h1 추가
document.body.appendChild(
document.createElement("h1")
);
// h1 내용 쓰기
document.querySelector("h1")
.append("헬로 월드!");
```
## 09:05 헬로 MBTI
#### hello.html
```
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS 파일 연결 -->
<link rel="stylesheet" href="hello.css">
<!-- JS 파일 연결 (구글링: defer로 JS 연결)-->
<Script defer src="hello.js"></script>
</head>
<body>
<h1>헬로 월드!!!!!!</h1>
<button>헬로 JS!</button>
</body>
</html>
```
#### hello.css
```
h1 {
font-size: 3rem;
color: white;
background-color: #E43681;
}
```
#### hello.js
```
// 1: 버튼 가져오기
const btn = document.querySelector("button");
// 2: 버튼 클릭시, 특정 동작 수행을 지정
btn.addEventListener("click", helloMbti);
// 3: 특정 동작 내용
function helloMbti() {
const heading = document.querySelector("h1");
const mbti = prompt("당신의 MBTI를 입력하시오:");
heading.append(" 헬로 " + mbti);
}
```
## 구글링 훈련하기 🔥
- 프론트엔드 vs 백엔드
- 클라이언트와 서버
- 웹 브라우저 점유율
- 자바스크립트 에디터 추천
- CSS 단위 px와 rem
- defer 자바스크립트 연결