WebブラウザのJavaScript---クライアントJavaScript

5747 ワード

クライアントJavaScript
Webブラウザでは、静的な情報が表示されるページを文書といいます.他のWebページは、文書に対してWebアプリケーションとして利用できる.これらのページは新しい情報を動的に読み込むことができますので、よりグラフィカルに見えます.そして彼らはオフライン操作を行い、データベースを現地に保存することができます.また、いくつかのWebページは、ドキュメントとアプリケーションの間にあり、両者の特性を組み合わせています.これはWebブラウザでWebページをどう表示するかということです.
Windowオブジェクトは、すべてのクライアントJavaScript特性とAPIの主なアクセスポイントであり、Webブラウザのウィンドウまたはフォームを表しており、識別子windowでそれを参照することができる.
Windowオブジェクトは、Locationオブジェクトのlocation属性、Dcumentオブジェクトのdocument属性、ポップアップダイアログのalert()メソッド、およびsetTimeout()メソッドを参照する属性を定義しています.
一例:内容を表示する簡単なプログラム

<html>
<head>
<title>revealtitle>
<style>
/*   css   */
/*class="reveal"           */
.reveal * {display: none;}
/*  class="handle"   */
.reveal *.handle {display: block;}
style>
<script>
//          onload      
window.onload = function() {
    //     class  reveal     
    var elements = document.getElementsByClassName("reveal");
    //          
    for (var i = 0; i < elements.length; i++) {
        var elt = elements[i];
        //       handle  
        var title = elt.getElementsByClassName("handle")[0];
        //         ,       
        title.onclick = function() {
            if (elt.className == "reveal") {
                elt.className = "revealed";
            } else if (elt.className == "revealed") {
                elt.className = "reveal";
            }
        }
    }
}
script>
head>
<body>
<div class="reveal">
<h1 class="handle">Click here to reveal hidden texth1>
<p>This paragraph is hidden. It appears when you click on the title.p>
div>
body>
html>
Web文書のJavaScript
JavaScriptプログラムは、DockmentオブジェクトとElementオブジェクトを介してドキュメントの内容を巡回して管理することができます.CSSスタイルとクラスを操作して、ドキュメントの内容の表示を変更できます.また、適切なイベントハンドラを登録することにより、文書要素の挙動を定義することができる.内容、表現と行為の組み合わせは、動的HTMLまたはDTMLといいます.
ウェブ文書ではJavaScriptを少量使うべきです.JavaScriptの本当の役割はユーザーの閲覧体験を強化し、情報の取得と伝達をより容易にするためです.
WebアプリケーションのJavaScript
Webドキュメントで使用されるJavaScript DTMLの特性は、Webアプリケーションでも使用されます.Webアプリケーションにとっては、コンテンツ、プレゼンテーション、およびAPIの操作以外に、Webブラウザ環境が提供するより基本的なサービスにも依存しています.
Webブラウザを簡単なオペレーティングシステムとして理解することができ、このようにWebアプリケーションは、JavaScriptを用いてより多くのブラウザで提供されるサービス(例えば、ネットワーク、画像、データストア)のWebページにアクセスすると定義することができる.
高級サービスの中で一番有名なのはXMLttpRequestオブジェクトで、HTTPにプログラミングを要求してネットワークを有効にすることができます.Webアプリケーションは、このサービスを利用して、ページを再読み込みすることなくサーバから新しい情報を取得する.このようなWebアプリケーションは、一般にAjaxアプリケーションと呼ばれる.
HTMLにJavaScriptを埋め込む
HTMLドキュメントにクライアントJavaScriptコードを埋め込む方法は4つあります.
  • インラインは、とラベルペアの に されている.
  • は、タグのsrc により された ファイルに されている.
  • はHTMLイベントハンドラにおいて、このイベントハンドラはonclickまたはonmouseoverのようなHTML によって されている.
  • は つのURLにおいて、このURLは なjavascript:プロトコルを する.
  • は「unobtrusive JavaScript」という がありますが、 (HTML)と (JavaScriptコード)はできるだけ しておくべきです.ですから、 おすすめの り は です.