【高校情報Ⅰ】JavaScriptプログラミング超入門講座第４話導入・文字列表示・演算子

2021年6月4日 16:36

◆◆はじめに◆◆

いよいよ、JavaScriptの実践編に入ります。
動画作成の為、市販のJavaScriptの入門本やWebサイト、情報科教員養成の大学の講義なども参考にしています。

ただどれも、高校情報Ⅰで大学入試に必要な知識に特化すれば、オーバースペックです。（感覚的に入門編でも全体の３割程度で良さそう）

あまりにも情報が多すぎて、いったいどれが大学入試で必要な知識なのかも、殆どの人が分からないと思います。

この動画講座では、高校情報Ⅰ（大学入試）に必要な知識のみに特化して解説します。

IT企業の新入社員研修で、８時間×２０日＝１６０時間　プログラミング・データベース等の実機教育を行っていましたが、それで基本情報技術者試験の問題が解けるかというと、かなり厳しい結果でした。。※高校の授業は、この時間の半分しかないです。

ニュースを見ると、プログラミング教育だけが先走っていますが、ネットワーク・セキュリティ・データ活用など盛り沢山です。

プログラムを組める技術ではなく、出題された疑似プログラムコードを日本語のコメントなどをヒントに穴埋め式に読めること、その他の問題も大半は「読解力」です。

個人的な意見ですが、大学入試のみが目的なら、実機でのプログラミングに時間を費やすより、実機で基礎をざっと学んだあとは、情報関係基礎の過去問題を机上で解きまくってトレース力を養う方がいいと思います。
高校によってこの方針の差が、大きな得点の差になりそうな気がします。

来年からYouTubeで無料オンライン塾やる予定なので、情報関係基礎の解説は随時取り込む予定です(*^-^*)参考にしてくれると嬉しいです。

情報Ⅰ共通テスト対策書籍出版します！

◆◆動画解説◆◆

◆◆文字おこし◆◆

前回までの学習でHTML、スタイルシートについて、Webページの基本的な作り方を学んできた。

これは、テキストやイメージなどを組み合わせて、ただ表示するだけのものになる。

何かの動きや、仕掛けを入れ込んで動的なインタラクティブなページを作れるものがJavaScriptなんだ。

例えば、情報Ⅰ動画教科書の場合、目次ボタンをクリックすると詳細目次が表れる、
もう一回押すと隠れる仕掛けは　JavaScriptのプログラムで、今の状態を判定して
閉じるか開くかの動作を記述している。

動画のリンクをクリックすると、画面上にふわっと現れる仕掛けもJavaScriptを使っている。
――

JavaScriptはWebブラウザ上で実行できるプログラミング言語の１つになる。
Webブラウザの中には　「JavaScriptエンジン」と呼ばれるプログラムがくみこまれている。
これはJavaScriptのソースコードを解析して、その場で実行するソフトウェアのことなんだ。
なので、JavaScriptはコードを実行する際に1行ずつコンピュータが解読できる機械語に翻訳していく言語になる。これをインタプリタ言語という。
インタプリタ言語の代表例として今回のJavaScriptのほかにPythonやPHPやRubyなどがある。

一方、全てのコードを機械語に翻訳してから一気に実行する言語をコンパイラ言語という。
コンパイラ言語としての代表例は、JAVAやC言語などがある。

今話した、JAVAとJavaScriptは全く別のプログラミング言語ということは覚えておこう。
余談だけど、ネットスケープ社が開発したJavaScriptはもともとLiveScriptと呼ばれていた。1995年にサン・マイクロシステムズ（現在のオラクル社）が開発したプログラミング言語であるJavaが当時大きな注目を浴びていて、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更されたんだ。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>MyPage</title>
</head>
<body>
	<script>
		document.write("こんにちは。JavaScript");
	</script>
</body>
</html>

※動画ではエラーにするため一旦、以下の誤ったコードで記載
　document.write(こんにちは。JavaScript);

じゃあ早速JavaScriptを使ってプログラミングをしていこう。
JavaScriptはHTMLの中に記述できるから、前回までに作成した。HELLOと表示させたHTMLをつかって、JavaScriptを追記していくね。

