読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

チェックテスト(3)

関数まとめ

  • クリックなどのイベント処理は、functionに書く
  • functionは、呼び出さなければ動作しない
  • 似たような処理は引数を使って、同じfunctionにまとめる
  • 引数はなくてもよい、必要ならいくつでも指定できる
ブラウザの構造
  1. 通信ソフトウエア
  2. レンダリングエンジン
  3. 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
<script>
  var x = 10;
  function func() {
    var y = 10;
    console.log(x + y);
  }
  func();
</script>
Q6
<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
A06
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>