내장 JavaScript 비헤이비어 적용

내장 비헤이비어 사용

Dreamweaver에 포함된 동작들은 최신 브라우저에서 작동하도록 작성되었습니다. 이전 버전의 브라우저에서는 비헤이비어가 자동으로 작동하지 않습니다.

Dreamweaver 액션이 크로스 브라우저 호환성을 최대화하도록 작성되었지만, 일부 브라우저는 JavaScript를 전혀 지원하지 않으며, 웹을 찾아보는 많은 사람들이 브라우저에서 JavaScript를 꺼둡니다.최상의 크로스 플랫폼 결과를 얻으려면 JavaScript가 없는 사용자도 사이트를 이용할 수 있도록 <noscript> 태그로 둘러싸인 대체 인터페이스를 제공하십시오.

JavaScript 호출 비헤이비어 적용

Call JavaScript 동작은 이벤트가 발생할 때 사용자 정의 함수나 JavaScript 코드 줄을 실행합니다. (스크립트를 직접 작성하거나 웹에서 자유롭게 사용할 수 있는 다양한 JavaScript 라이브러리에서 제공하는 코드를 사용할 수 있습니다.)

속성 바꾸기 비헤이비어 적용

Change Property 동작을 사용하여 오브젝트 속성 중 하나의 값을 변경하십시오(예: div의 배경색 또는 폼의 액션).

플러그인 확인 비헤이비어 적용

Check Plugin 동작을 사용하여 방문자가 지정된 플러그인이 설치되어 있는지 여부에 따라 다른 페이지로 보내십시오.예를 들어, 방문자가 Shockwave를 가지고 있으면 한 페이지로, 그렇지 않으면 다른 페이지로 가게 할 수 있습니다.

AP 요소 드래그 비헤이비어 적용

드래그 AP 요소 동작을 사용하면 방문자가 절대 위치(AP) 요소를 드래그할 수 있습니다.이 동작을 사용하여 퍼즐, 슬라이더 컨트롤 및 기타 이동 가능한 인터페이스 요소를 만들 수 있습니다.

방문자가 AP 요소를 끌 수 있는 방향(수평, 수직 또는 임의 방향), 방문자가 AP 요소를 끌어야 하는 대상, AP 요소가 대상의 특정 픽셀 범위 내에 있을 때 AP 요소를 대상에 맞춰 정렬할지 여부, AP 요소가 대상에 도달했을 때 수행할 작업 등을 지정할 수 있습니다.

Drag AP Element 동작은 방문자가 AP 요소를 끌기 전에 호출되어야 하므로, Drag AP Element를 body 객체에 (onLoad 이벤트와 함께) 첨부해야 합니다.

드래그할 수 있는 AP 요소에 대한 정보 수집

객체에 AP 요소 끌기 동작을 연결하면 Dreamweaver가 문서의 head 섹션에 MM_dragLayer() 기능을 삽입합니다. (이 기능은 AP 요소에 대한 기존 명명 규칙[즉, "레이어"] 을 유지하므로 이전 버전의 Dreamweaver에서 만든 레이어를 계속 편집할 수 있습니다.) AP 요소를 끌 수 있도록 등록하는 것 외에도 이 함수는 각 끌기 가능한 AP 요소에 대해 MM_LEFTRIGHT, MM_UPDOWN, MM_SNAPPED의 세 가지 속성을 정의하며, 이를 사용자 고유의 JavaScript 함수에서 사용하여 AP 요소의 상대적 수평 위치, AP 요소의 상대적 수직 위치, AP 요소가 드롭 대상에 도달했는지 여부를 결정할 수 있습니다.

