読者です 読者をやめる 読者になる 読者になる

aisaka.com

自分が知りたかったこと・日々の思考・共有したいニュースを発信

JavaScript講座[vol.2]-クリック&アクション-

Everything is practice.

f:id:aisakakun:20160401232620j:plain

クリックすると、新しいウィンドウが表示されるという何度も見た動作。

あの動作をするときに、JavaScriptが動くことをイベントといいます。

 Webっぽい動きですよね。

あれに手を出してみます。

 

・イベント

前回のサンプルコードに一行足すだけで、イベントを実装することが出来ます。

加える一行は、

<p onclick="alert('click');">test</p>

です。

全体は、こんな感じです。

<p></p>は、HTMLタグでPは、パラグラフ(段落)から由来しており、Pで囲まれた部分が一つの段落であるということを示しています。

 

これを前回(

JavaScript初心者講座[vol.1]〜準備・サンプル編〜 - aisaka.com

)と同様に実行すると、こんな画面が出力されます。

f:id:aisakakun:20160401232013p:plain

そして、この「test」というところをクリックすると。。。

f:id:aisakakun:20160401232100p:plain

と表示されます。

なんとなく分かりますよね。

<p>の中に記述されているonclick属性の中身にJavaScriptで記述すると、クリックすると実行されるシステムができます。

 

簡単で、面白い。これはハマりそう。