[자바스크립트의 시작] (7) Javascript 활용

파일로 쪼개서 정리정돈

기존에 만든 기능을 여러 페이지에 사용 하기 위해서는 복사/붙여넣기를 해야 한다. 이 페이지가 아주 많을 경우 코드의 유지보수가 힘들어진다. 이를 방지하기위해 파일을 쪼개는 것이다.

 

새로운 js 파일을 만들고 파일의 내용으로 모든 페이지에 공통으로 사용되는 Javascript 코드를 넣는다.

기존에 Javascript 코드가 있던 <script> 태그는 src 속성에 파일 이름을 넣어준다.

 

// colro.js 라는 이름을 가진 파일을 가져온다.
<script src="color.js"></script>

 

웹 브라우저가 color.js 파일을 자동으로 가져와 작동한다.

 

 

파일 이용의 장점

• Javascript 코드를 한번에 관리할 수 있다.
• 코드의 재사용과 수정이 편해 유지보소가 편리해짐.
• 코드가 명확해져 가독성이 좋아진다.
• 캐시에 장점이 있다.
  파일을 한번 다운로드해 캐시에 저장해 두어 다운로드 없이 사용할 수 있어 더 빨리 페이지를 표시 할 수 있다.

 

 

라이브러리와 프레임워크

라이브러리 : 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것.

프레임워크 : 만들고자 하는 프로그램의 종류에 따라 공통적인 부분을 미리 만들어 놓는것.

 

라이브러리는 사용자가 필요한 부분을 가져와 사용하는것, 프레임워크는 직접 프레임워크 안으로 들어가 디테일을 수정하는것 

 

 

jQuery 라이브러리

  jQuery는 가장 유명한 Javascript 라이브러리중 하나이다. 이 라이브러리 사용을 통해 생산성을 높일 수 있다.

jQuery 사용방법에는 인터넷에서 jQuery 다운로드 하는 방법과 CDN이라는 방법의 사용이 있다.

CDN은 jQuery 홈페이지에서 찾을 수 있다.

 

 

jQuery의 구글 CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

 

jQuery를 사용하면 반복문을 사용하지 않고도 모든 태그를 한번에 처리할 수 있다.

var Links = {
setColor:function(color){
// var alist = document.querySelectorAll('a');
// var i = 0;
// while(i < alist.length){
// alist[i].style.color= color;
// i += 1;
// }
$('a').css('color', color);
	}
}

' $('a').css('color', color); ' 이 한줄만으로 모든 a 태그의 색깔을 변경할 수 있다.

 

 

UI 와 API

UI (User Interface) : 사용자들이 시스템을 제어하기 위해 조작하는 장치.

API (Application Programming Interface) : 프로그래머들이 사용하는 조작 장치.

 

<input type="button" value="click" onclick="alert('Hello world')">

버튼을 누르면 경고창 생성

이 코드를 이용해 버튼을 누르면 경고창뜨는 웹 페이지를 만들었다.

버튼을 사용하는 것은 웹페이지의 사용자 이다. 이를 UI라고 부른다.

 

프로그래머는 경고창의 호출을 조작하기 위해 alert라는 함수를 호출한다. 이를 API라 한다.

 

 

 

 

웹 개발과 관련된 검색어

document	태그를 삭제하거나, 자식 태그를 추가 하고 싶은 경우.
DOM	document 객체를 살펴도 찾을 수 없는 경우.
windows	웹 브라우저 자체를 제어해야 하는 경우.   예). 웹페이지의 주소를 알아내거나, 창을 열어야 하는 경우
ajax	웹 페이지를 새로고침 하지 않고 정보를 변경하고 싶은 경우.
cooke	웹 페이지가 새로고침 되얻도 현재 상태를 유지하고 싶은 경우.
offline web application	인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶은 경우.
webRTC	화상 통신 웹 앱을 만들고 싶은 경우.
speech	음성을 인식하거나 음성과 관련된 것 처리하고 싶은 경우. speech로 시작되는 API 살펴볼것.
webGL	3차원 그래픽 이용하고 싶은 경우.
webVR	가상현실에 에 대해 알아보고 싶은 경우