Web APIを把握し、一般的なページインタラクティブ機能を開発する(ステップ1)

9728 ワード

php httml 5 javascript アプリ

学習目標:

APIとWeb APIの概念を把握する

一般的なブラウザが提供するAPIの呼び出し方法を把握する

APIを介して一般的なページインタラクション機能

を開発できる

は、検索エンジンによって問題を解決することができる

.
Web API
APIのコンセプトAPI(Application Programming Interface、アプリケーションプログラミングインターフェース)は、ソースコードにアクセスしたり、内部の作業メカニズムの詳細を理解したりすることなく、アプリケーションと開発者がソフトウェアまたはハードウェアに基づいてインスタンスのセットにアクセスできる能力を提供するために予め定義された関数です.

どの開発言語にも独自のAPI

があります.

APIの特徴入出力(I/O)

APIの使用方法(console.log()

Web APIの概念
ブラウザが提供する一連のブラウザ機能とページ要素を操作するAPI(BOMとDOM)ここでのWeb APIは、ブラウザが提供するAPI(方法のセット)を特に指し、Web APIは後述の授業で他の意味を持つ.
一般的なブラウザが提供するAPIの呼び出し方法を把握する
MDN-Web API
JavaScriptの構成
ECMAScript-JavaScriptのコア
Javascriptの文法規範JavaScriptの核心を定義して、言語の基本的な文法とデータ型を説明して、ECMAScriptは1セットの標準で、1種の言語の標準を定義して具体的な実現と関係がありません
BOM-ブラウザオブジェクトモデル
一連の操作ブラウザ機能のAPIはBOMを通じてブラウザウィンドウを操作することができて、例えば:ポップアップボックス、ブラウザのジャンプを制御して、解像度を取得します
DOM-ドキュメントオブジェクトモデル
一連の操作ページ要素のAPIDOMはHTMLをドキュメントツリーと見なすことができ、DOMが提供するAPIを通じてツリー上のノードを操作することができる.
BOM
BOMの概念BOM(Browser Object Model)とは、ブラウザオブジェクトモデルを指し、ブラウザオブジェクトモデルはコンテンツとは独立したブラウザウィンドウとインタラクティブなオブジェクト構造を提供する.BOMは、ブラウザウィンドウを表すWindowオブジェクトがBOMの最上位オブジェクトであり、他のオブジェクトがそのオブジェクトのサブオブジェクトである複数のオブジェクトで構成されています.ブラウザのいくつかの操作では、ブラウザの更新、後退、前進、ブラウザにURLを入力するなど、BOMを使用してプログラミング処理を行うことができます.
BOMのトップオブジェクトwindow
Windowsはブラウザのトップクラスのオブジェクトで、windowの下の属性と方法を呼び出す時、windowの注意を省略することができます:windowの次の特殊な属性window.name
ダイアログ

alert()

prompt()

confirm()

ページ・ロード・イベント
onload

window.onload = function () {
  //          
  //            （    、    、CSS    ）  
}

onunload

window.onunload = function () {
  //           
}

タイマ
settimeout()とcleartimeout()は、指定したミリ秒数が到着した後に指定した関数を実行し、一度だけ実行します.

//        ，1000     ，        
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

//         
clearTimeout(timerId);

setInterval()とclearInterval()
所定の時間(ミリ秒単位)の周期で関数を呼び出すタイミング呼び出し関数

//        ，  1     
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

//         
clearInterval(timerId);

locationオブジェクト
locationオブジェクトはwindowオブジェクトの下の属性で、時にはwindowオブジェクトlocationを省略してブラウザのアドレスバーのURLを取得したり設定したりすることができます
URL
統合リソースロケータ(Uniform ResourceLocator,URL)

URLの構成scheme://host:port/path?query#fragmentscheme:通信プロトコル

   http,ftp,maito

host:ホスト

   (   )     (DNS)      IP   。

port:ポート番号

  ，  ，            ， http      80。

path:パス

     '/'        ，                   。

query:クエリー

  ，           ，      ， '&'    ，         '='    。  ：name=zs

fragment:情報セグメント

   ，  .

locationにはどのようなメンバーがいますか?

chromeのコンソールを使用して

を表示

MDNMDN

を調べる

メンバー

assign()/reload()/replace()

hash/host/hostname/search/href……

historyオブジェクト

back()

forward()

go()

navigatorオブジェクト

userAgent

ユーザーエージェントによってユーザーブラウザのタイプを判断できます

platform

platformによりブラウザが存在するシステムプラットフォームのタイプを判断することができる.
DOM
ドキュメントオブジェクトモデル(Document Object Model、略称DOM)は、W 3 C組織が推奨する拡張可能なフラグ言語を処理する標準的なプログラミングインターフェースである.Webページでは、ドキュメント内のオブジェクトを表す標準モデルをDOMと呼びます.Document Object Modelの歴史は1990年代後半にマイクロソフトとNetscapeの「ブラウザ大戦」にさかのぼることができ、双方はJavaScriptでJscriptと生死を決めるため、大規模なブラウザに強力な機能を与えた.マイクロソフトはウェブページの技術の上で多くの専属の事物に参加して、VBScript、ActiveX、およびマイクロソフトの自分のDHTMLフォーマットなどがあって、多くのウェブページがマイクロソフト以外のプラットフォームとブラウザを使って正常に表示することができません.DOMは当時作られた傑作だ.
DOMはドキュメントツリーモデルとも呼ばれる

ドキュメント:1つのページをドキュメント

と呼ぶことができます.

ノード:Webページのすべてのコンテンツは、ノード(ラベル、プロパティ、テキスト、コメントなど)

です.

要素:Webページのラベル

プロパティ:ラベルのプロパティ

DOMでよく行われる操作

取得要素

動的作成要素

要素を操作する(その属性を設定またはそのメソッドを呼び出す)

イベント

ページ要素の取得
idに基づいて要素を取得する

var div = document.getElementById('main');
console.log(div);

//          HTMLDivElement，        
// HTMLDivElement

ラベル名に基づいて要素を取得

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

nameに基づいて要素を取得*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

クラス名に基づいて要素を取得

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

セレクタによる要素の取得

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

総括把握

getElementById()
getElementsByTagName()

了解

getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()

≪イベント｜Events｜ldap≫
≪イベント｜Event｜ldap≫:トリガー応答メカニズムEventインタフェースは、マウスまたはキーボード・イベントなどのユーザーによって生成されたDOMで発生したイベントを表し、その他はAPIによって生成されます.
イベント3要素

イベントソース:イベントをトリガー(被)する要素

イベントタイプ:イベントのトリガ方式(マウスクリックやキーボードクリックなど)

イベントハンドラ:イベントトリガ後に実行するコード(関数形式)

イベントの基本的な使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('    box      ');  
};

