JavaScriptを使ったWebページの操作
こんにちは、お久しぶりです。 少しサボってしまいました、すみません。
今日は、簡単なJavaScriptを使ったWebページ上の操作を試してみたいと思います。
JavaScriptって何？
最近のWebページは、非常に綺麗で動きのついたものが多いですね。 まずは、JavaScriptがどのように利用されているのかを覚えておきましょう。
近年のWebページは、主にHTML・CSS・JavaScriptを駆使することでリッチなコンテンツを実現しています。
それぞれの役割は図のような感じです。
参考までに、サンプルのコードを置いておきます。
・HTML
<input id="samplebutton" type="submit" onclick="action()">
・CSS
#samplebutton{background-color : #4e87ad;]
function action(){ alert("本当によろしいですか？"); }
こんな感じですね。
コードをできるだけシンプルにしたので、ボタンは少々ダサいですが、組み合わせればこんな感じです。
HTML、CSS、JavaScriptの実行環境
Webの世界では、クライアントからのリクエストを元に、クライアントの画面に表示すべきコンテンツのセットがサーバから送られてきます。
このコンテンツのセットには、HTML・CSS・JavaScriptが含まれます。
ブラウザが、これを読み取って描画することによって、我々の目には綺麗なコンテンツが映っているんですね。
つまり、HTML・CSS・JavaScriptの実行環境は、ブラウザだということになります。
JavaScriptの機能
JavaScriptには、HTMLの特定の属性に対して、特定の動作をさせる機能がたくさん備わっています。
例えば、「ボタンをクリックする」「新しいタブを開く」「入力フォームに入力する」などですね。
郵便番号を入力すると、住所が自動で入力されるのもJavaScriptのおかげであることが多いです。
ということは、JavaScriptのコードを直接書いて実行する環境があれば、
今開いているページに対して特定の操作をさせることができる！ということになります。
用意するもの
・JavaScriptコードを自分で書いて実行できるブラウザ（Google Chromeがわかりやすいのでオススメです）
・動かしたいページ（無い場合は、次の節で掲載するソースをテキストファイル等に貼り付け、ブラウザで動かして下さい）
・遊び心
これだけです。
サンプルのソース
動かしたい対象のページが無い方はこちらをお使いください。
<html> <head> <script> function sample(){ alert("本当によろしいですか？"); } </script> <style> #submitbutton{background-color : #4e87ad;} </style> </head> <body> <input id="submitbutton" type="submit" value="GO!" onclick="sample()"> </body> </html>
Google Chromeの開発者ツールを開く
動かしたいページを、Google Chromeで開きましょう。
開いた後F12キーを押して開発者ツールを開き、「Console」タブをクリックします。
この「Console」タブでは、自由にJavaScriptコードを書いて実行することができます。
例えば、特定のボタンをクリックしたい場合は以下のようなコードが良いでしょう。
document.getElementById("submitbutton").click();
この時、「document」はページ全体のこと、getElementByIdは後続の括弧無いで示した名前を持つ要素を示します。
今回であれば、HTMLは下記のようになっているので、このボタンをクリックしたいときは「submitbutton」という名前を使ってやれば、一意に特定の要素を識別できるというわけです。
<input id="submitbutton" type="submit" value="GO!" onclick="sample()">
ついでに・・・
JavaScriptには、繰り返し処理の構文が存在します。
例えば、先程のボタンをクリックするコードを繰り返し文（while文）で囲んでやると・・・
while(true){document.getElementById("submitbutton").click();}
無限にクリックし続けることになります。
多分、CPU使用率がエラいことになるので、やる時は気をつけてくださいね。
悪用は禁止！
このように、クライアントが自分でやる場合は自己責任、なのですが
サーバ側から送られてきたコードの場合、スクリプトに書かれた条件を元に強制的に実行されるためタチが悪いです。
例えば、特定のボタンをクリックしたタイミングで、新規ウィンドウを無限に立上げ続けるとかも可能です。
かなり昔に流行った、「ブラクラ」という奴ですね。
というわけで、自分でやる分には自由ですが、くれぐれも悪用はしないでくださいね！
