- ベストアンサー
JavaScriptでこんな事って出来ますか？
JavaScript超初心者です。最近本を買って、ネットで調べながら勉強中なのですが、とても難しいです。 現在この様な事が出来ないかと色々調べているのですが、JavaScriptで、出来ますでしょうか？可能であれば、勉強もかねて作ってみようと思うのですが？ 何も意味の無いスクリプトですが、一行テキスト3つに 入力したものを、各場所に配置して出力させる！と言うものです。まだ何も出来ていませんが、ソースを見ていただければと思います。 ソースです。 <FORM>ここにURL<BR> <INPUT size="50" type="text"><BR> ここにalt<BR> <INPUT size="50" type="text"><BR> ここに表示文章<BR> <INPUT size="50" type="text"><BR> <INPUT type="button" name="button" value="出力"><BR> ここに出力<BR> <TEXTAREA rows="5" cols="50"></TEXTAREA></FORM> といった感じです。出力結果として、 <a href= "1行目のURL" alt="2行目のalt">3行目の表示文章</a> のような感じで、最後のテキストボックスに表示させたいと思います。この様なことは、JavaScriptで可能でしょうか？可能な場合、どの辺を勉強すればいいでしょうか？変な質問ですが、よろしくお願いいたします。
- yuyukina
- お礼率66% (251/380)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1の方がおっしゃっているように、基本を踏まえた上で、後はとにかくサンプルなどもいろいろ見て何でもためしてみる、というのがいいと思います。 定石というのは特にないと思いますが、やはりプログラミングそしてjavascriptの基本は押さえておかないと、後戻りすることになります。 で、ご質問のscriptですが、以下のようなコードでも実現できます。 ポイントは、「入力データを取ってくる方法」です。 ちなみに、オマケとして生成したタグをサンプル表示する機能も付けました。 ※ A タグに普通ALTは付けません。付けるならTITLEではないでしょうか。 ----------------- <html> <head> <script language="javascript" type="text/javascript"> <!-- function TagGenerate() { var strTag = '<a href="' + frmTagGen.txtURL.value + '" alt="' + frmTagGen.txtAlt.value + '">' + frmTagGen.txtText.value + '</a>'; frmTagGen.txtRes.value = strTag; divView.innerHTML = strTag; } //--> </script> </head> <body> <FORM id="frmTagGen"> ここにURL<BR> <INPUT size="50" type="text" id="txtURL"><BR> ここにalt<BR> <INPUT size="50" type="text" id="txtAlt"><BR> ここに表示文章<BR> <INPUT size="50" type="text" id="txtText"><BR> <INPUT type="button" name="button" value="出力" onclick="TagGenerate()"><BR> ここに出力<BR> <TEXTAREA rows="5" cols="50" id="txtRes"></TEXTAREA> </FORM> 表示サンプル <div id="divView"></div> </body> </html> -----------------
その他の回答 (2)
#1です 見やすく(?)しようと思ってwrite()をいくつもつけましたが まとめても問題ないです あと、これ以外にも方法があります。 クロスブラウザを考えれば見栄えが悪くてもwrite()で書き出すのがいいのかな。。と思いました
お礼
有難うございます。 >見やすく(?)しようと思ってwrite()をいくつもつけましたが まとめても問題ないです まとめる？？まとめる方法もあるのですね？調べてみます。 >クロスブラウザを考えれば クロスブラウザ？分からないことだらけです。こちらも調べてみます。
お勧めの勉強法は 一度、リファレンスのような本を一通り読んで、 「こんなことができるのか」 と思う。ここで理解はしなくても問題ないです どんなことができるのかわかったら 何をしたいのか考えてみる それをするには、どんな手順が必要か？と考えてみる それをリファレンスで探していく 最初はこんな感じでプログラムしていくのが自分の場合は効率よかったです ただ、変数や、演算や、if文などの繰り返しなど、最低限度の知識は理解していないとだめです 基本がわかってから、その言語(JavaScript)で何ができるのか知識を増やしていきました 最初は、どう書き出したらいいかさえ大変だと思うので サンプルとその詳解が載っている本をみて、サンプルをまねてスクリプトを作ってみるといいです Web上にあるサンプルより、書籍の方が解説は丁寧だと思います (質問にあるスクリプトの例を考えてみました) 1～3行目のテキストを用意する(変数に文字列を入れておきます) <input>と<input>の間に文字列をそれぞれ置く <a>タグのhref alt 要素に文字列を代入する <a></a>の間に文字列を置く 考えかたはこんな感じで、実際のスクリプトは <html> <head> <script type="text/JavaScript"> var text1="http://www.www.com";//１つ目の文字列 var text2="これがatlだ";//２つ目の文字列 var text3="リンクの文字";//３つ目の文字列 </script> </head> <body> <script type="text/JavaScript"> document.write("<FORM>" + text1 + "<BR>"); document.write("<INPUT size='50' type='text'><BR>"); document.write(text2 + "<BR>"); document.write("<INPUT size='50' type='text'><BR>"); document.write(text3 + "<BR>"); document.write("<INPUT size='50' type='text'><BR>"); document.write("<INPUT type='button' name='button' value='出力'><BR>"); document.write("<a href='" + text1 + "' alt='" + text2 + "'>" + text3 + "</a>"); document.write("<TEXTAREA rows='5' cols='50'></TEXTAREA></FORM>") </script> </body> </html> こんな感じでしょうか(IE6SP2で動作確認)
お礼
rabit66さん有難うございます。本当に初心者で何から手をつけてよいのかすら分からない状態でした。 >一度、リファレンスのような本を一通り読んで、 「こんなことができるのか」 なるほど！とりあえず読むだけ読んでみます。 >変数や、演算や、if文などの繰り返しなど、最低限度の知識は理解していないとだめです 基本がわかってから、その言語(JavaScript)で何ができるのか知識を増やしていきました やはり何事にも基本がありますか？基本が何なのか分かりませんが、数や、演算や、if文などの繰り返しなどを調べてみたいと思います。 >Web上にあるサンプルより、書籍の方が解説は丁寧だと思います もう一冊、サンプルスクリプトのような物が付いてる物を買いたいと思います。 実際のスクリプトまで付けていただき本当に感謝です。こちらのスクリプトも勉強に使わせていただきます。有難うございます。
お礼
tasekiさん有難うございます。 >基本を踏まえた上で、後はとにかくサンプルなどもいろいろ見て何でもためしてみる、というのがいいと思います。 そうですか、何事も基本ですね！色々調べて見たいと思います。 >後戻りすることになります。 私に多いパターンです。(T_T) サンプルまで付けていただき本当に有難うございます。こちらも勉強に活用させていただきます。感謝です。でもみなさん凄いです！サンプルとはいえ、この様なものをサラリと書いてしまうんですから。私も勉強して、サラサラとかけるようにがんばります。