🌱 개발 환경 세팅
0. 에디터 설치 (VS Code 사용)
1. 작업 폴더 생성 후 에디터에서 [파일]-[폴더 열기]로 작업 폴더 열기
2. index.html 파일 만들고 코딩 시작
3. html 파일 미리보기 띄우고 싶으면
VS Code 에디터에서는 왼쪽 패널 Extensions 메뉴에서 Liver Server 설치, html 파일 우클릭 - Live Server 띄우기 클릭
자바스크립트란?
HTML 파일 안에 "HTML 조작과 변경"을 담당하는 언어
자바스크립트 사용하는 이유
- HTML 조작 가능
- 서버와 통신 가능
- 클릭, 타이핑 감지
- 비동기 처리
- 자료 다루기
자바스크립트로 HTML 조작하는 법
<h1 id="hello">안녕하세요</h1>
<script>
document.getElementById('hello').innerHTML = '안녕';
</script>
위의 코드를 실행해 미리보기로 확인해 보면 안녕하세요였던 <h1> 태그가 안녕으로 바뀌어 있다.
(<script> 안에 적은 코드는 브라우저 새로고침시 1번 실행됨)
아직 자바스크립트를 배운 내용은 아무것도 없지만 영어만 알면 해석 가능한 쉬운 언어이다.
documnet → 문서, 여기에서는 html 웹문서
마침표 → ~의
getElementById('~~') → 아이디가 '~~'인 html 요소 (일명 element) 찾기
innerHTML → 내부 HTML
= → 프로그래밍에서 등호는 오른쪽에 있는 것을 왼쪽에 대입하라는 뜻
'안녕' → 안녕이라는 문자(큰따옴표, 작은 따옴표 안에 담겨 있으면 항상 문자이다)
document.getElementById('hello').innerHTML = '안녕';▶ 웹 문서의 id='hello'인 요소를 찾아 내부 HTML에 '안녕'을 집어넣어라는 뜻이다.
Q. 그렇다면 'hello', innerHTML, '안녕' 부분을 바꾸면 HTML 요소와 다른 내용도 바꿀 수 있나요?
A. 네
document.getElementById('???').??? = '???';그래서 결론은 물음표만 바꿔 주면 HTML 모든 걸 변경하고 조작할 수 있다.
(참고)
.getElementById()는 셀렉터라고 부른다. html 요소를 찾기 위해 사용한다.
.innerHTML / .style / .color 이렇게 점을 찍는데 괄호가 없는 건 메소드(또는 함수)라고 부른다. html 요소의 어떤 속성을 변경할지 결정하기 위해 사용한다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
