JavaScript 시작하기

Javascript

Javascript 시작하기(출처: W3Schools(http://www.w3schools.com/js/default.asp))

상단 출처에도 밝혔듯이, W3Schools의 JavaScript 내용을 바탕으로 작성되었습니다.
잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

JavaScript 입문

JavaScript는 웹 개발자가 반드시 배워야하는 언어 중에 하나입니다.
1. HTML : Web Page의 내용
2. CSS : Web Page의 layout, 스타일
3. JavaScript : Web Page의 동작 제어

JavaScript는 HTML의 내용, 속성, 스타일을 변경할 수 있으며 데이터의 유효성 검증도 해줄 수 있습니다.

웹브라우저에서만 사용하던 JavaScript가 이제는 웹서버에서도 사용이 가능하게 되었습니다.
대표적인 것이 Node.js입니다.

JavaScript 위치

JavaScript는 HTML 페이지의 body나 head 또는 두 곳 모두에 위치할 수 있습니다.
 
<script type="text/javascript"> 에서 type은 필수값이 아니며 생략해서 사용해도 무방합니다.
body 하단에 script를 위치시킵니다.
모든 HTML 태그를 웹브라우저에 로드 시킨후에 JavaScript를 실행하기 위해서입니다.

JavaScript 외부 파일 연결

JavaScript를 정의한 파일을 하나 만들어 두고 src 속성으로 연결만 시켜줘서 사용할 수도 있습니다.
여러 페이지에 동일한 동작이 필요한 경우에 편리하게 사용을 할 수 있으며, 보통은 가독성이나 유지보수를 위해서도 HTML 문서 따로 JavaScript 문서 따로 작성합니다.
그리고 중요한 것은 캐싱된 JavaScript 파일로인해 페이지 로드 속도에도 영향을 준다는 점입니다.

JavaScript 출력

HTML에 원하는 데이터를 출력하기 위해 아래 방법들이 있습니다.
window.alert()
document.write()
innerHTML
console.log()

테스트 용으로는 console.log()가 편하며, HTML element에 표시를 변경하기 위해서는 innerHTML을 사용합니다.
하나씩 살펴보겠습니다

window.alert() 예제
document.write() 예제1
HTML document가 모두 로드된 상태에서 document.write()를 사용하면 기존의 HTML 문서는 삭제되며 오로지 document.write()안에 있는 내용만 표시됩니다.

document.write() 예제2
innerHTML 예제
document.getElementById(id) 를 이용해 HTML 요소에 접근할 수 있으며 id는 HTML 요소에 정의한 속성을 말합니다.
innerHTML은 HTML요소의 내용을 말합니다.

console.log() 예제
console.log()는 브라우저의 개발자도구에서 많이 사용합니다. 브라우저에서 F12를 누르고 Console 메뉴에서 확인하실 수 있습니다.