JavaScript로 구조 마크 업 향상-JS 튜토리얼-php.cn

키 포인트 JavaScript를 사용한 강화 된 구조화 태그는 파일 크기를 줄이면서 웹 페이지 컨텐츠의 접근성 및 유지 보수 가능성을 크게 향상시킬 수 있습니다.

javaScript는 속성을 사용하여 참조 링크를 블록 참조에 자동으로 삽입하는 등 HTML 요소에 기능을 동적으로 추가하는 데 효과적으로 사용될 수 있습니다.

JavaScript가 웹 페이지의 기본 기능을 방해하지 않도록하는 것이 중요합니다.
몇 년 전, HTML을 작성하는 데있어 핵심 기술은 두 개의 주요 브라우저가 원하는대로 다소 성능을 발휘할 수 있도록 충분한 테이블 기술을 마스터하는 것이 었습니다. 최신 웹은 매우 다르며 마크 업의 품질은 제목, 단락 및 목록과 같은 구조적 요소를 얼마나 능숙하게 사용하여 콘텐츠를 설명하는지에 달려 있습니다. 이 접근법의 이점은 여러 번 설명하기 쉽습니다. 코드 유지 보수, 더 작은 파일 크기, 더 나은 접근성 및 단일 스타일 시트에서 웹 사이트의 모양과 느낌을 제어 할 수있는 능력, 여러 페이지에 걸쳐있는 거대한 태그 블록 블록에서 수정하는 것이 아닙니다. 덜 자주 논의되는 장점은 잘 구조화 된 태그가 클라이언트 측 웹 타사 기술인 JavaScript를 기반으로 추가 웹 사이트 향상의 문을 열다는 것입니다. 이 기사는 JavaScript와 잘 구조화 된 태그가 함께 작동 할 수있는 두 가지 방법을 탐색합니다. 첫 번째 예제는 인용 속성에 연결하여 블록 참조를 향상시키는 방법을 보여줍니다. 두 번째 예제는 페이지에서 볼 수있는 패널을 전환하는 링크를 작성하는 "모범 사례"스크립트를 보여줍니다. 블록 참조 cite
기능 본문을 자세히 살펴 보겠습니다.
이 코드 라인은 dom 메소드 를 사용하여 현재 페이지에서 모든 블록 참조 요소를 찾아 (실제로 htmlcollection이지만 배열처럼 작동하는 데이터 구조)에 할당합니다. getElementsByTagName quotes
이제 우리는 수집 된 블록 참조 노드를 가로지고 있습니다. 루프 할 때마다
메소드를 사용하여 요소에서 인용 속성을 검색합니다. 인용 속성이 설정되면 흥미로운 부분으로 진행합니다. 인용 하단에 "소스"링크를 만듭니다. for (var i = 0; i < quotes.length; i ) { ... }

DOM을 사용하여 페이지에 새로운 HTML 요소를 동적으로 추가하려면이 작업을 수행하는 올바른 방법은 이러한 요소를 getAttribute 메소드를 사용하여 프로그래밍 방식으로 작성하는 것입니다. 위의 줄은 새로운 'a'요소를 생성하고 HREF 및 제목 속성을 할당하며, 둘 다 인용의 URL로 설정됩니다.

