javascript 스크립트 지원 및 지원되지 않는 웹 사이트 디자인

Question

알겠습니다. JavaScript가 비활성화 된 상태에서 웹 사이트가 올바르게 작동하는 것이 중요하다는 것을 알고 있습니다.

내 의견으로는 그런 웹 사이트를 디자인하는 방법을 생각하기 시작하는 한 가지 방법은 홈페이지에서 자바 스크립트를 감지하는 것입니다. 자바 스크립트 코드가 아니고 순수한 html로 작동하는 웹 사이트의 다른 버전으로 리디렉션되지 않으면 (Gmail과 같은)

내가 생각할 수있는 또 다른 방법은 예를 들어 웹 페이지의 대화 상자에서 X (닫기 버튼)를 생각하는 것입니다. 자바 스크립트 간섭없이 X를 누르면 서버에 요청을 보내고 서버 측에서는 다음에 우리가 페이지를 렌더링 할 때 대화 상자를 숨기고 또한 자바 스크립트 함수를 링크의 onclick에 바인딩합니다. javascript를 사용하면 대화 상자를 즉시 ​​숨길 수 있습니다.

이 점에 대해 어떻게 생각하십니까? 어떻게 둘 다 지원하기 위해 웹 사이트를 디자인하겠습니까?

Answer 1

한 가지 방법입니다에 :

• 첫째, 모든 작품은, 적절한 자바 스크립트 기능 향상을 추가 할 때, 그리고 어떤 자바 스크립트
• 없이 사이트를 만들

이 방법 JS가 비활성화 된 경우 사이트의 "첫 번째"버전이 여전히 작동합니다.

당신은 자연스럽게, CSS와 동일 할 수있다 - 하나 "CSS Naked Day"매일도있다, 웹 사이트 ^^ CSS없이 같은

하나의 예를 보면 무엇을 보여?

• 당신은 당신의 서버에 게시하는 데이터를 제출하는 경우, 서버에 의해 페이지의 재 작성이 어떤 JS를
• 그런 다음 추가 "subscriving 주셔서 감사합니다"와 같은 메시지를 표시하는 것이 표준 HTML 양식이 + Ajax stuff : 양식을 제출하는 동안 전체 페이지를 다시로드하는 대신 데이터 만 보내는 Ajax 요청을 수행한다. 페이지를 다시로드하지 않고 "구독 해 주셔서 감사합니다."라고 표시합니다.

이 경우 JavaScript를 사용하지 않으면 처음으로 "표준"방식대로 작동합니다.

이것은 당신이 목표로하고 무엇 Progressive enhancement

Answer 2

일반적인 방법은 progressive enhancement입니다.

기본적으로 간단한 양식의 HTML 웹 사이트를 사용합니다.
다음 개선점은 CSS입니다.
그런 다음 Javascript로 더 향상시킬 수 있습니다. 요소를 추가하거나 제거하고 효과를 추가 할 수 있습니다.

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

다음과 같을 수 코멘트를 게시 할 수있는 형태 :

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

는 그런 다음

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

이상적으로 AJAX 콜백가 동일하게 사용해야합니다 그것을 AJAXy를 만들기 위해 자바 스크립트를 향상시킬 수 있습니다 post-comment.php로 코드 - 동일한 파일을 호출하거나 include을 통해 코드를 복제 할 필요가 없습니다. 이 다루는

Answer 3

소위 (의 일부)입니다 progressive enhancement이다. 먼저 JavaScript없이 사이트를 디자인하고, 작동하면 jQuery와 같은 라이브러리를 통해 JavaScript 이벤트를 추가하여 사이트의 동작이 프레젠테이션과 완전히 분리되도록하십시오. 이렇게하면 더 높은 수준의 기능을 제공 할 수 있고 브라우저에서 JavaScript를 활성화 한 사용자와 그렇지 않은 사용자를 위해 더 많은 기능을 제공 할 수 있습니다.

Answer 4

가장 좋은 방법은 JS없이 적절히 작동하는 페이지를 디자인하는 것입니다. 다음과 같은 코드로 < 몸 > 섹션의 하단에 < 스크립트 > 블록을 추가 :

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"라고합니다. 구글이 더 많은 예제를 찾을 수 있습니다.

편집 : 위의 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를 대 표준 DOM 조작의 낮은 상세를 표시하려면이 추가되었습니다. window.onload와 document.ready는 사소한 차이가 있습니다. jQuery 문서와 자습서에서 설명합니다.

Answer 5

프로그레시브 향상을 사용하여이를 이해하려면 jquery을 학습하십시오. 주위를 둘러 볼 때까지 약간의 시간이 걸립니다. 예를 들어 당신의 생각 :

는 홈페이지 에서 자바 스크립트를 탐지하고이 활성화되어 있지 않은 경우 리디렉션 자바 스크립트 코드가 아닌을 수행하고 순수 HTML과 함께 작동 웹 사이트의 다른 버전을 하는

방법 것 자바 스크립트가 비활성화되어 있는지 감지합니다. 자바 스크립트가 아닌 obivously ...

가장 기본적인 버전은 기본 버전이어야하며, 고급 기능을 감지하면 사용할 수 있습니다.

가능한 한 다른 bowser/기능에 대한 별도 버전을 피하십시오. 모든 버전을 동기화하고 최신 상태로 유지하는 것은 많은 작업입니다.

좋은 능숙는 시작하려면 : 측면에서

• Understanding Progressive Enhancement
• Progressive Enhancement with JavaScript
• Test-Driven Progressive Enhancement

Answer 6

, 자바 스크립트와 사이트 작업을 사용할 수 있도록 중요하지 않습니다. 자바 스크립트를 사용하지 않는 사람들은 사이트에 버그를 해킹하려는 사람들입니다. 올바르게 탐색 할 자격이 없습니다. 그들과 함께 당신의 노력을 낭비하지 마십시오. JavaScript가 없으면 웹은 안전하지 못합니다.

주의 할 점은 양식에 관한 것입니다. JavaScript의 필터를 절대 사용하지 마십시오. 항상 서버 측에서 다시 필터링하십시오. 항상!