このページでは、入門者向けに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 | ■表の入れ替え |
Vue.js入門 | Vue.jsでWebアプリを作成します。 |
Chartjs(グラフ) | Chartjsでグラフを作成します。 |
Cordova | Cordovaでモバイルアプリを作成します。 |
IPアドレス計算 | IPアドレス、サブネットマスク、CIDR、ネットワークアドレスなどの計算を行います。 |
– | 応用・その他 |
---|---|
応用編 | ■ES2015(ES6) 入門 ■数値計算処理 ■ゲーム制作 ■HTML5 ■画像処理・編集 |
記法 | ■JSDocコメント |
参考文献 | ■LiveWeave ■GitHub ■Javascript入門 ■Javascript入門 ajaxtower ■JavaScritpで数値計算 ■愚作の箱 ■Subterranean Flower blog |
コメント