チェックテスト（3） - web-0127のブログ

関数まとめ

クリックなどのイベント処理は、functionに書く
functionは、呼び出さなければ動作しない
似たような処理は引数を使って、同じfunctionにまとめる
引数はなくてもよい、必要ならいくつでも指定できる

ブラウザの構造

通信ソフトウエア
レンダリングエンジン
JavaScript実行環境（ブラウザ毎の違いが大きい、表示が遅くなる原因）

引数（引き渡された数）

仮引数（parameter）と実引数（argument）
仮引数：関数定義時に使用される引数のこと
実引数：その関数を実際に使用するときに関数に引き渡される引数のこと
実引数が関数に引き渡されるとき，その実引数自身ではなく，実引数のコピーが引き渡される

《引数を使った例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンイベントで関数を呼び出す</title>
<script>
function inputText( msg ) {
  alert( msg + 'が押されました。' );
}
</script>
</head>
<body>
<p>下のボタンを押すとfunctionを呼び出します。</p>
<button onclick="inputText( '左のボタン' );">押してみましょう</button>
<button onclick="inputText( '右のボタン' );">押してみましょう</button>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンイベントで関数を呼び出す</title>
<script>
function selectBtn( msg ) {
  if( msg==1 ) {
  alert( 'トマトを食べなさい。' );
  }
  if( msg==2 ) {
  alert( '鍋を食べなさい。' );
  }
}
</script>
</head>
<body>
<p>下のボタンを押すとfunctionを呼び出します。</p>
<button onclick="selectBtn( 1 );">ビタミンが足りていない気がする</button>
<button onclick="selectBtn( 2 );">寒くてバテ気味！</button>
</body>
</html>

例題

単価160円の商品を6個購入したとき、1000円支払っておつりは幾らになるか表示するプログラムを書きなさい

document.write( '1個'+kakaku+'円の商品を'+kazu+'個買って'+oazukari+'円支払ったときのおつりは、'+otsuri+'円です。');

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<script>
var kakaku=160;
var kazu=6;
var oazukari=1000;

function otsuri() {
  var ans=oazukari-(kakaku*kazu);
  return ans;
}
var otsuri=otsuri();
document.write( '1個'+kakaku+'円の商品を'+kazu+'個買って'+oazukari+'円支払ったときのおつりは、'+otsuri+'円です。');
</script>
</body>
</html>

Q1

以下は、受け取った引数をコンソールに表示する関数です
この関数を呼び出し、コンソールに"ABC"と表示するにはどのように記述すれば良いですか？

function func(x) {
  console.log(x);
}

Q2

ある関数内で、変数 X の値を戻り値として返す文はどのように記述しますか？

Q3

ある文字を文字コード番号に変換することを何と呼びますか？

Q4

parseInt関数で数値型への変換ができなかった場合、戻り値として返される値はなんですか？

Q5

以下のスクリプト中の変数x と変数y は、それぞれグローバル変数とローカル変数のどちらですか？

<script>
  var x = 10;
  function func() {
    var y = 10;
    console.log(x + y);
  }
  func();
</script>

Q6

以下のスクリプト中の変数x と変数y は、それぞれグローバル変数とローカル変数のどちらですか？

<script>
  function func(x) {
    y = 10;
    console.log(x + y);
  }
  func(20);
</script>

Q7

以下のスクリプトを実行すると、どのような結果が表示されますか？

<script>
var n = parseFloat('10.5');
if(!isNaN(n)) {
  console.log('OK');
} else {
  console.log('NG');
}
</script>

Q8

以下のスクリプトを実行すると、どのような結果が表示されますか？

<script>
var x = 10;
function plus() {
  x += 20;
}
plus();
console.log(x);
</script>

Q9

以下のスクリプトを実行すると、どのような結果が表示されますか？

<script>
var x = 10;
function plus(x) {
  x += 20;
}
plus(x);
console.log(x);
</script>

Q10

コンソールに「こんにちは」と表示する関数を実行するスクリプトを、空欄（A）を埋めて完成させなさい

<script>
（ function (str) {
    console.log(str);
}）（A）;
</script>

解答例

A01

func( 'ABC' );
()内には、引数として渡す値を記述します
数値や文字列、変数や配列なども可能です

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：関数</title>
<script>
function func(x) {
  console.log(x);
}
</script>
</head>
<body>
<script>
  func( 'ABC' );
</script>
</body>
</html>

A02

return x;
戻り値の指定には「return文」を使います

A03

エンコード
エンコードされた文字列を元に戻すことを「デコード」と呼びます

A04

NaN
数値ではないことを表す特殊な値です
isNaN関数でNaN値かどうかを調べることができます

A05

x : グローバル変数
y : ローカル変数
関数の外側で宣言した変数は「グローバル変数」、関数の内側で宣言した変数は「ローカル変数」

A06

x : ローカル変数
y : グローバル変数
関数の引数はローカル変数、宣言を省略した変数はグローバル変数

A07

OK
文字列型の「'10.5'」を数値型の「10.5」に変換しています
parseFloat関数を使うと小数点以下の値も得ることができます
isNaN関数は、指定された値がNaNのときにtrueを返す関数です
この場合、戻り値はfalseになります
!演算子によって論理値が反転し、if文の条件式の結果はtrueとなります

A08

変数xはグローバル変数です
plus関数内で xに20を加算しているので、値が30に上書きされます

A09

plus関数の引数xはローカル変数です
グローバル変数xと同じ名前ですが、別物です
plus関数内での加算処理はローカル変数xに対しておこなっています
よってグローバル変数xの値は変化しません

結果が「30」になるためには、

<script>
var x = 10;
function plus(x) {
  x += 20;
  return x;
}
x = plus(x);
console.log(x);
</script>

A10

定義した関数をすぐに呼び出して実行する（即時関数）
後ろの丸括弧内に指定した値が引数として渡されます

<script>
  (function(str) {
    console.log(str);
  })( 'こんにちは' );
</script>