• ベストアンサー

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で可能でしょうか？可能な場合、どの辺を勉強すればいいでしょうか？変な質問ですが、よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • taseki
  • ベストアンサー率66% (155/233)
回答No.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> -----------------

yuyukina
質問者

お礼

tasekiさん有難うございます。 >基本を踏まえた上で、後はとにかくサンプルなどもいろいろ見て何でもためしてみる、というのがいいと思います。 そうですか、何事も基本ですね！色々調べて見たいと思います。 >後戻りすることになります。 私に多いパターンです。(T_T) サンプルまで付けていただき本当に有難うございます。こちらも勉強に活用させていただきます。感謝です。でもみなさん凄いです！サンプルとはいえ、この様なものをサラリと書いてしまうんですから。私も勉強して、サラサラとかけるようにがんばります。

その他の回答 (2)

noname#12205
noname#12205
回答No.2

#1です 見やすく(?)しようと思ってwrite()をいくつもつけましたが まとめても問題ないです あと、これ以外にも方法があります。 クロスブラウザを考えれば見栄えが悪くてもwrite()で書き出すのがいいのかな。。と思いました

yuyukina
質問者

お礼

有難うございます。 >見やすく(?)しようと思ってwrite()をいくつもつけましたが まとめても問題ないです まとめる？？まとめる方法もあるのですね？調べてみます。 >クロスブラウザを考えれば クロスブラウザ？分からないことだらけです。こちらも調べてみます。

noname#12205
noname#12205
回答No.1

お勧めの勉強法は 一度、リファレンスのような本を一通り読んで、 「こんなことができるのか」 と思う。ここで理解はしなくても問題ないです どんなことができるのかわかったら 何をしたいのか考えてみる それをするには、どんな手順が必要か？と考えてみる それをリファレンスで探していく 最初はこんな感じでプログラムしていくのが自分の場合は効率よかったです ただ、変数や、演算や、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で動作確認)

yuyukina
質問者

お礼

