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 UI 表の入れ替え
Webアプリ Vue.js入門
グラフィックス Chartjs(グラフ)
アプリ Cordova編(Androidアプリ)Monocaクラウド編(Androidアプリ)Cordova編(Windowsアプリ)
応用・その他
応用編 ES2015(ES6) 入門数値計算処理ゲーム制作HTML5画像処理・編集
記法 JSDocコメント
参考文献 LiveWeaveGitHubJavascript入門Javascript入門 ajaxtowerJavaScritpで数値計算愚作の箱Subterranean Flower blog
関連記事