Javascript가 뭔가요?
Javascript란, 웹 페이지상에서 정적인 부분을 동적으로 변화시켜주는 스크립트 또는 프로그래밍 언어다.
HTML이 웹 페이지의 내용 그러니까, 이미지, 제목, 표, 사진과 영상 등을 보여주고,
CSS가 구조화된 HTML의 디자인 등의 레이아웃을 지정하면,
Javascript는 그들을 동적으로 바꿔주는 역할을 한다.
정적인 웹 페이지는 HTML, CSS만으로도 충분하지만,
좀 더 웹 페이지의 목적과 구조에 맞게 구성하기 위해선 Javascript는 필수이다.
예제를 하나 들어보자면,
<button type="button" class="click-button">누르면 나와 눌러봐!</button>
결과
여기에 CSS를 입힌다.
CSS 기초에서 했었던 class를 쓰겠다.
.click-button {
color: #3DAEF8;
background-color: #fff;
border: 1px solid #3DAEF8;
font-size: 14px;
border-radius: 5px;
display: inline-block;
font-family: 'Nanum Gothic', sans-serif;
text-align: center;
padding: 0.5rem 1rem;
}
.click-button:hover {
color: #fff;
background-color: #3DAEF8;
border: 0;
}
결과
마지막으로 자바스크립트를 추가하겠다.
버튼을 클릭하면
<div class="result-div">이게 나오지롱!!</div>
.result-div {
color: #fff;
background-color: #3DAEF8;
border: 1px solid #3DAEF8;
border-radius: 100%;
display: inline-block;
font-size: 20px;
transition: all ease-in-out 0.3s;
}
이 뜨겠다.
자바스크립트는 마크업 언어와는 다르게 프로그래밍 언어이기 때문에 훨씬 더 많은 일들을 할 수 있다.
현재의 자바스크립트는 두가지로 나뉜다.
웹페이지 즉, 클라이언트에서 쓰이는 Browser API의 자바스크립트,
외부에서 정보를 불러오는 즉, 서버에서 쓰이는 Third party API가 있다.
오늘의 포스팅은 클라이언트에서 쓰이는 Browser API를 작성했다.
서버단에서 쓰이는 자바스크립트는
프론트엔드 프레임워크의 React, Vue, Angular처럼 고급 기술이기 때문에
이 카테고리에서는 다루지 않을 것이다.
현재까지 추가된 카테고리들은 필자가 전부 익히고, 사용하며, 현재까지 개발했던 언어들이자 프레임워크들이다.
앞으로 추가되는 카테고리는 전부 포스팅 할 것이며, 실무에서도 쓰이는 것들을 포스팅 할 것이다.
다음은 자바스크립트의 문법을 포스팅 할 것이다.