개발환경 세팅
- editor 설치
- 작업 폴더 생성
index.html 파일 생성 <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>html 파일 미리보기
- Visual Studio Code 왼쪽 Extensions 메뉴에서
Live Server 설치 후 실행
자바스크립트는 HTML 조작을 위해 사용
- html 파일 안에서 html 조작과 변경을 담당하는 언어
- 자바스크립트 코드를 잘 짜면 html을 원하는대로 조작 가능
조작하는 이유
- tab, modal 등 웹페이지 UI 생성 가능
- 유저가 입력한 데이터를 검사할 수 있다
html 조작
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="hello">안녕하세여</h1>
<script>
document.getElementById('hello').innerHTML = '안녕!';
document.getElementById('hello').style.color = 'red';
</script>
</body>
</html>
- 자바스크립트 코드는
<script>태그 안에 작성
document: html 웹문서마침표: ~의getElementById(~): 아이디가 ~인 html 요소 찾기innerHTML: HTML 내부
정리
document.getElementById('???').??? = '???';
.getElementById()
셀렉터라고 부름- html 요소를 찾기 위해 사용
.innerHtml | .style | .color
.있는데 괄호 없는 것은 메소드(함수)라고 부름- html 요소의 어떤 속성을 변경할지 결정하기 위해 사용
