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

motogp fun

motogp ファンによる、モトgp 結果、モトgp日程を報告するブログ、ガジェットネタも

はてなブログでjQueryを使てみた

ソフト開発

はてなブログって記事を書きやすくて便利です。
とはいえ、javascriptは動かない(書き方が分からない)ので、画面上で動くプログラムが書けない。
ブログに必要ないと言われればその通りですが・・・

そんな中、jQueryが動くとの書き込み発見!。
試してみましょう。

ボタンクリックで何かするブログを作ろう!

では簡単な実験、下記のボタンをクリックすると色が変わるコードを書きました。

 結果発表

クリックしないと何も起きないよ

 

プログラム説明

 HTML編集で下記を追加するだけです。
ソースコードの空白が消えて見にくくて申し訳ないです。
書き方が分からない。

<!-- jQueryのライブラリー宣言 配置は先頭がイイよ -->

<!-- jQuery 2.0.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<!-- ボタン(html)に識別IDを付ける id="button1" -->

<div><button id="button1" type="button">このボタンをクリック</button></div>
<h5> 結果発表</h5>
<p id="text1">クリックしないと何も起きないよ</p>
<p> </p>

<!-- ここからプログラム -->

<!-- script -->

<script type="text/javascript">// <![CDATA[
(function($) {

$(function() {
$('#button1')
.on('click', function(){
if(document.getElementById("button1").textContent=="元に戻す"){
document.getElementById("text1").style.color="black";
document.getElementById("text1").textContent="クリックしないと何も起きないよ";
document.getElementById("button1").textContent="このボタンをクリック";
}else{
document.getElementById("text1").style.color="red";
document.getElementById("text1").textContent="クリックできました";
document.getElementById("button1").textContent="元に戻す";
}
});
});
})(jQuery);
// ]]></script>