| English | 의미 |
|---|---|
| DOM/dɒm/ | 문서 객체 모델 |
| event/ɪˈvent/ | 이벤트 |
| function/ˈfʌŋkʃn/ | 함수 |
메뉴가 열렸는데도 버튼은 아직 닫혀 있다고 표시됨
- 시각적 패널과 접근성 상태가 일치하지 않을 수 있습니다. 신뢰할 수 있는 상호작용은 콘텐츠와 이를 설명하는 컨트롤을 동시에 업데이트해야 합니다.
- 브라우저 JavaScript는 사용자 조작에 반응합니다. 클라이언트 코드에 개인 인증 정보를 포함하지 마십시오. 방문자는 자신의 기기에서 실행되는 코드를 inspect하고 변경할 수 있습니다.
파싱된 요소 찾기
- DOM은 HTML이 파싱될 때 문서를 노드로 표현합니다. 코드는 기존 노드를 쿼리하여 속성을 변경할 수 있습니다.
- 타겟이 파싱되기 전에 실행되는 스크립트는
null을 받을 수 있습니다. deferred 외부 스크립트는 파싱 후 실행되며, body 끝의 스크립트는 그 위에 있는 요소를 위해 작동할 수 있습니다.
DOM이 나타내는 것은 무엇입니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
문서가 파싱됨에 따라 노드(node)가 사용 가능해지므로, 아직 파싱되지 않은 타겟을 검색하는 쿼리는 결과를 찾을 수 없습니다.
응답을 한 번만 등록하기
- 이벤트는 클릭이나 폼 제출과 같은 동작을 기록합니다.
addEventListener은 해당 이벤트가 dispatched될 때 실행될 함수를 등록합니다. - 버튼과 패널을 찾고 리스너를 등록한 뒤, 각 클릭 시 상태 업데이트를 수행하십시오. 핸들러로 전달하려는 것이라면 등록 중에는 함수를 호출하지 마십시오.
어떤 메서드가 요소(element)에 이벤트 핸들러(event handler)를 등록합니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
addEventListener은 클릭(click)과 같은 이벤트에 대한 콜백(callback)을 등록합니다.
이 상호작용 설정 단계의 순서를 바르게 배열하십시오.
난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스
등록은 이벤트 응답보다 선행되며, 핸들러는 이벤트가 발송될 때 행됩니다.
사용 가능한 대체 내용 유지하기
- 이를 HTML 파일로 저장하십시오. 링크는 초기에 보이며, 토글 버튼은 핸들러가 준비된 후에만 나타납니다.
- 버튼을 두 번 클릭하십시오. 패널과
aria-expanded이 함께 변화함을 확인하십시오. 네이티브 버튼도 키보드 활성화에 반응합니다.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
<button id="menu-button" type="button" hidden
aria-controls="menu-panel" aria-expanded="true">Menu</button>
<nav id="menu-panel" aria-label="Club">
<a href="#meeting">Meeting details</a>
</nav>
<main id="meeting"><h1>Meet Thursday in room 12</h1></main>
<script>
const button = document.querySelector('#menu-button');
const panel = document.querySelector('#menu-panel');
button.addEventListener('click', () => {
panel.hidden = !panel.hidden;
button.setAttribute('aria-expanded', String(!panel.hidden));
});
button.hidden = false;
</script>
</body>
</html>
초기: 링크 표시됨, expanded true. 첫 번째 클릭: 링크 숨김, expanded false. 두 번째 클릭: 링크 표시됨, expanded true. JavaScript가 비활성화된 경우, 원본 링크가 여전히 표시됩니다.
해당 예제(worked example)에서 자바스크립트(sc JavaScript)가 비활성화된 상태일 때, 기존 네비게이션 링크(original navigation links)는 어떻게 됩니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
링크는 초기에 표시되고, 버튼은 초기에 숨겨져 있으므로 enhancement 실패가 필수 네비게이션을 제거하지 않습니다.
각 패널 상태를 올바른 버튼 상태에 매핑하십시오.
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
aria-expanded는 제어되는 영역이 현재 확장되었는지 여부를 설명합니다.
유용한 체크와 신뢰할 수 있는 체크 분리하기
- 브라우저 검증은 빠른 피드백을 제공할 수 있지만, 서버는 제출된 값과 권한을 독립적으로 검증해야 합니다. 호출자는 브라우저 코드를 우회하거나 변경할 수 있습니다.
- HTML로 해석하는 대신 순수 텍스트를 삽입하려면
textContent을 사용하십시오. 추가 기능 전 결손된 요소와 오류를 확인하십시오.
클릭 핸들러만으로 커스텀 요소를 키보드 접근 가능하게 만들 수 없습니다. 적절한 네이티브 컨트롤을 사용하고 포커스와 활성화를 확인하십시오. 또한 CSS가 패널의 숨김 상태를 오버라이드하지 않는지도 확인하십시오.
브라우저가 검증했으므로 서버는 제출된 모든 값을 신뢰할 수 있습니다.
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
호출자가 브라우저 코드를 우회하거나 변경할 수 있습니다. 서버에서 값과 권한을 독립적으로 검증하십시오.
두 가지 작동 및 오류 추적하기
- 초기 상태와 두 번의 활성화 후 상태를 기록하십시오. 키보드를 사용하여 반복한 뒤, 스크립트 없이도 핵심 탐색이 이용 가능한지 확인하십시오.
- 브라우저에서什么东西运行以及哪些仍需服务器检查를 설명하십시오. 실제 폼 데이터를 전송하지 않고 이 로컬 예제를 테스트하십시오.
파싱된 요소 → 등록된 이벤트 핸들러 → 일관된 상태 업데이트. 유용한 대체 내용을 보존하고 신뢰할 수 있는 검증은 서버에 유지하십시오.
패널은 처음에 가시적입니다. 톨글가 두 번 실행되었습니다. 최종 상태는 무엇입니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
첫 번째 클릭으로 숨겨지고, 두 번째로 복원됩니다. 두 상태 모두 일관성을 유지해야 합니다.
이 로컬 상호작용 검토에 어떤 검사가 포함되어야 합니까? 해당되는 것을 모두 선택하십시오.
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
테스트 운영, 상태 및 포백. 브라우저 코드는 비공개 신원증명 정보를 저장하기 위한 안전한 장소가 아닙니다.