JavaScript와 jQuery를 사용하여 웹 페이지에 인터랙티브한 요소를 추가하는 방법을 살펴보세요.
그랜드 피아노 앞에 앉은 남성, 피아노에서 나오는 컬러풀한 모양

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

시작하기 전에

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

Dreamweaver에 열린 파일, 분할 뷰에 선택된 소스 코드
프로젝트 파일 다운로드 및 저장

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>

JavaScript alert 함수가 정의됨
alert 함수 정의

버튼의 onClick 이벤트

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

onClick 이벤트가 정의됨
이벤트 정의

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

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

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

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

jQuery 소개

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

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

삽입 > jQuery UI 메뉴에서 이용 가능한 jQuery 위젯
jQuery 위젯 이용

두 번째 실습 파일 열기

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

Dreamweaver에 열린 파일, 분할 뷰에 선택된 소스 코드
두 번째 실습 파일 열기

jQuery 애니메이션 추가

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

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

Google에서 호스팅되는 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>

jQuery와 slideToggle 함수가 <script> 태그 사이에 추가됨
<script> 태그 사용

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

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

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

브라우저에서 미리보기 클릭 후 브라우저 선택, JavaScript 테스트
브라우저에서 변경 내용 미리 보기
파일 저장 후 변경 내용 확인
파일 저장 후 변경 내용 확인
10/20/2021
이 페이지가 도움이 되었습니까?