var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite); 링크 요소에 사용자가 클릭하여 링크를 활성화 할 수있는 텍스트를 포함하려고합니다. 원래 텍스트 노드는 메소드를 사용하여 생성됩니다. DOM은 HTML 요소를 트리를 구성하는 것으로 취급하므로 새로 생성 된 링크에 텍스트를 추가하려면
메소드를 호출해야합니다.
createElement
CSS를 사용하여 새로운 링크를 유연하게 스타일로 만들 수 있도록 단락 요소로 랩핑 할 수 있습니다. 위의 코드는 그러한 요소를 생성하고 클래스를 "blockquotesource"로 설정하여 CSS 후크를 제공 한 다음
를 사용하여 링크를 추가합니다. 이 시점에서, 우리가 만든 새로운 문서 조각은 다음 html과 동일합니다. <code>a.appendChild(document.createTextNode('Source'));
현재, 우리의 스 니펫은 여전히 기억에 남을 것입니다. 그러나 우리는 그것을 메모리로 만들었지 만 아직 문서에 첨부하지 않았기 때문입니다. 이것이 기능의 마지막 줄이하는 일입니다 :
createTextNode appendChild
는 현재 작업중 인 블록 참조 요소입니다.
새 단락을 블록 참조에 표시하여 표시되도록합니다.
두 단계가 더 있습니다. 먼저 페이지가 처음로드되면 위의 기능을 실행해야합니다. 이것을 달성하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 문서 본문 요소의 Onload 속성에 함수에 호출을 추가하는 것입니다. 이것은 잘 작동하지만 더 잘할 수 있습니다. JavaScript 함수는 외부 파일에서 호스팅되므로 외부 파일이 기능을 실행하게하는 것이 더 의미가 없습니까? 순진한 접근 방식은 다음 JavaScript 코드를 사용하는 것입니다.
window.onload = extractBlockquoteCitations; // 우리는 함수의 이름을 제공하지만 끝에 ()을 무시하여 함수가 실행됩니다. JavaScript는 기능 프로그래밍 스타일을 지원합니다. 즉, 기능은 매개 변수로 전달되고 데이터 구조에 저장되며 다른 데이터 객체와 같은 다른 기능에서 반환 할 수 있음을 의미합니다. 향후 게시물 에서이 주제에 대해 더 많이 논의 할 것이지만 결과는
에 함수를 할당하면 페이지로드 후 실행됩니다.
그러나이 솔루션에는 한 가지 단점이 있습니다. 주어진 페이지에서 페이지로드가 완료된 후 실행 된 여러 스크립트를 사용하려면
에 등록하는 마지막 스크립트는 실행하는 유일한 스크립트가됩니다. 실제로 필요한 것은 이미 존재하는 것을 덮어 쓰지 않고 Window 개체의 Onload 핸들러에 기능을 첨부하는 방법입니다. 불행하게도, 인터넷 익스플로러와 다른 브라우저는 이러한 동적 이벤트 첨부 파일을 처리하는 방법이 다릅니다. 다음은 기능입니다 :
다음은 Window Object의로드 이벤트에 BlockQuotes 함수를 추가하는 코드입니다. window.onload
마지막 단계는 CSS와 인용을 스타일링하는 것입니다. 다음은 블록 참조를 처리하는 비교적 간단한 CSS 코드 스 니펫입니다.
완제품은 여기에서 볼 수 있습니다. window.onload
패널 스위치 이제 더 고급 동적 효과 인 패널 스위처를 고려해 봅시다. 여기서 목표는 페이지에 여러 패널을 배치하고 한 번에 하나의 패널 만 표시하는 것입니다. 항상 표시된 링크 세트를 사용하여 현재 표시된 패널을 선택할 수 있습니다. 이는 탭을 선택할 때마다 페이지를 새로 고치지 않고 다양한 관련 화면을 탐색하기 위해 탭 인터페이스를 구축하는 데 유용합니다.
function extractBlockquoteCitations() { var quotes = document.getElementsByTagName('blockquote'); for (var i = 0; i < quotes.length; i++) { var cite = quotes[i].getAttribute('cite'); if (cite) { var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite); a.appendChild(document.createTextNode('Source')); var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a); quotes[i].appendChild(p); } } }
로그인 후 복사
로그인 후 복사
페이지를 향상시키기 위해 javaScript를 사용할 때마다 JavaScript가 비활성화되어 있어도 페이지를 사용할 수 있어야한다는 좋은 규칙을 기억해야합니다. 이 경우 이는 JavaScript가 활성화 될 때 이상적인 솔루션이 광고 된대로 작동하지만, 비 JavaScript 환경에서는 모든 패널이 페이지에 표시되어야하며 각 링크는 관련 패널에 직접 연결하고 URL 스 니펫을 사용해야합니다.
그러면 이것은 작동 할 수있는 가장 쉬운 마크입니다.
`
패널 1 addEvent(window, 'load', extractBlockquoteCitations); |
이것은 패널 1
입니다 이것은 패널 2
입니다`<.> 놀랍게도, 위의 것은 원하는 효과를 만들기 위해 JavaScript를 연결하는 데 필요한 거의 모든 마크 업입니다. 우리는 위의 코드를 계속할 수 있지만 링크에 클래스를 추가하여 그들에 대한 특별 작업을 수행하고자한다는 것을 분명히하겠습니다.

// 다음은 JavaScript의 작동 방식입니다. 페이지가로드되면 스크립트는 클래스에 "토글"이 포함 된 링크에 대해 페이지의 모든 링크를 스캔합니다. 발견 된 모든 링크의 경우 HREF 속성이 확인되고 지정된 요소가 위치하고 대상 요소 배열에 추가됩니다. 첫 번째 요소를 제외한 다른 모든 요소는 "닫힌"것이므로 페이지가로드되면 첫 번째 패널 만 표시됩니다. 링크 자체는 JavaScript 이벤트 핸들러를 첨부하여 활성화되면 해당 패널을 표시 할 수 있습니다.
전체 스크립트는 여기에서 볼 수 있습니다. 다음은 코드 작동 방식에 대한 단계별 설명입니다.
<a href="https://www.php.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="https://www.php.cn/link/379d08c7a38df48c777c07ea990a3bcf" class="toggle">Panel 2</a>
첫 번째 줄은 페이지의 패널 요소에 대한 참조를 저장하는 전역의 빈 배열을 만듭니다. 이 스크립트에는 글로벌 변수와 많은 함수가 있기 때문에 각 함수는 "ET_"( "Easy Toggle"의 경우)로 각 함수를 접두사로 표시하여 동일한 페이지에로드 된 다른 스크립트와의 이름이 충돌 할 가능성이 줄어 듭니다.

