広告
【プログラミング入門】【JavaScript】3日目 プログラムの書き方
ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！
難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。
簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。
プログラムの基本
プログラムの基本は
(1)上から順番に
(2)条件で分かれ道
(3)繰り返し
この３つでできております。
まずは「(1)上から順番」に実行されるプログラムを書いてみましょう！
JavaScriptプログラミングのルール
サンプルプログラムのマネをしながら
半角で小文字・大文字を間違えないように
書いていきましょう！
もう少し細かく説明すると
■こんなのが大丈夫です■
〇半角、英数、小文字、大文字・・・ABCDE～VWXYZ abcde～vwxyz 0123456789
■こんなのがダメです■
全角大文字・小文字・・・ＡＢＣＤＥ～ＶＷＸＹＺ ａｂｃｄｅ～ｖｗｘｙｚ ０１２３４５６７８９
後で説明する「コメント」など特別な場合をのぞいて「全角文字」を使ってはいけません！
正しい空白・正しい改行
小さな空白はスペースキー
大きな空白はＴＡＢキー
新しい行への改行(次の行へいくこと)はＥｎｔｅｒキー
全角スペースはダメ！エラーになります！
たとえば次のようなプログラムがあった場合は
こんな感じで入力していきます。
特に先頭の大きな空白部分はTABキーを使ってずらしていきます。
ファイル名、フォルダ名などは半角英数で
プログラミングにかかわってくるファイル名、フォルダ名などは半角英数で作成しましょう！
ファイル名にスペースなども入れないでおきましょう。
× おにぎり.jpg → 〇 onigiri.jpg
× test data.txt → 〇 test_data.txt
これはプログラムから他のファイルなどを呼び出すときにファイル名を間違えたりしてエラーになってしまう事を避ける為です。
慣れてくれば大丈夫ですが、初心者のウチはプログラムがエラーになった時にどこでエラーになっているかわかりづらいのでエラーになる可能性のあるものはできるだけなくした方が良いのです。
プログラム用のフォルダを作成しよう！
ファイル整理に慣れている方は大丈夫ですが、そうでない方はこれからサンプルプログラムがどんどん増えていくのでプログラム用のフォルダを作成しておきましょう！
デスクトップの何もないトコロで「右クリック→新規作成→フォルダ」で新しいフォルダを作成、名前を自分がわかりやすいように変更しておきましょう！
とりあえず「jspgm」という名前に変えておきました。(JavaScriptProgramの略です)
では準備できましたでしょうか？いよいよプログラミングしましょう！
初プログラミング！
前回の手順通りにまずは「htmlファイル」を作成、名前を変更してプログラム編集画面にしましょう！(タイトルのjspgm3_1というのは「3日目の一つ目のプログラム」みたいな意味です)
■3日目 プログラム１■
<!DOCTYPE html>
<html>
<head>
<script>
/*3日目 プログラム１*/
alert("hello world!");
</script>
<title>jspgm3_1</title>
</head>
<body>
</body>
</html>
プログラムを打ち込んだら一度保存してファイルを閉じ、ダブルクリックで実行してみましょう！
■実行結果■
hello world!
とでれば成功です！
カタチ
作文の題名を書くときに頭に３マス空けて書くようにJavaScriptにも決まったカタチがあります！
<!DOCTYPE html> <html> <head> <script> /*ここにプログラムを書いていきます。*/ </script> <title>タイトル</title> </head> <body> </body> </html>
これが決まったカタチになります。今からコメントのトコロにプログラムを書いていきます。難しく考えずにそのまま覚えちゃいましょう！
プログラムは見やすく！
ぶっちゃけJavaScriptプログラムは空白とか改行とか関係ないので、さきほどのプログラムを
<!DOCTYPE html>
<html><head><script>/*3日目 プログラム１*/alert("hello world!");</script>
<title>jspgm3_1</title></head><body></body></html>
てな具合に書けなくもないのですが、エラーを起こす原因になったり、何よりも見にくいです！スナオに書いてある通りに書きましょう！
alert(アラート)命令
■プログラム１の説明に戻ります！■
alert("hello world!");
この命令を「alert」命令っていいます！文字や数字を警告のカタチで画面に出す命令です。しばらくはこの命令を使ってプログラムの結果を表示していきたいと思います。「"」チョンチョンの中に画面に出したい文字や数字を入れます！
命令の事を正しくは関数(かんすう)って言ったりします！
「関数」という言葉だと関数をまだ習っていない方はわかりづらいと思いますので自作関数を作るまではしばらく「命令」という言葉を使って説明したいと思います。
alert("こんにちは！");
表示するメッセージの部分はひらがなでも大丈夫です。
■命令の終わりは「;」■
「alert」命令に限らず命令の終わりには「;」テンテンがつきます。
「:」とよく似ておりますので間違えないようにしましょう。
■/* */■
プログラムの途中でコメントなどを入れたい時は/* */この間に入れます！メモ書きみたいな部分ですね。同じく日本語ＯＫです！
■お名前■
プログラムでよく使う記号などの名前です。
「"」・・・ダブルクウォーテーション
「'」・・・シングルクウォーテーション
「:」・・・コロン
「;」・・・セミコロン
「*」・・・アスタリスク
「/」・・・スラッシュ
「>」・・・大なり
「<」・・・小なり
「&」・・・アンパサンド
なんとなーく覚えてれば大丈夫です！
なれないウチは大変ですが「"」チョンチョンや「;」テンテンを書き忘れるとエラーになるので、ゆっくり落ち着いてプログラミングしてください！
プログラムを少し省略
ぶっちゃけ先ほどのプログラムは
<script>
alert("hello world!");
</script>
この部分だけでもだいたい動作します。
なのできちんとしたホームページとしてネットなどにアップする場合は先ほどのように長ったらしいプログラムを書いたほうが良いですが、ここでは手元のパソコンで実行するだけなので長ったらしい部分は省略したいと思います。
広告
少し変えてみよう！
■3日目 プログラム２■
<script>
/*jspgm3_2*/
/*3日目 プログラム２*/
alert("次の行に\nいきます！");
/*注意*/
/*プログラムの「＼n」の部分は*/
/*半角・小文字で「￥n」って入力してください！*/
</script>
■実行結果■
メッセージの中で改行したい時は「\n」というのを改行したい部分にいれます。
注意ですがホームページ上では「\n」の部分が「＼n」のように表示されているかもですが、プログラムを打ち込む時は「￥n」と打ち込みます。
詳しく説明すると長い話になるので省略しますが要は下の画像のようにプログラムを打ってください。
話をもとに戻しますが「\n」のような文字の事をエスケープシーケンスっていいます。
他にも特殊文字を表示したい時などに使います。
「\\」・・・￥マークを表示
「\?」・・・？マークを表示
「\'」・・・’マークを表示
「\"」・・・”マークを表示
くどいようですが「＼」の部分は「￥」になります。
なんでこんな事をするのかと言いますと以上で紹介したような文字はプログラムでは特別な意味を持つ事があるので、ただ表示したい時などは「￥」を頭につけて「エスケープ(避難)」するのです。
アイデアプログラミング！
■3日目 プログラム３■
<script>
/*jspgm3_3*/
/*3日目 プログラム３*/
alert("昔々あるところに");
alert("おじいさんとおばあさんが\nおりました");
alert("おじいさんは山へしばかりに");
alert("おばあさんは川へ洗濯に\n行きました");
alert("続きはまた来週！");
</script>
■実行結果■
メッセージが順番に表示されれば成功です。
まだまだできる事は少ないですが常にアイデアを膨らませてプログラミングを楽しんでしまいましょう！
次回
広告
広告
Copyright 2016 K.N/petitetech.com