JavaScript プログラミング講座

基本的な組み込み機能

・	数値型について
・	数値を作成する
・	Number クラスのプロパティについて
・	Number クラスのメソッドについて
・	数値用のグローバル関数について
・	文字列から数値型に変換する

■文字列について（String）

・	文字列について
・	文字列を作成する
・	String クラスのプロパティについて
・	String クラスのメソッドについて
・	数値型から文字列に変換する
・	文字列リテラルのエスケープについて

■オブジェクトについて（Object）

・	Object クラスについて
・	オブジェクトを作成する
・	オブジェクトツリーを構築する
・	Object クラスのプロパティについて
・	Object クラスのメソッドについて
・	Object クラスのデータ管理について
・	オブジェクトを複製する
・	参照（リファレンスデータ）について

■配列について（Array）

・	Array クラスとは？
・	配列を作成する
・	多次元配列を作成する
・	Array クラスのプロパティについて
・	Array クラスのメソッドについて
・	Array クラスのデータ管理について

■関数について（Function）

・	Function クラスについて
・	関数を作成する
・	Function クラスのプロパティについて
・	Function クラスのメソッドについて
・	クロージャについて
・	コンストラクタ関数について
・	プロトタイプについて

■正規表現について（RegExp）

・	正規表現について
・	RegExp オブジェクトを作成する
・	RegExp クラスのプロパティについて
・	RegExp クラスのメソッドについて
・	正規表現の構文（パターン）について

入力デバイス関連

■キーボードの操作について

・	キーボードが押されたか調べる
・	キーボードが離されたか調べる
・	キーボードが押しっぱなしか調べる
・	キーコードの一覧表
・	キーボード操作を無効化する

■マウスの操作について

・	マウスカーソルの座標を調べる
・	マウスカーソルが移動したか調べる
・	マウスボタンが押されたか調べる
・	マウスボタンの押下状態を調べる
・	マウスのホイールが回転されたか調べる
・	コンテキストメニューが表示されるか調べる
・	マウスカーソルについて
・	マウスロックについて（HTML5 世代）
・	マウス操作を無効化する

■タッチスクリーン操作について

・	タッチイベントについて
・	タッチスクリーン入力を取得する
・	デフォルトのタッチ操作を無効化する

■ゲームパッド操作について

・	Gamepad API について
・	ゲームパッドの入力を取得する
・	ゲームパッドの接続状態を監視する

■DeviceOrientation Event について

・	DeviceOrientation Event について
・	加速度センサの情報について
・	地磁気センサの情報について
・	デバイスの加速度情報を取得する
・	デバイスの姿勢情報を取得する
・	デバイスの指す方角を取得する
・	デバイスの回転速度を取得する
・	地磁気センサの較正が必要になったか検出する

ブラウザ向けの機能

■ウィンドウについて（Window）

・	ウィンドウについて
・	ウィンドウのプロパティについて
・	ウィンドウを作成する
・	ウィンドウを閉じる
・	ウィンドウを取得する
・	ウィンドウの移動について
・	ウィンドウのサイズについて
・	ウィンドウの奥行きについて
・	ウィンドウのスクロールについて

■ドキュメントについて（HTMLDocument）

・	ドキュメントについて
・	ドキュメントのプロパティについて
・	現在のページのドメインを取得する
・	現在のページの URL アドレスを取得する
・	現在のページの読み込み状況を取得する
・	現在のページの最終更新日時を取得する
・	現在のページのタイトルを取得する
・	リファラ情報を取得する
・	ドキュメントのサイズについて
・	ドキュメントの互換モードについて

■ダイアログウィンドウを表示する

・	警告用のダイアログボックスを開く
・	確認ボタン付きのダイアログボックスを開く
・	入力欄付きのダイアログボックスを開く
・	ファイル選択ダイアログボックスを開く
・	モーダルダイアログウィンドウを開く
・	エレメントを中央にポップアップ表示する

■ナビゲーターについて（Navigator）

・	ナビゲーターについて
・	ナビゲーターのプロパティについて
・	ブラウザの種類を判別する
・	ブラウザのバージョンを取得する
・	ブラウザのプラットフォーム情報を取得する
・	ブラウザの言語情報を取得する
・	ユーザーエージェント情報を取得する
・	Cookie が利用可能か調べる
・	Java が利用可能か調べる
・	環境がオンライン状態であるか調べる

