그동안 파이썬 코딩을 시작으로 데이터 분석 라이브러리 판다스, 그리고 웹 프레임 워크 - 플라스크, HTML 기초를 살펴봤습니다. 이제 프런트 엔드(Front-End) 개발 언어인 자바스크립트(Javascript) 언어에 대해 살펴보겠습니다. CSS는 HTML을 좀 더 보기 좋게 꾸며주는 도구라면 자바스크립트는 정적인 웹 페이지를 동적으로 만들 수 있게끔 합니다.
간혹 자바(Java)와 자바스크립트를 혼동하시는 분들이 계시는데 이름만 비슷할 뿐 전혀 다른 언어이며, 프로그래밍 언어를 이제 막 시작하는 분이라면 자바스크립트 언어가 자바보다 좀 더 수월할 수 있습니다. 그전에 HTML을 간단하게라도 살펴보는 것을 추천하지만 굳이 프로그래밍 언어를 바로 시작하는 분이라면 자바스크립트 언어를 추천합니다.
TIOBE(2021)와 Stack overflow(2020)에서 조사한 프로그래밍 언어 선호도에도 Javascript와 Python 둘 다 순위권에 있네요. ^^
백 엔드(Back-End)는 웹페이지에서 우리 눈에 보이지 않는 부분을 처리는 것을 의미하며, 프런트 엔드(Front-End)는 우리 눈에 보이는 부분을 처리하게 됩니다. 저는 백 엔드 개발 언어로 파이썬을 사용할 예정이며 프런트 엔드 개발 언어로 자바스크립트를 사용하고자 합니다. 요즘에는 자바스크립트로 백 엔드 개발까지 가능하다고 하지만 저는 파이썬과 판다스 라이브러리를 사용코자 합니다.
이제 자바스크립트 사용을 위한 개발 환경을 준비합니다. 기존 코딩용으로 사용하던 VS Code와 크롬 웹 브라우저를 그대로 사용합니다. 자바스크립트가 프런트 엔드 언어이다 보니 HTML에서 사용하던 환경을 그대로 사용할 수 있으며 HTML 문법은 기본적으로 알아야 코딩하기가 수월합니다. 가장 간단한 자바스크립트 실행문을 작성해 봅니다.
VS Code를 열어 HTML:5를 입력하거나, !를 입력하고 tab 키를 누르면 HTML 기본 구조를 자동으로 생성시켜줍니다. 자바스크립트는 HTML에서 <head> 태그 또는 <Body> 태그 안에 <script> 태그를 만들어 그 사이에 코딩을 하고 실행합니다. 이제 1을 입력하면 “자바스크립트”를 브라우저에 띄우고 다른 숫자를 입력하면 "다른 언어"를 띄우게 하는 코드를 작성하고 실행합니다.
별도의 입력창이 생성되는 것을 확인합니다. 1을 입력하게 되면 "자바스크립트"를 출력합니다.
이제 자바스크립트의 기초 문법에 대해 살펴봅니다. 관례로 자바스크립트 선언문은 <head> 태그에 포함합니다. (파이썬과 HTML을 학습한 후 자바스크립트를 보니 내용이 그리 어렵지 않게 다가옵니다.)
<script>
document.write("hello Javascript!");
</script>
여기서 document는 문서 객체이며 문서 출력 메서드 write()를 사용하여 hello Javascript! 를 출력합니다.
이번엔 외부에서 작성된 자바스크립트를 HTML에 연결하여 사용해 보겠습니다. document.write("hello Javascript!");를 sample.js로 저장합니다.
HTML에서 사용하던 익숙한 문법을 그대로 적용하며 src="sample.js"로 자바스크립트 파일을 연결하여 사용할 수 있습니다. 이런 형태로 자바스크립트를 연결하여 사용하면 HTML 원본의 훼손을 최소화하며 코딩이 가능하며 소스를 분석할 때 좀 더 유리합니다.
이제 자바스크립트 코드 작성 시 지켜야 할 아주 기본적인 사항에 대해 살펴봅니다.
|
1. 대부분의 프로그래밍 언어가 그렇듯 자바스크립트도 대소문자를 엄격히 구분합니다.
|
|
2. 코드 한 줄의 마지막은 세미콜론( ; )으로 마무리합니다.
|
|
3. 당연하게도 큰따옴표와 작은따옴표의 겹침 오류를 주의합니다.
|
|
4. 코드의 가독성을 위해 가능한 한 줄에 한 문장만 작성합니다.
|
|
5. 중괄호{ }와 소괄호 ( )의 짝이 맞아야 합니다.
|
지금까지 자바스크립트를 살펴본 바로는 HTML의 심화과정 정도로 이해됩니다. ^^ 물론 제어문, 반복문, 함수 등 세부적으로 어려운 부분이 있을 수 있겠으나 여타 언어들 (C/C++, 파이썬 등)보다는 훨씬 쉬울 것으로 예상합니다. 차근차근 배워보겠습니다. 자바스크립트!
'코딩 이야기 > 자바스크립트(JavaScript)' 카테고리의 다른 글
| 브라우저 & 윈도우 객체 사용하기 - 자바스크립트(Javascript) (0) | 2021.12.13 |
|---|---|
| 배열 객체와 문자열 객체 살펴보기 - 자바스크립트(Javascript) (0) | 2021.12.13 |
| 자바스크립트(Javascript) - 내장 객체(built-in Object) 살펴보기 (0) | 2021.12.13 |
| 조건문(if~else), 선택문(case), 반복문(while, for) – 자바스크립트(Javascript) (0) | 2021.12.13 |
| 변수와 연산자에 대해 살펴보기 – 자바스크립트(Javascript) (0) | 2021.12.13 |
댓글