JavaScript - DAY1 -
真面目にプログラミングを学ぼうと思い、ゆる～く学習履歴/備忘録をまとめていきたいと思います。「場所違くね？」「Qiita でやれよっ！」とか勘弁してください(土下座
note は書き心地が良いのでここでどこまで継続できるかも挑戦してみたいと思います。それではスタート！！
１．Javascriptとは
・広く利用された理由はなんと言ってもブラウザさえあれば動作させられる実行環境
・サーバサイドで大量のデータ処理を行うシステムの開発に利用されたり、iOSやAndroid向けのスマートフォンアプリも制作できる
・JavaScriptはRedMonk社の2021年6月求人多いプログラミング言語ランキングで1位(https://redmonk.com/sogrady/2021/08/05/language-rankings-6-21/)
※ JavaScriptは概ね上位にいるらしい
・実行環境を用意するハードルが低い=学習ハードルが低い、故に超初心者にとっては選択肢の一つ
２．JavaScriptの概要を理解しよう
・ 1990年代に Netscape 社が開発、HP上でインタラクティブな表現をするためのスクリプト言語
・JavaScriptを利用する場合、JavaScriptを記述したファイルをHTMLから呼び出すか、HTML内にscriptタグでJavaScriptを埋め込む
・Webアプリケーションの中では、JavaScriptはサーバ上ではなくブラウザ上で動作する。故に、JavaScriptはサーバサイドではなくクライアントサイドに分類される
・2000年代の中期に Ajax(エージャックス：Asynchronize Javascript + XML)が登場
・2000年代後半にHTML5が公開され、JavaScriptはアプリケーションを開発するためのプログラミング言語として位置づけられる
・サーバサイドで動く node.js(ノードジェイエス）なんかもある。非同期処理や複数のプロセスで処理を分散させる分散並列処理などに適している
３．環境設定
検証環境は以下の通り。
・HTTP Server : Apache
・ブラウザ : Chrome
・エディタ : 任意
４．JavaScriptの基本的な構文
■ JavaScriptを記述する場所
１．HTMLファイル内の <script>タグ内
２．別途JavaScriptファイルを用意、<script>タグでファイル呼び出し
■ 主な構成要素
１．変数：処理の対象の値を管理するための概念
２．オブジェクト：処理を組み立てるための部品
３．演算子：処理を行うための特別な意味を持つ記号
４．制御文：処理の流れをコントロールするための構文
５．関数：処理をまとめて使いやすくしたもの
■ 構文ルール
１．ソースコードはすべて半角数字で記述する
２．大文字・小文字を区別する
３．文はセミコロン「；」で区切る
■ 変数の宣言
var 変数名 = 値;
※ 予約語は変数に使えない(ex : var, function, if, for, while)
■ 変数のデータ型
１．文字型：文字を表す
※文字列代入時は "" または '' で文字列を囲む
２．数値型：数値を扱う
３．真偽型：真偽を true/false で表す
４．配列型：配列を扱う
５．オブジェクト型：プロパティ（キー）と値の組みを扱う
■ 配列型の変数の宣言
var 変数名 = [値1, 値2,,,値2]
■ オブジェクト型の変数の宣言
var 変数名 = {キー:値1, キー2:値2,,, キーn:値n}
※ オブジェクト型=連想配列
■ オブジェクトの種類
・組み込みオブジェクト：JavaScript で予め定義されているオブジェクト
・ブラウザオブジェクト：ブラウザで取り扱えるオブジェクト
・DOMオブジェクト：HTML の要素にアクセスできるオブジェクト
オブジェクトの基本的な仕様には、オブジェクトの状態を知るプロパティと、オブジェクトを動作させるメソッドの二つがある。
■ インスタンスの生成
var 変数名 = new オブジェクト名();
var 変数名 = new オブジェクト名(引数):
■ インスタンスのプロパティとメソッドを利用
var 変数名 = インスタンス名.プロパティ名;
var 変数名 = インスタンス名.メソッド名(引数);
■ 組み込みオブジェクトの主な種類
・String : 文字列を管理するオブジェクト
・Number : 数値を管理するオブジェクト
・Boolean : true / false の真偽値を管理するオブジェクト
・Array : 配列を管理するオブジェクト
・Object : 連想配列を管理するオブジェクト
・Math : 数学的な演算を管理するオブジェクト
・Date : 日時を管理するオブジェクト
・JSON : JSON 形式データを扱うオブジェクト
※ String, Number, Boolean, Array, Object は JavaScript のデータ型と対応しており、互換性もある。故に new インスタンス化は不要。
■ 主なブラウザオブジェクト
・Window : すべてのブラウザオブジェクトの親に該当するオブジェクト
・Navigator : ブラウザ情報を管理する
・Location : URL 情報を管理する
・History : 閲覧履歴を管理する
５．よく利用される変数や処理の扱い
■ 演算子
・演算子とは、プログラム内で演算（計算）のほか特別な処理をするための記号の総称
・演算子には、四則演算・比較演算子がある
■ 条件分岐
"条件分岐" と"繰り返し" は制御構文と呼ばれる仕組みで実現する。
１． if 文
if(条件式){
// 条件を満たす場合の処理
}２．if else 文
if(条件式1){
// 条件式1がtrueの場合の処理
}else if(条件式2){
// 条件式2がtrueの場合の処理
...
(同様に条件式３，条件式４・・・のように連続して複数のelse if を記述できる）
}else{
// いずれの条件も満たさない場合の処理
}３．for 文
for(初期化式; 条件式; 増減式){
// 処理
}
/*
・初期化式 : 繰り返しの最初に、条件式の初期値を設定
・条件式：戻り値がtrueになるまで繰り返し続ける条件を設定
・増減式：初回以降の、繰り返し処理のたびに値を増やす/減らす処理
*/４．while 文
while(条件式){
// 処理
}
※ 最低でも1回は処理を実行したい場合は、続いて解説する do while 文を利用する５．do while 文
do{
// 処理
} while(条件式);※ 繰り返し処理を抜け出す/スキップするには break文とcontinue文が利用可能
■ break 文と continue 文の違い
・break 文は、繰り返し処理のすべてを止める
・continue 文は該当する周回のみをスキップして、その後の繰り返し処理は続行する
■ 関数の定義
function 関数名(引数){
処理
return 戻り値;
/*
return 文を利用して戻り値を返す
引数を省略しても"()"は省略不可
}
■ 変数の種類/スコープ
・グローバル変数 : プログラムの全範囲で有効な変数
・ローカル変数 : 関数の中だけで有効な変数
６．HTML を操作する
■ 概要
・プログラムから HTML や XML などのマークアップ言語で記述された文書にアクセスするための標準的な仕様として DOM(Document Object Model : ドム)がある
・DOM は HTML とプログラミング言語の間を橋渡しするしくみともいえる
・DOM の仕様を簡単にまとめると以下二つ
1. 文書をオブジェクトとして扱う
2. 文書へのアクセスや操作の方法の定義
■ 主なノードの種類
・文書ノード : 文書の階層の最上位になるノード、予約語「document」で扱う
・要素ノード : HTML 内の各要素
・テキストノード : HTML 内のタグ以外のテキスト
・属性ノード : 要素内に指定されている属性
・親ノード : 上下関係になるノードで、階層が上のノード
・子ノード : 上下関係になるノードで、階層が下のノード
・兄弟ノード : 並列関係にあるノード
■ getElementById メソッド要素を取得
var 要素オブジェクト = document.getElementById(取得する要素のid);
■ getElementsByTagName メソッドで要素を取得
var 要素オブジェクトの集合 = document.getElementsByTagName(取得する要素のタグ名);
■ getElementsByClassName メソッドで要素を取得
var 要素オブジェクトの集合 = document.getElementsByClassName(CSSのクラス名)
■ 要素の属性を取得・設定
var 変数名 = 要素オブジェクト.getAttribute(属性名);
要素オブジェクト.setAttribute(属性名,値);
■ プロパティから要素の属性を取得・設定
var 変数名 = 要素オブジェクト.プロパティ名;
要素オブジェクト.プロパティ名 = 値;
■ 要素を生成/追加するメソッド
・document.createElement(タグ名) : 要素を新しく生成
・親ノード.appendChild(子ノード) : 親ノードの最後の位置に子コードを追加
■ removeChild メソッドで要素を削除
親ノード.removeChild(子ノード);
７.イベントを扱う
JavaScriptはユーザがブラウザ上で何らかの操作を行うとイベントが発生するしくみが用意されている。イベントとは、「オブジェクトの状態が変化すること」を表す。
■ よく利用されるイベント
・load : 読み込みが終わった
・click : クリックされた
・mouseover : マウスカーソルが乗った
・mouseout : マウスカーソルが外れた
・change : 値が変わった
■ イベントドリブンモデル
イベントが発生した際に、発生したイベントをトリガーとして処理を実行するプログラムの実行形式をイベントドリブンと言う。また、イベントドリブンを採用しているプログラムモデルをイベントドリブンと言う。
ユーザはイベントに対応するプログラムを待機させたまま、別の処理を行うことができる。このように、イベントドリブンモデルでは「プログラム側でユーザを必要以上に拘束しない」という特徴がある。
イベントに対して、処理の内容を定義したプログラムの処理を "イベントハンドラー/イベントリスナー" という。
・イベントハンドラー : イベントに対して処理を定義。イベントとは1対1で定義
・イベントリスナー : イベントと処理を結びつける。イベントとは1対1以上で定義可能
■ イベントハンドラー/イベントリスナーを定義する
実装方法は以下の三つ。
・イベントハンドラー : 要素のタグ内で定義
・イベントハンドラー : 要素オブジェクトのプロパティで定義
・イベントリスナー : 要素オブジェクトの addEventListenerメソッドで定義
■ 要素のタグ内でイベントハンドラーを定義
<タグ名 onイベント名="JavaScriptの処理">
■ 要素オブジェクトのプロパティとしてイベントハンドラーを定義
要素オブジェクト.onイベント名 = function(イベント){ 処理内容 };
■ addEventListener メソッドでイベントリスナーを定義
要素オブジェクト.addEventListener(イベント名, function(イベント){ 処理内容});
■ preventDefault メソッドでイベントをキャンセル
イベントオブジェクト.preventDefult();
７．Web API を利用する
・API(Application Programming Interface)はプログラムが持っていない外部の機能やデータを呼び出して、利用できるようにする仕組み
・API のうち、インターネット経由で Web サービスの機能やデータを利用できるものを Web API という
■ Web API で利用される主なデータの形式
・XML : 利用者が独自のタグを指定することができるマークアップ言語の形式
・RSS : ウェブサイトの更新情報などを簡単にまとめた XML の形式
・JSON : JavaScript のオブジェクト表記構文でデータを記述する形式
・CSV : データを「,」で区切った形式
■ JSON(JavaScript Object Notation : ジェイソン)とは
・JSON とは、JavaScript におけるオブジェクトの表記法を構文とした、テキストベースによるデータの記述形式のこと
・JSON 形式のデータは、文字列型・数値型・真偽型・null の値の組み合わせを持つ配列または連想配列、あるいは両方が存在するオブジェクトとなる
■ JSONP
関数名(JSONデータ);８．日記アプリを作成する
■ 作成するサンプル機能
・日記の保存 : 日記のタイトルと本文をブラウザ内に保存
・日記の呼び出し : 保存している日記を日別に呼び出す
・カレンダーの表示 : 当月の日付をテーブルで表示
■ JavaScript でデータ保存
JS はキーと値のペア形式でブラウザにテキストデータを保存できる WebStorage という仕組みがある。WebStorage はオリジン(http などのスキーム・ドメイン・ポート番号)単位でデータ保存する。
同じような仕組みにクッキーがあるが、容量が4Kまで、かつ保存データに有効期限がある。
WebStorage はおおむね10MB 程度のデータ保存可能(※ブラウザ依存あり)。また、WebStorage はセッション単位で有効な sessionStorage と localStorage の2種類がある。
■ クッキーと WebStorage 比較
・クッキー : 保存時に指定した期限 / 4K
・sessionStorage : ウィンドウやタブを閉じるまで / 5～10MB
・localStorage : 永続的に利用可能 / 5～10MB
■ WebStorage へのデータ保存
var storage = localStorage;
storage.setltem(キー, 値);
storage.キー = 値;
storage[キー] = 値;■ WebStorage からデータ参照
var storage = localStorage;
var 変数名 = storage.getltem(キー);
var 変数名 = storage.キー;
var 変数名 = storage.[キー];■ 保存したデータを削除する
var storage = localStorage;
storage.removeItem(キー);■ Date オブジェクトのインスタンス生成
var 変数名 = newDate();
var 変数名 = new Date(yyyy, m, d);■ Date オブジェクトの主なメソッド
・getFullYear() : 西暦を返す
・getMonth() : 1～12月を0～11で返す
・getDate() : 日にちを1～31で返す
・getDay() : 曜日を日曜 : 0～ 土曜 : 6 で返す■ Date オブジェクトの年月日指定のメソッド
・setFullYear( year ) : 西暦を year にセット
・setMonth( month ) : 1～12月を month(0～11) でセット
・setDate( day ) : 日にち day(1～31)でセット９．さらに開発を進めるために
■ お手本を見ながらプログラムを作ってみる
W3Schools はノルウェーのRefsnes Data社が運営するオンラインプログラム学習サイト。無料で利用でき、HTML・CSS・JavaScript・PHP・SQLなどのプログラムサンプルを検索し、実行できる。
■ jQuery とは
jQuery とは、JavaScriptで扱う処理を容易に記述できるようにするライブラリです。ライブラリとは、「よく利用される処理を、再利用可能な形式でまとめたプログラムの集まり」のこと。
■ jQuery のバージョン
・1.x系 : IE 8 以前もサポート
・2.x 系 : IE 9 以降、をサポート。1.x系よりも軽量化を優先したバージョン
・3.x 系 : Android 4.0 以降、iOS 7 以上をサポート。2.x 系よりも高速化を図ったバージョン
Fin. 所感
利用した書籍は "たった1日で基本が身に付く！シリーズ たった1日で基本が身に付く！JavaScript超入門"。
誤植が半端ないので、もう少しきちっと校閲して頂きたいものですね。
まあ、僕は図書館でお借りした本なので言えた立場ではありませんが...
この記事が気に入ったらサポートをしてみませんか？