Javascript Manual

<aside> 💡 강의를 시작하기 전에

컴퓨터는 멍청합니다. 자세히 명령합시다.
JS로 여러분들이 상상하는 모든 것이 가능합니다.
수강 중 어려운 문제가 있다면 ▶ 눌러보시면 됩니다.

</aside>

강의환경

VSCode Editer를 사용합니다.
- 다른 에디터 사용해도 되나요?
Live-server 플러그인을 사용합니다.
- 혹시 설치할지 모르시면 눌러보세요.
코딩 폴더를 생성하신 다음에 VSCode로 여신 다음 index.html 파일을 생성합니다.
- 제대로 세팅하신 거 맞나요?

1. Javascript는 태초부터 UI를 바꾸는 기능을 담당했습니다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 id="fastcampus">안녕하세요.</h1>
</body>
</html>

태그 생성 short-cut을 아시나요?
저 강사님 화면이랑 다른데요...? 강사님 코드가 더 예뻐 보입니다.

live-server로 여시면 이런 화면 보실 수 있습니다.
우클릭 > open with live server

live-server로 여시면 이런 화면 보실 수 있습니다. 우클릭 > open with live server

<script>
	// 안녕하세요를 안녕 못한데로 바꿔줘!
	document.getElementById("fastcampus").innerHTML = "안녕 못한데?";
</script>

근데 혹시 대입연산자라고 들어보셨습니까?

2. 그러니까 alert 창 이런 것들 다 JS로 만드는 겁니다.

JS로 화면 UI를 바꾸는 방법은 3단계만 거치면 됩니다.

HTML으로 요소를 만듭니다.
CSS로 숨깁니다.
JS로 나타나게 합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #alertBox{
            background-color: #c6c6c6;
            border-radius: 10px;
            font-weight: 800;
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="alertBox">알림창임!</div>
    <button class="show-alert" onclick="document.getElementById('alertBox').style.display = 'block'">알림창을 보여줘!</button>
</body>
</html>