모듈 : 순수한 자바스크립트에서는 모듈이라는 개념이 존재하지 않지만, 구동되는 호스트환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.
예제
// 모듈 없는 스크립트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world';
}
alert(welcome());
</script>
</body>
</html>
// 모듈 있는 스크립트
// moduleexample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
function welcome(){
return 'Hello world';
}
alert(welcome());
</script>
</body>
</html>
// greeting.js
function welcome(){
return 'Hello world';
}
라이브러리 : 모듈과 비슷한 개념. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편하게 잘 정리한 일련의 코드들의 집합을 의미.
jQuery 사용방법 : jQuery 홈페이지(http://jquery.com)에서 파일을 다운받는다. -> jQuery 메뉴얼(http://api.jquery.com)을 이용해서 사용법을 파악한다.
예제
// 사용 전
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
</body>
</html>
// 사용 후
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" value="execute" id="execute_btn"/>
<script type="text/javascript">
$('#execute_btn').click(function(){
$('list li').text('coding everybody');
})
</script>
</body>
</html>
'Programming > Javascript' 카테고리의 다른 글
| 값으로써의 함수와 콜백, 그리고 비동기 처리 (0) | 2018.01.03 |
|---|---|
| 유효범위 (0) | 2018.01.02 |
| 객체 (0) | 2018.01.02 |
| 배열 (0) | 2018.01.02 |
| 함수 (0) | 2018.01.02 |
꼴통보안인