모듈화 예제: greeting.js, main.html
// greeting.js
function welcome() {
return 'hello world';
}// main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="greeting.js"></script> // 파일 불러오기
</head>
<body>
<script>
alert(welcome()); // 함수 호출
</script>
</body>
</html>* script 태그에 src라는 속성을 확인하여 그 속성값에 해당하는 파일을 읽어와서 script 태그 안에 넣는 것과 같은 효과를 낸다.
라이브러리: jQuery 예제
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
Download jQuery -> Download the uncompressed, development jQuery 3.4.1 -> copy해서 -> jquery.js 파일을 만들고 paste
execute 버튼을 누르면 empty 리스트가 coding everybody로 바뀌게 해보자.
// jQuery.demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.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>
$('#execute_btn').click(function(){
// id값이 list인 태그의 하위의 li태그
$('#list li').text('coding everybody');
});
</script>
</body>
</html>
'Javascript > 기초공부' 카테고리의 다른 글
| [Javascript: 유효범위] 전역변수 / 지역변수 / 전역변수 사용법 / 유효범위의 대상(함수) / 정적 유효범위 (0) | 2020.03.13 |
|---|---|
| [Javascript: 정규표현식(Regular expression)] 패턴 / 리터럴 / 객체 생성자 / RegExp 객체 사용 / 문자열 메소드 / 옵션 / 캡처 / 치환 (0) | 2020.03.11 |
| [Javascript: 객체(Object)] 객체 생성 /사용 / 반복문 / 객체 안에 객체 (0) | 2020.03.10 |
| [Javascript: 배열(Array)] 원소 추가 / 제거 / 정렬 / 반복문 응용 (0) | 2020.03.10 |
| [Javascript: 함수(Function)] 다양한 함수 정의 방법 / 익명함수 (0) | 2020.03.10 |