課題50 JavaScript実習01(情報の科学4)

これからJavaScriptの練習に入りますが、まず始めにhtmlの基本構造を理解する必要があります。
その上で、JavaScriptのプログラムをどこに記述していくのかを学びます。

この練習で使用するファイルのファイル名はrensyu01.htmというファイル名で保存して下さい。

１．htmlの基本構造を理解しよう。

Webページを記述するためには、次のようにHTMLの基本構造を記述する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>

<body></body>の中に文章を書き込めば、本文が完成します。
ちなみに、上記の内容をjs_rensyu01.htmというファイル名にして保存して下さい。
Webページ作成における文字コードの主流は『UTF-8、BOMなし』になっていますので、保存にあたっての文字コードは『UTF-8、BOMなし』で設定して下さい。
<body></body>の中に「ここは本文です。」と書いて再度保存したのち、このファイルを開いてみるとブラウザの本文欄には「ここは本文です。」と表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>ここは本文です。</body>
</html>

同様に<title></title>の中に「ここはタイトル」と書いて保存すれば、ブラウザのタイトル欄には「ここはタイトル」と表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここはタイトル</title>
</head>
<body>ここは本文です。</body>
</html>

HTMLの基本構造だけブラウザ画面（本文欄には『ここは本文です』の表示あり＋タイトル欄には『ここはタイトル』の表示あり）

ここで学ぶべきことは

◎WebページはHTML(Htper Text Markup Language)という言語で記述することによって出来ていること
◎HTMLのbodyタグ内(<body>で始まり、</body>で終わるところ)に本文を記述する
◎タイトルはHTMLのtitleタグ内(<title>で始まり、</title>で終わるところ)タイトルを記述する

です。

２．JavaScriptを使ってみよう

それでは、JavaScriptというプログラミング言語を使ってプログラムを書いていきますが、どこに書いていけばよいでしょうか。
headタグ内(<head>で始まり、</head>で終わるところ)、またはにbodyタグ内(<body>で始まり、</body>で終わるところ)のどちらに記述してもよいのですが、最近は </body>タグの直前に記述することが推奨されています。
ここでは、それに従うことにします。
</body>タグの直前に<script>で始まり、</script>で終わるブロックをつくり、その中に記述するということで学習をはじめましょう。

それを含めた基本構造は次のようになります。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
  
  <script></script>
  </body>
  </html>

先ほどのjs_rensyuu.htmに<script></script>を追加したリストを再掲すれば、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"> 
<title>ここはタイトル</title>
</head>
<body>ここは本文です。
<script></script>
</body>
</html>

htmlファイルの中にJavaScriptのプログラムを記述する場合には、この<script></script>の中に書いていきます。

プログラミングは各種のプログラミング言語(今回、ここではJavaScrpit)を用いて記述しているわけですが、どのプログラミング言語を使うにしても大きく分けて次の３つの構造で出来ています。

１．順次構造
２．条件分岐構造
３．反復構造

順次構造は文字通り、記述した順番に、上から処理を実行していく構造です。
一番基本となる構造となります。
プログラムは基本的に、上から順番に実行されていきます。

次の条件分岐構造は、条件に応じて実行する処理を変える構造です。
実生活で、当てはめてみると、

「今日は雨が降りそうだ」→「だから傘を持って行こう」
「今日は晴天だ（雨は降らない）」→「だから、傘は不要だ」

というように、やることをわけていると思います。
同様に、条件によって実行する処理を分ける構造です。

最後の反復構造は、文字通り、処理を繰り返す構造です。
プログラミングをしていると同じような処理を記述しなければならないことが数多くでてきます。
その都度と、同じことを記述するのは記述量が増えて（プログラムの大きさが大きくなり）処理スピードなどにも影響し、効率が悪くなるで同じような処理はひとまとめにして、何度でも繰り返して使えるようにします。
これが繰り返し構造です。プログラミングでは、この３つの構造を用いて、あらゆることは記述可能であると考えられています。
このような考え方によるプログラミングは構造化プログラミングと呼ばれています。

それでは、js_rensyu01.htmの中の<script>で始まり、</script>で終わるブロック内にJavaScriptでプログラムを書いていきましょう。

