[JavaScript] 자바스크립트란?

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

자바스크립트(JavaScript)는 html의 조작과 변경을 담당하는 언어이다.

html을 조작하게 되면 

탭이나 모달과 같은 웹페이지 UI를 만들 수 있고 유저가 입력한 데이터를 검사할 수도 있다.

또한 유저가 버튼을 누르면 서버로 데이터 요청도 할 수 있다.

 

 

html 조작 또는 변경을 하려면?

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

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

자바스크립트 코드를 작성할 때는 <script> 태그 안에 작성하면 된다.

위의 코드를 실행해보면 '안녕하세요'가 '안녕'으로 바뀐 것을 확인할 수 있다.

 

document -> html 웹 문서를 뜻함

마침표(.) -> ~의

getElementById('hello') -> 아이디가 'hello'인 html 요소 (일명 element)를 찾으라는 뜻

innerHTML -> 내부 HTML

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

'안녕' -> 안녕이라는 문자 (큰 따옴표, 작은따옴표 안에 입력되어있으면 항상 문자라는 것을 기억하자!)

 

따라서 위의 <script> 에 작성된 코드를 해석해보면

웹 문서의 id가 'hello'인 html요소를 찾아서 내부 HTML에 '안녕'이라는 문자를 대입한다고 해석하면 된다.

 

 

<script>
    document.getElementById('???').src = 'profile.jpg';
</script>

이런 식으로 원하는 요소에 src = "profile.jpg"를 추가할 수 있다.

 

<script>
    document.getElementById('???').style.color = 'red';
</script>

style='color : red'를 추가할 수 있다.

 

 

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

.innerHTML / .style / .color 이런 식으로 괄호를 제외하고 작성되는 것을 메서드(또는 함수)라고 부르고

html 요소의 어떤 속성을 변경할 것인지 결정하기 위해 사용한다.