今回から実際に、プログラムを作っていきます。
最終的に作りあげるシステムは、
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の３つだけだったりします。
onClickはスクリプトで使うので、
頭に入れておいてくださいね。
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>
後はデザインをチョチョっといじってあげれば、
初めてのプログラムの完成です。