반응형

Javascript란?  

Javascript와 친숙해 질 수 있도록 최선을 다하겠습니다.

이 블로그의 기본 전제조건은 이전에 블로그한 내용 다음과 같습니다.

학습이전에 이전 블로그를  참고하세요.

 

HTML 기초 이 것만 이해해도 반은 시작이다.

 

HTML 기초 이 것만 이해해도 반은 시작이다.

안녕하세요? 애드소프트입니다. 오늘은 간단한 HTML을 다뤄 볼까 합니다. 오늘다룰 내용은 웹을 개발해 보고 싶지만 기회가 되지 않고 단기간 HTML문법에 대해 알고 싶은 분들을 위한 글이니 중급,

blog.addsoft.co.kr

전제조건은 기본적인 컴퓨터 능력, HTML, CSS기초입니다.

 

목표는 Javascript가 어떤 역활을 하는지, 어떤 일을 할 수 있는지, 웹사이트에 어떤 작용을 하는지 알아볼까 합니다.

 

자바스크립트는 화면상의 전체적인 변화를 주기 보다는 부분적인 변화를 주기위해 사용합니다.

예로들자면 전체 페이지 상의 리스트가 존재한다면 그 리스트만을 새로고침 하고 싶은 경우 이겠죠.

또한 부분적인 데이터만 서버에 전송하여 저장하고 싶은 경우가 될수도 있구요.

표준 웹 기술은 다음과 같이 3개층으로 나눌 수 있을거 같습니다.

HTML 구조 또는 문단 표, 이미지, 동영상 등의 다양한 컨텐츠를 표시할 수 있는 태그를 사용할 수 있는 마크업언어 입니다.
CSS  배경색 폰트, 레이아웃등을 사용하여 HTML을 보다 역동적일 수 있도록 꾸밀 수 있는 스타일 규칙 언어입니다.
Javascript 동적으로 컨텐츠를 바꿔주는 역활을 하며, 멀티미디어를 재생하거나 이미지를 그리거나 음악을 플레이하거나 메뉴의 움직음 화면에 동적 움직임을 컨트롤 할 뿐아니라 데이터의 변화도 감지 할 수 있는 스크립트 언어 입니다.

 

간단한 샘플을 사용하도록 하겠습니다.

 

<p>안녕 애드소프트.</p>

 

그리고 CSS를 통해 예쁘게 꾸밀 수도 있습니다.


p {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif,
	text-align: center;
	border: 1px solid #000;
	border-radius: 10px;
	padding: 3px 10px;
	cursor: pointer;
	color: green;
	background-color: yellow;
}

자바스크립트의 동적인 기능 추가하도록 하겠습니다.

<script>
  const imTag = document.querySelector('p');
  imTag.addEventListener('click', onChangeName);

  function onChangeName() {
      let name = prompt('이름을 입력하세요');
      imTag.textContent = '나는 ' + name + ' 입니다';
  }
</script>

 

자바스크립트 언어의 핵심은 웹에 할당된 태그와 속성 이외의 많은 것을 변수로 담을 수 있으며, 그 변수를 프로그래밍으로 변환함으로써 수많은 동적인 변화를 일으키는 것처럼 표현하기도 하며, 실제로 적용도 가능합니다. 실제로 적용하기 위해서는 서버에 적용이 필요하겠지만 사용자 입장에서는 많은 것이 변한 것으로 착각 할 수 있습니다.

 

제가 예제로 사용한 click이외에도 사용자 이벤트로 할당된 수많은 이벤트가 존재하며 사용하고자 하는 이벤트가 존재하지 않더라고 개인적은 견해와 지식에 따라 변경 가능합니다.

 

이를 이용항 Jquery라는 엄청난 기능을 가진 프레임워크도 생성되었으며, 그 이외에도 개인이나 업체에서 이 기능을 이용한 API가 무긍무진합니다. 이를 이용하여 개발 한다면 개발의 시간을 단축 할 수 있을뿐 아니라 오류나 유지보수 면에서도 이득을 볼 수 있습니다.

 

API는 이미 만들어진 코드 재활용 개념으로 볼 수 있으며, 개발자들이 어려운 부분들을 사용자가 이해하기 쉽게 분석하여 개발해 놓은 인터페이스로 볼 수 있습니다.

 

다음으로는 이를 이해 하셨다면 전문가들에서는 Server side, Client side라고 하는 단어를 사용하는데 이는 서버에서만 처리 가능 한것과 클라이언트 즉 브라우저에서만 처리해야 하는 것을 분리 하여 개발하는 것을 의미 합니다.

 

다음 시간에는 서버와 클라이언트에 대해 알아 보도록하겠습니다.

 

이런 개념 적인 의미가 끝나면 개념이 없어도 개발 가능한 것을을 다뤄 보도록 하겠습니다.

 

이상으로 이번 블로그를 마치도록 하겠습니다.

 

오늘도 행복한 하루 되세요.

반응형

+ Recent posts