先端思想.

5581 ワード
先端
1998年、NetscapeとIE 4がいかなる合意にも達しなかった時、一部の先天的な憂慮を抱いたWeb開発者はWeb Standards Project(Web標準プロジェクト、WaSPと略称)を構成し、JavaScriptのいくつかのでたらめな私有要素を解決するために、CSSを使用してウェブサイトの外観を定義することを推進した.彼女たちの重要な使命は「標準に従う」ことであり、ブラウザメーカーだけでなく、Web開発者に呼びかけている.
当初、WaSPとその支持者はCSSに専念していた.その原因を究明して、CSSは1門の比較的に新しい技術で、まだめちゃくちゃなものに汚染されていないで、更に歴史の1つの転換点になりやすくて、JavaScriptはこんなに幸運ではありませんて、あの時のJavaScript、プログラミングに関わらず、やはり人々のその考えに対して、すべて完全に障害がありません.これは、過去も現在も、一部の標準的なサポート者が「JavaScriptが障害だ」という観念を生んだ理由でもある.実は、JavaScriptとバリアフリーは調和して共存することができます.少し慎重であれば.

Unobtrusiveスクリプトプログラミング


2002年、Stuart LangridgeはUnobtrusiveスクリプトプログラミング(unobtrusive scripting,Stuart Langridgeの原文)を創造し、CSSに基づいて標準互換性のある新しい理論にJavaScriptを埋め込む初めての重要な試みである.
Unobtrusiveスクリプトには、次のすべての特徴があります.
  • の可用性、例えば、Webサイトに明確な可用性のメリットを与える.
  • バリアフリー、例えばJavaScriptが無効になった場合、ページは読み取り可能で理解可能であるべきであるが、いくつかの可用性を失うことは避けられない.
  • は容易に実現でき、古典的な例は、Web開発者がJavaScript呼び出しフック(hook)を導入し、追加するだけでスクリプトが機能することである.
  • は分離され、HTMLの隅々に散らばっているのではなく、自分の.jsファイルに属しています.

    • 理論的には、最初のJavaScriptが誕生した日からあるが、プログラマーがJavaScriptの能力を誇示する熱意に見落とされることが多い.可用性がなければどんなにクールでも構わない.
    他の3つはすべて新しいです.バリアフリーとJavaScriptは反発していると考えられています.容易な実現にはJavaScriptフックが必要であり、W 3 C DOMの降臨を可能にする.分離は、CSS革命を盗んだものだ.HTMLとCSSを分離する必要がある場合は、論理的にもJavaScriptを分離する必要があります.

    3つのレベル


    Webページには、次の3つの階層が含まれています.
  • HTML構造
  • CSS表現
  • JavaScript動作
    • HTML構造層はウェブページの最も重要な基礎である.HTMLタグはコンテンツの意味を与えます.CSS表現層は、HTMLの表示方法を定義します.JavaScriptの動作レイヤは、ページにインタラクションを追加します.
    いずれにしても、WebページにはHTML構造層が必要です.HTMLはなく、Webページはありません.CSSとJavaScriptはオプションで、古い、無名の、珍しいブラウザではCSSおよび/またはJavaScriptがサポートされていない可能性があります.この場合、この2つのレイヤまたはその1つは機能しません.結果は明らかで、いかなるウェブサイトも行為層(または表現層)の欠席の下で「生き残る」ことができるはずだ.つまり、ウェブサイトはJavaScriptに完全に依存することはできませんが、JavaScriptが機能しなくてもバリアフリーであることを保証します.

    分離の関係


    一般的には、各階層を個別に管理することが望ましい.最も基本的な、確保:
  • HTMLは構造的で、あまり複雑にしないでください.CSSやJavaScriptの下で意味を維持していません.
  • CSS表現層とJavaScript表現層はそれぞれ独自の.cssと.jsファイルに帰属する.

    • 分離するとメンテナンスが容易になります.分離したファイルをサイト全体のWebページに簡単に接続できます.例を挙げると、フォントを12 pxから0.8 emに変更する必要があります.CSSファイルを開いて編集するだけで、Webページの変更がすぐに有効になります.それ以外に、分離はHTML構造層やJavaScript動作層を修正する必要がなく、CSS表現層全体を修正するだけでウェブサイトを新しい服に着替えることができます.

    分離表現と構造


    表現と構造の分離の基本思想はHTML定義構造を確保することであり,構造のみを確保し,すべての表現を分離したCSSファイルに定義する.fontラベルや表現性のテーブルは許可されません!JavaScriptの本ではCSSとHTMLの分離を検討する余地はないようです.では、この分離がJavaScriptコードの作成方法に与える影響についてお話ししましょう.

    CSS変更


    JavaScriptでは、CSSを変更できます.たとえば、CSSで接続を赤に定義し、JavaScriptでCSSを制御して緑に定義できます.これは役に立つ場合があります.スタイルの変化は、エラー情報など、変化するHTMLの要素に注意することができます.CSS表現層を正しく分離していないと、CSSの変更が非常に困難になる.要素を変更するclassNameは、通常、最適なCSS変更方法である.次の例では、フォーム検証プログラムがユーザー入力エラーを発見した場合、フォームフィールドのclassを変更します.
    // obj is the form. fieldobj.className += ' errorMessage';// in CSSinput.errorMessage {    border: 1px solid #cc0000;}

    表現と構造を正しく分離してこそ、このような方法が機能します.class errorMessageは、CSSでスタイルの変更を実現するために定義する必要があります.逆に、最初から正しいCSS表現層から開始するしかありません(または、実行可能です).

    構造を修正するか表現するか


    JavaScriptは、実際にはWebサイトの表現を変更したり、HTMLドキュメントを変更したりすることができます.ユーザーは私たちが何を変えたのか気にしません.しかし、まだ違います.応答ユーザの動作を変更するフォームは、表現ではなく構造を変更する必要があります.関連するフォーム要素は、視覚的に非表示にするだけでなく、ドキュメント構造から削除する必要があります.1つのフォームがコミットされると、ブラウザはすべてのフォーム要素に名前/値ペアを作成し、サーバに送信します.CSSでのみ非表示の場合、これらのフィールドはサーバに必要なものではないかもしれませんが、フォームのコンポーネントです.これは理論的なものにすぎません.私に同意しなくてもいいです.

    分離動作と構造


    分離動作と構造は分かりやすい:JavaScriptコードをHTMLページに書き込まないでください.次の2つのステップを実行します.
  • すべてのJavaScript関数を分離された.jsファイルに定義し、必要なHTMLページを接続します.
  • は、すべてのイベント処理ハンドル(注:onmouseoverなどの行内のもの)を削除し、同じ.jsファイルに格納する.

    • ファイル内の関数の分離


    JavaScriptコードは、HTMLファイルではなく.jsファイルに属します.
    これは間違いです
     function doAllKindsOfNiftyThings() {     // JavaScript. code }

    xmlコード
      
  •  function doAllKindsOfNiftyThings()   

    •  {   
  •      // JavaScript code   

    •  }   
  •  script>  

    •  head>  
  •    

    •  

    My HTML pageh 1>[etc.]这是正确的. xmlコード head>   <body>   <h1>My HTML pageh1>   [etc.]       //離れたniftyに定義する.js中 function doAllKindsOfNiftyThings()    {        // JavaScript code    }   イベントハンドラハンドルの削除 第2のステップは、すべてのHTML内のJavaScript関数呼び出しを分離することである.我去js.实际上,99%的HTML内的JavaScriptコード是行内活动汉德尔.以下,汉德尔在HTML内,但应该属于HTML。 xmlコード <a href="home.html" onMouseOver="mOv('home')" onMouseOut="mOut('home')">Homea>   分離に定義すべきである.jsファイルから: <a href="home.html">Homea>   // in separate .js file    var nav = document.getElementById('navigation');    var navnavLinks = nav.getElementsByTagName('a');    for (var i=0;i<navLinks.length;i++)    {        navLinks[i].onmouseover = [code];        navLinks[i].onmouseout = [code];    }   xmlコード 该剧本处理id="navigation"的要素是,处理其中的所有的连接,之后给予连接活动处理汉德尔.javascript.: 似たようなJavascript.:有时会表示伪装程序. <a href="javascript.:doAllKindsOfNiftyThings()">Do Nifty!a>   この複雑で汚いコードの隠れた意味はonclick活动汉德尔である:使用者が接続することをクリックすると、doAllKindsofNiftyThings()相关数を呼び出す必要がある.因此,接续javascript.:删除了科尔,独立了。我们需要在js文件的onclick活动中交换。 xmlコード <a href="somepage.html" id="nifty">Do Nifty!a>   // in separate .js file    document.getElementById('nifty').onclick = doAllKindsOfNiftyThings;   従って、hrefについては、scriptのないものがアクセサリ可能であるように完全なurlを含む必要がある.这样的话,整体都是由JavaScript产生的,没有巴黎性.

    css背景色透明、文字不透明
    WeChat Explorer Cacheの問題