JavaScript 学習(追記)

おはようございます。KUROMAMEです。

本日はJavaScriptで学習したことを書いていきます。

・関数の呼び出し

JavaScript(その他の言語にもありますが)では関数というものがあります。

これは一連の処理をまとめたものですね。

const 関数名 = function(){
   //実施したい処理
};
//

ざっと簡単に書くと上記のようなコードになります。

「index3.js」

const name = function(){
   document.write("田中");
};
name();

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript の関数</title>
</head>
<body>
  <script src="index3.js"></script>
</body>
</html>

こちらを実行すると、

スクリーンショット 2020-11-21 065414

こんな感じで表示されましたね!

・引数について

引数の詳細は下記が詳しいと思いますので、ご参照ください

https://wa3.i-3-i.info/word1442.html

では実際に引数を使用していきましょう!

「index3.js」

const name = function(a){
   document.write("私の名前は"+a+"です");
};
name("田中");

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript の関数</title>
</head>
<body>
  <script src="index3.js"></script>
</body>
</html>

すると、

スクリーンショット 2020-11-21 070157

こんな感じで出力されました!

const name = function(引数名){
   document.write("私の名前は"+引数名+"です");
};
name("値");

functionの後ろに(引数名)を設定します。

最後に値を設定し、処理で引数を呼び出せばこのようにできました!

・配列

様々な値を管理する際に「配列」を使用します。

例えば会員名簿に記載している田中、山田、阿藤という名前を呼び出したいときに、

「index3.js」

const name = ["田中","山田","阿藤"];
document.write(name);

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScriptの配列</title>
</head>
<body>
  <script src="index3.js"></script>
</body>
</html>

上記のように入力すると、

スクリーンショット 2020-11-25 064330

このようにまとめて出力できます。

配列は以下のように入力します。

[値1,値2,値3];

・配列の一部を取得する

配列の全ての要素を取得する方法は学びましたが、一部だけ取得したい時もありますね。

先ほどの例では、「山田」のみ出力したい時など・・・

その場合は、

const name = ["田中","山田","阿藤"];
document.write(name[1]);

このように入力すると「山田」のみ出力できます。

const name = ["田中","山田","阿藤"];
//インデックス番号   0     1     2
document.write(name[1]);
//1番最初が0から始まることに注意

関数を出力する際、document.write(name[1]);

のようにインデックス番号を入れることによって出力可能です。

※0から始まることに注意!!!


この記事が気に入ったらサポートをしてみませんか?