今回は関数というしくみの理解をさらに深めていきます。
1 関数をつくる
前回は単純な足し算、割り算を使った関数だったので独自の関数を作ってみます。
HTML(一部)
<script>
function calcArea(base, height){
let area = (base * height) / 2;
return area;
}
let a = 12;
let b = 24;
let c = calcArea(a, b);
document.write("<p>三角形の面積:" + c + "</p>");
</script>
ブラウザ
ありそうでなかった(?)三角形の面積を求める関数です。
2 関数の上書き
ここからは、関数のしくみやルールの紹介です。
HTML(一部)
<script>
function helloSan(name){
document.write("<p>" + name + "さん、こんちには。</p>");
}
a = "鈴木";
helloSan(a);
</script>
ブラウザ
これは関数 helloSan を定義して、その後に「鈴木」を代入した変数 a を引数として、その関数 helloSan を呼び出しています。
次に関数 helloSan を上書きしてみましょう。
HTML(一部)
<script>
function helloSan(name){
document.write("<p>" + name +"さん、こんちには。</p>");
}
function helloSan(name){
document.write("<p>こんにちは、" + name + "さん。</p>");
}
a = "鈴木";
helloSan(a);
</script>
ブラウザ
後から定義したものが適用されていることがわかると思います。
3 変数のスコープ
次はスコープ(有効な範囲)という考え方です。
HTML(一部)
<script>
let a = "関数の外側";
function display(){
let b = "関数の内側";
document.write("<p>" + a + "です。</p>");
document.write("<p>" + b + "です。</p>");
}
display();
document.write("<p>----------------</p>");
document.write("<p>" + a + "です。</p>");
document.write("<p>" + b + "です。</p>");
</script>
ブラウザ
注目したいのは、関数内と関数外に同じ記述があることです。
「document.write(“<p>” + a + “</p>”);」と「document.write(“<p>” + b + “</p>”);」の部分ですね。
しかし実行結果をみると、関数内の write メソッドは両方実行されて「関数の外側」「関数の内側」と表示されているのに対して、関数外の write メソッドは「関数の外側」という部分しか実行されていません。
HTML(一部)
<script>
function display(){
let b = "関数の内側";
document.write("<p>" + b + "です。</p>");
}
document.write("<p>" + b + "です。</p>");
</script>
分かりやすいように変数 b の部分のみを抜き書きしてみました。
見てわかるように、変数 b を利用できるのは関数内にある場合であり、関数の外にある場合は利用できないのです。
これがローカルスコープという考え方です。
そしてローカルスコープを持つ変数のことをローカル変数といいます。
HTML(一部)
<script>
let a = "関数の外側";
function display(){
document.write("<p>" + a + "です。</p>");
}
document.write("<p>" + a + "です。</p>");
</script>
ところが変数 a は関数の外に定義されています。
このような場合は、関数内であろうと外であろうと利用が可能となります。
これがグローバルスコープという考え方です。
そしてグローバルスコープを持つ変数のことをグローバル変数といい、これはプログラム全体で使用可能です。
4 次回
さて次回も引き続き「関数」です。
さらに関数の性質を理解していきましょう。
カテゴリー
更新記事
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (9) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (1) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (18) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (9) IGS (9) Kラーニング (1)