Amazon：javascript
https://amzn.to/3BymN1q
プログラミング言語JavaScript
いろんな本が出てます。
昔に出た本の改訂新版とか、
新たに書かれたものなど。
プログラミングの本って、本の通りに入力などしていけば、
動いたとか体験できますが、
自分で考えて、プログラミングするとかって、本当に難しいです。
何回も何回もしないとなかなか覚えらないかも？です。
また、最初から全部を作るのって最初はしないかも？。
本でそのようなことなど書いてあった。
自分は、昔
大津 真さんの（著）
2010年発売 3ステップでしっかり学ぶ JavaScript入門など購入。
今では改訂2版などが出てます。
昔なら良書だったかも。
3ステップでしっかり学ぶ JavaScript入門 [改訂2版] 単行本（ソフトカバー） – 2017/9/22
大津 真 (著)
きちんとわかる! JavaScript とことん入門 大型本 – 2017/6/7
大津 真 (著)
JavaScriptの基本をきちんと理解したい方におすすめ!
関数&オブジェクトからAjax、クロージャまで、一冊でとことんわかる!
目次
きちんとわかる！JavaScript とことん入門 読んでみた。
Chapter 1 JavaScriptプログラミングをはじめよう
Chapter 2 JavaScriptの基本を理解しよう
Chapter 3 組み込みオブジェクトを活用しよう
Chapter 4 関数の基本を理解しよう
Chapter 5 配列とObjectオブジェクトを操作しよう
Chapter 6 Webブラウザのエレメントやイベントを操作しよう
Chapter 7 コンストラクタでオリジナルのオブジェクトを作成しよう
Chapter 8 関数をもっと便利に使おう
Chapter 9 AjaxによるWebサーバとの通信を理解しよう
スラスラ読める JavaScriptふりがなプログラミング 増補改訂版 (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2022/8/23
リブロワークス (著), 及川卓也 (監修)
プログラムが「読めない」を解決する入門書
スラスラわかるJavaScript 新版 単行本 – 2022/7/13
桜庭 洋之 (著), 望月 幸太郎 (著)
プログラミングの基礎とJavaScriptの基本文法を
やさしく解説した入門書の定番が、装い新たに登場です。
Colaboratoryでやさしく学ぶJavaScript入門 (Compass Programming) 単行本（ソフトカバー） – 2022/2/28
掌田津耶乃 (著)
JavaScriptを学んで、データ操作やグラフ作成を簡単にやってみよう
本書は、GoogleのColaboratory(以下、Colaboratory)を使って、やさしくJavaScriptを学習する本です。
解きながら学ぶ JavaScriptつみあげトレーニングブック 単行本（ソフトカバー） – 2021/12/23
リブロワークス (著), 中川 幸哉 (監修)
エラーの読み方、わかりますか? この本で初心者を卒業しよう
「いずれWebエンジニアとして仕事をするようになりたい」
「JavaScriptの入門書を1冊読んだけど、理解がぼんやりしている」
「現場に出て恥ずかしくないように勉強しておきたい」
第2版では内容が少し違います。
確かな力が身につくJavaScript「超」入門 第2版 単行本 – 2019/9/21
狩野 祐東 (著)
JavaScriptをこれから始める人にも、前に挫折したことのある人にも。
手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます
きちんとわかる！JavaScript とことん入門 読んでみた。
きちんとわかる! JavaScript とことん入門 大型本 – 2017/6/7
大津 真 (著)
JavaScriptの基本をきちんと理解したい方におすすめ!
関数&オブジェクトからAjax、クロージャまで、一冊でとことんわかる!
JavaScript言語の基本を、きちんと身に付けたい入門者
JavaScriptは少しわかるけれど、いまいちスッキリしない方
jQueryなどを学習する前に、JavaScriptをしっかり復習したい方
ぜんぶ、ていねい
理解が難しい部分でも、はしょらずに解説しているので、初心者でもプログラムの本当の意味がわかります。（たぶん）
目次は、このような感じです。
Chapter1からChapter3までは、
変数の取り扱い、オブジェクトの基本操作、条件判断、処理の繰り返し、
Chapter4は、関数の基本操作、
Chapter5は、配列
Chapter6からChapter9は応用編
Chapter 1 JavaScriptプログラミングをはじめよう
Chapter 2 JavaScriptの基本を理解しよう
Chapter 3 組み込みオブジェクトを活用しよう
Chapter 4 関数の基本を理解しよう
Chapter 5 配列とObjectオブジェクトを操作しよう
Chapter 6 Webブラウザのエレメントやイベントを操作しよう
Chapter 7 コンストラクタでオリジナルのオブジェクトを作成しよう
Chapter 8 関数をもっと便利に使おう
Chapter 9 AjaxによるWebサーバとの通信を理解しよう
サンプルのプログラムもダウンロードできます。
本書は、プログラミング初心者を対象にしたjavascript言語の入門者です。
自分は、この本は2017年に、内容を見ずに予約で買いました。
カラーの本ではないので少し見にくいです。
JavaScriptの変数の作り方は複数あります。
var（ES5で支流の書き方）
let（ES2015）
const（ES2015）
この本は、2017年なので、主にvarで書かれています。
また、人によっては、少し難しく（理解がしにくい）感じるかも。
本はカラー印刷ではないので、人によっては、読んでいて疲れるかも。
プログラマーとかなら、そうは感じないんだろうけど。
1-1 JavaScriptとはどんな言語？
JavaScriptの概要を知っておこう
Javascriptはインタプリタ方式のプログラミング言語です。
JavaScriptはWebブラウザで実行される
インタプリタはWebブラウザの中にある
JavaScriptエンジン
ChromeはV8
SafariはNitro
FirefoxはSpiderMonkey
JavaScriptのスクリプトとは？
JavaはJava言語に由来
Scriptはシンプルなプログラム
JavaScriptのベース部分は、ECMAScript
JavaScriptはオブジェクト指向言語
プログラムの再利用が簡単
1-2 JavaScriptプログラミングに必要なものは？
Webブラウザとエディタを用意しよう
本書ではWebブラウザはChromeをインストールで解説
テキストエディタはBracketsをインストールで解説
Bracketsの拡張機能
Extensions Ratingなど
HTML5の基本構造
など解説
文字コード
空エレメント
type属性
サンプルファイルを参考に丁寧に解説
1-3 コンソールでJavaScriptを実行してみよう
GoogleのChromeを起動しデベロッパーツールを使います。
デベロッパーツールのパネルや解説などしてます。
コンソールでJavaScriptのコマンドを試す
デベロッパーツールのパネル
Elementsパネル（HTML要素やスタイルシートを確認する）
Console（JavaScriptのコマンドを実行したり結果を確認したりする）
Sources（JavaScriptプログラムをデバッグする）
Network（ネットワーク状態を確認する）
Perfomance（Timeline）（時間経過によるパフォーマンスを確認する）
Memory（Profiles）（JavaScriptのパフォーマンスを確認する）
Application（アプリケーション、ストレージ、キャッシュの状態を確認する）
Security（セキュリティ情報を確認する）
Audits（Webページのパフォーマンスを確認する）
Webページの開発で重要なのがHTMLファイル内の要素やCSS構造など
Elementsパネルの解説などあり
サンプルファイルなどあります。
コンソールでコマンドを実行しよう
メソッドの実行
引数はメソッドに渡す値
WebブラウザにHTMLを出力するdocument.write()メソッド
1-4 プログラムをHTMLファイルに記述してみよう
scriptエレメントを記述してみよう
JavaScriptプログラムを記述する場所は？
HTMLファイルのbodyエレメントに記述するケース
など解説
プログラムを別のファイルから読み込むには
JavaScriptプログラムの拡張子は.jsファイルです。
Webブラウザで動くプログラムのことをクライアントサイドのプログラムと呼びます。
それに対してHTMLファイルが置かれているWebサーバーの上で動くプログラムのことをサーバーサイドのプログラムと呼びます。
JavaScriptは本来、Webブラウザ上でプログラムを動かすために作られた。
最近ではサーバーサイドのJavaScriptともいえる「Node.js」が注目を集めています。
Node.jsを使用するとWebアプリケーションを含めたWebサーバー上のプログラムをJavaScriptで作ることができます。
これまでApacheのようなWebサーバーとPHPなどのプログラムを組み合わせて作成していたWebアプリケーションを、Node.jsだけで実現できます。
Node.js は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。
Node.jsの公式サイト
2-1 基本的な演算を試してみよう
プログラムの基本はやっぱり計算！
基本的な計算記号
足し算は「+」
引き算は「-」
掛け算は「*」
割り算は「/」
割り算のあまりは「%」
割り算のあまりを求める演算子「%」。
10を3で割ったあまりを求める
10%3
1
3を2で割ったあまりを求める
2で割ったあまりが「1」の場合は奇数
3%2
1
16を2で割ったあまりを求める
2で割ったあまりが「0」の場合は偶数
16%2
0
コンソールを使って計算してみよう。
文字列の連結
プログラム内で計算結果を表示するには
サンプルあり
コンソールで計算の結果をみよう。
ドルの金額に為替レートをかけて、円の金額を表示
ステートメントの終わりとコメント
JavaScriptのステートメント（文）の終わりを示すセミコロン「:」と、プログラムの中に書くコメント
2-2 値を名前でアクセスできる変数を使ってみよう
変数を使用すると，値を使い回せる！
プログラムにおける基本中の基本が、値を名前で扱えるようにした「変数」です。
変数と変数名
値を格納しておくコンピューター内の領域を変数と呼びます。
変数に格納された値は「変数名」と呼ばれる名前でアクセスできます。
例
変数を宣言する
var year;
例
変数に値を代入する
year =2020;
プログラムに記述した「値そのもの」のことをリテラルと呼びます。
例
数値のリテラル、5
num = 5;
例
文字列のリテラル、山田太郎
name = 山田太郎
値そのものがリテラル。
変数の基本的な使い方
変数を宣言して値を代入する
変数は使用する前にvarキーワードで宣言しておきます。
これにより、コンピューターの中に変数が作られ、変数名が付けられます。
var 変数名;
宣言しただけでは、変数の中身はundefinedという、未定義の状態になっています。
宣言したあと、変数には、次のようにデータ（値）を設定できます。
これを、変数に値を代入するといいます。
変数名 = 値;
プログラムで扱うデータのことを、プログラミングでは「値」と呼びます。
数学のイコール「=」は変数に代入するときに使う記号で、代入演算子と呼びます。
JavaScriptの変数には任意の型の値を代入できます。
この本でも説明はあります。
現在では？varの代りにconstで宣言して書くみたいです。
本によってはvarで書いてある書籍もあります。
昔はvarしかなく、varを使っていたが、今では、これは古い書き方で、
constかletを使う。
値を再代入したときは、letを使うなど。
基本は、varではなく、constを使います。
変数を使用して計算する
変数に格納した値を使用して計算を行うことができます。
コンソールで計算の結果をみよう。
変数を使用すると値を使い回せる
変数を使用するメリットは、代入した値を何度でも使い回せる点です。
便利な代入演算子
プログラムでは、ある変数の数値に対して足し算などの計算を行って、再び元の変数に代入する、といった処理がよく行われます。
例
これでnum1は「20」になります。
var num1 = 10;
num1 = num1 +10;
例
上の計算を「=」の代りに「+=」という代入演算子を使うと
num1 += 10;
同様に、変数num1の値に5を掛けて、再びnum1に代入する処理は「*=」という代入演算子を使う
例
これでも同じです。
num1 *= 5;
num1 = num1 * 5; でも同じです。
変数の値を1すつ増やす、減らす
演算子に「++」と「- -」があります。
「++」演算子を使うと代入演算子を使わずに変数の値を1ずつ増やします。
例
変数の値を1すつ増やす。
var num1 = 1;
++num1; //num1の値は「2」
++num1; //num1の値は「3」
++num1; //num1の値は「4」
「–」演算子を使うと代入演算子を使わずに変数の値を1ずつ減らします。
例
変数の値を1すつ減らす。
var num1 = 10;
--num1; //num1の値は「9」
--num1; //num1の値は「8」
--num1; //num1の値は「7」
演算子「++」と「- -」は、変数の前にも後にも記述することができます。
ただし、変数のどちら側に置くかで、いつ値を変化されるかが異なります。
「++」を変数numの前に置くと、変数num1の値は、変数num2に代入される前に、1増やされます。
その結果、num1、num2の値はどちらも「11」になります。
例
num1、num2の値はどちらも「11」になります。
var num1 = 10, num2;
num2 = ++num1;
「++」を変数numの後ろに置くと、変数num1の値は、変数num2に代入された後に、1増やされます。
その結果、num1の値は「11」ですが、num2の値は「10」になります。
例
num1の値は「11」ですが、num2の値は「10」になります。
var num1 = 10, num2;
num2 = num1++;
リテラルはプログラムの中の値そのもの
変数yearに「2000」という数値を代入しています。
この「2000」は変数名や演算子ではなく、「2000」という整数の値そのものです。
これがリテラルです。
文字列のリテラル
主なエスケープシーケンス
数値のリテラル
定数はconstで宣言する
後から値を変更できない変数のことを「定数」と呼びます。
varではなく、constで宣言します。
例
定数はconstで宣言する。
const year = 1959;
year = 2000;
console.log(year);
これを実行すると、
TypeError: Assignment to constant variable.のエラーが出て、プログラムが停止されます。
定数を使うと、プログラムの途中で値が置き換わる事故を防ぐことができます。
yearは定数ですので、最初に設定した値は変更できません。
文字列と数値の変換方法
同じ数字でも、プログラム内では表記方法によって、数値と文字列に分類されます。
文字列を数値に変換する
parseInt()関数を使います。
文字列を浮動少数点数に変換する
parseFloat()関数を使います。
数値を文字列に変換する
String()関数を使います。
ユーザーからのデータを変数に代入する
prompt()メソッド
2-3 オブジェクトの基本操作を理解しよう
オブジェクトのプロパティとメソッドを操作しよう
JavaScriptのオブジェクトには、プロパティと呼ばれる属性があります。
オブジェクトの属性のうち、処理を行うものを「メソッド」と呼びます。
JavaScriptの値は、
プリミティブ型（数値、文字列、真偽値）
オブジェクト型（Document、Data、Number、String）
の2種類に大別されます。
プロパティとメソッドを操作する
Documentオブジェクトのプロパティ
例
Documentオブジェクトのプロパティ
anchors、documentURI、title、cookie、body、LastModified
プロパティを階層構造でアクセスする
例
プロパティを階層構造でアクセスする
document.body.style.backgroundColor = "yellow";
documentはHTMLドキュメント
bodyはbodyエレメント
styleはスタイルシート
backgroundColorは背景色
例
背景色が黄色
"yellow";
これで、Webブラウザの背景色が「黄色」に変更します。
scriptエレメントでプロパティにアクセスする
プリミティブ型とオブジェクト型について
JavaScriptに用意されるデータ型の分類について
それぞれのデータには、その種類を示す型（Type）があります。
プリミティブ型は、数値型なら数値、文字列型なら文字列といった、値そのものを管理する。
オブジェクト型は、プロパティとメソッドを持つことができます。
文字列の長さはlengthプロパティで取得できます。
toUpperCase()メソッドを実行すると、文字列を大文字に変換できます。
toExponential()メソッドは引数で少数点以下の桁数を指定することで、数値を指数表記にした文字列に戻します。
ラッパーオブジェクト
Stingのようなオブジェクトをラッパーオブジェクトと呼びます。
ラッパーオブジェクトのプリミティブ型とラッパーオブジェクト型
プリミティブ型、文字列型、数値型、真偽値型
ラッパーオブジェクト型、Stringオブジェクト、Numberオブジェクト、Booleanオブジェクト
new演算子でStringオブジェクトのインスタンスを生成する
new演算子とコンストラクタについて
Stingオブジェクトに対してプロパティ/メソッドを実行する
値の型を調べるtypeof()関数
Numberオブジェクトについて
インスタンスメソッドとスタティックメソッド
インスタンスプロパティとスタティックプロパティ
2-4 条件判断を行おう～if文とswitch文
条件判断の結果に応じて処理を切り分ける
if文を使うと、条件式の結果に応じ処理を切り分けられます。
switch文を使うと、値に応じ処理を分岐できます。
if文を使ってみよう
条件判断の方法
数値と文字列（数字）を比較する
処理をまとめるブロック
「｛ 」と「 ｝」で囲まれた範囲のことをブロックと言い、一連のステートメントを、まとめるために使用されます。
条件が成立しなかった場所の処理を加える
if文にelseを加えると条件が成り立たなかった場合の処理を記述できます。
いろいろな比較演算子
値が等しいか、どうかを比較する「= =」と「 = = = 」
プリミティブ型とオブジェクト型の比較の違いについて
複数のif文を組み合わせ細かく分岐させる
if～else文
年齢に応じた料金を表示する
if～else文を使います
if文を入れ子にする
条件を否定したり複数の条件を組み合わせたりするには
「!」や「&&」「||」などの論理演算子を使用すると、条件を否定したり、複数の条件を組み合わせたりすることができます。
年齢の値で七五三を判定する
「&&」は「||」より優先される
シンプルな条件判断は条件演算子で
値に応じて処理を細かく切り分けるswitch文
月の値によって季節名を表示する
switch文の値は文字列でもOK
3-1 オブジェクトの操作と変更可／変更不可な値を理解しよう
組み込みオブジェクトを操作するための予備知識
インスタンスを生成してメソッドを実行するには
new演算子とコンストラクタを使用います。
JavaScriptのデータ型は、ミュータブル（変更可）とイミュータブル（変更不可）に分類されます。
イミュータブルな型
文字列、数値など、値を変更できない
ミュータブルな型
Dataオブジェクト、配列など、後から値を変更できる
インスタンスを生成してメソッドを実行する
Dataオブジェクトのインスタンスを生成する
Dataオブジェクトのメソッドを実行する
Dataオブジェクトのインスタンスメソッドとスタティックメソッド
ミュータブルな型とイミュータブルな型
プログラム言語におけるデータ型は、後から値を変更可能なミュータブル（変更可）な型と、変更できないイミュータブル（変更不可）な型に分類されます。
JavaScriptの場合、プリミティブ型は、すべてイミュータブルな型です。
オブジェクトには、ミュータブル（変更可）な型と、イミュータブル（変更不可）な型があります。
イミュータブル
プリミティブ型（文字列、数値など）、String、Numberなど
ミュータブル
Data、Array、Objectなど
数値はイミュータブルなの？
Dataオブジェクトはミュータブルなオブジェクト
3-2 文字列を操作しよう～Stringオブジェクト
文字列にプロパティ／メソッドを使用する
Stringオブジェクトには、文字列操作に便利なプロパティやメソッドが用意されています。
文字列の基本操作
文字列の長さを調べる
Lengthプロパティ
文字列から文字を取り出す
charAt()メソッド
文字列「インデックス」で文字を取り出す
文字列[インデックス]
文字列の中に指定した文字列が含まれているか調べる
文字列から指定した範囲を取り出す
HTMLのアンカーやリンクを設定する
アンカーを設定する。アンカーとは目印です。
リンクを設定する。外部ページへのリンク
Stringオブジェクトの主なメソッド
3-3 算術演算用のオブジェクトを使ってみよう～Mathオブジェクト
Mathオブジェクトを使うと数値の処理が便利に！
Mathオブジェクトについて
少数を整数に変換する
乱数を求める
ランダムな数値の乱数
おみくじのプログラム
3-4 日付や時間を操作しよう～Dateオブジェクト
日付時刻の操作はDateオブジェクトで！
Dateオブジェクトの概要
Dateオブジェクトの作成
今日の日付を表示する
来年の今日を表示する
日付を計算する
今年の残り日数を表示する
関数とは、何らかの処理をまとめて、関数名という名前で呼び出せるようにしたものです。
4-1 オリジナルの関数を定義しよう
ユーザ定義関数はfunction文で定義する！
function文による関数宣言
ユーザ定義関数を作成しよう
関数を定義するfunction文
関数の内部で引数の値を変更すると？
誕生日から年齢を求める関数を作成する
年齢を返すgetAge関数
4-2 変数の有効範囲（スコープ）を知ろう
関数内で宣言した変数は関数内部だけで有効！
ローカル関数
グローバル関数
グローバル変数とローカル変数のスコープについて
varキーワードで宣言しない変数はすべてグローバル変数
4-3 スッキリと関数を記述しよう～無名関数
無名関数とは「名前のない」関数
無名関数の概要を知ろう
無名関数の記述の方法
関数定義の順番に注意
5-1 配列を使ってみよう
1つの変数名とインデックスで一連のデータを管理する
配列とは？
1つの変数名で複数のデータを管理
配列の要素を表示する
配列を使用して来年の今日の曜日を表示する
5-2 配列を活用しよう
配列に要素を追加したり，並び替えたりする
途中を飛ばして要素を追加する
5-3 Objectオブジェクトでデータを管理しよう
Objectオブジェクトのプロパティと値を管理する
Objectオブジェクトの概要
オブジェクトリテラルについて
プロパティの追加と削除について
6-1 DOMの基本を学ぼう
WebブラウザのエレメントをJavaScriptで操作する
グローバルオブジェクトについて
グローバル変数や関数を管理するグローバルオブジェクト
DOMツリーからノードを取得する
HTMLの属性を操作する
イメージファイルをランダムに表示する
6-2 Webブラウザのイベントを処理しよう（その1）
HTMLタグの属性とオブジェクトのプロパティでイベントを捕まえる！
イベント処理の基本知識
HTMLタグの属性で処理を設定する
6-3 Webブラウザのイベントを処理しよう（その2）
イベントリスナーでより柔軟なイベント処理を行う！
イベントリスナーを使用する
イベントフローを理解しよう
6-4 スタイルシートを操作しよう
styleプロパティの設定やDOMのノードの追加もできる！
テキストの配置を設定してみよう
6-5 タイマーを活用しよう
指定した時間後に処理を行う
タイマーの起動と停止
7-1 コンストラクタを定義しよう
オリジナルのコンストラクタを定義する
コンストラクタを用意する
7-2 プロトタイプを利用しよう
プロトタイプチェーンを利用してメソッドを追加する
プロトタイプベースのオブジェクト指向
7-3 プロトタイプチェーンでオブジェクトを継承してみよう
オリジナルのオブジェクトを継承するには
8-1 関数をもっと深く知ろう
ファーストクラスオブジェクトとしての関数
関数の内部で関数を定義する
2種類のおみくじを返す関数
8-2 スムーズに配列の要素を処理しよう
関数型プログラミングに挑戦！
8-3 変数を関数に閉じ込めよう
クロージャと即時関数
クロージャを使用してカウンタを作成する
9-1 サーバからテキストファイルを読み込もう
XMLHttpRequestオブジェクトによる非同期通信
HTTPプロコトルについて
9-2 サーバからJSONファイルを読み込もう
JSON／JSONPを使ってWebサーバと通信する
JSONの概要と記述方法
など他を解説
きちんとわかる! JavaScript とことん入門 大型本 – 2017/6/7
大津 真 (著)
JavaScriptの基本をきちんと理解したい方におすすめ!
関数&オブジェクトからAjax、クロージャまで、一冊でとことんわかる!
