無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

ブログでも簡単に使えるJavaScript:①メッセージボックス

f:id:kay72234:20150825103112j:plain

■はじめに

先日、はてなブログの記事本文にJavaScriptを書き込めることを知りました。

前回は実験がてら、メッセージボックスを表示するサンプルを掲載しただけでした。今回はもう少し実用的なサンプルとともに、ソースコードを紹介します。

■サンプル1

先日のサンプルの再掲です。リンクにメッセージボックスを表示するスクリプトを組み込んだだけの簡単なものです。

お得情報はこちらをクリック!!


■サンプル2

次は表と組み合わせてみました。

問題1 日本の首都は? 解答
問題2 アメリカの首都は? 解答


一問一答で最初は解答を隠しておきたい場合に使うことができます。

■ソースコード

まずサンプル1のソースコードです。
ソースコード用に表示するメッセージの文言等は簡略化しています。

<a href="javascript:alert('メッセージボックスに\n表示する文字列');">本文に表示する文字列</a>

はてな記法で編集してしている場合は、上記のソースコードそのまま貼り付ければOKです。
「メッセージボックスに表示する文字列」と「本文に表示する文字列」の部分を適宜変更してください。

メッセージボックスに表示する文字列中で改行する場合は、上記の例のように改行を示す「\n」を入れてください。


続いてサンプル2のソースコードです。
こちらはサンプルそのままです。

|問題1|日本の首都は?|<a href="javascript:alert('東京');">解答</a>|

|問題2|アメリカの首都は?|<a href="javascript:alert('ワシントンDC');">解答</a>|

表については、はてな記法の表記で表現しています。こちらもはてな記法モードで編集中なら、そのまま貼り付ければOKです。

■さいごに

私自身、基本的なスクリプトしか分かっていません。しかし工夫しだいで何かしら役に立つような小技として、今後も紹介していきたいと思います。
JavaScriptをごたごた多用すると嫌がる閲覧者もいます。また、ページの読み込みに時間がかかったりすることもあります。ポイントを上手く絞って使ってみてください。


スポンサーリンク