지금까지 일부 변수를 초기화하고 첫 번째 플래그를 true로 설정하고 문서의 모든 링크를 반복하기 시작했습니다. 변수를 사용하여 변수를 선언하는 것은 변수가 함수에 국한되기 때문에 매우 중요합니다. 이 단계가 없으면 전 세계적으로 액세스 할 수 있으며 다른 스크립트를 방해 할 수 있습니다.

이 조건은 현재 링크 된 클래스에 "토글"이 포함되어 있는지 확인합니다. 클래스 속성에는 공간으로 분리 된 여러 클래스를 포함 할 수 있기 때문에 를 확인하는 대신 정규식을 사용합니다. 는 정규 표현식입니다.
var et_toggleElements = [];
링크 된 클래스 목록에 토글이 포함 된 경우 링크의 대상이 URL 스 니펫이라고 가정합니다.
# 태그에서 링크 href를 분할 - 우리는 관심있는 부분이 # 이후에 있다는 것을 알고 있으므로 를 사용하여 결과 배열을 직접 색인하여 대상 ID를 추출합니다.

/* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i ) { ... } 여기서, 우리는 링크가 요소가 존재한다는 것을 다른 가정합니다.
메소드를 사용하여 요소를 가져온 다음 배열의 현재 길이와 동일한 배열 인덱스에 할당하여 요소를 배열에 추가합니다. 이것은 배열이 0에서 인덱싱되기 때문에 작동하지만 배열 길이는 1에서 중요합니다. getElementById()

이것은 우리가 앞서 정의한 첫 번째 로고가 작동하는 곳입니다. 우리는 웹 사이트의 첫 번째 패널이 보이도록 유지하기를 원하지만 다른 패널은 CSS의 "Display : None"과 동등한 JavaScript를 사용하여 숨겨져 있습니다. 이 깃발을 사용하면이 작업을 수행 할 수 있습니다. if (first) { first = false; } else { target.style.display = 'none'; }

마지막으로 함수를 링크 된 이벤트에 할당하여 링크가 활성화 될 때마다 함수가 호출됩니다. 다음 단계는 함수를 정의하는 것입니다.

다시, 우리는 link.onclick = et_toggle; 메소드를 사용하여 링크에서 ID를 추출합니다.
이제 어떤 패널을 표시할지 알았으므로 요소 배열을 반복하고 원하는 패널의 ID와 일치하는 ID를 제외한 다른 모든 요소를 닫을 수 있습니다.
false를 반환함으로써 활성화 될 때 링크가 실제로 추적되는 것을 방지하여 브라우저에서 볼 수있는 페이지에서 바람직하지 않은 점프를 유발할 수 있습니다. et_toggle 마지막 단계는 앞에서 설명한 함수를 사용하여 onclick 함수를 창의 하중 이벤트에 등록하는 것입니다.

function extractBlockquoteCitations() { var quotes = document.getElementsByTagName('blockquote'); for (var i = 0; i < quotes.length; i++) { var cite = quotes[i].getAttribute('cite'); if (cite) { var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite); a.appendChild(document.createTextNode('Source')); var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a); quotes[i].appendChild(p); } } }
로그인 후 복사
로그인 후 복사

여기에서 실행중인 완료 코드를 볼 수 있습니다. split
결론 이 기사에서는 유용한 효과를 위해 잘 구조화 된 마커를 JavaScript와 W3C DOM과 함께 사용할 수있는 두 가지 방법을 볼 수 있습니다. 이 게시물이 JavaScript와 스마트 태깅을 사용하는 새로운 방법을 찾도록 영감을주기를 바랍니다.

추가 읽기 구조화 된 태그를 기반으로 한 JavaScript 효과의 다른 훌륭한 예가 많이 있습니다. 다음은 다음과 같은주의를 기울일 가치가있는 몇 가지 예입니다
Aaron Boodman의 labels.js Stuart Langridge의 멋진 타이틀 스튜어트 랑 리지의 aqlists Stuart Langridge 's Sorttable Peter Paul-Koch의 목차

javaScript 의 구조화 된 태그에 대해 자주 묻는 질문 JavaScript의 구조화 된 태그는 무엇입니까? addEvent JavaScript의 구조화 된 태그는 웹 문서의 내용과 구조를 설명하기 위해 HTML 요소를 사용하는 것입니다. 이러한 요소에는 제목, 단락, 목록 등이 포함됩니다. JavaScript는 이러한 요소를 조작하여 동적 및 대화식 웹 페이지를 생성 할 수 있습니다. 예를 들어, JavaScript는 HTML 요소의 내용을 변경하고 HTML 요소의 스타일 (CSS)을 변경하고 새로운 HTML 요소를 추가 할 수 있습니다. et_init JavaScript는 HTML 요소와 어떻게 상호 작용합니까?
JavaScript는 DOC (Document Object Model)를 통해 HTML 요소와 상호 작용합니다. DOM은 JavaScript가 작동 할 수있는 웹 페이지의 구조를 나타냅니다. 예를 들어, javaScript는
메소드를 사용하여 새 텍스트 노드를 작성한 다음 기존 HTML 요소에 추가 할 수 있습니다.
JavaScript의 텍스트 노드는 무엇입니까? document.createTextNode() javaScript의 텍스트 노드는 요소 또는 속성의 텍스트 내용을 나타내는 노드 유형입니다.
메소드를 사용하여 만들 수 있습니다. 이 메소드는 기존 HTML 요소에 첨부 될 수있는 새 텍스트 노드를 생성하여 웹 페이지에 텍스트를 동적으로 추가 할 수 있습니다.
html에 JavaScript를 추가하는 방법은 무엇입니까?
> JavaScript는 여러 가지 방법으로 HTML에 추가 할 수 있습니다. 태그를 사용하여 html 파일에 직접 포함 시키거나 태그의
속성을 사용하여 외부 JavaScript 파일에 링크 할 수 있습니다. 특정 이벤트가 발생할 때 또는 와 같은 이벤트 속성을 사용하여 JavaScript 코드를 실행할 수도 있습니다. document.createTextNode()
메소드를 사용하는 방법?

메소드는 새 텍스트 노드를 만드는 데 사용됩니다. 먼저 매개 변수로 추가하려는 텍스트 로이 메소드를 호출하십시오. 이렇게하면 새 텍스트 노드가 반환 된 후
메소드를 사용하여 기존 HTML 요소에 첨부 할 수 있습니다. <script></script> 문서 객체 모델 (dom)은 무엇입니까? <script></script> DOCING 객체 모델 (DOM)은 HTML 및 XML 문서의 프로그래밍 인터페이스입니다. 문서의 구조를 물체의 트리로 나타내며 각 객체는 문서의 일부를 나타냅니다. JavaScript는 DOM과 상호 작용하여 웹 페이지의 내용과 구조를 조작 할 수 있습니다. src JavaScript를 사용하여 HTML 요소의 내용을 변경하는 방법은 무엇입니까? onclick javaScript에서 속성을 사용하여 HTML 요소의 내용을 변경할 수 있습니다. 이 속성은 요소의 HTML 컨텐츠를 얻거나 설정하는 데 사용될 수 있습니다. 예를 들어, ID "myelement"가있는 요소가 있으면 다음과 같이 변경할 수 있습니다. onload JavaScript를 사용하여 HTML 요소의 스타일을 변경하는 방법은 무엇입니까?
javaScript에서 속성을 사용하여 HTML 요소의 스타일을 변경할 수 있습니다. 이 속성은 요소의 모든 CSS 속성을 포함하는 객체입니다. 예를 들어, ID "myelement"가있는 요소가 있으면 다음과 같이 변경할 수 있습니다.
JavaScript를 사용하여 새로운 HTML 요소를 추가하는 방법은 무엇입니까? document.createTextNode() javaScript의
메소드를 사용하여 새로운 HTML 요소를 추가 할 수 있습니다. 이 메소드는 새 요소를 생성 한 다음
메소드를 사용하여 기존 요소에 연결할 수 있습니다. 예를 들어, 새 단락을 만들어 다음과 같이 문서 본문에 추가 할 수 있습니다. document.createTextNode() JavaScript의 이벤트 속성은 무엇입니까?
JavaScript의 이벤트 속성은 특정 이벤트가 발생할 때 실행될 JavaScript 코드를 정의하는 데 사용됩니다. 이 이벤트는 버튼 ()을 클릭하거나 페이지 ()로드 또는 마우스를 요소 () 위로 이동하는 것이 포함될 수 있습니다. 이벤트 코드는 HTML 요소의 속성에 직접 정의됩니다.