JavaScriptとは
JavaScriptとは、プログラミング言語の一つで、1990年代中盤に登場しました。
サイトのプルダウンや画面を更新しないでサーバーと通信したい時に使われます。
略称は、JSです。
HTMLへの導入方法
htmlファイルと同じ階層にJSファイルがある場合htmlファイルに以下のように記述するとJSファイルが読み込まれます。
<head>
<script src="script.js"></script>
</head>
headタグ内にある、scriptタグのsrc属性にファイル名を記述します。JSの拡張子は.jsです。
window.alert()
ブラウザにアラートを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。
console.log()
ブラウザのコンソールにテキストを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。
変数での記述方法は以下になります。
var team = "鹿島アントラーズ";
console.log( team + "の勝利です。");
コンソールが面に 鹿島アントラーズの勝利です。 が表示されます。
変数宣言について
varはES6バージョンの書き方です。
それ以降の変数宣言の仕方としては。
・let
・const
の二つが用いられます。
letは、後で書き換えられ変数宣言です。
constは、後で書き換えられない変数宣言です。
条件分岐
let number = 100;
if (number % 15 == 0) {
console.log(number + "は、３と５の倍数です。");
} else if (number % 3 == 0) {
console.log(number + "は、３の倍数です。");
} else if (number % 5 == 0) {
console.log(number + "は、５の倍数です。");
} else {
console.log(number + "は、３の倍数でも、５の倍数でもありません");
}
上記のように記述するとコンソールに、100は、５の倍数です。 と表示されます。
ifの後のカッコ内に条件式を記述します。その条件に当てはまった場合は、波カッコ無いの記述が処理されます。
最初の条件式が偽だった場合は、else if以降に処理が移ります。その条件が真だったら波カッコ内の処理を開始、偽だった場合はさらに次に進みます。elseはどの条件にも当てはまらなかった場合に出力したい処理を記述します。
配列
JSには配列という概念があります。
let name = ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"];
console.log(name);
##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]
---------配列の数を取得---------
lengthメソッドを使います。
------------------------------
console.log(name.length);
##コンソールでの表示
5
---------配列の最後に要素を追加---------
pushメソッドを使います。
-------------------------------------
name.push("morikun");
console.log(name);
///"morikun"が追加されます。
##コンソールでの表示
(6) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO", "morikun"]
---------配列の最後の要素を削除---------
popメソッドを使います。
-------------------------------------
name.pop();
console.log(name);
///"morikun"が削除されます。
##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]
---------配列の最初の要素を削除---------
shiftメソッドを使います。
-------------------------------------
name.shift();
console.log(name);
///"takuya"が削除されます。
##コンソールでの表示
(4) ["shingo", "tsuyoshi", "masahiro", "GORO"]
popメソッドとshiftメソッドに指定して複数の要素を削除することはできません。
オブジェクト
波カッコを使ってオブジェクトを生成します。
{}内に名前と値をセットにして管理します。このセットのことをプロパティと言います。
最初からオブジェクトにプロパティを定義して生成することもできますし、空の波カッコで生成することもできます。
let takuya = { name: "kimura", age: 40, team: "SMAP" };
console.log(takuya);
###コンソールでの表示
{name: "kimura", age: 40, team: "SMAP"}
///名前がteamにあたる値を取得
console.log(takuya.team);
###コンソールでの表示
SMAP
///名前がageにあたる値を更新
takuya.age = 47;
console.log(takuya.age);
###コンソールでの表示
47
for文
繰り返しの構文です。
for(let i = 0; i < 繰り返す回数; i += 1) {繰り返す処理}と記述します。
num = 1;
for (let i = 0; i < 10; i += 1) {
console.log(num + "回目の出力になります！");
num += 1;
}
###コンソールでの表示
1回目の出力です。
2回目の出力です。
3回目の出力です。
4回目の出力です。
5回目の出力です。
6回目の出力です。
7回目の出力です。
8回目の出力です。
9回目の出力です。
10回目の出力です。