プログラミング入門者が作る初めてのプログラム

 

今回から実際に、プログラムを作っていきます。
最終的に作りあげるシステムは、

WEB上で動作する、SNSの自動いいねツール

です。

 

 

最初に作るプログラムとしては、
ハードル高めに感じますが、
一つ一つ順番に進んでいきましょう。

 

 

 

URLを取得する

 

URLを取得して出力するだけの、単純なスクリプトですが、
僕は完成させるまでに、2時間かかりました…(^p^)

まずは、完成したスクリプトを試してみて下さい。

 

 

HTML 入力フォーム

 

 

 

このスクリプトは、

フォームに入力した文字をコンソールとポップアップに出力する

という単純なスクリプトです。

 

当たり前の話ですが、

内部では変数・関数等の複数処理が動いています。

 

今日はその仕組について紹介します。

 

 

HTML

 

最初に、HTMLで入力フォームを作ります。

まずはFormを囲う枠組みからです。

 

後々背景や枠をつけるかもしれないので、

念のために<div>で囲ってあるという程度に思っておいてください。

<div class="url-form-content"></div>

 

 

 

次に、Formを作りましょう。

今回は、nameはurl_formとします。

名前はなんでも大丈夫ですが、

後々使うので、わかりやすい名前が良いかと思います。

<form action="#" name="url_form"></form>

 

 

更に中身を作り込んでいきましょう。

必要なのはたった2つ、

「入力部分」と「送信ボタン」です。

 

まずは入力部分

<input id="url" type="text">

 

そして、送信ボタン部分

<input class="url-form-send" type="button" value="送信" onClick="form_url()">

 

送信ボタンだけやたらゴチャゴチャしていますが、

重要なのは、ID・CLASS・onClickの3つだけだったりします。

 

onClickはスクリプトで使うので、

頭に入れておいてくださいね。

 

[ad]

 

 

inputを詳しく

 

inputの中身を少し詳しく解説します。

 

まず初めに、idとclassは、

CSSでスタイルを指定する為と、

プログラムを組む為に使います。

 

次に、「Type=””」の部分は、

このINPUTが、テキスト入力をするものなのか、

ボタンとして機能させるものなのかを、

判別するための記述です。

 

 

そして、「VALUE=””」という箇所は、

ボタンにどういう文字を表示するか、という指定です。

 

例えば、VALUE=”送信”とすると、

下のように、ボタンに送信というラベルが表示されます。

これをSENDとすると、表示がsendに変わります。


この表示は、見た目が変わるだけで、

プログラムには影響が無いので、

自分の好きな文字にして大丈夫です。

 

 

スクリプト

 

さて、いよいよ先程作った、

FORMを動作させるプログラムを組んでいきます。

 

まず、HTMLにスクリプトを組み込むために、

<script>タグで囲みましょう。

<script></script>

 

続いて、関数を定義します。

function form_url() {  //form_urlという関数を定義  }

 

この関数は、先程作ったINPUTの中に、

onClickというイベントに指定されていたものを使って下さい。

 

 

 

変数を定義する

 

どんどん進みますよー!

わからなくなったら見直して、

1つずつ進めて下さいね。

 

 

それでは再開しましょう。

 

変数を定義して、INPUTで入力された値を変数に代入します。

var input_url = document.getElementById('url').value;

 

「var  input_url」で変数を定義して、

= 「~~~」の中身を変数の中に入れます。

 

以下の記述は、

HTMLの「INPUT ID=””」で指定した、id=”url”を取得しています。

getElementById('url')

 

 

最後に、コンソールとポップアップに入力された値を表示させましょう。

console.log(input_url);
alert(input_url);

 

 

 

まとめ

 

今日のまとめ

HTMLで表面を作る

スクリプトで中身を作る

 

最終的に、このような記述になったかと思います。

 

HTML

<div class="url-form-content">
<form action="#" name="url_form">
<input id="url" type="text">
<input class="url-form-send" type="button" value="送信" onClick="form_url()"></form>
</div>

 

SCRIPT

<script type="text/javascript">
function form_url() {
  var input_url = document.getElementById('url').value;
    console.log(input_url);
    alert(input_url);
}
</script>

 

後はデザインをチョチョっといじってあげれば、

初めてのプログラムの完成です。