ここに記載されているコードは単体で動くようになっているのでイメージが湧かない場合は動かしてみてください。
#HTMLでの読み込み
###HTML上で動かす場合
sample.html
<script type = "text/javascript">
// ここにコードを書く
</script>
###外部ファイルとして読み込む
sample.html
<script src="JavaScriptのファイルパス"></script>
#コメントアウト
sample.js
1行の時
// これは例です
複数行の時
/*
これは例です
これは例です
*/
#コンソールに出力
主にデバックで使用します。
sample.js
console.log('Hello World');
console.log("Hello World");
//文字列は、シングルorダブルクォーテーションで囲む
#ダイアログ
sample.js
alert("Hello World!!");
#数値と文字列の出力
sample.js
console.log(5 + 3); // 出力結果：8
console.log(5 - 3); // 出力結果：2
console.log(4 * 2); // 出力結果：8
console.log(4 / 2); // 出力結果：2
console.log(9 % 2); // 出力結果：1 ※余りの計算
console.log("5 + 3"); // 出力結果：5 + 3
console.log("5" + "3"); // 出力結果：53
console.log("あい" + "うえお"); // 出力結果：あいうえお
console.log("A" + "B" + "C"); // 出力結果：ABC
#計算式の省略
sample.js
省略前 省略後
x = x + 1 x += 1
x = x - 1 x -= 1
x = x * 1 x *= 1
x = x / 1 x /= 1
x = x % 1 x %= 1
#変数
変数とはプログラミング言語における値を入れておく箱のこと
変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るのでNG
sample.js
const name = "tanaka"; // 変数名はtanaka
console.log(name); // 出力結果：tanaka
/*--------------------------------------------------*/
const name = "tanaka";
console.log(name + tarou); // 出力結果：tanakatarou
/*--------------------------------------------------*/
const x = 1 + 100;
alert(x); // 出力結果：101
#変数の種類
変数にはvar、let、constがあり現場で使用するのはlet、constを使う
###const
再代入できない変数。
sample.js
const name = "yamada";
name = "tanaka";
console.log(name) // エラーになる
###let
再代入できる変数。
sample.js
let name = "yamada";
name = "tanaka";
console.log(name) // 出力結果:tanaka
#真偽値
「true（真）」と「false（偽）」2つの値のこと
sample.js
a === b // aとbが等しければtrue
a !== b // aとbが等しくなければtrue
a < b // aの方がbより小さいときtrue
a <= b // aの方がbより小さいまたは等しいときtrue
/*--------------------------------------------------*/
&& = かつ
xが2のとき
x > 1 && x < 3 //複数の条件がすべて真だからtrue
/*--------------------------------------------------*/
|| = または
xが2のとき
x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue
#条件分岐
if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ
###if文
sample.js
if (条件式) {
処理 // 条件式がtrueのとき実行
} else {
処理 // 条件式がfalseのとき実行
}
/*--------------------------------------------------*/
const name = "yamada"
if (name === "yamada") {
console.log("yamadaです") // 条件式がtrueのとき実行
} else if (name === "tanaka") {
console.log("tanakaです") // 条件式1がfalseで、条件式2がtrueのとき実行
} else {
console.log("yamadaでもtanakaでもないです") // 条件式1と2両方ともfalseのとき実行
}
###switch文
sample.js
switch (対象) {
case 値１: // 式の結果が値1に等しい場合に実行
break;
case 値2: // 式の結果が値2に等しい場合に実行
break;
default: // 式の結果がどれにも該当しない場合に実行
処理
}
/*--------------------------------------------------*/
const food = "チョコレート"; // food === "チョコレート"のとき
switch (food) {
case "チョコレート":
console.log("チョコレートは食べ物です"); // 実行される
break;
case "コーラ":
console.log("コーラは飲み物です"); // 実行さない
break;
default:
console.log("食べ物でも飲み物でもありません");
}
// bleakがあるのでswitch文を抜ける
// bleakがないと他のcase内の処理も実行される
#繰り返し処理
繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ（繰り返し）処理をおこなうときは、while文とfor文の2種類がある。
###while文
sample.js
while (条件式) {
処理
}
/*--------------------------------------------------*/
let x = 1; // 変数の定義
while (x <= 5) { // 条件（条件式の真偽が判定される）
console.log(x); // 繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
x = x + 1; // 変数の更新（変数の値が更新され、再び条件に戻る）
}
###for文
sample.js
for(変数の定義;条件式;変数の更新){
処理
}
/*--------------------------------------------------*/
for (let x = 1; x <= 1; x += 1) {
console.log(x); // 条件式がtrue（真）になるまで出力する
}
###配列
配列を使うと複数の値をまとめて書くことができる。
sample.js
// 例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
let name01 = "tanaka";
let name02 = "sasaki";
let name03 = "yamada";
// 配列の出力
let name1 = ["tanaka", "sasaki", "yamada"]
console.log(name1);
// 配列の要素を取り出す(インデックス番号：「0=tanaka」「1=satou」「2=yamada」)
let name2 = ["tanaka", "sasaki", "yamada"]
console.log(name2[0]); // 出力結果：tanaka
#lengthメソッド
sample.js
const name = ["tanaka", "sasaki", "yamada"]
console.log(name.length); //出力結果：3
#pushメソッド
sample.js
const name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name); // 出力結果：tanaka,sasaki,yamada,suzuki
#連想配列
配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。
sample.js
[値1, 値2] // 配列
{
キー1: 値1,
キー2: 値2,
} // 連想配列
/*--------------------------------------------------*/
let fruit = {
"name": "banana",
"color": "yellow",
};
console.log(fruit.name); // 出力結果：banana
console.log(fruit.color); // 出力結果:yellow
#アロー関数
関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。
sample.js
const hello = () => { // hello = 関数名
console.log("こんにちは") // console.log("こんにちは") = 実行される処理
}
hello(); // 出力結果：こんにちは
#引数
引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。
sample.js
const 関数名 = (引数名) => {
処理
}
関数名(値); // 関数の呼び出し
/*--------------------------------------------------*/
const introduce = (name) => {
console.log(name);
}
introduce("tanaka"); // 出力結果：tanaka
/*--------------------------------------------------*/
const introduce = (name, age) => {
console.log("名前は" + name + "です");
console.log(age + "歳です");
}
introduce("田中", 20); // 出力結果：名前はtanakaです。20歳です。
#戻り値
関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。
sample.js
const 関数名 = () => {
return 値; // 「return 値」と書くことで、関数はその値を戻り値として返す。
}
/*--------------------------------------------------*/
const add = (a, b) => {
return a + b;
}
sun = add(1, 3) // 呼び出し部分
console.log(sun); // 結果４
#DOM取得
DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み
sample.html
<input type="text" id="text_area">
sample.js
const textArea = document.getElementById("text_area")
console.log(textArea) // 出力結果:<input type="text" id="text_area">
###値（value）を取得
sample.html
<input type="text" id="text_area" value="banana">
sample.js
const textArea = document.getElementById("text_area")
console.log(textArea.value) // 出力結果:banana
###入力した値（value）を取得
sample.html
<input type="text" id="text_area">
<button id="send_button">送信</button>
sample.js
const textArea = document.getElementById("text_area") // inputタグのDOMを取得
const sendButton = document.getElementById("send_button") // buttonタグのDOMを取得
sendButton.addEventListener('click', () => {
console.log(textArea.value) // 出力結果:入力された値
})