演習と確認テスト - 基礎からイベント

Progate

文字列の連結までで、31％完了
条件分岐までで、50%完了

JavaScript基礎まとめ

ステートメント（命令文）の終わりはセミコロン「；」
ステートメントは、上から順に実行される
命令に与える値を、引数（ひきすう）という
文字列と数値の扱いの違いに注意する
メソッドはオブジェクトに対する処理
メソッドは、「オブジェクト名.メソッド名(引数);」の形式で呼び出す
引数が複数ある場合は、カンマ「,」で区切って指定する
documentオブジェクトのwriteメソッドは、文字列をwebブラウザに表示する（出力）
documentオブジェクトは、windowオブジェクトの子供
プロパティ（属性）には、読み出しかできないものと書き換え可能なものがある
プロパティに値を設定するには、「=」演算子を使用し代入する
promptは、利用者が指示する仕組み

演習

Q1

同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい

Q2

以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
  var x = 10, y = 20;
  x = y;
  y = x;
  console.log (y);
</script>

Q3

以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
  var x = 10;
  x += '10';
  console.log (x);
</script>

Q4

1年が何秒かを表示するJavaScriptを記述しなさい。

Q5

「長いメッセージの場合は、
改行します。」
と表示するJavaScriptを記述しなさい。

Q6

以下のように表示するJavaScriptを記述しなさい。

Q07

画像をクリックでアラートを表示するJavaScriptを記述しなさい。
（写真は自由。）「function」は使用しない通常のアラート。

f:id:web-css-design:20111102103155j:image

<body>
<p><img src="img/01.jpg" alt="アマルフィ海岸の写真" onclick="alert('アマルフィ海岸の写真です！')"></p>
</body>

Q08

マウスオーバーでアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

f:id:web-css-design:20111102103317j:image

Q09

ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

解答例

script要素、src属性を利用する

先にyの値をxに代入しているので、xの値は20に上書きされています

数値の10に文字列の '10' を連結した結果、xの値は文字列型の「1010」になります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>１年間の秒数は？</title>
</head>
<body>
<script>
var byou = 60;
var fun = 60;
var jikan = 24;
var nichi = 365;
var time = byou * fun * jikan * nichi;

document.write('1年が何秒かをJavaScriptで表示します｡<br>');
document.write(byou + '秒×' + fun + '分×' + jikan + '時間×' + nichi + '日 = ' + time + '秒');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>改行</title>
</head>
<body>
<script>
  document.write('長いメッセージの場合は、' + '<br>' + '改行します。');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>質問を行う</title>
</head>
<body>
<script>
  prompt('好きな花は？','ひまわり');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（1）</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/01.jpg" width="550" height="400" alt="アマルフィ海岸の写真" onclick="alert ( 'アマルフィ海岸の写真です！' )"></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（2）</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/02.jpg" width="550" height="400" alt="アマルフィ船着き場の写真" onmouseover="alert( 'アマルフィ船着き場の写真です！' )"></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（3）</title>
<style>
p img {
  cursor: pointer;
}
</style>
</head>
<body>
<p><img src="img/03.jpg" width="550" height="400" alt="アマルフィの写真" onmouseout="alert( 'アマルフィの写真です！' )"></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（4）</title>
</head>
<body>
<p><img src="img/04.jpg" width="550" height="360" alt="アマルフィの写真" onload="alert( 'アマルフィの写真です！' )"></p>
</body>
</html>