JavaScript를 배워야 하는 이유
지금까지 내가 배운 html, css라는 언어는 모두 정적언어들로 이 2가지 언어로 웹페이지를 만들게 되면 화면에 출력된 후에는 그 형태나 동작방법들이 바뀌지 않는다.
옛날처럼 단순한 정보를 보여주기만 할뿐이라면 사실 이 2가지로 만으로도 웹페이지를 구성하는데 있어 문제가 없지만 요즘 웹페이지들은 옛날 처럼 구조가 단순하지 않고 안에 담긴 내용들 또한 방대하기 그지 없다. 더군다나 단순한 정보를 보여주는 것이 아닌 사용자가 입력한 정보를 토대로 웹페이지가 변하는데 이렇게 사용자와 웹페이지가 상호작용하며 바뀌게 만들어주는 언어가 javascript이다.
이 언어를 배움으로서 좀 더 다양한 기능들을 구현하고 정적언어만을 사용한 문서보다 더 경쟁력있는 문서를 만들 수 있을 것이다.
JavaScript의 역사
자바스크립트는 네스케이프라는 회사의 설립자 마크 앤더슨이 처음 고안한 언어로써 정적인 페이지에서 벗어나 동적인 페이지를 만들어보자 라는 생각으로 시작되었다.
마크 앤더슨은 동적인 언어를 만들기 위해 브랜든 아이크라는 개발자를 스카우트했고 기존의 스크립트 언어를 살짝 변형해 본인들만의 새로운 언어를 만들고자 했다.
브랜든 아이크는 10일만에 내부적으로 모카라고 불리는 새로운 동적언어를 만들었고 이 언어는 추 후 라이브스크립트라는 이름으로 세상에 등장해 네스케이프에서 제공하는 웹브라우저를 통해 동적인 웹브라우저를 구현하는데 성공했다. 라이브스크립트가 자바스크립트라로 바뀐 것은 그 당시 자바라는 언어가 굉장한 유명세였는데 그 유명세를 타기 위함이었다.
동적언어와 정적언어의 차이
- 정적언어는 말그대러 움직이지 않는 다는 뜻을 가진다. 동적언어인 html과 css로만 코드를 구성하고 페이지를 열면 내가 짠 코드 그대로 페이지를 보여줄 뿐 페이지 상에서 무엇인가를 바꿀 수는 없다.
- 동적언어는 사용자가 주는 정보를 토대로 웹페이지가 유동적으로 변경할 수 있게 만들어주는 언어다. 동적언어인 javascript로 코드를 만들면 만든 코드에 따라 어떤 행동을 했을 때 경고문이 보여진다거나 버튼을 눌렀을 때 웹페이지를 어두워지게 만들어지는 등 사용자가 주는 정보에따라 웹페이지를 변화 시킬 수 있다.
JavaScript를 적용하는 법
- html 내부에 사용 : 자바스크립트를 웹페이지에 적용하는 방법은 크게 3가지가 있는데 첫번째로 html 내부에 바로 적용하는 방법이다.
<body> <script> </script> </body>이런식으로 html문서 body태그안에 script 태크를 만들어 그 안에 자바스크립트 코드를 넣으면 된다.
- 외부 파일로 사용 : 두번째 방법은 외부 파일로 자바스크립트를 적용하는 방법인데 html파일이 있는 디렉토리에 a.js(a는 아무거나 해도 상관없음)라는 파일을 만들고 a.js라는 파일에다가 자바스크립트 코드를 작성 후
<script src="a.js"></script>이런식으로 html문서에다 코드를 적으면 똑같이 작동한다. 규모가 큰 코드를 적용시킬 때 많이 사용한다.
- 태그의 속성으로 사용 : 자바스크립트는 html의 속성을 통해서 바로 적용시킬 수도 있는데
<button onclick="">Click me!</button>이런식으로 원클릭속성을 사용하면 그 안에 값으로는 자바스크립트로 해석이 돼 속성을 통해서도 자바스크립트를 사용할 수 있다. 단 이 방법은 html코드가 길어지는 것은 물론 여러 태그에 같은 효과를 주기위해서는 중복이 많아짐으로 되도록 쓰지 않는 것이 좋다.
마치면서
아직 많은 부분을 배우진 않았지만 html css를 배워 화면에 구현했을 때와는 달리 어떤 동작으로 인해 화면이 바뀌고 달라지는 게 굉장히 흥미로웠다.
확실히 전에 배운 언어들에 비해 문법적인 부분이라던가 응용해야 하는 부분이라던가 전체적으로 난이도가 올라간 느낌이다. 좀 더 많은 공부가 필요한 거 같다.
안녕하세요.
동적언어와 정적언어를 설명하시면서 그 정의가 잘못되어 있어 댓글 남깁니다. 일단 결론부터 말씀드리면, HTML과 CSS는 프로그래밍 언어가 아니기 때문에 "언어"로 분류하시는 것은 애초에 잘못되었으며, 이 둘을 언어로 간주하더라도 정적 언어는 아닙니다.
정적언어와 동적언어는 사실 정적 타입의 언어와 동적 타입의 언어를 줄여서 말하는 것으로, 빌드 시점에서 Type(형)이 정해지는 언어를 정적언어(C, C++, Java 등), 런타임 시점에서 Type이 정해지는 언어를 동적언어(Javascript, Python 등)로 정의합니다. 여담이지만 Javascript 를 정적 언어처럼 사용할 수 있게끔 해 주는 것이 Typescript 입니다.