rabit66さん有難うございます。本当に初心者で何から手をつけてよいのかすら分からない状態でした。 >一度、リファレンスのような本を一通り読んで、 「こんなことができるのか」 なるほど！とりあえず読むだけ読んでみます。 >変数や、演算や、if文などの繰り返しなど、最低限度の知識は理解していないとだめです 基本がわかってから、その言語(JavaScript)で何ができるのか知識を増やしていきました やはり何事にも基本がありますか？基本が何なのか分かりませんが、数や、演算や、if文などの繰り返しなどを調べてみたいと思います。 >Web上にあるサンプルより、書籍の方が解説は丁寧だと思います もう一冊、サンプルスクリプトのような物が付いてる物を買いたいと思います。 実際のスクリプトまで付けていただき本当に感謝です。こちらのスクリプトも勉強に使わせていただきます。有難うございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptで複数のフォームを連結したい

    初めまして、 お世話になります。 Javascriptで複数のフォームを連結したいと考えています。 やっと２つのテキストエリアを連結させるところまで出来るようになりました。 やりたいことは、出力させるときに下記のようにしたいのですが、 どのようにすれば良いかご教授いただけば幸いです。 テキストエリア：text01とtext02を連結させて出力させる時に、 text01とtext02の間に”改行コード”を追加したいのです。 それとラジオボタンで選択をした値を取得するための、 スクリプの記述方法もご教授頂けないでしょうか？ また、可能であればテキストエリア：outputに出力するときうに、 下記のように出来ると希望通りの操作が出来助かります。 HTMLを勉強し始めたばかりの初心者ですが、 どうぞ何卒よろしくお願い申し上げます。 出力結果： ----------------------------------------------------------------------- 【入力欄１】改行コード text01 改行コード 【入力欄2】改行コード text02 改行コード 【ラジオボタン】 A01 改行コード ソース： ----------------------------------------------------------------------- <html> <head> <script language="JavaScript"> <!-- function textoutput() { var text01 = (document. form01. text01.value); var text02 = (document. form01. text02.value); document. form01. output.value = text01 + text02; } //--> </script> </head> <body> <form name="form01"> <!--入力欄1// --> 入力欄1<br> <textarea name="text01" cols="60" rows="10"></textarea><br> <!--入力欄2// --> 入力欄2<br> <textarea name="text02" cols="60" rows="10"></textarea><br> <!--ラジオボタン// --> <strong>・　OS確認</strong><br /> <input type="radio" name="A01" value="・OS　⇒　XP" id="radio1-1" > <label for="radio1-1">XP</label> <input type="radio" name="A01" value="・OS　⇒　Vista" id="radio1-2"> <label for="radio1-2">Vista</label> <input type="radio" name="A01" value="・OS　⇒　Win7" id="radio1-3"> <label for="radio1-3">Win7</label> <input type="radio" name="A01" value="・OS　⇒　Mac" id="radio1-4"> <label for="radio1-4">Mac</label> <input type="radio" name="A01" value="・OS　⇒　" id="radio1-5"> <label for="radio1-5">その他</label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • [javascript][IE] textarea内の改行を消す方法を教えてください。

    テキストエリア内の改行をreplaceで除去したいのですが、FireFoxではうまくいくのですがIEではうまく動作しません。 下記のようなソースです。 IEではどのように書けば良いのでしょうか。 <html> <head> <script type="text/javascript" language="javascript"> function change_box(){ temp = document.getElementById("in").value; temp = temp.replace(/\n/g,""); document.getElementById("out").value = temp; } </script> </head> <body> <form> <textarea id="in" rows="3" > 一行目 二行目 三行目 </textarea><br /> <textarea id="out" rows="3" ></textarea><br /> <input type="button" value="変換" onclick="change_box()"> </form> </body> </html>

  • javascriptを教えて下さい

    上の欄に文字を入力しボタンを押すと下の欄に表示するhtmlを作りたいと思っております 何回か自力でやってみたのですがわからないのでどのようにするかご教授願いたいです・・・ ソースは <form method="POST" action="検索"> <textarea name="msg" cols="30" rows="10"> ここにメッセージをどうぞ </textarea> <br> <input type=submit value="送信"> <br> <input type=reset value="クリア"> </form> <form method="POST" action="受信"> <textarea name="msg" cols="30" rows="10"> </textarea> </form> このようなふうになってます このままじゃダメでjavascriptを使うということはわかっているのですがどのようにしたらいいかわかりません・・・ 何回か試したのですがうまくいきませんでした 初心者なのでアドバイスお願いします！

  • 複数のテキストフォームに対しての出力

    javascriptを勉強中であり、至らぬ点があるかと思いますが質問させてください。 あるhtmlページに複数のテキストフォームがあり、そこにjavascript で for 文を使い 定型文の後に追番を付加したテキストを出力（表示）させたいと思っています。 個別のテキストフォームには出力ができるのですが、複数の指定となると イマイチわかりませんでした…　（正しく動作しませんでした） 私の記述が悪いとは思いますが、どのように記述すればよいでしょうか？ 知見をお借りできればと思います。 よろしくお願いいたします。 【希望】 サンプル1　　テスト1 サンプル2　　テスト2 サンプル3　　テスト3 上記 ちなみに以下が抜粋構文です。 【html】 <input type="button" value="テストボタン" onclick="myTest()">　　　←ここを押すとプログラム -省略- <form name="myForm1"> サンプル1　 <input type="text" size="30" name="form1" value="" readonly><br> サンプル2　 <input type="text" size="30" name="form2" value="" readonly><br> サンプル3　 <input type="text" size="30" name="form3" value="" readonly><br> <input type="reset" value="クリア"> </form> 【javascript】 function myTest() { for (num = 1; num <=3; num++) { // document.myForm1.form1.value = "テスト" + num ;　だったら表示できる document.myForm1.form[num].value = "テスト" + num ; } } ※「form[num]」の部分が悪いとは思っていますが…

  • JavaScriptでテキストを表示・非表示・・・

    こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 　　　↓このような形にしたいです 　あいうえおかきくけこ　 　サシスセソタチツテト　←この行を表示/非表示 　なにぬねのはひふへほ　 　マミムメモヤユヨ　←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> 　　　　　　　 なにぬねのはひふへほ<br>　 <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。

  • PHPでJavascriptの引数の扱い方

    はじめまして。宜しくお願い致します。 環境：Linux(Redhat 9), apache2, PHP4.3.6 [やりたいこと] 下記↓ソース内容↓より、input=button と input=text が幾つかある。 個々のボタンが押されたら、PHPにて"個々"の内部処理を行う。 内部処理終了後は、個々のテキストにインクリメントした値が画面表示される。 HTML＋Javascript にて、カウンター部分は一応完成しています。 ↓ソース内容↓ <html> <head> <script language="JavaScript"> <!-- function ccc(obj0) { cnt = obj0.value; cnt++; obj0.value = cnt; } // --> </script> </head> <body> <form name="ose"> <input type="text" name="view0" readonly size=5 maxlength=3> <input type="button" value="押せ0" onClick="ccc(view0)"><br> <input type="text" name="view1" readonly size=5 maxlength=3> <input type="button" value="押せ1" onClick="ccc(view1)"> </form> </body> </html> コレをPHPに書き換えると、上手くいきません。 ↓PHPに書き換えた場合↓ <script type="text/javascript"> <!-- function ccc($obj0) { cnt = $obj0.value; cnt++; $obj0.value = cnt; } // --> </script> 引数に付いている "$"マークをJavascript側で認識しないのだろう、と考えています。 出来れば、PHPで単体の関数として使用したい為、模索中です。 ※現在は、別の関数の中に上記の『↓HTML＋Javascriptの場合↓』を無理矢理入れて使用しています。(別の関数：HTMLをPHPファイルに書き込む) 別の関数内に入れてても問題は無しです。 但、上記のJavascriptを使用しないソース達にも書き込んでしまうので、ちょとやだなーと。 いい方法があったら教えて下さい。

    • ベストアンサー
    • PHP
  • textareaに文字列を追加する方法

    JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>

  • Javascriptで複数のテキストエリアの文字列を連結させたいです

    Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。

  • javascript 関数についての質問

    javascriptで 入力された日付を元に３０日後、４０日後、６０日後、９０日後の日付を表示したいのですが、 作った関数が１回しか使えませんＴＴ（？）何回も使えるようにしたいです！ 初歩的な質問ですみませんが、どうすればよいでしょうか？ <html> <head> <title>ねこ</title> <script> function Kekka(days){ Yobi = new Array("日","月","火","水","木","金","土"); Date = new Date(document.form.y.value, document.form.m.value -1, document.form.d.value); d = Date.getDate(); Date.setDate(d+days); y = Date.getFullYear(); m = Date.getMonth()+1; d = Date.getDate(); w = Date.getDay(); str1 = y+"年"+m+"月"+d+"日("+Yobi[w]+"曜日)"; //土曜日か日曜日だったら次の月曜の日付もとる if(w == 0){ w = 1; Date.setDate(d+days+1); d = Date.getDate(); } else if(w == 6){ w = 1; Date.setDate(d+days+2); d = Date.getDate(); } str2 = y+"年"+m+"月"+d+"日("+Yobi[w]+"曜日)"; return str1,str2; } function CLR(){ document.form.y.value="";document.form.m.value="";document.form.d.value=""; document.form.v1.value="";document.form.v1_2.value=""; document.form.v2.value="";document.form.v2_2.value=""; document.form.v3.value="";document.form.v3_2.value=""; document.form.v4.value="";document.form.v4_2.value=""; document.form.v5.value="";document.form.v5_2.value=""; } function Test(){ Kekka(30); document.form.v1.value = str1; document.form.v1_2.value = str2; Kekka(40); document.form.v2.value = str1; document.form.v2_2.value = str2; } </script> </head> <body> てすとなう<br><br> <form name="form"> <input type="text" name="y" size="4">年 <input type="text" name="m" size="2">月 <input type="text" name="d" size="2">日 <input type="button" value="start" onclick="Test()"> <input type="button" value="CLR" onclick="CLR()"> <br><br> ３０日後：<input type="text" name="v1" size="27">→<input type="text" name="v1_2" size="27"><br> ４０日後：<input type="text" name="v2" size="27">→<input type="text" name="v2_2" size="27"><br> ６０日後：<input type="text" name="v3" size="27">→<input type="text" name="v3_2" size="27"><br> ９０日後：<input type="text" name="v4" size="27">→<input type="text" name="v4_2" size="27"><br> ３ヶ月後：<input type="text" name="v5" size="27">→<input type="text" name="v5_2" size="27"><br> <br><br> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する