본문 바로가기
JavaScript

JavaScript : 모듈( Module )

by avvin 2019. 6. 10.

41~46강


JavaScript : 모듈( Module )


자바스크립트는 모듈화라는 개념이 분명하게 존재하지는 않는다.


프로그램을 구성하는 로직들을 재사용할 수 있는 단위의 모듈 형태로 만들어 이식성을 높임



호스트 환경 : 자바스크립트가 구동되는 환경  ex) 브라우저, node.js , Apps Script


호스트환경에 따라 자바스크립트 로직을 파일로 분할해서 다른 언어에서의 모듈처럼 사용할 수 있다.


= 호스트 환경에 따라 자바스크립트의 모듈화( include ) 방법이 다르다.



Test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="greeting.js">
    //type은 생략 가능
    //src는 속성 중 하나. 스크립트 태그 안에 해당 소스파일을 넣는 것과 같음
    </script>
</head>
<body>
<h1> JavaScript 테스트 예제</h1>
 
<script>
//수백개의 html파일이 welcome() 함수를 호출한다고 가정해보자
 
 
alert(welcome());
 
</script>
</body>
</html>
cs


greeting.js

1
2
3
4
function welcome(){
    
    return 'Hello World';
}
cs


jsp의 include 태그와 같은 기능




라이브러리 : 목적을 쉽게 달성할 수 있도록 만들어놓은 코드 집합, 일종의모듈 기능을 



가장 많이 쓰인 자바스크립트 라이브러리인 jquery 사용해보기


 https://jquery.com/download/


Download the uncompressed, development jQuery 3.4.1  << 복사해서 WebContent에 jquery.js 파일 만들기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
 
    <script type="text/javascript" src="jquery.js"></script>
 
</head>
<body>
<h1> JavaScript 테스트 예제</h1>
 
<ul id="list">
    <li>empty</li> <!-- li: 리스트형식으로 출력 -->
    <li>empty</li>
    <li>empty</li>
    <li>empty</li>
</ul>
 
<script> //$('#list')는 id값이 list인 태그들을 가리킴
$('#list li').text('coding')
 
//id가 list인 태그들 중 li 태그 안에 있는 텍스트들을 대체
//라이브러리인 jquery에 있는 함수
</script>
 
</body>
</html>
cs


출력 : 

  • coding
  • coding
  • coding
  • coding


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
 
    <script type="text/javascript" src="jquery.js"></script>
 
</head>
<body>
<h1> JavaScript 테스트 예제</h1>
 
<ul id="list">
    <li>empty</li> <!-- li: 리스트형식으로 출력 -->
    <li>empty</li>
    <li>empty</li>
    <li>empty</li>
</ul>
 
<input type ="button" value="execute" id="execute_btn"/>
 
<script>
    
    $('#execute_btn').click(function(){
        
        $('#list li').text('coding');
        
    })
 
</script>
</body>
</html>
cs


JavaScript 테스트 예제

  • empty
  • empty
  • empty
  • empty



execute 버튼을 누르면


JavaScript 테스트 예제

  • coding
  • coding
  • coding
  • coding





저작자표시

'JavaScript' 카테고리의 다른 글

[HTML] div 태그와 span 태그  (0) 2019.06.18
javascript의 document 객체  (0) 2019.06.17
JavaScript : 객체 (Dictionary)  (0) 2019.06.10
JavaScript : 배열 (33~37강)  (0) 2019.06.10
javaScript - Ajax  (0) 2019.05.29

관련글

티스토리툴바