■スクリーンについて（Screen）

・	スクリーンについて
・	スクリーンのプロパティについて
・	描画に利用可能なサイズを取得する
・	モニタのサイズを取得する
・	モニタの色深度を取得する

■ロケーションについて（Location）

・	ロケーションについて
・	ロケーションのプロパティについて
・	現在のページの URL を取得する
・	現在のページをリロードする
・	URL を指定してページを遷移する

■ヒストリーについて（History）

・	ヒストリーについて
・	ヒストリーのプロパティについて
・	セッション履歴内の任意のページに移動する
・	新しいセッション履歴を作成する（HTML5世代）
・	現在のセッション履歴を上書きする（HTML5世代）
・	セッション履歴の進戻操作が発生したか調べる

■フォーカスについて

・	フォーカスについて
・	フォーカスを設定する
・	フォーカスの変化を監視する

タイマー関連

■日付/時間について

・	現在のローカルの日付/時間を取得する
・	経過した時間を調べる
・	デジタル時計を作成する

■タイマーについて

・	一定時間経過後に、任意の関数を実行する
・	一定の時間間隔で、任意の関数を実行する
・	アニメーション更新時に、任意の関数を実行する(HTML5 世代)

データ関連

■ArrayBuffer クラスについて

・	ArrayBuffer クラスとは？
・	ArrayBuffer オブジェクトを作成する
・	バイナリデータに入出力アクセスする
・	ArrayBuffer クラスのプロパティについて
・	ArrayBuffer クラスのメソッドについて
・	DataView クラスのプロパティについて
・	DataView クラスのメソッドについて

■型付き配列について（TypedArray）

・	TypedArray クラスとは？
・	TypedArray オブジェクトを作成する
・	TypedArray のサブクラスの一覧
・	TypedArray クラスのプロパティについて
・	TypedArray クラスのメソッドについて
・	エンディアンについて

■JSON について

・	JSON とは？
・	JSON のフォーマットについて
・	オブジェクトから JSON 文字列に変換する
・	JSON 文字列からオブジェクトに変換する

■Base64 について

・	Base64 とは？
・	Base64 のフォーマットについて
・	Base64 と「バイナリデータの文字列」の相互変換
・	Base64 と「x-user-defined 文字列」の相互変換
・	Base64 と「ArrayBuffer」の相互変換

■符号化について（Encoding API）

・	Encoding API について
・	「ArrayBuffer」から「文字列」に変換する
・	「文字列」から「ArrayBuffer」に変換する

■DOMParser について

・	DOMParser クラスについて
・	XMLSerializer クラスについて
・	DOM と「XML 文字列」の相互変換
・	DOM と「HTML 文字列」の相互変換

■DataTransfer クラスについて

・	DataTransfer クラスについて
・	データを格納する
・	データを取得する
・	データを除外する
・	許可エフェクトを設定する
・	ドラッグ時に画像を表示する

■FormData クラスについて

・	FormData クラスについて
・	FormData オブジェクトを作成する
・	FormData オブジェクトにデータを格納する
・	FormData オブジェクトを送信する

ECMAScript 6 関連

■Map クラスについて

・	Map クラスについて
・	Map オブジェクトを作成する
・	データを追加する
・	データを取得する
・	データを削除する

■Set クラスについて

・	Set クラスについて
・	Set オブジェクトを作成する
・	データを追加する
・	データを取得する
・	データを削除する

■Iterator について

・	Iterator について
・	Iterator を実装する
・	Iterator オブジェクトを取得する
・	Iterator を使ってデータを列挙する

■Generator について

・	Generator について
・	Generator 関数について
・	Generator オブジェクトについて

■Promise について

・	Promise について
・	実行を開始する
・	実行結果を取得する
・	Promise チェーンについて

■Symbol について

・	Symbol について
・	ローカルなシンボルについて
・	グローバルなシンボルについて
・	シンボルプロパティについて

開発関連

■開発に便利な JavaScript について

・	コンソールにメッセージを出力する
・	各ブラウザのコンソールを起動する
・	データの型を調べる
・	ブレークポイントを指定する

