スクリプト: async, defer
最近の web サイトでは、スクリプトは HTML よりも “重い” ことがしばしばです: ダウンロードサイズはより大きく、処理時間も長くなります。 ブラウザが HTML をロードし、<script>...</script> タグに遭遇すると、DOM の構築を続けることはできません。すぐにスクリプトを実行する必要があります。外部スクリプト <script src="..."></script> についても同じです: ブラウザはスクリプトをダウンロードし、それを実行するまで待つ必要があり、その後にページの残り部分の処理をすることになります。 これは2つの重要な問題につながります: スクリプトは、それ以降の DOM要素は認識することができないため、ハンドラーを追加したりすることはできません。 ページの先頭に重いスクリプトがあると、“ページをブロック” します。利用者はそれがダウンロードされ実行
クリックジャッキング
“クリックジャッキング” 攻撃は、訪問者の代わりに、 悪意のあるページが “被害を受けたサイト” 上でクリックすることを可能とするものです。 Twitter, Facebook, Paypal やその他を含む多くのサイトはこの方法でハッキングされました。もちろん、今は対処済みです。 考え方この考え方はとても単純です。 これは、Facebookで行われたクリックジャッキングです: 訪問者が悪意のあるページに誘い出されます。方法はここでは関係ありません。 そのページは無害に見えるリンクを持っています(“今すぐお金持ちになる” や “ここをクリックしてください、とても面白いよ” など)。 そのリンクの上に、例えば “いいね” ボタンがそのリンクの真上にくるように、悪意のあるページが facebook.com の src を利用した透明な <iframe> を配置します。通常これは z-index
Fetch: ダウンロードの進行状況
fetch はダウンロードの進行状況を追跡することができます。が、アップロードの進行状況の追跡はできません。 注意してください: 現在アップロードの進行状況を取得する方法はありません。それをするには、XMLHttpRequest を使用してください。 ダウンロードの進行状況を追跡するには、response.body プロパティを使用します。これは “読み取り可能なストリーム” です。これはチャンクごとに本文を提供する特別なオブジェクトなので、その時点でどのくらい利用できるのかを確認することができます。 これは、レスポンスを読み込むのにそれを使ったコードの概略を説明したものです。: // response.json() などの他のメソッドの代わり const reader = response.body.getReader(); // 本文のダウンロードは無限ループ while(true)
再開可能なファイルアップロード
fetch メソッドを使用すると、とても簡単にファイルをアップロードすることができます。 接続が切れた後、アップロードを再開するにはどうすればよいでしょう？そのための組み込みのオプションはありません。が、ここではそれを実装するためのヒントがあります。 再開可能なアップロードには、アップロードの進行状況の表示が一緒に必要になります。大きなファイルが期待されるからです(再開が必要かもしれないほどのサイズ)。したがって、 fetch ではアップロードの進行状況を追跡できないため、XMLHttpRequestを使います。 あまり役に立たない progress イベントアップロードを再開するには、接続が失われるまでにどれだけアップロードされたかを知る必要があります。 アップロードの進行状況を追跡する xhr.upload.onprogress があります。 ただ、残念ながらここでは役に立ちません。こ
File と FileReader
File オブジェクトは Blob を継承しており、ファイルシステムに関連した機能が拡張されています。 File の入手方法は2つあります。 1つ目は、Blob に似たコンストラクタを用いる方法です: fileParts – Blob 同様、Blob/BufferSource/文字列値 の配列です fileName – ファイル名(文字列)です options – オプションのオブジェクトです: lastModified – 最後に変更された日付のタイムスタンプです(整数値)。 2つ目は、<input type="file"> やドラッグドロップ、あるいは他のブラウザインタフェースを使用して、ファイルを取得する方法です(こちらの方が多いです)。 例: <input type="file" onchange="showFile(this)"> <script> function showFi
Cookies(クッキー), document.cookie
Cookie はブラウザに直接格納される小さな文字列データです。これらは JavaScript の一部ではなく、RFC 6265 仕様で定義されている HTML プロトコル の一部です。 多くの場合、Cookieは Web サーバによって設定されます。 Cookie の最も広く使われている用途の1つは認証です: サインインすると、サーバは Cookie に “セッションID” をセットするために、応答に Set-Cookie HTTP ヘッダを使用します。 ブラウザは Cookie を格納します。 次回、同じドメインへのリクエストが行われるとき、ブラウザは Cookie HTTPヘッダを使用してネット上に送信します。 そのため、サーバは誰がリクエストを行ったのかを知ることができます。 ブラウザは Cookie のための特別なアクセサ document.cookie を提供します。 Cook
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
ArrayBuffer, binary arrays
Web 開発では、ファイル(作成、更新、ダウンロード)を処理するときにバイナリデータに出くわします。その他の典型的なユースケースは画像処理です。 これらはすべて JavaScript で可能です。また、バイナリ操作も高性能です。 ですが、多くのクラスが存在するため少し混乱しやすいです。いくつか例を挙げます: ArrayBuffer, Uint8Array, DataView, Blob, File, etc. JavaScript でのバイナリデータは、他の言語と比べて非標準的な方法で実装されています。しかし、一度整理できれば、すべてがとても簡単になります。 基本となるバイナリオブジェクトは ArrayBuffer です。これは固定長の連続したメモリ領域への参照です。 次のようにして生成できます:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blob