우리집 아이들이 언제가 이 포스팅을 보게 되는 경우를 생각해서, 아주 기초적인 내용을 정리해 놓습니다.^^
너무 기초적인 내용이니, Web에 익숙한 분들은 스킵하셔도 되는 내용들입니다.
Javascript는 무얼 위해 만들어진 프로그래밍 언어일까?
Javascript는 일단 Java 언어와는 전혀 다른 프로그래밍 언어입니다. 이건 아주 상식적인 내용이죠.
자바스크립트는 "웹 브라우저"를 위해서 만들어진 언어입니다.
초창기의 Web은 정적인(Static) HTML 페이지들로 이루어져 있었는데, 인터넷이 점점 발전하게 되면서 동적인 기능들이 필요해졌기 때문입니다. 그래서 때는 바야흐로 1995년, 브라우저 시장을 꽉 잡고 있던 Netscape 사의 '브랜든 아이크'라는 아저씨가 10일만에 천지창조를 하듯 만들어낸 언어입니다.(Python을 만든 '귀도 반 로썸'도 크리스마스 휴가 기간인 2개월 동안 만들었다고 하는데 말이죠)
각설하고, 아무튼 자바스트립트는 브라우저에서 요소(Element)들을 동적으로 조작하고 보여주기 위한 목적으로 만들어진 스크립트 언어입니다. 다시 말해서, 윈도우 PC에서 동작하는 언어도 아니고, MAC에서 동작하는 언어도 아니고, 아이폰에서 동작하는 언어도 아니고, Android에서 동작하는 언어도 아닌 것입니다.
어라? 근데 다 돌아가잖아요?
맞습니다. 각각의 운영체제에서 <웹 브라우저>를 이미 구동했기 때문이고, 그 브라우저 안에서 Javascript가 동작하고 있는 것입니다. 그쵸? 브라우저 위에서 돌아가는 것 맞죠?
Javascript의 가장 큰 특징
그렇다면 자바스크립트의 가장 큰 특징은 무엇일까요? 역시나 HTML과 CSS로 구성된 웹 페이지들을 조작할 수 있는 기능이라는 것이 Javascript 의 가장 큰 특징이 됩니다.
다음과 같은 HTML 코드를 예제로 들어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript 연습</title>
</head>
<body>
<h1 id="hello">Hello World</h1>
</body>
</html>
브라우저에는 이렇게 출력되겠죠? 지금 브라우저 안에 있는 "Hello Word"라는 텍스트를 "안녕, 자바스크립트"로 바꿀 수 있는 언어가 바로 Javascript 인 것입니다. 어떻게요?
DOM(Document Object Model) 조작
다음과 같이 자바스크립트 코드를 추가로 작성해주겠습니다.
저장하고, 브라우저를 새로고침 해보면,
<body>
<h1 id="hello">Hello World</h1>
<script>
document.getElementById("hello").innerHTML = "안녕, 자바스크립트";
</script>
</body>
분명히 h1 태그에는 Hello World 라고 써 있지만, 그 자리에 '안녕, 자바스크립트'가 들어가 있습니다.
손도 안대고 코를 푼 느낌, 정말 신기하지 않은가요?
이러한 DOM 조작을 할 수 있는 것이 바로 자바스크립트의 주된 사용 이유이기도 합니다. 이런 일을 할 수 있는 게 Javascript 밖에 없어요. 그래서 Web이 망하지 않는 이상 자바스크립트도 망할 이유가 없는 언어라는 생각이 듭니다. 인터넷이 지속되는 한 반드시 알아두면 좋은 언어가 되는 것이죠.
비교적 해석이 쉬운 자바스크립트
한국어나 영어 등의 언어는 사람과 사람이 소통하기 위한 언어입니다.
사람과 컴퓨터가 소통하려면 Programming Language라고 불리는 다양한 프로그래밍 언어를 사용하게 됩니다. 그런데 자바스크립트는 영어 단어만 좀 알면, 비교적 그 기능들을 유추하기가 쉬울 수도 있겠습니다.^^
이전 예제 코드를 다시 한번 살펴보겠습니다.
코드 : document.getElementById("hello").innerHTML = "안녕, 자바스크립트";
해석 : 문서에서 . 아이디가 "Hello"인 엘리먼트를 get해와라 . innerHTML에는 "안녕, 자바스크립트"를 넣어라.
document : (HTML)문서
getElementById() : Id를 이용해서(By) 요소를 get 하는 함수
innerHTML : 태그 사이에 있는 내용
= : 대입 연산자(오른쪽 것을 왼쪽에 넣어라)
대략 이런 식의 의미를 가지고 있습니다. 그리고 의미론적인 구분을 점(.)을 통해서 연결해주는 형태입니다.
처음 보는 단어들이라서 그렇지, 왠지 해석이 용이하게 될 것 같다는 생각이 들지 않는가요?
<body>
<h1 id="hello" class="greeting">Hello World</h1>
<script>
document.getElementsByClassName("greeting")[0].innerHTML = "안녕, 뾰로롱!";
</script>
</body>
또 다른 예들 들기 위해서 getElementsByClassName() 함수를 사용했습니다.
코드 : document.getElementsByClassName("greeting")[0].innerHTML = "안녕, 뾰로롱!";
↑ Elements 복수형임에 주의, [0] 부분은 일단 생각하지 말고 해석해보면,
해석 : 문서에서 . ClassName이 "greeting"인 엘리먼트를 get해와라 . innerHTML에는 " 안녕, 뾰로롱"을 넣어라.
뭔가 좀 쉬운 것 같지 않은가요?^^
참고로 자바스크립트는 전통적으로 소문자를 이용해서 표기합니다. 여러 개의 단어를 붙여서 사용할 때는 두번째 단어부터 첫 문자를 대문자로 사용합니다. getElementById 처럼 말이죠. 낙타의 등 모습을 연상시키기 때문에, 이와 같은 표기법은 Camel Case라고 불립니다.
일단, 자바스트립트의 탄생과 사용 이유, 그리고 웹문서의 엘리먼트들에 접근해서 조작하는 이런 방식에 흥미를 느끼게 된다면 충분히 Javascript와 친해줄 수 있다고 생각합니다. 다른 요소들은 어떻게 조작할 수 있는 지 궁금해지지 않은가요?
보너스 - Node.js
앞에서 Javascript는 '브라우저 안에서 실행되는 언어다'라고 설명을 했는데요, 사실 요즘은 Javascript가 브라우저 밖에서도 동작하고 있는 시대가 되었습니다.^^ Node.js라고 혹시 들어보셨나요?
노드js는 2009년에 Ryan Dahl 이라는 또 한 명의 천재가 만들었는데요, 비유를 들자면 크롬 브라우저 안에 존재하는 V8 엔진을 개조한 후, 브라우저 밖으로 꺼내서 Lynux, macOS, Windows에서도 동작할 수 있도록 만들어버렸습니다.
그런데 어쩌라구?
이 말은 곧, 브라우저 안의 개발에만 만족해야 했던 수 많은 Javascript 개발자들이 브라우저 밖에서도 Javascript를 이용해서 프로그래밍하고 뭔가를 구동하고 제어하고 만들 수 있게 되었다는 것이죠. 자바스크립트 개발자들의 놀이터가 확대되었고 덩달아 시장도 확대되는 계기가 되었다는 것입니다.
뻥을 조금 보태서, 이제는 Javascript라는 언어 하나만 잘 배워두면, 별의 별것들을 다 만들 수 있다는 이야기가 됩니다. 그러니, 차근차근 공부해두면 향후 인터넷이 사라지지 않는 이상 손해볼 일 없는 언어가 되는 셈입니다.
저는 라이언 달이라는 사람을 전~혀 모르지만, 어쨌거나 대단한 변화를 만들어낸 천재임에는 틀림없는 것 같습니다.
완전 부럽습니다, 젊었을 때 나는 무얼했던가! 싶지만 나는 아직 젊고, 앞으로 하나 하면 되는 겁니다. 파이팅!^^
즐거운 코딩생활, 즐코딩.
KINcoding.
'Javascript' 카테고리의 다른 글
| Javascript의 변수 선언: var, let, const는 서로 어떻게 다를까? (0) | 2022.12.30 |
|---|---|
| getElementById를 쓸까, querySelector를 쓸까? (0) | 2022.12.27 |
| setTimeout(), clearTimeout() 기본 동작 방식 살펴보기 (0) | 2022.12.23 |
| 여러 개의 이미지 파일들을 로테이션 해서 보여주기 - Shuffle 효과 (0) | 2022.12.20 |
| 화살표 함수 기초 개념 정리 - Arrow Function (0) | 2022.12.17 |
댓글