■開発者向けのテキストエディタについて

・	「Brackets」について
・	「Visual Studio Code」について

■Internet Explorer での動作について

・	JavaScript と互換モードの関係について
・	ドキュメントモードについて
・	イベントの互換性について

■ブラウザを使って通信内容を確認する

・	「Internet Explorer」を使用する
・	「Mozilla Firefox」を使用する
・	「Google Chrome」を使用する

基本的な DOM API

■ドキュメントオブジェクトモデル(DOM)について

・	ドキュメントオブジェクトモデル(DOM)とは？
・	任意のエレメントを取得する
・	DOM オブジェクトから親や子を取得する
・	DOM オブジェクトを動的に作成する
・	DOM オブジェクトをノードリストに登録する
・	DOM オブジェクトをノードリストから除外する
・	DOM オブジェクトの値にアクセスする
・	DOM オブジェクトの属性にアクセスする
・	DOM オブジェクトを評価する

■ノードについて（Node）

・	ノードについて
・	ノードのプロパティについて
・	ノードのメソッドについて

■エレメントについて（HTMLElement）

・	エレメントについて
・	エレメントのプロパティについて
・	エレメントの属性について
・	エレメントのスタイルについて
・	エレメントのスクロールについて
・	エレメントの移動について
・	エレメントの表示優先度（奥行き）について
・	エレメントのサイズについて
・	エレメントの透明度について
・	エレメントとの当たり判定について
・	エレメントのトランスフォームについて

■テキストノードについて（Text）

・	テキストノードについて
・	テキストノードを作成する
・	テキストノードの値を設定する
・	テキストノードを２つに分割する
・	連続するテキストノードを１つに統合する

■アトリビュートについて（Attr）

・	アトリビュートについて
・	アトリビュートを作成する
・	アトリビュートの属性値を設定する
・	アトリビュートを登録する

エレメント関連

■画像イメージについて（HTMLImageElement）

・	画像イメージについて
・	画像イメージを作成する
・	画像ファイルを読み込む
・	画像ファイルの読み込み状況を調べる
・	画像のサイズを取得する
・	画像のプロパティについて

■アンカーについて（HTMLAnchorElement）

・	アンカーについて
・	アンカーを作成する
・	リンク先の URL アドレスを設定する
・	ハイパーリンクを無効化する
・	ダウンロード用のリンクを設置する（HTML5 世代）
・	アンカーのプロパティについて

■インラインフレームについて（HTMLIFrameElement）

・	インラインフレームについて
・	インラインフレームを作成する
・	フレーム内にコンテンツを作成する
・	フレーム内にコンテンツを読み込む
・	フレーム内のコンテンツと相互アクセスする
・	サンドボックス制限について（HTML5世代）
・	インラインフレームのプロパティについて

■テーブル要素について（HTMLTableElement）

・	テーブル要素について
・	テーブル要素を作成する
・	テーブル要素を設定する
・	キャプションの設定について
・	ヘッダの設定について
・	ボディの設定について
・	フッタの設定について
・	行の設定について
・	列の設定について
・	セルの設定について
・	テーブルのソートについて

■オーディオについて（HTMLAudioElement）

・	オーディオについて
・	オーディオを作成する
・	サウンドファイルを読み込む
・	サウンドを再生する
・	サウンドを制御する

■ビデオについて（HTMLVideoElement）

・	ビデオについて
・	ビデオを作成する
・	動画ファイルを読み込む
・	動画を再生する
・	動画を制御する

フォームとコントロール関連

■フォームについて（HTMLFormElement）

・	フォームについて
・	フォームを作成する
・	フォームを設定する
・	フォームの送信について
・	フォームの機能について
・	フォーム内のコントロール要素について

■ラジオボタンについて

・	ラジオボタンについて
・	ラジオボタンを作成する
・	ラジオボタンを設定する
・	ラジオボタンを選択する
・	ラベルを設定する

■ファイル選択コントロールについて

・	ファイル選択コントロールについて
・	ファイル選択コントロールを作成する
・	ファイルが選択されたか調べる
・	ファイルの複数選択を有効にする（HTML5 世代）
・	選択可能なファイルの種類を制限する（HTML5 世代）

