シェアする

Javascript入門 サンプルプログラム集

スポンサーリンク
ビッグバナー(上2)

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

Javascriptとは

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

Javascriptの基本文法

Javascriptの基本文法使い方を項目別に以下にまとめました。

はじめに

作成方法:プログラムの作成, 理想的なプログラム
記述場所:headerタグ内, bodyタグ内, inputタグ内, リンク, 外部ファイル
実行:ページ読込時に実行, 入力欄変更時に実行
基本:コメント文, アラート画面, アラート画面で改行, alertでエラー特定
開発環境:Brackets, VSCode
処理タイミング:ページ読込前・完了時

変数

概説:変数・定数とは
変数:変数, 数値, 文字列, 定数

配列

配列:配列とは, 配列の宣言・初期化・代入, 配列(数値), 配列(文字列)
多次元配列:2次元配列
連想配列:連想配列, 初期化(for文)
配列操作:配列の長さ(要素数), 配列の判定, 文字列に変換①, 文字列に変換②, 配列のpop操作, 配列のpush操作, 順序反転, 先頭要素削除, 先頭要素追加
ソート:文字列ソート, 数値ソート
抽出:指定範囲の要素抽出

四則演算/演算子

四則演算:足し算, 引き算, 掛け算, 割り算, 余り
演算子:算術, 比較, 複合代入, 増分減分, 論理, 条件

文字列処理

基本:エスケープ文字\, 文字列連結, 文字列分割, 文字列→数値, 数値→文字列
文字装飾:文字色, 文字サイズ, 文字大, 文字小, 太文字, 等倍フォント, 斜体, 上付き文字, 下付き文字, 取り消し線, リンク追加
文字抽出:1文字, 任意の文字数, 範囲指定, 文字数取得
検索:部分一致
削除:部分削除

構造化プログラミング

概説:構造化プログラミングとは
選択構造:if文, else if文, switch文, switch + break文
反復構造:for文, while文, do while文

関数

関数:関数とは, ローカル変数, グローバル変数
ユーザ関数:ユーザ関数とは, ユーザ関数の引数, ユーザ関数の戻り値
ライブラリ:ライブラリ関数

ウィンドウ操作

基本:確認画面, 入力画面, 指定したURLに飛ぶ, ページ更新, 前ページに戻る, 先ページに進む
URLを別窓表示:標準, サイズ位置指定, 各種バー表示設定, 画面中央に表示

オブジェクト指向

用語:オブジェクト指向, 利点欠点, クラス・インスタンス, メソッド, クラス・インスタンス変数
クラス・インスタンス:クラスの定義, インスタンスの生成
インスタンス変数:生成, 値取得, 代入, 追加, 値を渡す(初期化)
メソッド:メソッド定義, メソッド定義(プロトタイプ)
まとめ:JavaScriptでオブジェクト指向プログラミング

DOM操作

【出力フォーム】
HTML:出力, 文字挿入, 文章・タグ挿入, スクリプト挿入・実行
【入力フォーム】
テキスト入力欄:値取得
選択リスト:値取得, 項目セット, 変更時の処理, optionの値更新
JQuery:サイドバー追尾

ファイル処理

CSV:読込(FileAPI), 読込(Ajax), 読込データ転置, 部分抽出

時刻

現在日付, 生年月日→年齢, 和暦→西暦, 西暦→和暦, 西暦⇔和暦

便利なライブラリ

グラフ:Chartjs

スマホアプリ製作

Cordova編, Monocaクラウド編, Visual Studio編

応用例

ES2015(ES6) 入門, 数値計算処理, ゲーム制作, HTML5

外部サイト

LiveWeave
GitHub
Javascript入門
Javascript入門 ajaxtower
JavaScritpで数値計算
愚作の箱

他言語の入門記事

入門記事:Python, C言語, Java, C#, Javascript, PHP, VBAマクロ, Processing

スポンサーリンク
レクタングル(下2)
レクタングル(下2)