条件分岐（2）

■else～if
条件に応じて処理を3つ以上に分ける。

if (i<3){
【処理A】
} else if (i==3){
【処理B】
} else if (i<5){
【処理C】
} else {
【処理D】
｝

「i」が3より小さい場合【処理A】を実行
「i」が3と等しい場合【処理B】を実行
「i」が3以上の場合【処理C】を実行
「i」が5以上の場合【処理D】を実行

■論理演算子

演算子
記述例
意味

&&
i>3= && i<=5
左右の条件式が両方とも満たされる場合のみ「真」（AND）

||
i<=3 || i>=5
左右の条件式のいずれかが満たされれば「真」（OR）

!
!(i<=3)
「真」と「偽」を入れ替え。（NOT）

■switch文
変数の値ごとに実行する処理を指定できる命令

switch (変数){
case 値A:
【変数の値がAだった場合の処理】
break;
case 値B:
【変数の値がBだった場合の処理】
break;
case 値C:
【変数の値がCだった場合の処理】
[...]

条件分岐（１）

■if文の記述方法
if (条件式）{ ・・・・｝
■if～elseで処理を2つに分岐
if （条件式） {
【条件を満たす場合の処理】
} else {
【条件を満たさない場合の処理】
}

■一次方程式の答え

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>条件分岐</title>
<script type="text/javascript">
<!–
function hantei(x) {
if(x==3) {
alert("正解！");
} else {
alert("不正解！");
}
}
//–>
</script>
</head>

<body>
<h1>（問題）</h1>
<p>次の一次方程式を満たす解を求め、そのボタンをクリックしなさい。</p>
<p style="font-size:xx-large; margin-left:30px;">x+6=9</p>
<button onclick="hantei(1)">x=1</button>
<button onclick="hantei(2)">x=2</button>
<button onclick="hantei(3)">x=3</button>
<button onclick="hantei(4)">x=4</button>
<button onclick="hantei(5)">x=5</button>
</body>
</html>

一次方程式の解
■演習１０
クリックした回数で違う表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>日本で最も面積が大きい“県”は何県？</title>
<script type="text/javascript">
<!–
var i=0;
function kotae(){
if(i==0) {
alert("【ヒント】東北地方にある県です。");
} else {
alert("答えは岩手県です");
}
i=i+1;
}

//–>
</script>
</head>

<body>
<h1>（問題）</h1>
<p>日本で最も面積が大きい“県”は何県でしょう？</p>
<button [...]

繰り返し処理と文字の表示

■document.write()
ホームページ内に文字を表示する命令。
（）の中に表示する文字を記述する。
<body>～</body>の中に書く。
■繰り返し処理で九九の表を作る。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>繰り返し処理（九九編）</title>
<style type="text/css">
<!–
th {
background: #CCCCCC;
}
th,td {
width:50px;
text-align:center;
}
–>
</style>
</head>

<body>
<h1>九九の表</h1>
<table border="1">
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
<script type="text/javascript">
<!–
for (i=1; [...]

関数の引数

■関数の引数とは？
イベントハンドラから関数を呼び出すときに、数値や文字を関数に引き渡すこと。
《例》数値を引き渡す場合・・・onClick=”abc(5)”
《例》文字を引き渡す場合・・・onClick=”abc(’パンダ’)”　☆「’」シングルクォーテーションで囲む
関数を定義する時に引数を受け取る変数を指定しておく必要がある。
function abc(s)←「s」が引数を受け取る変数。
■演習０７
演習06で作った掛け算を引数を使ってやろう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配列を使った演算</title>
<style type="text/css">
<!–
th {
width: 100px;
background: #CCCCCC;
text-align: center;
}
td {
text-align: center;
}
–>
</style>

<script type="text/javascript">
<!–
var a = new Array(5,12,18);
var b = new Array(33,14,65);
var kai = 0;

function kakezan(i) {
kai = a[i] * b[i];
alert("答えは" + kai + "です。");
}

//–>
</script>
</head>

<body>
<h1>配列の演算</h1>
<table border="1" cellpadding="3" cellspacing="1">
<tr>
<th scope="col">添字</th>
[...]

配列

■配列宣言
var 配列名 = new Array(変数の数);
＜例＞var a = new Array(5);
a[0],a[1],a[2],a[3],a[4]０スタートなのでa[5]はいない。
■配列に値を代入

var a = new Array(3);
a[0] = 5;
a[1] = 2;
a[2] = 15;

var a = new Array(5,2,15);

■演習０６
配列「a」「b」を宣言し、演算結果を表示するＨＰを作成しよう！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配列を使った演算</title>
<style type="text/css">
<!–
th {
width: 100px;
background: #CCCCCC;
text-align: center;
}
td {
text-align: center;
}
–>
</style>

<script type="text/javascript">
<!–
var a = new Array(5,12,18);
var b = new Array(33,14,65);
var kai = 0;

function kakezan() [...]

次ページへ »

Copyright © 2010 YamazakiPanda All Rights Reserved.
Sponsored by onlinepharmacies | themesbase