■テキストエリアについて（HTMLTextAreaElement）

・	テキストエリアについて
・	テキストエリアを作成する
・	テキストエリアを設定する
・	テキストを編集する
・	テキストを選択する

■セレクト要素について（HTMLSelectElement）

・	セレクト要素について
・	セレクト要素を作成する
・	セレクト要素を設定する
・	アイテムを登録する
・	アイテムを取得する
・	アイテムを選択する

描画関連

■キャンバスについて（HTMLCanvasElement）

・	キャンバスについて
・	キャンバスを作成する
・	キャンバスのサイズを設定する
・	キャンバスに描画する
・	画像ファイルを出力する
・	座標の相互変換について

■２Ｄ描画について（Canvas 2D Context）

・	Canvas 2D Context について
・	全体的な描画設定について
・	線の描画スタイルについて
・	面の描画スタイルについて
・	塗りの設定について
・	描画姿勢の設定について
・	描画した物をすべてクリアする
・	描画パスについて
・	サブパスを使って線を描画する
・	サブパスで囲んで面を描画する
・	図形を描画する
・	テキストを描画する
・	イメージを描画する

■ImageData について

・	ImageData について
・	ImageData オブジェクトを作成する
・	ImageData の内部データについて
・	ImageData オブジェクトにキャプチャする
・	ImageData オブジェクトを描画する

■ImageBitmap について

・	ImageBitmap について
・	ImageBitmap オブジェクトを作成する
・	ImageBitmap オブジェクトを描画する

■SVGMatrix について

・	SVGMatrix について
・	SVGMatrix オブジェクトを作成する
・	SVGMatrix の計算について
・	SVGMatrix を反映する

スタイルシート関連

■スタイルシートについて（CSSStyleSheet）

・	スタイルシートについて
・	スタイルシートを取得する
・	スタイルシートにルールを追加する
・	スタイルシートからルールを除外する
・	スタイルシートからルールを取得する
・	スタイルルールからセレクタを取得する
・	スタイルルールからスタイル宣言を設定する

■スタイル宣言について（CSSStyleDeclaration）

・	スタイル宣言について
・	スタイルを追加する
・	スタイルを取得する
・	スタイルを除去する
・	CSS 文字列を使ってスタイルを構築する

■セレクタについて（Selectors API）

・	セレクタについて
・	セレクタの書式について
・	エレメントを取得する
・	エレメントを評価する

■トランスフォームについて（CSS Transforms）

・	トランスフォームについて
・	トランスフォームの基点について
・	エレメントを移動する
・	エレメントを回転する
・	エレメントを拡大縮小する
・	エレメントに２Ｄ用の行列を適用する

イベント関連

■イベントについて（DOM Event Model）

・	イベントについて
・	Event クラスについて
・	EventTarget クラスについて
・	イベントの通知を受け取る
・	イベントを発行する
・	コールバック関数にデータを渡す

■アタッチイベントについて（Legacy Event）

・	アタッチイベントについて
・	EventObj クラスについて
・	イベント関連のメソッドについて
・	イベントの通知を受け取る
・	イベントを発行する

Ajax について

■XMLHttpRequest について

・	XMLHttpRequest とは？
・	基本的な使い方について
・	XMLHttpRequest の機能一覧
・	JavaScript 側のデータ送信処理について
・	JavaScript 側のデータ受信処理について
・	CGI 側のデータ送受信処理について
・	クロスサイト通信について

■ファイルをアップロードする

・	静的なアップロードについて（フォーム要素のみ）
・	動的なアップロードについて（フォーム要素 + JS）
・	HTML5 世代のアップロードについて（XHR + FormData）
・	サーバー側の処理について

■リソースシェアリングについて（CORS）

・	クロスオリジンリソースシェアリングについて
・	アクセスコントロールについて

HTML5 世代の API について

■ウェブストレージについて（Web Storage）

・	ウェブストレージとは？
・	ストレージにデータを保存する
・	ストレージからデータを取得する
・	ストレージからデータを削除する
・	ストレージへのアクセスを監視する

■アプリケーションキャッシュについて

・	アプリケーションキャッシュとは？
・	マニフェストファイルについて
・	サーバーのリソースを更新する
・	ローカルのキャッシュを更新する

