자바스크립트 스크립트 지원 및 비지원 모두를 위한 웹사이트 디자인

StackOverflow https://stackoverflow.com/questions/1284899

문제

좋습니다. 귀하의 웹사이트가 자바스크립트가 비활성화된 상태에서도 제대로 작동하는 것이 중요하다는 것을 알고 있습니다.

내 생각에는 그러한 웹사이트를 디자인하는 방법에 대해 생각하기 시작하는 한 가지 방법은 홈페이지에서 자바스크립트를 감지하고 활성화되어 있지 않은 경우 자바스크립트 코드가 없고 순수한 HTML(예: Gmail)로 작동하는 다른 버전의 웹사이트로 리디렉션하는 것입니다.

제가 염두에 두고 있는 또 다른 방법은 예를 들어 웹페이지의 대화 상자에 있는 X(닫기 버튼)를 생각해 보는 것입니다.자바스크립트 간섭 없이 X를 누르면 서버에 요청이 전송되고 서버 측에서는 다음에 페이지를 렌더링할 때 해당 대화 상자를 숨기고 링크 클릭 시 자바스크립트 함수를 바인딩합니다. 자바스크립트가 활성화되면 대화상자가 즉시 숨겨집니다.

이거 어떻게 생각해?두 가지를 모두 지원하는 웹사이트를 어떻게 디자인하시겠습니까?

도움이 되었습니까?

해결책

이를 처리하는 한 가지 방법은 다음과 같습니다.

  • 먼저 자바스크립트 없이 사이트를 만듭니다.
  • 그런 다음 모든 것이 작동하면 적절한 곳에 자바스크립트 개선 사항을 추가하세요.

이렇게 하면 JS가 비활성화되어도 사이트의 "첫 번째" 버전이 계속 작동합니다.

자연스럽게 CSS를 사용하여 똑같은 작업을 수행할 수 있습니다. "CSS 네이키드 데이" 매일 CSS 없이 웹사이트가 어떤 모습인지 보여줍니다 ^^


한 가지 예?

  • 제출 시 데이터를 서버에 게시하는 표준 HTML 양식이 있으며, 서버에서 페이지를 다시 생성하면 "구독해 주셔서 감사합니다"와 같은 메시지가 표시됩니다.
  • 그런 다음 JS + Ajax 항목을 추가합니다.양식을 제출하는 동안 전체 페이지를 다시 로드하는 대신 데이터만 보내는 Ajax 요청을 수행합니다.그러면 페이지를 다시 로드하지 않고도 "구독해 주셔서 감사합니다"라는 메시지가 표시됩니다.

이 경우, 자바스크립트가 비활성화되어도 첫 번째 "표준" 작업 방식이 여전히 작동합니다.

이것이 바로 (일부)라고 불리는 것입니다. 점진적인 향상

다른 팁

일반적인 방법은 다음과 같습니다. 점진적인 향상.

기본적으로 일반 양식을 사용하는 간단한 HTML 웹사이트를 사용합니다.
다음 개선 사항은 CSS입니다. 보기 좋게 만들면 됩니다.
그런 다음 Javascript를 사용하여 더욱 향상시킬 수 있습니다. 요소를 추가하거나 제거하고 효과를 추가하는 등의 작업을 수행할 수 있습니다.

기본 HTML은 오래된 브라우저(또는 예를 들어 스크립트 차단기가 있는 브라우저)에는 항상 존재합니다.

예를 들어 댓글을 게시하는 양식은 다음과 같습니다.

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

그런 다음 자바스크립트로 개선하여 AJAXy로 만들 수 있습니다.

$('#myForm').submit(...);

이상적으로 AJAX 콜백은 post-comment.php와 동일한 코드를 사용해야 합니다 - 동일한 파일을 호출하거나 다음을 통해 include, 그러면 코드를 복제할 필요가 없습니다.

즉, JavaScript가 비활성화된 상태에서 사이트가 작동하도록 만드는 것은 중요하지 않습니다.JavaScript를 비활성화하는 사람들은 귀하의 사이트에 버그를 해킹하려는 사람들이며, 사이트를 올바르게 탐색할 자격이 없습니다.그들과 함께 당신의 노력을 낭비하지 마십시오.JavaScript 없이는 웹 서핑이 불가능하다는 것은 누구나 알고 있습니다.

주의해야 할 유일한 것은 양식에 관한 것입니다.JavaScript의 필터를 절대 신뢰하지 마십시오. 항상 서버 측에서 다시 필터링하세요!

점진적 강화를 사용하여 연구하세요. 제이쿼리 그것을 이해하기 위해.머리를 숙이는 데는 시간이 좀 걸립니다.예를 들어 귀하의 아이디어는 다음과 같습니다.

홈페이지에서 JavaScript를 감지하고 활성화되지 않은 경우 JavaScript 코드가 아닌 Pure HTML에서 작동하는 다른 버전의 웹 사이트로 리디렉션됩니다.

자바스크립트가 비활성화되어 있는지 어떻게 알 수 있나요?물론 자바스크립트는 아니고...

당신은 잘못된 방향으로 생각하고 있습니다 :가장 기본적인 버전은 기본 버전이어야 하며, 더 많은 고급 기능을 감지하면 사용할 수 있습니다.

가능한 한 다양한 브라우저/기능에 대한 별도의 버전을 피하십시오.모든 버전을 동기화하고 최신 상태로 유지하는 것은 너무 많은 작업입니다.

시작하는 데 도움이 되는 몇 가지 유용한 리소스:

가장 좋은 방법은 JS 없이도 적절하게 작동하는 페이지를 디자인하는 것입니다.그런 다음 <body> 섹션 하단에 다음과 같은 코드를 사용하여 <script> 블록을 추가합니다.

window.onload = function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    document.getElementById('someInputField').onchange = function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
    }
}

연구하다 jQuery 예.이런 저런 모습을 많이 보여줍니다.이를 "눈에 거슬리지 않는 JavaScript"라고 합니다.더 많은 예를 찾으려면 Google을 참조하세요.

편집하다:위의 jQuery 버전은 다음과 같습니다.

$(document).ready(function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    $('#someInputField').change(function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
   });
});

jQuery와 jQuery의 더 낮은 장황함을 보여주기 위해 이것을 추가했습니다.표준 DOM 조작.window.onload와 document.ready 사이에는 약간의 차이가 있으며 jQuery 문서와 튜토리얼에서 논의됩니다.

당신이 목표로 하는 것은 점진적인 향상.먼저 JavaScript 없이 사이트를 디자인하고 사이트가 작동하면 jQuery와 같은 라이브러리를 통해 JavaScript 이벤트를 추가하기 시작하여 사이트의 동작이 프레젠테이션과 완전히 분리되도록 하겠습니다.이렇게 하면 브라우저에서 JavaScript를 활성화한 사용자와 그렇지 않은 사용자에게 더 높은 수준의 기능을 제공하고 개선할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top