자~ 마지막 강의야. 힘 내 보자구.
우리는 지금까지 자바스크립트를 이용해서 홈페이지에 변화를 주고 효과를 주는 방법을 배워 보았어.
물론 지금까지 배운 내용이 전부는 아냐.
그냥 여러분들의 호기심을 끌어 줄 만한 내용만 몇가지 골라서 설명한 거야.
자바스크립트의 전체 기능 중에서 1% 정도를 설명했다고 할까?
그렇지만 지금까지의 학습으로 자바스크립트가 무엇인지를 알았다면 50%는 배운 것이나 마찬가지야.
앞으로는 나에게 필요한 모든 것은 인터넷에, 구글신이 다 알려 줄거야.
마지막으로 지금까지 공부한 내용을 모아서
'라이브러리'로 만드는 방법을 설명해 볼께.
지금까지는 각각의 기능을 설명할 때 각각의 html 파일 안에 함수를 정의하고 그걸 사용하는 방법으로 학습했어.
이번에는 지금까지 만들었던 주요 함수를 모두 하나의 별도 파일에 저장해 두고 사용하는 방법을 알아 볼거야.
우선 show(), hide(), toggle(), slideDown(), slideUp(), slideToggle(), carousel() 함수들을 복사해서
my.js 라는 이름의 파일을 만들고 이곳에 모두 붙여넣기 해.
여기 내가 만들어 본 소스를 확인해 봐.
http://yogibbs.kr/jsDemo/my.js
다 공부했던 내용들이지?
이것처럼 자신이 만든 함수들을 js 파일에 정리해 둔 것을 바로
'라이브러리' 라고 불러.
자주 쓰는 함수들은 이렇게 라이브러리에 모아 두면 무엇 보다 편해.
지금까지의 학습 처럼 각각의 html 이나 php 파일에 넣어 쓰면 파일도 커지고, 또 쓰다 함수를 수정할 일이 생기면 각각의 파일들 일일이 찾아 다니며 다 수정해 줘야 해.
그런데 이렇게 별도의 js파일(즉, 라이브러리)에 넣고 쓰면 여기서만 수정하면 이 라이브러리를 사용하는 모든 파일에 한꺼 번에 적용되잖아.
그렇다고 모든 함수를 다 넣으라는 것은 아냐.
특정 웹페이지에서만 사용할 함수나 자바스크립트는 해당 html / php 파일에 직접 삽입해 사용하는 것이 더 좋아.
라이브러리에 너무 많은 내용들이 있으면 오히려 더 관리가 힘들어 지거든.
이제 이 라이브러리 파일을 지정하는 방법만 알면 되겠지?
아래와 같이 html 파일의 <head>~</head> 안에 아래와 같이 js 파일을 지정해 주면 돼.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내 라이브러리 사용 연습</title>
<style>
...
</style>
<script src="my.js"></script>
</head>
<body>
...
이렇게 하면 이 브라우저는 html 파일을 읽으면서 <script src="my.js"></script> 자리에 오면 src(source) 에저 지정한 my.js 파일을 읽어 메모리에 미리 읽어 두는 거야.
보통의 자바스크립트 학습서를 보면 맨 앞 장에서 설명하는 내용인데, 어떻하다 보니 가장 마지막에 설명하게 되었네?
확인해 볼까?
지금까지 배운 실전을 종합해서 데모 페이지를 아래에 준비해 보았어.
http://yogibbs.kr/jsDemo/myJs.html
한 번 확인해 보고 꼭 소스보기(Ctrl-U)로 어떻게 했는지 확인해 보도록 해.
또 여러분의 컴퓨터로 복사를 해서 직접 구동해 보는 연습도 해봐.
소스 중에서 [만두소개] 드롭다운 버튼 부분의 onclick="toggle('.dropdown-content')"을 아래와 같이 slideToggle() 함수로 변경하면 슬라이드 효과를 가진 슬라이드 메뉴로 작동하겠지??
<button class="dropbtn" onclick="slideToggle('.dropdown-content')">만두소개 ▼</button>
또 재미있는 점은 소스보기 화면에서 이 src="my.js" 라는 파일명을 클릭하면 my.js 파일의 모든 내용을 확인할 수 있어.
이 말은 내 홈페이지 뿐 만 아니라 어떤 웹페이지도 소스보기를 통해 그곳에서 사용한 자바스크립트 라이브러리의 내용을 다 확인할 수 있다는 뜻이야.
즉, 여러분이 다른 멋진 홈페이지를 구경 보다 나도 똑같이 만들고 싶으면 소스보기로 들어가서 이 js 파일을을 클릭만 하면 다 볼 수 있다는 뜻이야.
그리고 이 js 내용확인 창에서 Ctrl-S 만 치면 바로 내 컴퓨터에 저장도 돼.
어? 그럼 보안에 큰 문제가 생기는거 아닐까??
그럴 수도 있어.
물론 어떤 페이지들은 내가 애써 만든 자바스크립트를 못 보게 여러가지 방법들을 하기도 하지만 노력하면 다 알 수 있어.
웹페이지의 자바스크립트를 완벽하게 못보게 막을 수는 없어.
왜 그럴까?
왜냐하면 웹의 기본정신이
'공유' 이기 때문이야.
웹페이지의 모든 내용은 전세계 누구나 볼 수 있도록 하자는게 웹의 기본정신이야.
그리고 거기에는 문서의 내용 뿐만 아니라 이 웹페이지를 구성하는 모든 내용도 다 함께 하자는 개념도 포함이야.
그래서 웹페이지를 보는 웹브라우저도 이 정신에 입각해서 일단 브라우저에 보이는 보든 내용은 소스까지 다 볼 수 있도록 되어 있어.
만일 특정인들 만 볼 페이지들은 로그인을 통해 접근할 수 있도록 하고, 보안이 필요한 부분들은 모두 php 로 작성해서 서버단에서 처리하는 방식으로 통제를 하면 돼.
그러나 이 경우에도 처리가 끝나고 html,css,javascrip 로 완성되어 내 브라우저에 도착한 내용은 모두 내용을 확인할 수 있어.
그러므로 자바스크립트 안에는 보안에 위협을 줄 만한 중요한 내용을 넣어서는 안되는 점도 명심해야 겠지?
자 이제 다음 인사말을 끝으로 자바스크립트를 마칠께..^^