window.alert('最初のJavaScriptプログラムです');

と記述して下さい。
１行追加した後のリストは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここはタイトル</title>
</head>
<body>ここは本文です。

<script>
window.alert('最初のJavaScriptプログラムです。');
</script>
</body>
</html>

カッコの中は’（シングルクォーテーション）でも"(ダブルクォーテーション)でも構いませんが、シングルクォーテーションの方が推奨されています。
記述できたら、js_rensyu01.htmを更新（リロード）して下さい。
次のようにだあろぐボックス（アラートボックス）が現れ、打ち込んだ文章（『最初のJavaScriptプログラムです』）がアラート表示されます。

『最初のJavaScriptプログラムです』というアラート表示あり）

ＯＫボタンをクリックすると、次のようになります。

HTMLの基本構造だけブラウザ画面（本文欄には『ここは本文です』の表示あり）

解説：オブジェクト・メソッド、パラメータ

◎先ほどのJavaScriptプログラムでwindowをオブジェクト、alert()をメソッド、alertメソッド内の文章（文字列）をパラメータという。
◎パラメータ（引数（『ひきすう』と読む））は、メソッドが必要としている情報、メソッドが正常に動作するために必要な情報である。
◎JavaScriptプログラムの行末は；（半角のセミコロン：この説明では見やすいように全角のセミコロンで表示しているが実際には半角のセミコロンを使う）で終わる。
　メソッドはオブジェクトに対して行われる操作（処理方法）を表した部分で、必ずカッコでくくられている。
◎プログラムを構成する一行一行の文（statement）をステートメントという。

３．コメントの書き方を理解しよう

まだ、長いプログラムは書いていませんが、プログラムが長くなってくると、そして、記述してから時間が経つと、書いた本人でもどんな処理を書いたのかが分かりにくくなります。

このような状態に陥ることを防ぐためにコメント文があります。
コメント文とは、注釈文、メモ書きにあたるものです。
１行コメント
//１行コメントはこのように書きます

複数行コメント
/*
複数行コメントは、これで
囲まれた部分の中に書きます
*/
『window.alert('最初のJavaScriptプログラムです。');』という行の次に上の二つのコメント文を書いてみて下さい。
記述後に保存し、その後で更新ボタンをを押してみて下さい。
画面上の処理は今までと何も変わりませんが、JavaScriptのソースを確認するとコメント文は存在しています。
リストは次のようになります。

    
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここはタイトル</title>
</head>
<body>ここは本文です。

<script>
window.alert('最初のJavaScriptプログラムです。');

//１行コメントはこのように書きます

/*
複数行コメントは、これで
囲まれた部分の中に書きます
*/

</script>
</body>
</html>

４．知識を少しだけ拡大しよう（windowメソッドは他に何があるか？）

ここまでの実習でオブジェクトとメソッド、パラメータのことを解説しました。

window.alert("ここにアラート表示する内容を記述する");

このような感じで使い、オブジェクトとメソッドの間は半角のピリオド（.）でつなぐ、メソッドはカッコでくくり、その中にはパラメータと呼ばれるメソッドを実行するのに必要な情報を記述する、ひとつのステートメントの文末は半角のセミコロンで終わる
そして、メソッドはオブジェクトに対して、何らかの処理を行い、その方法が書かれているということを学習しました。

このようなことを学習した皆さんは、つぎに何をすればよいでしょうか。

次の世代を担っていく皆さんに求められている力は、現在持っている力（知識や技術）を使いつつ自分に不足していることは何かを理解して、その知識を新たに獲得し、その新しい力（知識と技能）も活用して今まで解決できなかった新しい課題を解決してよりよい社会を作っていくことです。

さて、ここまで学んだ皆さんなら、「（windowオブジェクトに作用する）メソッドには他にどんなものがあるだろうか」という疑問がわきませんか。
「入力を促す画面はどうやって作るんだろうか」などという疑問がわいてきませんか。

教えられることを待っているのでなく、GoogleやYAHOO!の検索機能を使って

『javascript window メソッド』

などと検索してみて下さい。
いろいろなサイトの情報が表示されましたが、ここでは

初心者のためのホームページ作り『WEB for beginner作成支援』

https://www.scollabo.com/banban/java/ref_01.html

