웹프로그래밍의 핵심언어라고 할 수 있는 자바스크립트(javascript, 짧게 줄이면 js라고도 부른다.)에 대해서 배운다. HTML은 웹페이지의 정보를 담고 정확히 그 정보를 나누는 역할을 했다. CSS는 웹페이지를 꾸미는 역할을 했다. 그럼 자바스크립트는 무슨 일을 할까? 이제부터 배울 이 언어는 ‘웹에 특화된 프로그래밍 언어’이다.
마크업 언어와 프로그래밍 언어의 차이점을 짧게 언급한 적이 있다. 다시 설명하면 마크업 언어의 목적은 문서구조를 명확하게 드러내기 위해서 사용하는 것이고, 프로그래밍 언어는 기계(컴퓨터)의 조작 및 제어를 위해 사용하는 것이다. 프로그래밍 언어는 다양하지만 공통적으로 이런 동일한 목적을 두고 있다.
초기 자바스크립트는 컴퓨터, 더 정확하게는 컴퓨터 안에 있는 ‘웹브라우저’가 HTML과 CSS파일을 상황에 따라 다른 내용으로 바꿀 수 있도록 명령하기 위해 만든 언어이다. HTML과 CSS만 사용된 웹페이지와 달리, Javascript까지 사용된 웹페이지는 비로소 사용자와 상호작용이 가능하다. 예를 들면, 위의 그림과 같이 사용자가 버튼을 누르면 다크모드를 활성, 비활성화 시킬 수 있는 기능을 구현할 수 있다.
초기에는 이랬으나 요즘 이 Javascript를 활용하는 대상이 점점 확장되더니 node.js라는 환경에서 서버 프로그래밍 언어로까지 쓰인다. 즉 클라이언트(웹브라우저)쪽을 제어하기 위해 활용하는 프로그래밍 언어에서 서버를 제어하기 위한 언어로까지 확장된 것이다. 생활코딩 Web2 javascript수업은 클라이언트와 서버 중 클라이언트 쪽을 조작하는 것을 배운다.
우리는 아까 보았던 다크모드 기능을 자신이 만든 웹페이지에 직접 구현해보려고 한다. 목표로 하는 웹페이지의 모습을 HTML을 공부할 때 만들었던 웹페이지와 비교해보자. 먼저 네모난 버튼이 하나 뿅 생겼다. 그리고 그걸 누르면 Web이라고 써진 부분과 하이퍼 텍스트가 있는 부분이 다른 색깔이 바뀌고, 버튼 안에 써진 글자도 night에서 day로 바뀌었다.
한 번 더 버튼을 누르면 하이퍼텍스트 색이 파란색으로, 다른 텍스트는 전부 하얀색으로 바뀌었다. 배경색은 검은색으로 바뀌었다.
또 누르면 다시 색깔이 원래대로 돌아온다.
자 그럼 우리가 가지고 있는 HTML과 CSS지식을 토대로 뭘 건드려야 할지 생각해보자. 뭘 조작해야 할까?
- 하이퍼텍스트 색 변경-> <a>태그의 color속성 변경
- 웹페이지 배경색 변경-> <body>태그의 background-color 속성 변경
- 웹페이지 글자색 변경-> <body>태그의 color 속성 변경
저 버튼을 만드는 법은 아직까지 모르겠지만, 저 버튼을 누름으로써 뭘 조작해야 하는지 정도는 감이 온다. 저 버튼을 누를 때마다 위에 언급한 태그 속성을 바꾸라고 명령하면 되는 것이다. 근데 어떻게 명령을 할까? 바로 이때 자바스크립트와 같은 프로그래밍 언어가 필요하다. 당연히 그럼 문법도 알아야 한다.
생활코딩에 소개된 webn수업은, 문법에 대한 체계적인 공부보단 대개 프로젝트에 필요한 수준의 문법을 다룬다. HTML이나 CSS는 문법이 워낙 간단해서 이런 방법을 통해서 거의 대부분의 문법을 학습할 수 있었다. 하지만 javascript는 상대적으로 문법이 훨씬 복잡하기 때문에 오히려 이런 방식이 개인적으로 어려움이 있었다. 그래서 egoing님이 webn수업 이전에 올렸던 javascript 수업처럼 차근차근 문법을 학습해 나가는데 우선 순위를 두었다.
그래서 필요한 문법에 관해 차근차근 배우고 나중에 다크모드를 만드는 법을 다룰 생각이다. 먼저 프로그래밍 언어라면 거의 다 가지고 있는 기본문법에 대해 알아볼 것이다. javascript는 HTML과 CSS와는 목적이 다르기 때문에 문법도 많이 다르다. 근데 C계열 프로그래밍 언어와는 문법이 비슷해서 C계열 언어를 공부했던 사람이면 꽤 익숙할 것이다. 프로그래밍 언어란 것을 접한 적이 없는 사람이라면 새로 배울 것이 제법 많다. 나에게도 새로운 도전이다. 초보자도 쉽게 알아들을 수 있도록 글을 쓰려고 노력했다. 그럼 시작해보자.
'생활코딩 학습일기(Web 기초)' 카테고리의 다른 글
| 12) javascript의 연산자 (1) | 2022.08.29 |
|---|---|
| 11) 데이터 타입과 형 변환 (0) | 2022.08.25 |
| 9) 간단한 반응형 웹 디자인: 미디어 쿼리 (0) | 2022.08.12 |
| 8) 박스모델과 그리드 (0) | 2022.08.12 |
| 7) CSS의 class와 id (0) | 2022.08.12 |
