Javascript入門 サンプル集

このページでは、入門者向けにJavascriptの基本文法やサンプルプログラムを解説しています。

Javascriptとは

JavaScriptとは、プログラミング言語の1つです。
主にウェブブラウザに実装され、動的なWebページの作成や高ユーザインタフェースの作成によく利用されています。
最近は、ES2015(ES6)と呼ばれる新しいJavascriptも登場しています。

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の値更新
ウィンドウ操作編
基本 確認画面, 入力画面, 指定したURLに飛ぶ, ページ更新, 前ページに戻る, 先ページに進む
URLを別窓表示 標準, サイズ位置指定, 各種バー表示設定, 画面中央に表示
ファイル処理編
CSV 読込(FileAPI), 読込(Ajax), 読込データ転置, 部分抽出
ローカルストレージ編
基礎 ローカルストレージの使い方配列をローカルストレージに保存
応用 ローカルストレージのデータを表に出力
IndexDB編(Web Database)
基礎 DBの新規作成・接続データベースの削除オブジェクトストア(テーブル)の作成データの挿入・取得
システム関連編
時刻 現在日付, 生年月日→年齢, 和暦→西暦, 西暦→和暦, 西暦⇔和暦
Webアプリ編
早見表 西暦和暦人生暦

外部ライブラリ等(ゲーム、スマホアプリ、数値計算)

JQuery編
JQuery サイドバー追尾
JQuery UI 表の入れ替え
グラフィックス
グラフ Chartjs
アプリ制作
Androidアプリ制作 Cordova編, Monocaクラウド編
Winodwsアプリ制作 Cordova編
応用・その他
応用編 ES2015(ES6) 入門, 数値計算処理, ゲーム制作, HTML5, 画像処理・編集
参考文献 LiveWeave, GitHub, Javascript入門, Javascript入門 ajaxtower, JavaScritpで数値計算, 愚作の箱, Subterranean Flower blog
関連記事