属性アクション
非フォーム要素の属性
href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

innerHTMLとinnerText

var box = document.getElementById('box');
box.innerHTML = '           ';
console.log(box.innerHTML);
box.innerText = '            ';
console.log(box.innerText);

HTMLエスケープ文字''& > // greater than
スペース© ©
フォーム要素のプロパティ

value大部分のフォーム要素のコンテンツ取得(optionを除く)

typeは、inputタグのタイプ(入力ボックスやチェックボックスなど)

を取得することができる.

disabled無効属性

checkedチェックボックス選択属性

selectedドロップダウンメニュー選択属性

カスタム属性アクション

getAttribute()ラベル行内属性

を取得

setAttribute()ラベル行内属性

を設定する.

removeAttribute()ラベル行内属性

を除去する.

とelement.属性の違い:上記の3つの方法は、任意の行内属性を取得するために使用されます.

スタイルアクション

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

クラス名アクション

var box = document.getElementById('box');
box.className = 'clearfix';

要素を作成する3つの方法
document.write()

document.write('             
');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '      
';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

パフォーマンスの問題

innerHTMLメソッドは文字列を解析するため,ループ内で複数回使用することを避ける必要がある.

は、innerHTML

に再設定する文字列または配列によって置き換えることができる.

最適化後document.createElementのパフォーマンスは

に近い
ノードアクション

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

ノードレベル
親子の属性を重点的に話して、兄弟の属性は図を描いて説明します

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

childNodesとchildrenの違いに注意する.childNodesはサブノードを取得し、childrenはサブ要素nextSiblingとpreviousSiblingはノードを取得し、取得要素に対応する属性はnextElementSiblingとpreviousElementSiblingは要素

nextElementSibling previousElementSibling      ，IE9

を取得する.

ノード操作をまとめる方法

  appendChild()
  insertBefore()
  removeChild()
  replaceChild()

ノード階層、属性

  parentNode
  childNodes
  children
  nextSibling/previousSibling
  firstChild/lastChild

イベントの詳細
イベントの登録/削除の3つの方法

var box = document.getElementById('box');
box.onclick = function () {
  console.log('     ');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('     ');
}

イベントの3段階

キャプチャフェーズ

現在の目標フェーズ

発泡段階のイベントオブジェクト.eventPhaseプロパティは、イベントがトリガーされたときのステージ

を表示します.
イベント・オブジェクトのプロパティとメソッド

event.type取得イベントタイプ

clientX/clientYはすべてのブラウザでサポートされており、ウィンドウの場所は

です.

pageX/pageY IE 8以前はサポートされておらず、ページ位置

event.target || event.SrcElementトリガイベントを取得するための要素

event.preventDefault()デフォルト動作をキャンセル

イベントの伝播を阻止する方法

標準方式event.stopPropagation();

IE低バージョンevent.cancelBubble = true; 規格では廃棄済み

よく使用されるマウスとキーボードイベント

onmouseupマウスボタンを離すと

がトリガーされます.

onmousedownマウスボタン押下トリガ

onmousemoveマウス移動トリガ

onkeyupキーボードボタン押下トリガ

onkeydownキーボードボタン持ち上げトリガ

PHPプログラムを作成して文字列の中の中国語の文字の個数の実例の分かち合いを検査します

ワンライナーでSSL証明書のCSRを生成する