サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
javascript.keicode.com
JavaScript の File API を使うと、選択したファイルの内容を読み込むことができます。 ここでは、File API の基本的な利用方法を説明します。 それでは、さっそく File API を使い方を見てみましょう。 JavaScript でファイルを読み込む概要 input 要素でファイルを選択する HTML では input 要素の type 属性に file を設定すると、ファイルを選択することができます。 <input type="file"> 複数のファイル選択を許可する場合は、multiple 属性を設定します。 <input type="file" multiple> ユーザーがファイルの選択操作をした後には、change イベントが発生します。 input 要素の change イベントを処理する change イベントを捕えるには、まず次のように oncha
JavaScript でバイナリデータを扱う方法 JavaScript でバイナリデータを扱うときには ArrayBuffer を使うのが便利です。 ArrayBuffer は固定長のバイナリデータバッファを表します。 他の言語で見かけるような byte[] というような、バイト列が欲しい場合に、 JavaScript では ArrayBuffer を使うというわけです。 ArrayBuffer はバイト列的だ、といっても、ArrayBuffer ではバイト列へのインデックスアクセスは許可されていません。 つまりバッファのインデックス 1 のバイトに 12 と書き込む、といった操作はできません。 その代わり型付きの配列オブジェクトや DataView を使って、その中のバイナリデータにアクセスしないといけません。 ちなみに次のように、無理やり次のように配列のインデックスアクセスみたいなこと
FormData とは? FormData を使うと Web サイト上のフォームの内容を簡単にキャプチャできます。 キャプチャした内容はキー・バリューのペアとして (要はディクショナリとして) 利用することができます。 append() などのメソッドも用意されていて、FormData オブジェクトの内容を編集することも可能です。 また、必ずしもページの DOM ツリー内に form 要素を作って、それをキャプチャするというステップを踏む必要はありません。 XMLHttpRequest や Fetch API を使って、JavaScript から非同期的にデータをサブミットしたいときなどは、単に FormData オブジェクトを作成してその中にデータを詰め込んでサブミットすれば良いです。 JSON などでデータ送信する場合と違って、FormData オブジェクトに詰め込んだ内容はマルチパー
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
CORS とは? まずは、「同一生成元ポリシー」とは? CORS というのは、「同一生成元ポリシー (Same-Origin Policy)」というポリシーによって設けられた制限を緩めるものです。 ですから、CORS を理解するにはまずは、「同一生成元ポリシー」というのがどういうものか知る必要があります。 同一生成元ポリシーというのは、すごく簡単に言うと 「JavaScript で自由にやりとりできるところは、その JavaScript をとってきたところと同一の場所だけに制限する」 ということです。 同一生成元かどうか判断する時には、ホスト名、スキーム、ポート番号がチェックされます。これらが同じ場合、同一生成元へのアクセスとみなされます。 この制限があるために、あるサーバーから JavaScript をダウンロードし、そのスクリプトから全く別のサーバーにアクセスしてそこから情報を取得する
まず少し、 TypeScript を使ってみましょう。 次の内容を foo.ts として保存します。拡張子 .ts は TypeScript で使われる拡張子です。 class Person { name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } sayHello(){ return `My name is ${this.name}. I'm ${this.age} years old.`; } } let p = new Person('Mike', 25); let s = p.sayHello(); document.getElementById('div1').innerHTML = s; ざっと上のコードの説明 ここでは cla
JavaScript を利用してアプリケーションを開発する人の恐らく大部分の方は、Web アプリケーションを開発するのが主な目的と思います。 さらに、「JavaScript を Web アプリケーションの開発に使う」と言う場合、ほとんどの場合は、クライアントサイドスクリプトのためであるのが現状です。 ですから、「JavaScript の実行環境はブラウザである」 と考えてしまってよい場合がほとんどでしょう。 ここではあえて、JavaScript はブラウザ上で走るだけではありませんよ、ということの説明のため、いくつか JavaScript のインタープリター・実行環境を紹介します。 Windows Script Host Windows には Windows Script Host (WSH) というモジュールがあり、これによって VBScript や JavaScript を実行すること
ここでは ES5 以前の JavaScript における、オブジェクト指向プログラミングについて説明します。 内容は ES6 以降も有効であり、依然として多くのコードで使われているので、知っておいた方が良いことではあります。 しかし、新しいコードには class キーワードによるクラス定義の方が良いかもしれません。 classキーワードを用いたクラス定義については、「JavaScript のクラス定義」をみてください。 コンストラクタはオブジェクトを作成して初期化する コンストラクタは、オブジェクトを作成し、初期化するための関数オブジェクトです。 例えば、Person クラスのコンストラクタが、名前 name と 年齢age の二つの値を受け取るなら、次のようにコンストラクタを定義できます。 function Person(name, age) { this.name = name; th
プロトタイプとは? ここでは JavaScript のプロトタイプ (prototype)というものについて説明します。 プロトタイプは、あるオブジェクトの機能を継承したり、同じクラスのオブジェクト間でプロパティを共有することを可能にするなど、 とても大切な役割を果たしています。 「プロトタイプ」というのは「クラス定義」のようなものです。これから作成されるオブジェクトに、どのようなメソッドを持たせるか決めることができます。 デフォルトの Prototype オブジェクト コンストラクタが作成された時に、プロトタイプ・オブジェクトも作成されます。そして、コンストラクタの prototype プロパティにセットされます。 コンストラクタにセットされたプロトタイプオブジェクトは、同じコンストラクタから作成されるオブジェクト全て共通に参照されます。 コンストラクタが異なれば、異なるプロトタイプオブ
JavaScript のソースコードはテキストエディタで書けます。 Windows を利用しているなら "メモ帳" などでも十分、JavaSript のソースコードを記述することができます。 しかし、便利な統合開発環境を使いこなし、効率よくプログラミングできるに越したことはありません。 ここではいくつか JavaScript の開発で使える開発環境を紹介します。 Eclipse での JavaScript サポート Eclipse では JavaScript をサポートするためのプラグインが開発されています。 最も代表的なプラグインのひとつとして WTP (Web Tools Platform) のサブプロジェクトの JSDT (JavaScript Development Tools) があげられます。 JSDT を利用すると JavaScript プロジェクト、JavaScript パ
JavaScript の基礎から発展まで JavaScript は動的なウェブサイトを構築するために、ブラウザにロードして実行する言語として発展してきました。 最近は JavaScript の使用用途は以前と比べて格段に増えています。 Node.js の登場でサーバー側のスクリプティングにも広く使用されるようになりました。また、 MongoDB などの NoSQL データベースでは JSON と同様のフォーマットのデータをそのまま格納することができます。 さらに Electron を用いることで、JavaScript を用いたデスクトップアプリケーション開発も広く行われるようになりました。例えば Visual Studio Code や Postman などのツールも JavaScript を利用して開発されています。 サーバー側で利用する JavaScript については、「Node.j
ここでは JavaScript によるプログラミングを始めるために必要な、開発環境の準備について説明します。 JavaScriptとは? そもそも JavaScript とは何でしょうか? ECMAScript などという人もいますが、それはいったい何なのでしょうか。 JavaScript を実行する JavaScript の実行環境として、WSH や JSDB といったブラウザ以外のスクリプティングシェルを紹介します。 各種開発環境 JavaScript のソースコードは通常テキストファイルで記述されますので、メモ帳等でも開発可能です。 しかしながら、やはり JavaScript の開発に特化したツール、開発環境等があればより効率的に開発作業を行うことが可能です。 ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞ
このページを最初にブックマークしてみませんか?
『JavaScript 入門』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く