質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

1694閲覧

JSでの関数の使い方。

YuichiKataoka

総合スコア216

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/08/22 04:37

例えば以下の様な関数を作って

javascript

1function hoge() { 2}

これをHTMLファイル内のi<div d="koko"></div>というところへ書き出したいとき。

HTml

1<div id="koko"></div>この中へ出力したい

初歩的で申し訳ないのですが、どのような記述をしたら<div>タグの中に書けるでしょうか?

ご教授下さいませ。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

すみません、質問を誤解していました。
関数の結果をdivの中に書き出したいのではなくて

function hoge(){ }

という文字列をHTMLとして書き出したいという事でしょうか。
普通に

<div id="koko"> function hoge() { } </div> とすると改行等が反映されなくて、HTMLが崩れる場合もあるのでそのまま表示したい

ということであれば

<div id="koko"> <pre> function hoge() { } </pre> </div>

という感じで<pre>タグを使って記述します。

投稿2015/08/22 07:25

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuichiKataoka

2015/08/22 07:35

私の質問の仕方が悪かったみたいです。 もう少し具体的に質問します。 function hoge() { } ↑この関数はカレンダーを出力するものを入れてあります。 これを特定の<div id="koko"></div>に出力したいです。
guest

0

投稿2015/08/22 04:43

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuichiKataoka

2015/08/22 07:07 編集

回答ありがとうございます。 replace関数で文字は「.innerText = '○○○'」;で入れることが出来るようですが 文字では無く、関数を入れたい場合はどうすれば良いのでしょうか? 作った関数「function hoge() 」をこのdiv内で出力したいです。
tanat

2015/08/22 08:07

戻り値ではなくfunction hoge() の中で文字をHTMLとして表示しているという事でしょうか? 実際の function hoge() を書いてみてもらえると回答出来ると思います。
YuichiKataoka

2015/08/22 08:26

