目標宣言ブログパーツscriptの配布サイトを作ろう(フェーズ1-1)の続きです。
前回は、同じページ上で、入力したテキストを含むhtmlを、onClickでダイナミックに表示するという、超シンプルなところまで。
今回は、これを応用する形で、入力したテキストを表示するための配布用scriptを作るところまでをやろうと思います。
フェーズ1-2の設計
・前回の忘れもの、テキスト入力がないときにエラーメッセージを表示
・パーツを表示するScriptを用意する
・表示するScriptの中に、入力したテキストを挿入して表示する
およそ設計とは言えない程度の、ただの願望の羅列になりましたが、とりあえず、書いたコードを以下に。
同じページ上に入力した目標を表示する箇所は削除しています。
実際に書いたコードとサンプルページ
htmlは、Scriptの表示個所を追加したのみです。
<html><head><title>目標ブログパーツ制作 サンプル2</title><script type="text/javascript" src="http://www.enjoy-com.com/sample/goal_parts_sample1.js" charset="UTF-8"></script></head><body>あなたの目標を入力してください<br><form name="make_goal" action="#"><input type="text" name="goal"><input type="button" value="目標を設定してScriptを出力" onClick="setGoal()"></form>ブログパーツ表示用のscriptを表示します。コピー&ペーストして使ってください。<br><br><div id="script_print"></div><!-- Scriptの表示用にIDを設定--></body></html>
このほか、Scriptを生成するjsと、配布したScriptを動かすjsを外部ファイル化して準備しました。
function setGoal(){if(document.make_goal.goal.value == ''){alert ("目標を入力してください");// 目標入力がない場合にエラーを表示}else{var goal_text = document.make_goal.goal.value;var make_script = '<script type="text/javascript"><br>';make_script += '<!--<br>';make_script += 'goalparts_functiontext = "' + goal_text + '";<br>';// 入力された目標を配布用Scriptに静的なテキスト情報として挿入make_script += '--><br>';make_script += '</script><br>';make_script += '<script type="text/javascript" src="http://www.enjoy-com.com/sample/goal_parts_view_sample1.js" charset="UTF-8"></script><br>';document.getElementById("script_print").innerHTML = make_script;// Scriptを表示}}
goalparts_functiontext_view = goalparts_functiontext;// Script内に静的に挿入している目標情報を変数goalparts_functiontest_viewに代入document.write('<table cellspacing="0" border="0" id="mosebord" style="width:150px;"><tr><td><b>目標表示パーツ</b></td></tr><tr><td><p>私は');document.write(goalparts_functiontext_view);document.write('することを宣言します！');document.write('</p></td></tr><tr><td></td></tr></table>');// パーツのHtmlを書き出し
何とか動くものができました！
はまりにはまって途中諦めかけつつ、2時間以上かかっちゃいましたが......、一応フェーズ1-2はこれにて終了。
先は長いですが、とりあえずフェーズ1が終了しまして、次はフェーズ2に進みます。
次はデザインだけなのでさくっと行きたい。
せっかく動くものができたので、サイドバーに貼ってみました。
コメントする