JavaScript와 jQuery를 사용하여 웹 페이지에 인터랙티브한 요소를 추가하는 방법을 살펴봅니다.
intro-javascript_1408x792

JavaScript는 모든 주요 브라우저에서 지원하는 스크립팅 언어이자 오픈 웹 표준입니다. JavaScript를 사용하여 페이지에 인터랙티브한 요소와 새로운 기능을 추가할 수 있습니다. jQuery는 사용자가 웹 페이지에 유저 인터페이스 요소, 효과, 애니메이션 등을 손쉽게 추가할 수 있는 JavaScript 라이브러리입니다. 이 튜토리얼에서 제공하는 프로젝트 파일을 다운로드하여 단계에 따라 작업을 진행합니다.

시작하기 전에

프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 step-1-intro-js.html을 열고 분할 뷰에서 소스 코드(Source Code)를 확인합니다.

프로젝트 파일 다운로드 및 저장
프로젝트 파일 다운로드 및 저장

JavaScript 경고 추가

JavaScript를 학습하는 가장 좋은 방법 중 하나는 alert 함수를 사용하여 스크립트 동작의 기본 구조를 이해하는 것입니다. alert 함수는 대화 상자에서 메시지를 표시합니다. JavaScript를 사용하여 함수, 즉 실행할 액션을 정의한 다음 이를 수행하는 이벤트를 정의해야 합니다. 이벤트는 사용자가 버튼을 클릭하거나 필드를 탭하는 것과 같이 동작을 의미하며 함수에 작동 시기를 알립니다.

alert 함수를 <head></head> 안에 있는 <script></script> 태그 안에 추가하여 messageWindow로 이름을 지정한 다음 페이지 하단의 버튼에 onClick 이벤트를 추가합니다. 사용자가 이 버튼을 클릭하면 경고 메시지가 호출됩니다.

head 섹션의 HTML

<head>
<script>
function messageWindow() {
  alert("We will show more in Step 2!");
}
</script>
....
</head>

alert 함수 정의
alert 함수 정의

버튼의 onClick 이벤트

<div id="moreBtn" onClick="messageWindow()">
SHOW MORE
</div

이벤트 정의
이벤트 정의

브라우저에서 변경 내용 미리 보기

파일(File) > 브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 JavaScript를 테스트하십시오.

변경 내용을 확인하려면 파일을 저장해야 합니다.

브라우저에서 JavaScript 테스트
브라우저에서 JavaScript 테스트

jQuery 소개

jQuery는 많은 JavaScript 코드를 작성하지 않고도 페이지에 인터랙티브한 요소, 애니메이션, 기타 효과를 손쉽게 추가할 수 있는 미리 만들어진 함수가 포함된 JavaScript 라이브러리입니다. Dreamweaver의 디자인 뷰에서 작업하는 경우 삽입 > jQuery UI 또는 jQuery Mobile 메뉴 옵션에서 제공되는 jQuery 위젯을 확인하시기 바랍니다.

또한 페이지에 직접 jQuery 스크립트를 추가할 수 있습니다. 웹에서 jqueryui.com을 통해 추가 가능한 다른 인터랙티브한 요소, 위젯, 효과를 확인하십시오.

jQuery 이용
jQuery 위젯 이용

두 번째 실습 파일 열기

Dreamweaver에서 step-2-intro-js.html을 열고 분할 뷰에서 소스 코드(Source Code)를 확인합니다.

두 번째 실습 파일 열기
두 번째 실습 파일 열기

jQuery 애니메이션 추가

페이지의 콘텐츠 섹션을 숨기거나 표시하는 jQuery 함수를 추가하여 웹 페이지에서 jQuery를 사용하는 방법에 대한 팁을 살펴봅니다. jQuery를 직접 다운로드하여 설치하거나 Google 또는 Microsoft에서 호스팅하는 jQuery 라이브러리를 참조할 수 있습니다. 이 예제에서는 Google에서 호스팅하는 라이브러리를 사용합니다. 그러면 라이브러리를 별도로 설치하는 것보다 빠르게 포함시키고 유지 관리해야 하는 파일 수를 줄일 수 있습니다.

페이지에 라이브러리를 가져오기 위해 <head></head> 태그 안에 <script></script> 태그를 추가합니다.

jQuery 함수 추가
jQuery 함수 추가

<script src=
"http://ajax.googleapis.com/ajax/
libs/jquery/1.11.2/jquery.min.js"
>
</script>

그런 다음 slideToggle 함수를 추가하여 사용자가 버튼을 클릭할 때 페이지에 텍스트 섹션이 표시되거나 숨겨지도록 합니다. 아래 코드에서 #moreBtn은 slideToggle 함수 실행을 위해 사용자가 클릭하는 버튼의 id입니다. #content3은 사용자가 버튼을 클릭할 때 나타나고 사라지는 <div>의 id입니다.

<script>
  $(document).ready(function(){
    $("#moreBtn").click(function(){
    $("#content3").slideToggle("slow")
    });
  });
</script>

<script> 태그 사용
<script> 태그 사용

브라우저에서 변경 내용 미리 보기

파일(File) > 브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 JavaScript를 테스트하십시오.

변경 내용을 확인하려면 파일을 저장해야 합니다.

브라우저에서 변경 내용 미리 보기
브라우저에서 변경 내용 미리 보기
파일 저장 후 변경 내용 확인
파일 저장 후 변경 내용 확인
04/11/2018
이 페이지가 도움이 되었습니까?