コチラです。 ↓ function hoge() { document.write("<table border='1' class='loadCalendarTable'>"); document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>"); document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>"); document.write("</td></tr>"); document.write("<tr>"); for(i=0; i<7; i++){ document.write("<td align='center' "); if(i==0)document.write("bgcolor='#fa8072'>"); else document.write("bgcolor='#f3f3f3'>"); document.write("<strong>",myWeekTbl[i],"</strong>"); document.write("</td>"); } document.write("</tr>"); for(i=0; i<myTblLine; i++){ document.write("<tr>"); for(j=0; j<7; j++){ document.write("<td align='center' "); myDat = myTable[j+(i*7)]; if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'"); else if(j==0) document.write("bgcolor='#FF33CC'>"); else document.write("bgcolor='#fff'>"); document.write("<strong>",myDat,"</strong>"); document.write("</td>"); } document.write("</tr>"); } document.write("</table>"); } これでカレンダーを表示するのですが、これをHTMLファイルの中の <div id="koko"></div>の中に表示したいです。 よろしくお願い致します。
guest

0

えー。document.writeは過去の遺産です。こう言っちゃあれですがちゃんと勉強してからその言語を使うべきです。
まず、HTMLやXMLの文章構造はDOM、ドキュメントオブジェクトツリーという概念をもって抽象化されます。難しい話ですが、要するにすべての「タグ」「テキスト」は「ノード」という概念に置き換えられます。んで、EcmaScriptではこの「ノード」について操作を行います。それをノードのツリーとして解釈してるんだから当たり前です。

んで、具体的にはこうします。
document.getElementbyId("ID").appendChild(document.createTextNode("TEXT"));
まずdocument.getElementByIDで求める「ノードオブジェクト」を得ます。んで、ここで得られるのは「タグ(div)」を表現するオブジェクトですが、このようにタグを表現する「ノードオブジェクト」を「エレメントオブジェクト」と言います。んで「ブロックタグー子タグを持ちうるタグ」を表現するすべてのエレメントノードはappendChildメソッドを持ちます。んでこのメソッドはその「ノード」の下に「子ノード」を追加します。
んでdocument.createTextNodeは新たに「テキストノードオブジェクト」をメモリ上に生成するコンストラクタ関数です。「テキストノード」とは、マークアップ言語中の「マークアップされたー文章本体」を表現するノード・オブジェクトで、すべてのあなたが読んでいるHTLM文章中の、あなたに読まれるべき文章本体はすべてブラウザ上の抽象化されたメモリ構造上では「テキストノード」として扱われているはずです。んで、「テキストノード」とはやはり「ノード」オブジェクトですので、任意の「ノードオブジェクト」の「子ノード」になり得ます。と、いうことでこの生成された「テキストノード」がappendchildによって検索されたDIVの子ノードとなり、結果そのようにテキストが表示されることになります。

初学者用にさらっと書きましたから細かいレベルにおいてはいささか曖昧さが残ってますが、まあ問題になりません。もしこの文章があなたに難しく感じられたとすればそれはあなたがJSをまともに使うに足るだけの知識を有していないという事ですから分厚い書籍を以って勉強し直すべきでしょう。私はおいラリーの本で勉強しましたよ。

投稿2015/08/22 17:55

henpon

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuichiKataoka

2015/08/23 14:51

回答ありがとうございます。 >document.getElementbyId("ID").appendChild(document.createTextNode("TEXT")); ↑これは関数を出力できるのでしょうか? >私はおいラリーの本で勉強しましたよ。 まだまだ勉強不足を自覚しておりますので、今度学んでみます。
henpon

2015/08/23 19:46

おそらくこういうことがしたいのですよね Output_Function("出力文字列"); //=>DIVのなかに"出力文字列"が出てくる。 だとすればこうすれば良いです。ちょっとわかり易く書きます。 function Output_Function(outPut_str){ //まず目的のDIV要素(を表現する「ノードオブジェクト」というオブジェクト)をgetElementByIDで抽出してそれを変数にでも保存しておきます。 targetDiv=document.getElementById("DIV_ID"); //つづきまして「テキスト」を表現する(「テキストノードオブジェクト」という)オブジェクトをcreateTextNodeで生成してこれも保存しときましょう。 textNode=document.createTextNode(outPut_str); //最後に抽出したDivにappendChild(日本語にすれば子供を追加)で作ったばっかりの「テキストノード」を子供として追加するんです。 targetDiv.appendChild(textNode); } これをまあちょっぴしいじわるして(まあこういう書き方は慣れてくれば誰でもしますが)「1行で」書いたのが本文に示したコードです。
guest

0

ベストアンサー

質問の意図が理解出来ました。
題名の通りなのを誤解していました。

javascriptのHTML中での呼び出し方は以下の様な形になります。
*カレンダーはうまく表示されなかったので、問題を簡単にするためにtestと表示するだけの関数に変更してあります。
*HTMLに誤りがある場合など、表示が上手くいかないと確認が出来ないので
http://www.ipentec.com/document/document.aspx?page=javascript-view-source-output-by-javascript
にあるような方法で確認しながら開発するとスムーズにいきます。

HTML

1<html> 2<head> 3<script type="text/javascript"> 4function hoge() { 5document.write("test"); 6} 7</script> 8 9</head> 10<body> 11<div id="koko"> 12<script type="text/javascript"> 13 hoge(); 14</script> 15</div> 16</body> 17</html>

参考になりそうなURL
http://www.openspc2.org/JavaScript/study/script.html
キーワード html javascript 関数 呼び出し

投稿2015/08/22 09:51

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuichiKataoka

2015/08/22 10:31

回答ありがとうございます。 なぜかカレンダーがうまく狙ったdivタグに入りません。 scriptは以下の物なのですが /*====================== 日付の取得 ======================*/ var Years = new Date(); var Toshi = Years.getFullYear(); var Tsuki = Years.getMonth() + 1; var dayLoad = Years.getDate(); document.getElementById("dayLoad").innerHTML = Toshi+"年"+Tsuki+"月"+dayLoad+"日更新"; /*====================== Calendar ======================*/ myWeekTbl = new Array("日","月","火","水","木","金","土"); myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31); if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){ myMonthTbl[1] = 29; } myMonth = Years.getMonth(); dayLoad = Years.getDate(); Years.setDate(1); myWeek = Years.getDay(); myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7); myTable = new Array(7*myTblLine); for(i=0; i<7*myTblLine; i++) myTable[i]=" "; for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1; function loadCalendar() { document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>"); document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>"); document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>"); document.write("</td></tr>"); document.write("<tr>"); for(i=0; i<7; i++){ document.write("<td align='center' "); if(i==0)document.write("bgcolor='#fa8072'>"); else document.write("bgcolor='#f3f3f3'>"); document.write("<strong>",myWeekTbl[i],"</strong>"); document.write("</td>"); } document.write("</tr>"); for(i=0; i<myTblLine; i++){ document.write("<tr>"); for(j=0; j<7; j++){ document.write("<td align='center' "); myDat = myTable[j+(i*7)]; if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'"); else if(j==0) document.write("bgcolor='#FF33CC'>"); else document.write("bgcolor='#fff'>"); document.write("<strong>",myDat,"</strong>"); document.write("</td>"); } document.write("</tr>"); } document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>"); } function hoge() { document.write("test"); } 関数を変数に入れて、ページを読み込んでから表示したいです。 よろしくお願い致します。
YuichiKataoka

2015/08/23 14:49

教えて頂いた方法で出来ました。最初から付き合っていただき、感謝しております。 ありがとうございました。
guest

0

javascript

1function _a(){ 2 console.log(1); 3} 4_a.toString();

コンソールでご確認ください。

以下は一例ですが

javascript

1function hoge(){ 2 console.log(1); 3} 4document.getElementById("koko").innerHTML=hoge.toString();

投稿2015/08/22 07:25

編集2015/08/22 16:05
Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuichiKataoka

2015/08/23 14:53

すみません。これは何が出来るようになるのでしょうか? 勉強不足で使い方が分かりませんでした。
Cf_cwd

2015/08/23 16:08

tanat様と同様の解釈をしておりました。 質問を関数のソースコード自体を表示したいという意味と解釈いたしました。 質問する際に情報をできる限りまとめ、必要な情報を多く掲載することで目的の回答が比較的早く得られるものと考えます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問