2019/03/18SHAREツイートシェアはてブLINEPocket今回から実際に、プログラムを作っていきます。最終的に作りあげるシステムは、WEB上で動作する、SNSの自動いいねツールです。一つ一つ順番に進んでいきましょう。僕は完成させるまでに、2時間かかりました...(^p^)まずは、完成したスクリプトを試してみて下さい。入力フォームこのスクリプトは、フォームに入力した文字をコンソールとポップアップに出力するという単純なスクリプトです。内部では変数・関数等の複数処理が動いています。今日はその仕組について紹介します。HTML最初に、HTMLで入力フォームを作ります。Formを囲う枠組みからです。念のために<div>で囲ってあるという程度に思っておいてください。class="url-form-content"></div>次に、Formを作りましょう。今回は、nameはurl_formとします。後々使うので、わかりやすい名前が良いかと思います。name="url_form"></form>更に中身を作り込んでいきましょう。「入力部分」と「送信ボタン」です。重要なのは、ID・CLASS・onClickの3つだけだったりします。頭に入れておいてくださいね。[ad]inputを詳しくinputの中身を少し詳しく解説します。初めに、idとclassは、CSSでスタイルを指定する為と、プログラムを組む為に使います。判別するための記述です。「VALUE=””」という箇所は、ボタンにどういう文字を表示するか、という指定です。下のように、ボタンに送信というラベルが表示されます。これをSENDとすると、表示がsendに変わります。自分の好きな文字にして大丈夫です。スクリプトさて、いよいよ先程作った、FORMを動作させるプログラムを組んでいきます。HTMLにスクリプトを組み込むために、<script>タグで囲みましょう。<script></script>続いて、関数を定義します。}この関数は、先程作ったINPUTの中に、onClickというイベントに指定されていたものを使って下さい。変数を定義するどんどん進みますよー!わからなくなったら見直して、1つずつ進めて下さいね。それでは再開しましょう。変数を定義して、INPUTで入力された値を変数に代入します。「~~~」の中身を変数の中に入れます。ID=””」で指定した、id=”url”を取得しています。getElementById('url')最後に、コンソールとポップアップに入力された値を表示させましょう。console.log(input_url);alert(input_url);まとめ今日のまとめHTMLで表面を作るスクリプトで中身を作る最終的に、このような記述になったかと思います。プログラムの完成です。高井圭介WEB制作・動画制作・ブログを使ったマーケティングについて学んできました。現在はプログラミング勉強中です。僕が学んだ「パソコン1台で自立できる知識」を共有して、一緒に成長できる仲間を募集中です。