このページでは、入門者向けにJavascriptの基本文法やサンプルプログラムを解説しています。
【はじめに】Javascriptとは？環境構築
JavaScriptとは、プログラミング言語の1つです。
主にウェブブラウザに実装され、動的なWebページの作成や高ユーザインタフェースの作成によく利用されています。
最近は、ES2015(ES6)と呼ばれる新しいJavascriptも登場しています。
| – | 項目 |
|---|---|
| 作成方法 | ■プログラムの作成 ■理想的なプログラム |
| 記述場所 | ■headerタグ内 ■bodyタグ内 ■inputタグ内 ■リンク ■外部ファイル |
| 実行 | ■ページ読込時に実行 ■入力欄変更時に実行 |
| 基本 | ■コメント文 ■アラート画面 ■アラート画面で改行 ■alertでエラー特定 |
| 開発環境 | ■Brackets ■VSCode |
| 処理タイミング | ■ページ読込前・完了時 |
【基礎】変数・配列・演算子・文字列処理
変数・配列・演算子・文字列処理の基本的な使い方について整理しています。
| – | 変数編 |
|---|---|
| 説明 | ■変数・定数とは |
| 変数 | ■数値 ■文字列 ■定数 |
| – | 演算子編 |
|---|---|
| 四則演算 | ■足し算 ■引き算 ■掛け算 ■割り算 ■余り |
| 演算子 | ■算術 ■比較 ■複合代入 ■増分減分 ■論理 ■条件 |
| 端数処理 | ■四捨五入 |
| – | 配列編 |
|---|---|
| 配列 | ■配列とは ■配列の宣言・初期化・代入 ■配列(数値) ■配列(文字列) |
| 多次元配列 | ■2次元配列 |
| 連想配列 | ■連想配列 ■初期化(for文) |
| 配列操作 | ■配列の長さ(要素数) ■配列の判定 ■文字列に変換■ ■文字列に変換■ ■配列のpop操作 ■配列のpush操作 ■順序反転 ■先頭要素削除 ■先頭要素追加 |
| ソート | ■文字列順ソート ■数値順ソート ■アルファベット順 ■平仮名・カタカナ順ソート |
| 抽出 | ■指定範囲の要素抽出 |
| – | 文字列処理編 |
|---|---|
| 基本 | ■エスケープ文字\ ■文字列連結 ■文字列分割 ■文字列→数値 ■数値→文字列 |
| 文字装飾 | ■文字色 ■文字サイズ ■文字大 ■文字小 ■太文字 ■等倍フォント ■斜体 ■上付き文字 ■下付き文字 ■取り消し線 ■リンク追加 |
| 文字抽出 | ■1文字 ■任意の文字数 ■範囲指定 ■文字数取得 |
| 検索 | ■部分一致 |
| 削除 | ■部分削除 |
【構造化プログラミング】選択・反復構造、関数、オブジェクト指向
| – | 構造化プログラミング編 |
|---|---|
| 概説 | ■構造化プログラミングとは |
| 選択構造 | ■if文 ■else if文 ■switch文 ■switch + break文 |
| 反復構造 | ■for文 ■while文 ■do while文： |
| – | 関数編 |
|---|---|
| 関数 | ■関数とは ■ローカル変数 ■グローバル変数 |
| ユーザ関数 | ■ユーザ関数とは ■ユーザ関数の引数 ■ユーザ関数の戻り値 |
| ライブラリ | ■ライブラリ関数 |
| – | オブジェクト指向編 |
|---|---|
| 用語 | ■オブジェクト指向 ■利点欠点 ■クラス・インスタンス ■メソッド ■クラス・インスタンス変数 |
| クラス・インスタンス | ■クラスの定義 ■インスタンスの生成 |
| インスタンス変数 | ■生成 ■値取得 ■代入 ■追加 ■値を渡す（初期化） |
| メソッド | ■メソッド定義 ■メソッド定義(プロトタイプ) |
| まとめ | ■JavaScriptでオブジェクト指向プログラミング： |
【システム】DOM・ウィンドウ操作・ファイル処理
| – | 出力フォーム編 |
|---|---|
| HTML | ■出力 ■文字挿入 ■文章・タグ挿入 ■スクリプト挿入・実行 |
| 表の作成 | ■配列を表に変換 |
| – | 入力フォーム編 |
|---|---|
| 入力 | ■値のセット ■値の取得 |
| 選択リスト | 値取得 ■項目セット ■変更時の処理 ■optionの値更新 ■optionの選択で別のoptionを変更 |
| 応用 | ■日付選択フォームの作成 |
| – | ウィンドウ操作編 |
|---|---|
| 基本 | ■確認画面 ■入力画面 ■指定したURLに飛ぶ ■ページ更新 ■前ページに戻る ■先ページに進む |
| URLを別窓表示 | ■標準 ■サイズ位置指定 ■各種バー表示設定 ■画面中央に表示 |
| – | ファイル処理編 |
|---|---|
| CSV | ■読込(FileAPI) ■読込(Ajax) ■読込データ転置 ■部分抽出 |
| – | ローカルストレージ編 |
|---|---|
| 基礎 | ■ローカルストレージの使い方 ■配列をローカルストレージに保存 |
| 応用 | ■ローカルストレージのデータを表に出力 |
| – | IndexDB編（Web Database） |
|---|---|
| 基礎 | ■DBの新規作成・接続 ■データベースの削除 ■オブジェクトストア(テーブル)の作成 ■データの挿入・取得 |
| – | システム関連編 |
|---|---|
| 時刻 | ■現在日付 ■生年月日→年齢 ■和暦→西暦 ■西暦→和暦 ■西暦⇔和暦 |
| 日付 | ■日付フォームの値を取得 ■日付から曜日を取得 |
| – | Webアプリ編 |
|---|---|
| 早見表 | ■西暦和暦人生暦 |
【外部ライブラリ】ゲーム、スマホアプリ、数値計算
| – | 外部ライブラリ |
|---|---|
| JQuery | ■サイドバー追尾 |
| JQuery UI | ■表の入れ替え |
| Webアプリ | ■Vue.js入門 |
| グラフィックス | ■Chartjs(グラフ) |
| アプリ | ■Cordova編(Androidアプリ) ■Monocaクラウド編(Androidアプリ) ■Cordova編(Windowsアプリ) |
| – | 応用・その他 |
|---|---|
| 応用編 | ■ES2015(ES6) 入門 ■数値計算処理 ■ゲーム制作 ■HTML5 ■画像処理・編集 |
| 記法 | ■JSDocコメント |
| 参考文献 | ■LiveWeave ■GitHub ■Javascript入門 ■Javascript入門 ajaxtower ■JavaScritpで数値計算 ■愚作の箱 ■Subterranean Flower blog |