というサイトを表示し、その内容を見ていきます。

ここには、前回学習したalertメソッドが次のように紹介されています。
alert 警告のダイヤログボックスを表示する

他にもいろいろ解説されていますが、

confirm 確認ダイヤログボックスで真 (ture) か、偽 (false) の値を参照

prompt 入力ウィンドウを表示し、ユーザからの入力を取り込む

というメソッドに着目して利用してみましょう。

<!DOCTYPE html>
<html>

<meta charset"="UTF-8">
<title>ここはタイトル<title>
</head>

<body>
ここは本文です。
<script>
window.alert('最初のJavaScriptプログラムです。');

//１行コメントはこのように書きます

/*
複数行コメントは、これで
囲まれた部分の中に書きます
*/
window.confirm('alertメソッドではOKボタンしか表示されませんでしたが、confirm
メソッドは、OKとキャンセルのボタンがつきます。');

var anata = window.prompt('あなたの名前を教えて下さい。');

document.write(anata);
</script>

</body>

</html>

5.変数を理解しよう

上のリストでは、説明をする前に使ってしまいましたが、文字や数値を保存しておくために、各種のプログラミング言語では『変数』というものを利用します。
変数を利用するためには、それが変数であることを宣言しなければなりません。
JavaScriptではvarということばの後にスペースを一つ空けて変数名を書くことによって変数宣言します。
varはvariable（変数）の最初の３文字です。

var anata;

のように記述してanataという変数を宣言しました。

次に変数の名前をつけるときのルールに関して説明しておきます。

変数名をつけるときのルール
半角英数字とアンダーバー(『_』)、（ドルマーク『$』｝のみ。
半角スペース（『』）とハイフン（『-』）は使用できない。
変数名の先頭に数字は使用でない。
カナ文字、全角文字は使用しない。
Javascriptの予約語は使用できない。
『Javascript　予約語』で検索すれば、いろいろな解説サイトが表示されるが、ここでは『Let's プログラミング』というサイトのリンクを張っておきます。
https://www.javadrive.jp/javascript/ini/index5.html

リストでは

var anata = window.prompt('あなたの名前を教えて下さい。');

と記述して、promptメソッドを用いて、データ入力を促し、入力された文字（文字列、場合によっては数値）をanataという変数に代入しています。
『＝（ここでは見やすいように全角で書きましたが、実際には半角の=を使います）』は代入演算子といい、『＝』の右側の文字（文字列、場合によっては数値）を変数に代入する機能を持っています。

romptメソッドで『貴方の名前を教えて下さい。』と表示して入力を促す画面

上記のリストで最後まで実行すると、次のような結果になります（途中の名前を聞いてくる画面では『津久井』と打ち込んだものとして解説しています）。

『ここは本文です。』という文章に続けて、打ち込んだ『津久井』という名前を表示したブラウザ画面

名前だけでは味気ないので、『document.write(anata);』の部分を次のように変えてみましょう。

document.write('<br>'); document.write(anata + 'さん、こんにちは。');
document.write('<br>');
結果は、次のように変わりました。

『ここは本文です。』という文章に続けて、『津久井さん、こんにちは。』と表示したブラウザ画面

『ここは本文です。』という文章に続けて、『津久井さん、こんにちは。』と表示したブラウザ画面

『最初のJavaScriptプログラムです。』という文章に続いて、『津久井さん、こんにちは。』と表示されてしまうので、１行改行したいと思います。

『var anata = window.prompt('あなたの名前を教えて下さい。');』という行の直後に、document.write('<br>');と記述して下さい。

最終的なプログラムリスト（js_rensyu01.htm）は次のようになります。

<!DOCTYPE html>
<html>

<meta charset="utf-8">
<title>ここはタイトル<title>
</head>

<body>
ここは本文です。
<script>
window.alert('最初のJavaScriptプログラムです。');

//１行コメントはこのように書きます

/*
複数行コメントは、これで
囲まれた部分の中に書きます
*/
window.confirm('alertメソッドではOKボタンしか表示されませんでしたが、confirm
メソッドは、OKとキャンセルのボタンがつきます。');

var anata = window.prompt('あなたの名前を教えて下さい。');
document.write('<br>');
document.write(anata + 'さん、こんにちは。');
document.write('<br>');

</script>

</body>

</html>

再度、このプログラムを実行して同様に最後までくると（ブラウザの更新ボタンを押して最後までくると）、画面は次のようになります。

『ここは本文です。』で改行したのち、『津久井さん、こんにちは。』と表示したブラウザ画面

ここで宣言した『anata』と言う変数は、貴方の名前を保存しておく(入力しておく)ことを目的として使用することを想定しています。

しかし、何らかの数値を保存したい場合もあります。
文字列型の変数か、数値型の変数かなど変数の型の違いを理解するために二つの変数、ｘ、ｙの値を合計するプログラムを作ってみましょう。

var x = window.prompt('xの値を入力して下さい。');
var y = window.prompt('yの値を入力して下さい。');
var goukei = x + y;
document.write('x + y = '　+ goukei);

というような４つのステートメントを記述して下さい。
一般的なプログラミング言語では、使用する変数のデータの型をあらかじめ決めておいて、数値型の変数には文字が入力できないなど制限があります。

JavaScriptでは（オブジェクト変数を除く）基本的な変数の型は６種類（文字列型、数値型、論理値型、null、undefined、シンボル）ありますが、あまり厳密ではなく、文字列型のデータも数値型のデータも区別することなく使用することができます。
そのため、

var x = window.prompt('xの値を入力して下さい。');

のようなステートメントの場合、入力された値は数値（例えば3）ではなく、文字としての数字（例えば『3』という文字）として扱われてしまうことがあります。

var y = window.prompt('yの値を入力して下さい。');

のようなステートメントでyの値に５を入力し、両者を足した値補求めたくて

document.write('x + y = '　+ x + y);

とすると、

x + y = 35

となってしまう場合があります。

この場合には

x = x - 0;
y = y - 0;

などと処理して、文字（『3』とか『5』とかの数字）として入力された値を強制的に数値（3とか5とか）に変換しておく必要があります。
データの型に関して厳密ではないので使いやすいということもありますが、少々ややこしい感じもします。

goukeiという変数を宣言し、x + y の結果をgoukeiという変数に代入して下さい。

document.write('x + y = '　+ goukei);

で、goukeiを表示してプログラムを終了するようにしましょう。

最終的なリストは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
データ型（文字列型と数値型）の違いによる計算結果の表示の相違</title>
</head>

<body>
データ型（文字列型と数値型）の違いによる計算結果の表示の相違を理解してもらう
ためのHTMLファイルです。


<script>
window.alert('最初のJavaScriptプログラムです。');

//１行コメントはこのように書きます

/*
複数行コメントは、これで
囲まれた部分の中に書きます
*/
window.confirm('alertメソッドではOKボタンしか表示されませんでしたが、confirm
メソッドは、OKとキャンセルのボタンがつきます。');

var anata = window.prompt('あなたの名前を教えて下さい。');

document.write('<br>');
document.write(anata + 'さん、こんにちは。');
document.write('<br>');

var x = window.prompt('xの値を半角で入力して下さい。');
var y = window.prompt('yの値を半角で入力して下さい。');

//x = x - 0;
//y = y - 0;
//文字列型のデータをそのまま + で足し算すると、文字の連結になり'35'を表示する。
//上記のレム文を外して、文字列型のデータを数値型のデータに変換すると通常の足し算
//が行われ8という数値を表示する。

var goukei = x + y;
document.write('x + y = ' + goukei);
document.write('<br>');

</script>
</body>
</html>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
提出課題
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ここまでの知識を用いて、簡単なJavaScriptのプログラムを書いて下さい。

テータ入力を促してデータを入力させ、それを用いて何らかの出力処理をすること。

画面内のどこか（本文内またはalertダイアログボックス内）に自分の学年・クラス
・番号と名前を表示させること。promptメソッドで入力することで表示させること
はしてはならない。

今回の実習課題のファイル名は半角で『kadai50_moku_41199.htm』のようにすること。
mokuの部分は授業の曜日、411は４年11組（高校１年11組）、99はいつものように自分の出席番号を記述することにします。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

課題一覧2005のページへ
課題一覧2015のページへ
教員・生徒制作ページへ