■ジオロケーションについて

・	Geolocation クラスについて
・	位置情報を取得する

■フルスクリーンについて

・	フルスクリーンについて
・	フルスクリーンを開始する
・	フルスクリーンを終了する

■ポインタロックについて（Pointer Lock）

・	ポインタロックについて
・	ポインタロックを開始する
・	ポインタロックを終了する
・	マウスの移動量を取得する

■ドラッグアンドドロップについて

・	ドラッグアンドドロップについて
・	デフォルトのドラッグを無効化する
・	デフォルトのドロップを無効化する
・	データのドラッグを開始する
・	ドロップでデータを受け取る
・	DragEvent について
・	要素のドラッグ移動について

■Clipboard API について

・	クリップボードについて
・	クリップボードにデータを格納する
・	クリップボードからデータを取り出す
・	ClipboardEvent について

■ウェブパフォーマンスについて

・	ウェブパフォーマンスについて
・	高分解能タイマーについて
・	パフォーマンスタイミングについて

■メッセージ通信について（Web Messaging）

・	Web Messaging について
・	基本的なメッセージングについて
・	チャンネルメッセージングについて

■ワーカーについて（Web Workers）

・	Web Workers について
・	Worker を開始する
・	Worker を終了する
・	Worker の機能について
・	Worker のグローバルスコープについて
・	Worker のメッセージングについて
・	SharedWorker のメッセージングについて
・	チャンネルメッセージングについて

■ページの可視性について（Page Visibility）

・	ページの可視性について
・	ページの可視状態を取得する
・	ページの可視状態の変化を監視する

■Battery Status API について

・	Battery Status API について
・	BatteryManager について

■Vibration API について

・	Vibration API について
・	デバイスの振動を制御する

File API について

■Blob と File クラスについて

・	Blob と File クラスについて
・	Blob オブジェクトを作成する
・	File オブジェクトを作成する
・	File オブジェクトを取得する
・	File クラスのプロパティについて
・	File クラスのメソッドについて
・	大容量のデータを制御する

■FileReader クラスについて

・	FileReader クラスについて
・	FileReader クラスのプロパティについて
・	読み込みを開始する
・	読み込み中の進捗状況を取得する
・	読み込み完了後に結果を得る
・	読み込み処理を中断する

■Blob URL Scheme について

・	Blob URL Scheme とは？
・	Blob URL Scheme を生成する
・	Blob URL Scheme を破棄する

■Data URI Scheme について

・	Data URI Scheme とは？
・	Data URI Scheme のフォーマットについて
・	ローカルファイルから Data URI Scheme を生成する
・	外部ファイルから Data URI Scheme を生成する
・	任意のバイナリのダウンロードを開始する

Web Components について

■Shadow DOM について

・	Shadow DOM について
・	ShadowRoot を作成する
・	ShadowRoot 内のコンテンツについて
・	ShadowRoot の機能について
・	Element の追加機能について
・	<CONTENT> 要素について
・	<SHADOW> 要素について

■カスタム要素について

・	カスタム要素について
・	カスタム要素を登録する
・	カスタム要素を生成する
・	ライフサイクルコールバックについて

このページについて

■ JavaScript の動作環境について

以下の主要ブラウザで動作確認しています。少しでも古いブラウザだと動作しない可能性が考えられますが、特に言及しません。常に最新のブラウザを使用する事を必須とします。

・	Internet Explorer 8.0.7600 (Windows XP 32bit)
・	Internet Explorer 10.0.9200 (Windows 7 64bit)
・	Firefox 26.0 (Windows 7 64bit)
・	Google Chrome 32.0.1700.76 m (Windows 7 64bit)
・	Opera(Presto 版) 12.16 (Windows 7 64bit)
・	Opera 18.0 (Windows 7 64bit)
・	Safari 5.1.7 (Windows 7 64bit)

Internet Explorer 9 以下に対応する場合、互換モードに注意して下さい。詳しくはこちら。

■注意点

・	間違いや、より最適なプログラムがあるかも知れません。
・	このサイトに関わる事で、如何なる問題、損害が発生しても、hakuhinは一切責任を負いません。100%利用者の自己責任とします。

TOP に戻る