예를 들어 다음 기능은 curPosField라는 양식 필드에 MM_UPDOWN 속성 (AP 요소의 현재 수직 위치) 값을 표시합니다. (폼 필드는 동적이므로 지속적으로 업데이트되는 정보를 표시하는 데 유용합니다. 즉, 페이지 로딩이 완료된 후에도 내용을 변경할 수 있습니다.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

폼 필드에 MM_UPDOWN 또는 MM_LEFTRIGHT의 값을 표시하는 대신, 이러한 값을 다양한 다른 방법으로 사용할 수 있습니다. 예를 들어, 값이 드롭 존에 얼마나 가까운지에 따라 폼 필드에 메시지를 표시하는 함수를 작성하거나, 값에 따라 AP 요소를 표시하거나 숨기는 다른 함수를 호출할 수 있습니다.

페이지에 여러 개의 AP 요소가 있고, 방문자가 다음 페이지 또는 작업으로 진행하기 전에 모든 요소가 대상에 도달해야 하는 경우에는 MM_SNAPPED 속성을 읽는 것이 특히 유용합니다.예를 들어, MM_SNAPPED 값이 true인 AP 요소의 개수를 세는 함수를 작성하고, AP 요소가 드롭될 때마다 이 함수를 호출할 수 있습니다.스냅된 개수가 원하는 수에 도달하면, 방문자를 다음 페이지로 보내거나 축하 메시지를 표시할 수 있습니다.

URL로 이동 비헤이비어 적용

Go To URL 동작은 현재 창이나 지정된 프레임에서 새 페이지를 엽니다.이 동작은 한 번의 클릭으로 두 개 이상의 프레임 내용을 변경하는 데 유용합니다.

점프 메뉴 비헤이비어 적용

[삽입] > [양식] > [점프 메뉴]를 사용하여 점프 메뉴를 만들면 Dreamweaver에서 메뉴 개체를 생성하고 Jump Menu(또는 Jump Menu Go) 동작을 연결합니다. 일반적으로 Jump Menu 동작을 개체에 직접 연결할 필요가 없습니다.

기존 점프 메뉴는 두 가지 방법으로 편집할 수 있습니다.

• Behaviors 패널에서 기존 Jump Menu 동작을 두 번 클릭하여 메뉴 항목을 편집 및 재정렬하고 이동할 파일을 변경하며 해당 파일이 열리는 창을 변경할 수 있습니다.

• 메뉴를 선택한 후 속성 관리자에서 [목록 값] 버튼을 사용하여 다른 메뉴의 항목을 편집하듯이 메뉴의 항목을 편집할 수 있습니다.

점프 메뉴 이동 비헤이비어 적용

점프 메뉴 이동 동작은 점프 메뉴 동작과 밀접하게\n연관되어 있습니다. 점프 메뉴 이동을 사용하면\n점프 메뉴와 이동 버튼을 연결할 수 있습니다.(이 동작을 사용하기 전에 문서에\n점프 메뉴가 이미 있어야 합니다.)[이동] 버튼을 클릭하면 이동 메뉴에서 선택된 링크가 열립니다.점프 메뉴는 일반적으로\n이동 버튼이 필요하지 않습니다. 점프 메뉴에서 항목을 선택하면 일반적으로\n추가 사용자 동작 없이 URL이 로드됩니다.하지만 방문자가\n점프 메뉴에서 이미 선택된 것과 같은 항목을 선택하면\n점프가 발생하지 않습니다.일반적으로는 문제가 되지 않지만, 이동 메뉴가 프레임에 나타나고 이동 메뉴 항목이 다른 프레임의 페이지로 링크되는 경우, 방문자가 이동 메뉴에서 이미 선택된 항목을 다시 선택할 수 있도록 이동 버튼이 유용할 수 있습니다.

브라우저 창 열기 비헤이비어 적용

새 창에서 페이지를 열려면\n브라우저 창 열기 동작을 사용합니다.\n크기, 속성(크기 조절 가능 여부, 메뉴 표시줄 포함 여부 등),\n이름 등 새 창의 속성을 지정할 수 있습니다.예를 들어, 방문자가 썸네일\n이미지를 클릭할 때 별도 창에서 더 큰 이미지를 열기 위해\n이 동작을 사용할 수 있습니다. 이 동작을 사용하면 새 창을\n이미지와 정확히 같은 크기로 만들 수 있습니다.

창에 대한 속성을 지정하지 않으면 해당 창을 연 원래 창의 크기와 속성으로 열립니다.창에 대한 속성을 지정하면 명시적으로\n켜지지 않은 다른 모든 속성이 자동으로 꺼집니다.\n예를 들어, 창에 대한 속성을 설정하지 않으면\n1024 x 768픽셀로 열리고 탐색 표시줄(뒤로, 앞으로, 홈, 다시 로드 버튼 표시),\n위치 도구 모음(URL 표시), 상태 표시줄(하단에 상태 메시지 표시),\n메뉴 표시줄(파일, 편집, 보기 및 기타 메뉴 표시)이 있을 수 있습니다.폭을 640으로, 높이를 480으로 명시적으로\n설정하고 다른 속성을 설정하지 않으면\n창이 640 x 480픽셀로 열리며 도구 모음이 없습니다.

팝업 메시지 비헤이비어 적용

팝업 메시지 동작은\n지정한 메시지와 함께 JavaScript 경고를 표시합니다.JavaScript\n경고에는 버튼이 하나([확인])만 있으므로 선택을 제시하기보다는\n사용자에게 정보를 제공하기 위해 이 동작을 사용합니다.

텍스트에 유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 기타 표현식을 포함할 수 있습니다. JavaScript 표현식을 포함하려면 중괄호({}) 안에 배치하십시오. 중괄호를 표시하려면 백슬래시(\{)를 앞에 입력하십시오.

예제:

이 페이지의 URL은 {window.location}이고, 오늘은 {new Date()}입니다.

이미지 미리 로드하기 비헤이비어 적용

[이미지 미리 로드] 비헤이비어는 페이지가 처음 표시될 때 보이지 않는 이미지(예: 비헤이비어나 스크립트로 바뀔 이미지)를 캐싱하여 표시 시간을 단축합니다.

프레임의 텍스트 설정 비헤이비어 적용

프레임 텍스트 설정 동작을 사용하면 프레임의 텍스트를 동적으로 설정하여 프레임의 콘텐츠와 서식을 지정한 콘텐츠로 바꿀 수 있습니다.콘텐츠에는 유효한 HTML 코드가 포함될 수 있습니다.이 비헤이비어를 사용하여 정보를 동적으로 표시합니다.

프레임 텍스트 설정 동작이 프레임의 서식을 바꾸지만 배경색 유지를 선택하여 페이지 배경과 텍스트 색상 속성을 유지할 수 있습니다.

텍스트에 유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 기타 표현식을 포함할 수 있습니다.JavaScript 표현식을 포함하려면 중괄호({}) 안에 넣으십시오. 중괄호를 표시하려면 앞에 백슬래시를 붙이십시오(\{).

예제:

이 페이지의 URL은 {window.location}이고, 오늘은 {new Date()}입니다.

[컨테이너 텍스트 설정] 동작을 적용하십시오

Set Text Of Container 비헤이비어는 페이지에서 기존 컨테이너(즉, 텍스트나 다른 요소를 포함할 수 있는 모든 요소)의 콘텐츠와 서식을 지정한 콘텐츠로 바꿉니다. 내용에는 유효한 HTML 소스 코드가 포함될 수 있습니다.

텍스트에 유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 기타 표현식을 포함할 수 있습니다. JavaScript 표현식을 포함하려면 중괄호({}) 안에 넣으십시오. 중괄호를 표시하려면 백슬래시(\{)를 앞에 붙이십시오.

예제:

이 페이지의 URL은 {window.location}이고 오늘 날짜는 {new Date()}입니다.

Set Text Of Status Bar 비헤이비어 적용

Set Text Of Status Bar 비헤이비어는 브라우저 창의 왼쪽 아래 모서리에 있는 상태 표시줄에 메시지를 표시합니다. 예를 들어 이 비헤이비어를 사용하여 링크와 연결된 URL을 표시하는 대신 상태 표시줄에서 링크의 대상을 설명할 수 있습니다. 방문자들은 종종 상태 표시줄의 메시지를 무시하거나 간과하며(모든 브라우저가 상태 표시줄 텍스트 설정을 완전히 지원하지는 않음), 메시지가 중요한 경우 팝업 메시지나 AP 요소의 텍스트로 표시하는 것을 고려하십시오.

텍스트에 유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 기타 표현식을 포함할 수 있습니다. JavaScript 표현식을 포함하려면 중괄호({}) 안에 넣으십시오. 중괄호를 표시하려면 백슬래시(\{)를 앞에 붙이십시오.

예제:

이 페이지의 URL은 {window.location}이고 오늘 날짜는 {new Date()}입니다.

Set Text Of Text Field 비헤이비어 적용

Set Text Of Text Field 비헤이비어는 양식의 텍스트 필드 콘텐츠를 지정한 콘텐츠로 바꿉니다.

텍스트에 유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 기타 표현식을 포함할 수 있습니다. JavaScript 표현식을 포함하려면 중괄호({}) 안에 넣으십시오. 화면에 중괄호를 표시하려면 앞에 백슬래시(\{)를 입력합니다.

예제:

이 페이지의 URL은 {window.location}이고 오늘 날짜는 {new Date()}입니다.

이름이 있는 텍스트 필드 만들기

텍스트 필드의 텍스트 설정 적용

요소 표시 - 숨김 비헤이비어 적용

요소 보기-숨기기 동작은 하나 이상의 페이지 요소를 보이게 하거나 숨기거나 기본 가시성을 복원합니다.이 동작은 사용자가 페이지와 상호 작용할 때 정보를 표시하는 데 유용합니다.예를 들어, 사용자가 식물 이미지 위로 포인터를 이동할 때 해당 식물의 성장 계절과 지역, 필요한 햇빛 양, 자랄 수 있는 크기 등에 대한 세부 정보를 제공하는 페이지 요소를 표시할 수 있습니다.이 동작은 관련 요소만 표시하거나 숨깁니다. 숨겨진 요소를 페이지 흐름에서 실제로 제거하지는 않습니다.

이 비헤이비어는 Dreamweaver CS5부터 더 이상 사용되지 않습니다.

이미지 교체 비헤이비어 적용

이미지 바꾸기 비헤이비어는 <img> 태그의 src 속성을 변경하여 한 이미지를 다른 이미지로 바꿉니다.이 비헤이비어를 사용하여 버튼 롤오버 및 기타 이미지 효과를 만들 수 있습니다(한 번에 둘 이상의 이미지 바꾸기 포함).롤오버 이미지를 삽입하면 페이지에 이미지 바꾸기 비헤이비어가 자동으로 추가됩니다.

또한 마지막으로 바뀐 이미지 세트를 이전 소스 파일로 복원하는 이미지 바꾸기 복원 비헤이비어도 있습니다.이 비헤이비어는 객체에 이미지 바꾸기 비헤이비어를 연결할 때 자동으로 추가됩니다. 이미지 바꾸기를 연결하는 동안 복원 옵션을 선택한 상태로 두면 이미지 바꾸기 복원 비헤이비어를 수동으로 선택할 필요가 없습니다.

양식 유효성 검사 비헤이비어 적용

양식 유효성 검사 동작은 지정된 텍스트 필드의 콘텐츠를 확인하여 사용자가 올바른 데이터 유형을 입력했는지 확인합니다.이 동작을 개별 텍스트 필드에 onBlur 이벤트와 함께 연결하여 사용자가 양식을 작성할 때 필드를 유효성 검사하거나, 양식에 onSubmit 이벤트와 함께 연결하여 사용자가 제출 버튼을 클릭할 때 여러 텍스트 필드를 한 번에 평가할 수 있습니다.이 동작을 양식에 연결하면 잘못된 데이터가 있는 양식의 제출을 방지합니다.

관련 항목 더 보기

• 동적 HTML 양식 메뉴 삽입 또는 변경
• 프레임 및 프레임세트 만들기