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), 読込データ転置, 部分抽出

システム関連

項目
時刻 現在日付, 生年月日→年齢, 和暦→西暦, 西暦→和暦, 西暦⇔和暦

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

項目
JQuery サイドバー追尾
グラフ Chartjs
スマホアプリ制作 Cordova編, Monocaクラウド編, Visual Studio編
応用編 ES2015(ES6) 入門, 数値計算処理, ゲーム制作, HTML5
おすすめサイト LiveWeave, GitHub, Javascript入門, Javascript入門 ajaxtower, JavaScritpで数値計算, 愚作の箱, Subterranean Flower blog
他言語 Python, C言語, Java, C#, Javascript, PHP, VBAマクロ, Processing

シェア&フォローお願いします!