⁂ Java Script/: 기본 익히기
[JS] #6-4 함수(Function) : .js파일 만들기
김갱환
2022. 8. 12. 10:08
1. .js파일을 만들어보자
.css 파일을 기억하는가?
css에서 style들을 저장해두고 불러오기 위해 사용하는 파일이었다.
자바스크립트에서도 비슷한 방식을 사용 가능하다.
바로 .js 파일을 만드는 것이다.
이 파일은 파일 자체가 <script> </script>로 묶여있기 때문에 따로 명시할 필요 없이 필요한 자바스크립트 문법을 사용하면 된다.
비쥬얼스튜디오에서 새 창을 열어서 확장자를 js로 저장한 뒤 아래와 같은 세가지 함수를 만들었다.
1) 두 수 사이의 합을 반환하는 함수
2) 두 수의 차이를 반환하는 함수
3) 윤년과 평년을 반환하는 함수
전체 코드는 아래와 같다.
/* myscript.js */
function hap(a,b) { // 두 수 사이의 합을 반환하시오
if(a>b){
let tmp=a; a=b; b=tmp;
}
let sum=0;
for(let n=a; n<=b; n++) {
sum+=n;
}
return sum;
} // hap() end
function diff(a,b) { // 두 수 사이의 차이를 반환하시오
return Math.abs(a-b);
} // diff() end
function leap(year) { // 윤년, 평년을 반환하시오
if(year%4==0 && year%100!=0 || year%400==0){
return true;
} else {
return false;
}
} // leap() end, true는 윤년, false는 평년
2. .js파일 HTML 문서에 import하기
이제 만들어진 .js파일을 html 문서에 적용해보자.
.css를 적용할 때처럼 <head>와 </head>안에 넣어서 <body>에 작성될 내용에 .js파일이 적용될 수 있도록 상위에 명시해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_js파일.html</title>
<!-- .js 파일 import -->
<script src="myscript.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
이때 .js 파일의 위치를 잘 확인하고 삽입하여야 한다.
필자는 html문서와 .js파일이 같은 폴더에 있다는 가정으로 바로 .js파일을 넣었지만 폴더가 다를 경우 ../를 사용하여 직접 지정해주어야 한다.