자바스크립트 기본, JavaScript란? (+ jQuery)

 

웹프로그래밍

• 웹에서 동작하는 프로그래밍
• 동적인 HTML 생성
  • (back) jsp, 서블릿, 스프링, back
  • (front) javascript
• 서버 사이드 : 소스 코드가 노출되지 않는다. 
• 클라이언트 사이드 : 소스 코드가 노출된다.

• 웹 애플리케이션 : 웹문서를 초월해서 일반적인 애플리케이션에 가까워 졌다. 설치 없이 웹 브라우저를 통해 워드, 엑셀 같은 애플리케이션도 사용할 수 있게 되었다.

 

자바스크립트란?

• 웹 브라우저에서 많이 사용하는 프로그래밍 언어
• 즉시 웹 브라우저에서 실행해 볼 수 있는 인터프리터 언어, 컴파일 과정 없이 즉시 실행
• 컴파일 언어보다 느리지만, 파이어폭스와 구글 크롬에서 JIT 컴파일 이라는 동적 컴파일 기법을 사용하면서 성능이 비약적으로 향상되었고, 더 발전할 전망
• 초기 웹은 변화되지 않는 정적인 형태였지만 자바스크립트가 나오고 나서 웹 문서의 내용을 동적으로 바꾸거나 마우스 클릭 같은 이벤트를 처리할 수 있게 되었다.
• 자바스크립트는 모든것이 객체 기반 구조이고 문법체계가 상당히 유연한 언어. 변수와 타입의 모호하다.(var)

 

 

자바스크립트 사용하는 이유

• 사용자의 요구에 따라 문서 전체를 다시 읽어 올 필요 없이 일 부분의 데이터만 서버로 부터 가져 오려면 ajax 통신을 해야 한다.
• ajax 통신의 기반 기술이 자바스크립트
• 일부분의 데이터만 뽑아 오려면 Controller를 html로 응답하는 것이 아니라 csv, json, xml로 응답하는 것이 일반적

 

자바스크립트 역할

• 동적 처리와 상호 작용 처리 : HTML은 정적인 문서지만 이를 동적인 상태로 만들어 주는 것이 자바스크립트, HTML의 문서 객체 모델인 DOM(Document Object Model)을 직접 조작 가능, 사용자와 상호 작용하는 다양한 Ui를 구현하려면 자바스크립트가 필요
• 접근성과 사용자 경험 개선 : 전자 정보 서비스 관점 측면, 일반적인 입력 박스를 자바스크립트로 개선 가능
• 애플리케이션 개발 : 웹 브라우저 이외에도 거의 모든 플랫폼에서 사용

 

 

자바스크립트 작성 방식

• 인라인 자바스크립트 : 태그 내에 직접 자바스크립트 명령 작성. 고전적인 방식으로 권장하지 않음. HTML 문서와 분리하는 것이 원칙이라 잘 사용하지 않음
• 내부 자바스크립트 : HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
• 외부 자바스크립트 : 외부 자바스크립트 파일(확장자 *.js)로 작성
• <script> 태그 안의 src 속성에 자바스크립트 파일명 지정
• 본격적인 애플리케이션 개발은 다른 외부 파일로 분류하는 것이 좋다. 재사용이 용이하고 유지보수가 쉽기 때문

 

ㅇ 참고로 CSS의 그래픽 처리는 하드웨어 가속으로 작동하므로 기존의 소프트웨어적 구현 방식보다 휠씬 빠르다. 그래서 자바스크립트는 다른일에 집중하여 전반적인 성능 향상을 꾀할 수 있다. 서버에서 동적으로 웹 문서를 처리하는 부분도 현재는 자바스크립트를 통해 클라이언트와 서버가 역할을 분담해 처리하고, 비동기 처리 방식을 이용해 페이지의 성능 향상을 꾀하는 추세

 

 

 

jQuery

• 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리(기본 자바스크립트 보다 코딩이 10배 빠름)
• 동적인 노드(HTML 태그) 조작을 쉽게 할 수 있도록 하는 것
• 시작적인 효과를 쉽게 구현할 수 있게 한다.
• 대상이 되는 노드를 쉽게 찾을 수 있다.
• Ajax 통신을 쉽게 해준다.