본문 바로가기
블록체인 및 경제/웹프로그래밍

[js] 20. 파일로 쪼개어 관리하기

by kimsfamily 2020. 10. 22.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

이번시간에는 js 소스를 파일로 쪼개어 관리하고 활용하는 법에 대해서 알아보겠습니다.

 

먼저 color.js 라는 파일을 만들었습니다.

 

<script></script> 안의 모든 코드를 복사해와서 붙여넣기 합니다.

기존 index.html의 스크립트 안의 내용을 아래와 같이 변경합니다.

<script src="color.js"></script> 요렇게요.

 

그리고 결과를 출력해보면, 잘 동작합니다.

그리고 개발자도구에서 네트워크탭을 보면 아래와 같은데요.

color.js파일을 불러왔다는걸 확인할 수 있죠?

 

자, 이제 이렇게 작업된 걸 링크가 걸려있는1.html부터 5.solidity까지 모두 복사해서 붙여넣습니다.

아래와 같이요~1.html부터 5.html까지 모두 해줍니다.

 

그리고 링크들을 클릭해보면, 모든 문서들에 day, night버튼이 생성되었고 색이 변경되는걸 확인할 수 있습니다.

이렇게 자바스크립트 파일로 작성하여 필요한 경우에 쓸 수 있도록 하는 작업이 필요합니다.

 

 

본 강의는 생활코딩 강의안을 바탕으로 재작성하였습니다.

opentutorials.org/course/3085/18856

 

반응형

댓글0