まずは、「こんにちはJavaScript」と表示させるプログラムを作成していこう。

まず、Bodyタグのなかにscriptタグを記述する。
この開始タグと終了タグの間に、JavaScriptを記述する
このタグ内に書かれたテキストは、画面に表示はされない。スクリプトとしてWebブラウザ内部で実行される。
もし画面に表示したい場合は明示的に画面に表示させるための命令文を書く必要がある。

画面に書き出すには
document.write　という機能を使う。
document.writeの後のカッコに出力したいテキストを記述する。

テキストの中に、「こんにちはJavaScript」と入力しよう。
そして命令文の最後にセミコロンを付ける決まりがある。

一度保存して、ブラウザで表示させてみよう。
命令書いたにもかかわらず表示されないよね。
ブラウザを開いたままF12キーを押してみて。
consoleタブ内の文字が赤くなってなんか英数字が出ているよね。
これは、Javascript内でエラーが出ているという意味なんだけど、実は、カッコ内にテキスト文字を入れる場合は、その文字をクオートと呼ばれる記号で囲む必要があるんだ。
クォートというのは、シングルクォーテーションかダブルクォーテーションと言った記号になる。
シングルクォーテーションはキーボードの７の上にある記号だから、シフトキーをおしながら７のキーを押すと出る。
ダブルクォーテーションはキーボードの２の上にある記号だから、シフトキーをおしながら２のキーを押すと出る。

今回はダブルクォーテーションに統一して囲んであげよう。
もう一度保存して、実行してみて。
今度は「こんにちはJavaScript」と表示されたね。
JavaScriptが上手く動かない場合は、さっきやったみたいにF１２を押して、コンソール窓でエラーになっていないかを確認して、原因を特定したりする。
この作業をデバッグと言ったりする。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>MyPage</title>
</head>
<body>
	<script>
		document.write("4 - 2 =", 4 - 2);
		document.write("<br>");
		document.write("4 X 2 =", 4 * 2);
		document.write("<br>");
		document.write("4 ÷ 2 =", 4 / 2);
		document.write("<br>");
		document.write("３を２で割った余りは", 3 % 2);
	</script>
</body>
</html>

文字列はクォートで囲む必要があったけど、例えば100などの数値の場合は囲む必要はない。100で試してみよう。
エラーが出力されず表示されたね。

こんどは、100 + 100 といれて保存して実行してみよう。
200と表示されたね。

この計算に使う記号を演算子という。
数式に使う代表的な演算子について説明するね。

掛け算は　普通のなら×の記号だけど、エックスと間違いやすいから、演算子としてはアスタリスクが使われる。
割り算は昔のコンピュータは÷（わりざん）の記号が出力できなかったことから、スラッシュが使われている。

いくつか試していこう
いきなり答えだけ出てもわかりずらいから、計算式も合わせて出すようにしよう。

複数の値を連結させるにはprint.write　の　カッコ内で　カンマを使う。

４-２の計算式で試していこう
まずは計算式は文字列だから、ダブルクォーテーションの中に4 – 2 =と入れる
カンマを入れて　実際の計算式の　4 – 2 を記述する。
演算子の前後に半角スペースを入れているけど、これは無くても同じ結果になるけど、見やすくするために半角スペースを入れている。
保存して実行してみよう　計算式と計算結果が表示されたね。

続けて掛け算もやっていこう文字列は　４×２=　で　実際の計算式は4 * 2　と記述しよう。
表示はされたけど、改行がされていないからみずらいよね。
改行はHTMLタグで<br>だから、print.writeで　brタグを明記する必要がある。
brタグを出力するようにしてもう一度表示してみよう。
こんどは改行されたね

割り算と　割り算の余りも同じようにやっていこう

document.write("4 ÷ 2 =", 4 / 2);
document.write("<br>");
document.write("３を２で割った余りは", 3 % 2);

ブラウザで表示してみよう。
ちゃんと４÷２＝２、３を２で割った余りは１と表示されたね。

今日はここまで、次回は変数について学んでいこう。

この記事が気に入ったらサポートをしてみませんか？