JavaScript 기초

JavaScript 자바스크립트

• 자바스크립트는 HTML 조작을 위해 사용한다.

자바스크립트는 html 파일 안에 몰래 집어넣는 하위 언어이고,
html 파일 안에 몰래 숨어서 "html 조작과 변경" 을 담당하는 언어다.

그래서 자바스크립트 코드를 잘 짜시면 html을 원하는대로 조작이 가능하다.

• 왜 조작을 하냐면

1. 탭, 모달 등 웹페이지 UI 만들 수 있음

2. 유저가 입력한 데이터를 검사할 수도 있음

3. 유저가 버튼누르면 서버로 데이터 요청할 수도 있음

이런 기능들을 개발할 수 있다.

html 조작, 변경하기

<h1 id="hello">안녕하세요</h1>

<script>
  document.getElementById('hello').innerHTML = '안녕';
</script> 

일단 html 파일 안에 <h1> html을 작성하고,
html에서 자바스크립트 코드를 짜고 싶다면 <script> 태그 안에 적기

그리고 위처럼 그대로 한 줄 작성하면 안녕하세요였던 <h1>태그가 안녕으로 바뀌어있다.

(<script> 안에 적은 코드는 브라우저 새로고침시 1번 실행된다)

자바스크립트는 영어좀 알면 누구나 해석가능한 언어..

document -> 문서인데 여기선 html 웹문서.

마침표 -> ~의 

getElementById('어쩌구') -> 아이디가 '어쩌구'인 html 요소 (일명 element) 를 찾아라. 

innerHTML -> 딱봐도 그냥 내부 HTML이라는 뜻

= -> 등호는 프로그래밍에서 오른쪽에 있는걸 왼쪽에 대입하라는 뜻.

'바보' -> 바보라는 문자 (큰따옴표, 작은따옴표안에 담겨있으면 항상 문자.)

document.getElementById('hello').innerHTML = '안녕'; 

-> 웹문서의 id="hello"인거 찾아서 그거 내부 HTML에 '안녕' 집어넣어라 라는 뜻

결론

document.getElementById('???').??? = '???'; 

여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작할 수 있다.

document.getElementById('???').src = 'profile.jpg'; 

이러면 원하는 요소에 src="profile.jpg"를 추가할 수 있고

document.getElementById('???').style.color = 'red'; 

이러면 원하는 요소에 style="color : red"를 추가할 수 있고 수백가지 바꿀 수 있다!

정말 수백개 있어서 필요할 때 검색해서 쓰는게 좋은 방법.

(참고)

.getElementById()는 셀렉터라고 부르고, html 요소를 찾기 위해 사용한다.

.innerHTML / .style / .color 이렇게 점찍는데 괄호없는건 메소드(또는 함수) 라고 부른다.
html 요소의 어떤 속성을 변경할지 결정하기 위해 사용한다.